@morphika/andami 0.1.2

package/components/builder/editors/TextBlockEditor.tsx

@@ -0,0 +1,462 @@
+"use client";
+
+import { useState, useEffect, type ReactNode } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { TextBlock, ContentBlock } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+import {
+  SettingsSection,
+  SettingsField,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+  SELECT_CLASS,
+} from "./shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import TextStylePicker, {
+  FALLBACK_PRESETS,
+  buildPresetsFromStyles,
+  type TextStylePreset,
+} from "./TextStylePicker";
+import {
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AlignRightIcon,
+  AlignJustifyIcon,
+} from "./TextAlignmentIcons";
+
+// ============================================
+// Responsive style field — MUST be defined outside the editor component
+// to avoid React treating it as a new component on every re-render,
+// which causes input elements to lose focus.
+// ============================================
+
+function ResponsiveStyleField({
+  label,
+  subProp,
+  viewport,
+  isOverridden,
+  onReset,
+  children,
+  hint,
+}: {
+  label: string;
+  subProp: string;
+  viewport: DeviceViewport;
+  isOverridden: boolean;
+  onReset: (subProp: string) => void;
+  children: ReactNode;
+  hint?: string;
+}) {
+  return (
+    <div className="flex items-start gap-3 mb-2 last:mb-0">
+      <label className="text-[11px] text-neutral-400 w-[68px] min-w-[68px] shrink-0 pt-[7px] leading-tight">
+        {label}
+        {viewport !== "desktop" && !isOverridden && (
+          <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
+        )}
+        {isOverridden && (
+          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+        )}
+      </label>
+      <div className="flex-1 min-w-0">
+        {children}
+        {hint && <p className="text-[10px] text-neutral-400 mt-1">{hint}</p>}
+        {isOverridden && (
+          <button
+            onClick={() => onReset(subProp)}
+            className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors mt-0.5"
+          >
+            Reset
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Main Editor
+// ============================================
+
+export default function TextBlockEditor({ block }: { block: TextBlock }) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const paletteSwatches = usePaletteSwatches();
+  const pageTextColor = store.pageSettings.text_color || "#0a0a0a";
+  const [presets, setPresets] = useState<TextStylePreset[]>(FALLBACK_PRESETS);
+
+  useEffect(() => {
+    fetch("/api/admin/styles", { credentials: "include" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.styles) {
+          const built = buildPresetsFromStyles(data.styles);
+          if (built.length > 0) setPresets(built);
+        }
+      })
+      .catch(() => { /* Style presets unavailable — fallback presets used */ });
+  }, []);
+
+  const style = block.style || {};
+  // Undo snapshot strategy:
+  // - Continuous inputs (text fields, sliders): snapshot on focus (one snapshot per edit session)
+  // - Discrete actions (buttons, preset picks): snapshot immediately before mutation
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  // === Responsive helpers for nested style sub-properties ===
+  // The responsive system deep-merges 1-level objects, so we store
+  // partial style overrides at responsive[viewport].style = { fontSize: 24 }
+  // and resolveBlock merges { ...block.style, ...responsive[viewport].style }.
+
+  /** Get the current responsive style overrides for the active viewport */
+  const getViewportStyleOverrides = (): Record<string, unknown> => {
+    const responsive = (block as unknown as Record<string, unknown>).responsive as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    if (!responsive?.[viewport]?.style) return {};
+    return responsive[viewport].style as Record<string, unknown>;
+  };
+
+  /** Check if a style sub-property has a responsive override */
+  const hasStyleOverride = (subProp: string): boolean => {
+    if (viewport === "desktop") return true;
+    const overrides = getViewportStyleOverrides();
+    return subProp in overrides;
+  };
+
+  /** Get effective value of a style sub-property for the active viewport */
+  const getEffectiveStyleValue = <T,>(subProp: string, baseValue: T): T => {
+    if (viewport === "desktop") return baseValue;
+    const overrides = getViewportStyleOverrides();
+    return subProp in overrides ? (overrides[subProp] as T) : baseValue;
+  };
+
+  /** Update a style sub-property, responsive-aware */
+  const updateStyleResponsive = (subProp: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, {
+        style: { ...style, [subProp]: value },
+      } as Partial<ContentBlock>);
+    } else {
+      // Merge into responsive[viewport].style
+      const existing = (block as unknown as Record<string, unknown>).responsive as
+        | Record<string, Record<string, unknown>>
+        | undefined || {};
+      const vpOverrides = { ...(existing[viewport] || {}) };
+      const styleOverrides = { ...((vpOverrides.style as Record<string, unknown>) || {}), [subProp]: value };
+      vpOverrides.style = styleOverrides;
+      store.updateBlock(block._key, {
+        responsive: { ...existing, [viewport]: vpOverrides },
+      } as Partial<ContentBlock>);
+    }
+  };
+
+  /** Update a style sub-property with debounce, responsive-aware */
+  const updateStyleDebouncedResponsive = (subProp: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlockDebounced(block._key, {
+        style: { ...style, [subProp]: value },
+      } as Partial<ContentBlock>);
+    } else {
+      const existing = (block as unknown as Record<string, unknown>).responsive as
+        | Record<string, Record<string, unknown>>
+        | undefined || {};
+      const vpOverrides = { ...(existing[viewport] || {}) };
+      const styleOverrides = { ...((vpOverrides.style as Record<string, unknown>) || {}), [subProp]: value };
+      vpOverrides.style = styleOverrides;
+      store.updateBlockDebounced(block._key, {
+        responsive: { ...existing, [viewport]: vpOverrides },
+      } as Partial<ContentBlock>);
+    }
+  };
+
+  /** Reset a style sub-property override */
+  const resetStyleOverride = (subProp: string) => {
+    const existing = (block as unknown as Record<string, unknown>).responsive as
+      | Record<string, Record<string, unknown>>
+      | undefined || {};
+    const vpOverrides = { ...(existing[viewport] || {}) };
+    const styleOverrides = { ...((vpOverrides.style as Record<string, unknown>) || {}) };
+    delete styleOverrides[subProp];
+    if (Object.keys(styleOverrides).length === 0) {
+      delete vpOverrides.style;
+    } else {
+      vpOverrides.style = styleOverrides;
+    }
+    const responsive = { ...existing };
+    if (Object.keys(vpOverrides).length === 0) {
+      delete responsive[viewport];
+    } else {
+      responsive[viewport] = vpOverrides;
+    }
+    store.updateBlock(block._key, { responsive } as Partial<ContentBlock>);
+  };
+
+  // === Responsive helpers for top-level properties (e.g. columns) ===
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  const baseFontSizePx = (() => {
+    const fs = style.fontSize;
+    if (typeof fs === "number") return fs;
+    const legacyMap: Record<string, number> = { small: 12, base: 14, large: 20, xl: 24, "2xl": 32, "3xl": 48 };
+    return legacyMap[fs || "base"] || 14;
+  })();
+
+  // Responsive-aware effective values
+  const currentFontSizePx = getEffectiveStyleValue<number>("fontSize", baseFontSizePx);
+  const currentAlignment = getEffectiveStyleValue<string>("alignment", style.alignment || "left");
+  const currentMaxWidth = getEffectiveStyleValue<string>("maxWidth", style.maxWidth || "");
+  const effectiveColumns = getEffectiveValue<number>(block as ContentBlock, viewport, "columns", block.columns || 1);
+
+  const baseFontWeight = (() => {
+    const fw = style.fontWeight;
+    if (!fw) return "400";
+    if (!isNaN(parseInt(fw, 10))) return fw;
+    if (fw === "bold") return "700";
+    if (fw === "medium") return "500";
+    return "400";
+  })();
+  const currentFontWeight = getEffectiveStyleValue<string>("fontWeight", baseFontWeight);
+
+  const handleStyleSelect = (preset: TextStylePreset) => {
+    store._pushSnapshot();
+    store.updateBlock(block._key, {
+      textStyle: preset.key,
+      style: {
+        ...style,
+        fontSize: preset.fontSize,
+        fontWeight: preset.fontWeight,
+        lineHeight: preset.lineHeight,
+        letterSpacing: preset.letterSpacing,
+        textTransform: preset.textTransform as TextBlock["style"] extends undefined ? never : NonNullable<TextBlock["style"]>["textTransform"],
+      },
+    } as Partial<ContentBlock>);
+  };
+
+  const handleStyleClear = () => {
+    store._pushSnapshot();
+    store.updateBlock(block._key, {
+      textStyle: undefined,
+    } as Partial<ContentBlock>);
+  };
+
+  const alignments: { value: "left" | "center" | "right" | "justify"; icon: React.ReactNode }[] = [
+    { value: "left", icon: <AlignLeftIcon /> },
+    { value: "center", icon: <AlignCenterIcon /> },
+    { value: "right", icon: <AlignRightIcon /> },
+    { value: "justify", icon: <AlignJustifyIcon /> },
+  ];
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* Text section: Style, Color, Align */}
+      <SettingsSection title="Text" defaultOpen>
+        <SettingsField label="Style">
+          <TextStylePicker
+            presets={presets}
+            activeKey={block.textStyle}
+            onSelect={handleStyleSelect}
+            onClear={handleStyleClear}
+          />
+        </SettingsField>
+
+        <ResponsiveStyleField label="Color" subProp="color" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("color")} onReset={resetStyleOverride}>
+          <ColorSwatchPicker
+            value={getEffectiveStyleValue<string>("color", style.color || "")}
+            onChange={(hex) => updateStyleResponsive("color", hex)}
+            swatches={paletteSwatches}
+            allowClear
+          />
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Align" subProp="alignment" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("alignment")} onReset={resetStyleOverride}>
+          <div className="flex gap-0.5 bg-[#f5f5f5] rounded-lg p-0.5">
+            {alignments.map(({ value, icon }) => (
+              <button
+                key={value}
+                onClick={() => updateStyleResponsive("alignment", value)}
+                className={`flex-1 flex items-center justify-center py-[5px] rounded-md transition-all ${
+                  currentAlignment === value
+                    ? "bg-white text-neutral-900 shadow-[0_1px_3px_rgba(0,0,0,0.08)]"
+                    : "text-neutral-300 hover:text-neutral-500"
+                }`}
+                title={value.charAt(0).toUpperCase() + value.slice(1)}
+              >
+                {icon}
+              </button>
+            ))}
+          </div>
+        </ResponsiveStyleField>
+      </SettingsSection>
+
+      {/* Typography section: Size, Weight, Line height, Letter spacing */}
+      <SettingsSection title="Typography" defaultOpen>
+        <ResponsiveStyleField label="Size" subProp="fontSize" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontSize")} onReset={resetStyleOverride}>
+          <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#076bff] focus-within:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]">
+            <input
+              type="number"
+              min={1}
+              max={999}
+              value={currentFontSizePx}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                const val = parseInt(e.target.value, 10);
+                if (!isNaN(val) && val > 0) {
+                  updateStyleDebouncedResponsive("fontSize", val);
+                  if (viewport === "desktop" && block.textStyle) {
+                    store.updateBlockDebounced(block._key, { textStyle: undefined } as Partial<ContentBlock>);
+                  }
+                }
+              }}
+              className="flex-1 min-w-0 bg-transparent border-none px-2.5 py-[7px] text-xs text-neutral-900 outline-none"
+            />
+            <span className="text-[10px] text-neutral-400 pr-2.5 shrink-0 select-none">px</span>
+          </div>
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Weight" subProp="fontWeight" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontWeight")} onReset={resetStyleOverride}>
+          <select
+            value={currentFontWeight}
+            onChange={(e) => {
+              updateStyleResponsive("fontWeight", e.target.value);
+              if (viewport === "desktop" && block.textStyle) {
+                store.updateBlock(block._key, { textStyle: undefined } as Partial<ContentBlock>);
+              }
+            }}
+            className={SELECT_CLASS}
+          >
+            <option value="100">Thin (100)</option>
+            <option value="200">ExtraLight (200)</option>
+            <option value="300">Light (300)</option>
+            <option value="400">Regular (400)</option>
+            <option value="500">Medium (500)</option>
+            <option value="600">SemiBold (600)</option>
+            <option value="700">Bold (700)</option>
+            <option value="800">ExtraBold (800)</option>
+            <option value="900">Black (900)</option>
+          </select>
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Line height" subProp="lineHeight" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("lineHeight")} onReset={resetStyleOverride}>
+          <input
+            type="text"
+            value={getEffectiveStyleValue<string>("lineHeight", style.lineHeight || "")}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => {
+              updateStyleDebouncedResponsive("lineHeight", e.target.value);
+              if (viewport === "desktop" && block.textStyle) {
+                store.updateBlockDebounced(block._key, { textStyle: undefined } as Partial<ContentBlock>);
+              }
+            }}
+            placeholder="1.5"
+            className={INPUT_CLASS}
+          />
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Spacing" subProp="letterSpacing" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("letterSpacing")} onReset={resetStyleOverride}>
+          <input
+            type="text"
+            value={getEffectiveStyleValue<string>("letterSpacing", style.letterSpacing || "")}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => {
+              updateStyleDebouncedResponsive("letterSpacing", e.target.value);
+              if (viewport === "desktop" && block.textStyle) {
+                store.updateBlockDebounced(block._key, { textStyle: undefined } as Partial<ContentBlock>);
+              }
+            }}
+            placeholder="0, -0.02em, 2px"
+            className={INPUT_CLASS}
+          />
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Transform" subProp="textTransform" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("textTransform")} onReset={resetStyleOverride}>
+          <select
+            value={getEffectiveStyleValue<string>("textTransform", style.textTransform || "none")}
+            onChange={(e) => updateStyleResponsive("textTransform", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="none">None</option>
+            <option value="uppercase">UPPERCASE</option>
+            <option value="lowercase">lowercase</option>
+            <option value="capitalize">Capitalize</option>
+          </select>
+        </ResponsiveStyleField>
+      </SettingsSection>
+
+      {/* Columns section */}
+      <SettingsSection title="Columns">
+        <ResponsiveField
+          label="Columns"
+          block={block as ContentBlock}
+          property="columns"
+          onReset={() => resetOverride("columns")}
+        >
+          <div className="flex gap-0.5 bg-[#f5f5f5] rounded-lg p-0.5">
+            {[1, 2, 3, 4].map((n) => (
+              <button
+                key={n}
+                onClick={() => {
+                  store._pushSnapshot();
+                  updateResponsive("columns", n);
+                }}
+                className={`flex-1 flex items-center justify-center py-[5px] rounded-md text-xs transition-all ${
+                  effectiveColumns === n
+                    ? "bg-white text-neutral-900 shadow-[0_1px_3px_rgba(0,0,0,0.08)] font-medium"
+                    : "text-neutral-400 hover:text-neutral-600"
+                }`}
+              >
+                {n}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveStyleField label="Max Width" subProp="maxWidth" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("maxWidth")} onReset={resetStyleOverride}>
+          <input
+            type="text"
+            value={currentMaxWidth}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateStyleDebouncedResponsive("maxWidth", e.target.value)}
+            placeholder="none, 600px, 80%"
+            className={INPUT_CLASS}
+          />
+        </ResponsiveStyleField>
+
+        <ResponsiveStyleField label="Opacity" subProp="opacity" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("opacity")} onReset={resetStyleOverride}>
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={Math.round((getEffectiveStyleValue<number>("opacity", style.opacity ?? 1)) * 100)}
+              onChange={(e) =>
+                updateStyleResponsive("opacity", parseInt(e.target.value) / 100)
+              }
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {Math.round((getEffectiveStyleValue<number>("opacity", style.opacity ?? 1)) * 100)}%
+            </span>
+          </div>
+        </ResponsiveStyleField>
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/TextStylePicker.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState } from "react";
+import type { SiteStyles, TypographyLevel } from "../../../lib/sanity/types";
+
+// ============================================
+// Types
+// ============================================
+
+export interface TextStylePreset {
+  key: string;
+  label: string;
+  tag: string;
+  fontSize: number;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  textTransform?: string;
+}
+
+// ============================================
+// Preset builders
+// ============================================
+
+export const FALLBACK_PRESETS: TextStylePreset[] = [
+  { key: "h1", label: "Heading 1", tag: "H1", fontSize: 48, fontWeight: "700", lineHeight: "1.1", letterSpacing: "-0.02em" },
+  { key: "h2", label: "Heading 2", tag: "H2", fontSize: 32, fontWeight: "700", lineHeight: "1.2", letterSpacing: "-0.01em" },
+  { key: "h3", label: "Heading 3", tag: "H3", fontSize: 24, fontWeight: "500", lineHeight: "1.3", letterSpacing: "0" },
+  { key: "h4", label: "Heading 4", tag: "H4", fontSize: 18, fontWeight: "500", lineHeight: "1.4", letterSpacing: "0" },
+  { key: "body", label: "Body", tag: "P", fontSize: 14, fontWeight: "400", lineHeight: "1.6", letterSpacing: "0" },
+  { key: "small", label: "Small", tag: "P", fontSize: 12, fontWeight: "400", lineHeight: "1.5", letterSpacing: "0.02em" },
+];
+
+function parsePxValue(val: string): number {
+  const match = val.match(/([\d.]+)/);
+  if (!match) return 14;
+  const num = parseFloat(match[1]);
+  if (val.includes("rem")) return Math.round(num * 16);
+  return Math.round(num);
+}
+
+export function buildPresetsFromStyles(styles: SiteStyles): TextStylePreset[] {
+  const typo = styles.typography;
+  if (!typo) return FALLBACK_PRESETS;
+
+  const levels: { key: string; label: string; tag: string; data?: TypographyLevel | null }[] = [
+    { key: "h1", label: "Heading 1", tag: "H1", data: typo.h1 },
+    { key: "h2", label: "Heading 2", tag: "H2", data: typo.h2 },
+    { key: "h3", label: "Heading 3", tag: "H3", data: typo.h3 },
+    { key: "h4", label: "Heading 4", tag: "H4", data: typo.h4 },
+    { key: "body", label: "Body", tag: "P", data: typo.body },
+    { key: "small", label: "Small", tag: "P", data: typo.small },
+  ];
+
+  return levels
+    .filter((l) => l.data)
+    .map((l) => ({
+      key: l.key,
+      label: l.label,
+      tag: l.tag,
+      fontSize: parsePxValue(l.data!.font_size),
+      fontWeight: l.data!.font_weight || "400",
+      lineHeight: l.data!.line_height || "1.5",
+      letterSpacing: l.data!.letter_spacing || "0",
+      textTransform: l.data!.text_transform,
+    }));
+}
+
+// ============================================
+// Style Picker — Framer-style chip + dropdown
+// ============================================
+
+export default function TextStylePicker({
+  presets,
+  activeKey,
+  onSelect,
+  onClear,
+}: {
+  presets: TextStylePreset[];
+  activeKey: string | undefined;
+  onSelect: (preset: TextStylePreset) => void;
+  onClear: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filtered = presets.filter(
+    (p) => p.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const active = presets.find((p) => p.key === activeKey);
+
+  return (
+    <div className="relative">
+      {/* Chip trigger */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 rounded-lg bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 hover:bg-[#efefef] transition-colors"
+      >
+        {active ? (
+          <>
+            <span className="flex items-center justify-center w-5 h-5 rounded bg-[#e8e8e8] text-[9px] font-semibold text-neutral-500 shrink-0">
+              {active.tag}
+            </span>
+            <span className="flex-1 text-left truncate">{active.label}</span>
+            <button
+              onClick={(e) => { e.stopPropagation(); onClear(); }}
+              className="w-[18px] h-[18px] rounded-full flex items-center justify-center text-neutral-300 hover:bg-[#e5e5e5] hover:text-neutral-500 transition-colors shrink-0 text-sm"
+            >
+              ×
+            </button>
+          </>
+        ) : (
+          <>
+            <span className="flex items-center justify-center w-5 h-5 rounded bg-[#e8e8e8] text-[9px] text-neutral-400 shrink-0">
+              —
+            </span>
+            <span className="flex-1 text-left text-neutral-400">Custom</span>
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" className="shrink-0 text-neutral-400">
+              <path d="M2.5 4L5 6.5L7.5 4" />
+            </svg>
+          </>
+        )}
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-[100]" onClick={() => { setOpen(false); setSearch(""); }} />
+          <div className="absolute left-0 right-0 top-full mt-1 z-[101] bg-white rounded-lg border border-neutral-200 shadow-xl overflow-hidden">
+            <div className="p-2 border-b border-[#f0f0f0]">
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search..."
+                autoFocus
+                className="w-full rounded-md bg-[#f5f5f5] px-2 py-1.5 text-xs text-neutral-900 border-none outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/30"
+              />
+            </div>
+            <div className="max-h-[220px] overflow-y-auto py-1">
+              {filtered.map((preset) => (
+                <button
+                  key={preset.key}
+                  onClick={() => {
+                    onSelect(preset);
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs transition-colors ${
+                    activeKey === preset.key
+                      ? "bg-[#f5f5f5] text-neutral-900"
+                      : "text-neutral-600 hover:bg-[#fafafa]"
+                  }`}
+                >
+                  <span className="flex items-center justify-center w-5 h-5 rounded bg-[#e8e8e8] text-[9px] font-semibold text-neutral-500 shrink-0">
+                    {preset.tag}
+                  </span>
+                  <span className="flex-1 text-left">{preset.label}</span>
+                  <span className="text-[10px] text-neutral-400">
+                    {preset.fontSize}px / {preset.lineHeight}
+                  </span>
+                </button>
+              ))}
+              {filtered.length === 0 && (
+                <p className="px-3 py-2 text-xs text-neutral-400 text-center">No styles found</p>
+              )}
+            </div>
+            {activeKey && (
+              <div className="border-t border-[#f0f0f0] p-1">
+                <button
+                  onClick={() => { onClear(); setOpen(false); setSearch(""); }}
+                  className="w-full text-left px-3 py-1.5 text-xs text-neutral-500 hover:text-neutral-900 hover:bg-[#fafafa] rounded transition-colors"
+                >
+                  Detach style (Custom)
+                </button>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}