Fix Text tab eyebrow/subtitle clearing + scope center guides per drag target

Text tab:
- Eyebrow and subtitle inputs are now always rendered. Previously they
  vanished when the text was cleared, and the "Include eyebrow / Include
  subtitle" recovery checkboxes were no-ops on toggle-on (return; with
  no state change) so the inputs couldn't be brought back. Removed the
  broken checkboxes; advanced controls (colors, typography sub-sections,
  gradient) still hide when the corresponding text is empty.
- previewBody.ts collapsed empty eyebrow to undefined, which the server
  re-hydrated from the on-disk YAML — so clearing the input left the old
  text in the preview. Send the empty string as-is, matching how
  headline and subtitle were already handled.

Center guides:
- useDragPosition now exposes a structured dragTarget (kind + cls)
  instead of a plain isDragging boolean.
- PreviewArea recomputeGuides only checks the actively-dragged element.
  Previously it OR'd across device + all text elements, so the device's
  deviceOffsetX=0 default lit up the vertical guide the instant any
  text drag started.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: andresdefi

packages/web-preview/client-dist/assets/index-CiPENUh4.js

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>appframe — Preview</title>
-    <script type="module" crossorigin src="/assets/index-Dlsg1ewX.js"></script>
+    <script type="module" crossorigin src="/assets/index-CiPENUh4.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CJNmFTs8.css">
   </head>
   <body>

packages/web-preview/client-dist/assets/index-Dlsg1ewX.js

@@ -202,7 +202,7 @@ function ScreenCard({
     [index, screen?.textPositions, updateScreen],
   );
 
-  const { onOverlayMouseDown, getCursorForPosition, isDragging } = useDragPosition(
+  const { onOverlayMouseDown, getCursorForPosition, isDragging, dragTarget } = useDragPosition(
     iframeRef,
     containerRef,
     screen,
@@ -219,8 +219,22 @@ function ScreenCard({
     vertical: false,
   });
   const guideObserverRef = useRef<MutationObserver | null>(null);
+  // Ref-mirror of dragTarget so recomputeGuides can stay deps-free; the
+  // MutationObserver and iframe-rewrite effect that depend on it would
+  // otherwise cascade-rerun on every drag start/end.
+  const dragTargetRef = useRef(dragTarget);
+  useEffect(() => {
+    dragTargetRef.current = dragTarget;
+  }, [dragTarget]);
 
   const recomputeGuides = useCallback(() => {
+    const target = dragTargetRef.current;
+    // No active drag → nothing to align, clear guides. Render-side already
+    // gates on isDragging, but clearing here keeps internal state honest.
+    if (!target) {
+      setGuides({ horizontal: false, vertical: false });
+      return;
+    }
     const iframe = iframeRef.current;
     const doc = iframe?.contentDocument;
     if (!doc) {
@@ -238,41 +252,44 @@ function ScreenCard({
     // Drag offsets are stored as integer percentages of canvas width/height,
     // so each step moves the element by cRect.{w,h}/100 screen px. The guide
     // should fire only on the integer step closest to true center — half a
-    // step in either direction. Wider tolerance (e.g. 4px) lit up multiple
-    // adjacent steps; tighter tolerance missed Y entirely because the device
-    // is top-anchored (no translateY(-50%)) so Y-center lives at a non-zero
-    // deviceTop that depends on device height.
+    // step in either direction.
     const tolerancePxX = cRect.width / 200;
     const tolerancePxY = cRect.height / 200;
     const view = doc.defaultView;
 
-    // Device always has a meaningful bounding box (always absolutely positioned).
-    // Text elements only produce a meaningful center check once they've been
-    // dragged to a custom position (position: fixed via injectTextPositionCSS);
-    // in normal flow their block-level div spans the full .text-area and would
-    // permanently read as X-centered.
-    const targets: Array<{ el: HTMLElement; requiresFixed: boolean }> = [];
-    const device = doc.querySelector('.device-wrapper') as HTMLElement | null;
-    if (device) targets.push({ el: device, requiresFixed: false });
-    for (const selector of ['.eyebrow', '.headline', '.subtitle']) {
-      const el = doc.querySelector(selector) as HTMLElement | null;
-      if (el) targets.push({ el, requiresFixed: true });
+    // Pick the single element being dragged. Anything else has no bearing
+    // on alignment feedback right now — checking all draggables would light
+    // up the device's vertical guide (deviceOffsetX=0 by default) whenever
+    // text is being dragged.
+    const selector = target.kind === 'device' ? '.device-wrapper' : `.${target.cls}`;
+    const el = doc.querySelector(selector) as HTMLElement | null;
+    if (!el) {
+      setGuides({ horizontal: false, vertical: false });
+      return;
     }
-
-    let vertical = false;
-    let horizontal = false;
-    for (const { el, requiresFixed } of targets) {
-      if (requiresFixed && view?.getComputedStyle(el).position !== 'fixed') continue;
-      const rect = el.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-      if (Math.abs(centerX - cCenterX) <= tolerancePxX) vertical = true;
-      if (Math.abs(centerY - cCenterY) <= tolerancePxY) horizontal = true;
-      if (vertical && horizontal) break;
+    // Text elements only produce a meaningful center check once
+    // position:fixed is applied (set by useDragPosition on drag start). In
+    // normal flow the block spans the entire text-area and would always
+    // read as X-centered.
+    if (target.kind === 'text' && view?.getComputedStyle(el).position !== 'fixed') {
+      setGuides({ horizontal: false, vertical: false });
+      return;
     }
+    const rect = el.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const vertical = Math.abs(centerX - cCenterX) <= tolerancePxX;
+    const horizontal = Math.abs(centerY - cCenterY) <= tolerancePxY;
     setGuides({ vertical, horizontal });
   }, []);
 
+  // MutationObserver fires only on style mutations, so drag-start (which
+  // changes dragTarget but may not yet have moved the element) wouldn't
+  // re-run the guide check. Recompute explicitly on every drag transition.
+  useEffect(() => {
+    recomputeGuides();
+  }, [dragTarget, recomputeGuides]);
+
   // Attach a MutationObserver to every draggable element in the iframe (device
   // wrapper + eyebrow + headline + subtitle). Both slider instant patches and
   // mouse drags mutate inline style attributes, so watching each element's

packages/web-preview/client-dist/index.html

@@ -98,21 +98,19 @@ export function TextTab() {
     <>
       {/* Text inputs */}
       <Section title="Text" tooltip="Edit the eyebrow, headline, and subtitle text that appears above or below the device frame." defaultCollapsed={false}>
-        {hasEyebrow && (
-          <div className="mb-2.5">
-            <label htmlFor={eyebrowId} className="block text-xs text-text-dim mb-1">
-              Eyebrow <span className="text-text-dim opacity-60">(small label above the headline)</span>
-            </label>
-            <input
-              id={eyebrowId}
-              type="text"
-              value={screen.eyebrow}
-              onChange={(e) => update({ eyebrow: e.target.value })}
-              placeholder='e.g. "Split View"'
-              className="w-full px-2.5 py-2 bg-surface-2 border border-border rounded-md text-text text-[13px] font-inherit outline-none focus:border-accent"
-            />
-          </div>
-        )}
+        <div className="mb-2.5">
+          <label htmlFor={eyebrowId} className="block text-xs text-text-dim mb-1">
+            Eyebrow <span className="text-text-dim opacity-60">(small label above the headline)</span>
+          </label>
+          <input
+            id={eyebrowId}
+            type="text"
+            value={screen.eyebrow}
+            onChange={(e) => update({ eyebrow: e.target.value })}
+            placeholder='e.g. "Split View"'
+            className="w-full px-2.5 py-2 bg-surface-2 border border-border rounded-md text-text text-[13px] font-inherit outline-none focus:border-accent"
+          />
+        </div>
         <div className="mb-2.5">
           <label htmlFor={headlineId} className="block text-xs text-text-dim mb-1">Headline</label>
           <textarea
@@ -123,19 +121,17 @@ export function TextTab() {
             className="w-full px-2.5 py-2 bg-surface-2 border border-border rounded-md text-text text-[13px] font-inherit outline-none focus:border-accent resize-y min-h-[60px]"
           />
         </div>
-        {hasSubtitle && (
-          <div className="mb-2.5">
-            <label htmlFor={subtitleId} className="block text-xs text-text-dim mb-1">Subtitle</label>
-            <input
-              id={subtitleId}
-              type="text"
-              value={screen.subtitle}
-              onChange={(e) => update({ subtitle: e.target.value })}
-              placeholder="Optional subtitle"
-              className="w-full px-2.5 py-2 bg-surface-2 border border-border rounded-md text-text text-[13px] font-inherit outline-none focus:border-accent"
-            />
-          </div>
-        )}
+        <div className="mb-2.5">
+          <label htmlFor={subtitleId} className="block text-xs text-text-dim mb-1">Subtitle</label>
+          <input
+            id={subtitleId}
+            type="text"
+            value={screen.subtitle}
+            onChange={(e) => update({ subtitle: e.target.value })}
+            placeholder="Optional subtitle"
+            className="w-full px-2.5 py-2 bg-surface-2 border border-border rounded-md text-text text-[13px] font-inherit outline-none focus:border-accent"
+          />
+        </div>
         <ColorPicker
           label="Headline Color"
           value={screen.colors.text}
@@ -157,29 +153,6 @@ export function TextTab() {
 
       {/* Typography */}
       <Section title="Typography" tooltip="Control font family, weight, size, rotation, spacing, and text transformations.">
-        <Checkbox
-          label="Include eyebrow"
-          checked={hasEyebrow}
-          onChange={(checked) => {
-            if (checked) {
-              // Reveal the input; leave text empty so the user can type.
-              return;
-            }
-            update({ eyebrow: '' });
-          }}
-        />
-        <Checkbox
-          label="Include subtitle"
-          checked={hasSubtitle}
-          onChange={(checked) => {
-            if (checked) {
-              // Reveal the input; leave text empty so the user can type.
-              return;
-            }
-            update({ subtitle: '', subtitleGradient: null });
-          }}
-        />
-
         <div className="mb-3 px-1">
           <div className="text-[11px] font-medium text-text-dim uppercase tracking-wider mb-2">
             Defaults (used when an element has no override)

packages/web-preview/src/client/components/Preview/PreviewArea.tsx

@@ -62,7 +62,12 @@ export function useDragPosition(
   onTextDrop: (cls: 'eyebrow' | 'headline' | 'subtitle', pos: TextPosition) => void,
 ) {
   const dragRef = useRef<DragState | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
+  // Exposes what's actively being dragged so consumers (e.g. center guides)
+  // can scope their feedback to that element rather than all draggables.
+  const [dragTarget, setDragTarget] = useState<
+    { kind: 'device' } | { kind: 'text'; cls: 'eyebrow' | 'headline' | 'subtitle' } | null
+  >(null);
+  const isDragging = dragTarget !== null;
 
   const hitTest = useCallback(
     (ix: number, iy: number): { cls: string; el: HTMLElement; kind: DragKind } | null => {
@@ -154,7 +159,7 @@ export function useDragPosition(
           scale,
         };
         hit.el.style.outline = '2px solid rgba(99,102,241,0.5)';
-        setIsDragging(true);
+        setDragTarget({ kind: 'device' });
 
         const onMove = (ev: MouseEvent) => {
           const drag = dragRef.current;
@@ -182,7 +187,7 @@ export function useDragPosition(
           dragRef.current = null;
           document.removeEventListener('mousemove', onMove);
           document.removeEventListener('mouseup', onUp);
-          setIsDragging(false);
+          setDragTarget(null);
           onDeviceDrop({ deviceTop: newTop, deviceOffsetX: newOffsetX });
         };
 
@@ -230,7 +235,7 @@ export function useDragPosition(
           scale,
         };
         el.style.outline = '2px dashed rgba(99,102,241,0.5)';
-        setIsDragging(true);
+        setDragTarget({ kind: 'text', cls });
 
         const onMove = (ev: MouseEvent) => {
           const drag = dragRef.current;
@@ -251,7 +256,7 @@ export function useDragPosition(
           dragRef.current = null;
           document.removeEventListener('mousemove', onMove);
           document.removeEventListener('mouseup', onUp);
-          setIsDragging(false);
+          setDragTarget(null);
           onTextDrop(drag.cls as 'eyebrow' | 'headline' | 'subtitle', { x: leftPct, y: topPct, width: widthPct });
         };
 
@@ -272,5 +277,5 @@ export function useDragPosition(
     [toIframe, hitTest],
   );
 
-  return { onOverlayMouseDown, getCursorForPosition, isDragging };
+  return { onOverlayMouseDown, getCursorForPosition, isDragging, dragTarget };
 }

packages/web-preview/src/client/components/Sidebar/TextTab.tsx

@@ -17,7 +17,7 @@ export function buildScreenRenderBody(
     localeConfig: preferLocaleText ? localeConfig : undefined,
     style: screen.style,
     layout: screen.layout,
-    eyebrow: screen.eyebrow || undefined,
+    eyebrow: screen.eyebrow,
     headline: screen.headline,
     subtitle: screen.subtitle,
     accentColor: screen.accentColor || undefined,