@morphika/andami 0.5.4 → 0.5.5

package/components/builder/editors/TextBlockEditor.tsx

@@ -1,468 +1,471 @@
-"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 {
-  TypographyIcon,
-  ColumnsIcon,
-} from "./section-icons";
-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";
-import { BubbleTooltip } from "../BubbleIcons";
-
-// ============================================
-// 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-[#3580f9] 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 />
-
-      {/* Typography section: Style, Color, Align, Size, Weight, Line height, Letter spacing, Transform */}
-      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
-        <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 }) => {
-              const label = value.charAt(0).toUpperCase() + value.slice(1);
-              return (
-                <button
-                  key={value}
-                  onClick={() => updateStyleResponsive("alignment", value)}
-                  className={`group/bb relative 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"
-                  }`}
-                  aria-label={label}
-                >
-                  {icon}
-                  <BubbleTooltip>{label}</BubbleTooltip>
-                </button>
-              );
-            })}
-          </div>
-        </ResponsiveStyleField>
-
-        <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-[#3580f9] focus-within:shadow-[0_0_0_3px_rgba(53, 128, 249,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" icon={<ColumnsIcon />}>
-        <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-[#3580f9]"
-            />
-            <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>
-    </>
-  );
-}
+"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 {
+  TypographyIcon,
+  ColumnsIcon,
+} from "./section-icons";
+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";
+import { BubbleTooltip } from "../BubbleIcons";
+
+// ============================================
+// 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-[#3580f9] 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 updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const pageSettings = useBuilderStore((s) => s.pageSettings);
+  const viewport = useActiveViewport();
+  const paletteSwatches = usePaletteSwatches();
+  const pageTextColor = 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 = () => _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") {
+      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;
+      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") {
+      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;
+      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;
+    }
+    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") {
+      updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    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) => {
+    _pushSnapshot();
+    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 = () => {
+    _pushSnapshot();
+    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 />
+
+      {/* Typography section: Style, Color, Align, Size, Weight, Line height, Letter spacing, Transform */}
+      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
+        <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 }) => {
+              const label = value.charAt(0).toUpperCase() + value.slice(1);
+              return (
+                <button
+                  key={value}
+                  onClick={() => updateStyleResponsive("alignment", value)}
+                  className={`group/bb relative 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"
+                  }`}
+                  aria-label={label}
+                >
+                  {icon}
+                  <BubbleTooltip>{label}</BubbleTooltip>
+                </button>
+              );
+            })}
+          </div>
+        </ResponsiveStyleField>
+
+        <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-[#3580f9] focus-within:shadow-[0_0_0_3px_rgba(53, 128, 249,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) {
+                    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) {
+                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) {
+                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) {
+                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" icon={<ColumnsIcon />}>
+        <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={() => {
+                  _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-[#3580f9]"
+            />
+            <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>
+    </>
+  );
+}