feat: refactor popups with shared positioning and CSS tooltips

- Add usePopupPosition composable for smart popup positioning
  (bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
  with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/assets/css/style.css

@@ -80,6 +80,38 @@ input[type=number] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700);
+  color: var(--color-browngray-100);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .settings-section h2 {
   border-bottom: 1px solid #000;
   margin-bottom: var(--space-xs);