@morphika/andami 0.1.2

package/components/builder/settings-panel/SectionV2LayoutTab.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+/**
+ * SectionV2LayoutTab — Layout tab content for V2 grid sections.
+ *
+ * Extracted from SectionV2Settings.tsx in Session 95.
+ * Controls: spacing (TRBL padding), background (color/opacity/image),
+ * offset (TRBL margins), and border properties.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionV2Settings as SectionV2SettingsType } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  INPUT_CLASS,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+
+export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const settings = section.settings;
+  const activeViewport = store.activeViewport;
+
+  const viewportLabel = activeViewport !== "desktop"
+    ? activeViewport === "tablet" ? "Tablet" : "Phone"
+    : null;
+
+  /**
+   * Update setting with viewport awareness.
+   * Desktop writes directly to settings; tablet/phone writes to responsive overrides.
+   */
+  const updateSettingResponsive = (property: string, value: unknown) => {
+    if (activeViewport === "desktop") {
+      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+    } else {
+      const existing = section.responsive || {};
+      const vp = activeViewport as "tablet" | "phone";
+      const vpSettings = { ...(existing[vp]?.settings || {}), [property]: value };
+      if (value === undefined) delete (vpSettings as Record<string, unknown>)[property];
+      const vpOverride = { ...(existing[vp] || {}), settings: Object.keys(vpSettings).length ? vpSettings : undefined };
+      const responsive = { ...existing, [vp]: vpOverride };
+      // Clean up empty viewport override
+      if (!vpOverride.columns?.length && !vpOverride.settings) delete responsive[vp];
+      store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
+    }
+  };
+
+  /** Read a setting value respecting viewport overrides */
+  const getSettingValue = <T,>(property: string, fallback: T): T => {
+    if (activeViewport !== "desktop") {
+      const vp = activeViewport as "tablet" | "phone";
+      const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
+      const override = vpSettings?.[property];
+      if (override !== undefined) return override as T;
+    }
+    const val = (settings as unknown as Record<string, unknown>)[property];
+    return (val !== undefined ? val : fallback) as T;
+  };
+
+  const hasOverride = (property: string): boolean => {
+    if (activeViewport === "desktop") return false;
+    const vp = activeViewport as "tablet" | "phone";
+    const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
+    return vpSettings?.[property] !== undefined;
+  };
+
+  return (
+    <>
+      {viewportLabel && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+            <span className="text-[11px] font-medium text-[#076bff]">
+              Editing {viewportLabel} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Spacing (Padding) */}
+      <SettingsSection title="Spacing" defaultOpen>
+        <div className="space-y-2">
+          {(["top", "right", "bottom", "left"] as const).map((side) => {
+            const prop = `spacing_${side}`;
+            return (
+              <SettingsField key={side} label={
+                <span className="capitalize">
+                  {side}
+                  {hasOverride(prop) && (
+                    <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+                  )}
+                </span>
+              }>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={getSettingValue<string>(prop, "0")}
+                    onChange={(e) => updateSettingResponsive(prop, e.target.value)}
+                    placeholder="0"
+                    className={INPUT_CLASS}
+                    style={{ width: 80 }}
+                  />
+                  <span className="text-[10px] text-neutral-400">px</span>
+                  {hasOverride(prop) && (
+                    <button
+                      onClick={() => updateSettingResponsive(prop, undefined)}
+                      className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors ml-auto"
+                    >
+                      Reset
+                    </button>
+                  )}
+                </div>
+              </SettingsField>
+            );
+          })}
+        </div>
+      </SettingsSection>
+
+      {/* Background (full controls) */}
+      <SettingsSection title="Background" defaultOpen>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getSettingValue<string>("background_color", "")}
+            onChange={(hex) => updateSettingResponsive("background_color", hex)}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={getSettingValue<number>("background_opacity", 100)}
+              onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<number>("background_opacity", 100)}%
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Image">
+          <input
+            type="text"
+            value={getSettingValue<string>("background_image", "")}
+            onChange={(e) => updateSettingResponsive("background_image", e.target.value)}
+            placeholder="path/to/image.jpg"
+            className={INPUT_CLASS}
+          />
+        </SettingsField>
+
+        {getSettingValue<string>("background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getSettingValue<string>("background_size", "cover")}
+                onChange={(e) => updateSettingResponsive("background_size", e.target.value)}
+                className={INPUT_CLASS}
+              >
+                <option value="cover">Cover</option>
+                <option value="contain">Contain</option>
+                <option value="auto">Auto</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Position">
+              <select
+                value={getSettingValue<string>("background_position", "center center")}
+                onChange={(e) => updateSettingResponsive("background_position", e.target.value)}
+                className={INPUT_CLASS}
+              >
+                <option value="center center">Center</option>
+                <option value="top center">Top</option>
+                <option value="bottom center">Bottom</option>
+                <option value="left center">Left</option>
+                <option value="right center">Right</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Repeat">
+              <select
+                value={getSettingValue<string>("background_repeat", "no-repeat")}
+                onChange={(e) => updateSettingResponsive("background_repeat", e.target.value)}
+                className={INPUT_CLASS}
+              >
+                <option value="no-repeat">No Repeat</option>
+                <option value="repeat">Repeat</option>
+                <option value="repeat-x">Repeat X</option>
+                <option value="repeat-y">Repeat Y</option>
+              </select>
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset">
+        <div className="space-y-2">
+          {(["top", "right", "bottom", "left"] as const).map((side) => {
+            const prop = `offset_${side}`;
+            return (
+              <SettingsField key={side} label={
+                <span className="capitalize">
+                  {side}
+                  {hasOverride(prop) && (
+                    <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+                  )}
+                </span>
+              }>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={getSettingValue<string>(prop, "0")}
+                    onChange={(e) => updateSettingResponsive(prop, e.target.value)}
+                    placeholder="0"
+                    className={INPUT_CLASS}
+                    style={{ width: 80 }}
+                  />
+                  <span className="text-[10px] text-neutral-400">px</span>
+                  {hasOverride(prop) && (
+                    <button
+                      onClick={() => updateSettingResponsive(prop, undefined)}
+                      className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors ml-auto"
+                    >
+                      Reset
+                    </button>
+                  )}
+                </div>
+              </SettingsField>
+            );
+          })}
+        </div>
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border">
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getSettingValue<string>("border_color", "")}
+            onChange={(hex) => updateSettingResponsive("border_color", hex)}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Width">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={20}
+              value={parseInt(getSettingValue<string>("border_width", "0"))}
+              onChange={(e) => updateSettingResponsive("border_width", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<string>("border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getSettingValue<string>("border_style", "none")}
+            onChange={(e) => updateSettingResponsive("border_style", e.target.value)}
+            className={INPUT_CLASS}
+          >
+            <option value="none">None</option>
+            <option value="solid">Solid</option>
+            <option value="dashed">Dashed</option>
+            <option value="dotted">Dotted</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Sides">
+          <select
+            value={getSettingValue<string>("border_sides", "all")}
+            onChange={(e) => updateSettingResponsive("border_sides", e.target.value)}
+            className={INPUT_CLASS}
+          >
+            <option value="all">All</option>
+            <option value="top">Top</option>
+            <option value="right">Right</option>
+            <option value="bottom">Bottom</option>
+            <option value="left">Left</option>
+            <option value="top-bottom">Top & Bottom</option>
+            <option value="left-right">Left & Right</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              value={parseInt(getSettingValue<string>("border_radius", "0"))}
+              onChange={(e) => updateSettingResponsive("border_radius", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<string>("border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/settings-panel/SectionV2Settings.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+/**
+ * SectionV2Settings — Settings panel for V2 grid sections.
+ *
+ * Three tabs managed by parent SettingsPanel:
+ * - Settings: presets grid, col_gap, row_gap, appearance (background color/opacity/image)
+ * - Layout: spacing TRBL, offset TRBL, border, background image settings (reuses LayoutTab patterns)
+ * - Animation: scroll animation picker, hover animation picker, stagger settings
+ *
+ * Session 83: Phase 4 of V2 Grid System.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionV2Settings as SectionV2SettingsType, SectionV2Preset, SectionV2SettingsOverridable } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import {
+  getSectionV2SettingValue,
+  hasSectionV2SettingOverride,
+  buildSectionV2SettingOverride,
+  hasAnyColumnV2Overrides,
+  hasAnySectionV2SettingOverrides,
+  buildStackOverride,
+  buildColumnV2Overrides,
+} from "./responsive-helpers";
+
+// ============================================
+// Preset definitions for the picker grid
+// ============================================
+
+interface PresetOption {
+  id: SectionV2Preset;
+  label: string;
+  cols: number[];       // visual representation of column spans
+  readonly?: boolean;   // "custom" is read-only
+}
+
+const PRESETS: PresetOption[] = [
+  { id: "full", label: "Full", cols: [12] },
+  { id: "halves", label: "½ + ½", cols: [6, 6] },
+  { id: "thirds", label: "⅓ × 3", cols: [4, 4, 4] },
+  { id: "quarters", label: "¼ × 4", cols: [3, 3, 3, 3] },
+  { id: "1/3+2/3", label: "⅓ + ⅔", cols: [4, 8] },
+  { id: "2/3+1/3", label: "⅔ + ⅓", cols: [8, 4] },
+];
+
+const CUSTOM_PRESET: PresetOption = { id: "custom", label: "Custom", cols: [], readonly: true };
+
+// ============================================
+// Preset Grid Component
+// ============================================
+
+function PresetGrid({ section }: { section: PageSectionV2 }) {
+  const applyPresetV2 = useBuilderStore((s) => s.applyPresetV2);
+  const currentPreset = section.settings.preset;
+
+  const allPresets = currentPreset === "custom"
+    ? [...PRESETS, CUSTOM_PRESET]
+    : PRESETS;
+
+  return (
+    <div className="grid grid-cols-3 gap-1.5">
+      {allPresets.map((preset) => {
+        const isActive = currentPreset === preset.id;
+        const isCustom = preset.id === "custom";
+
+        return (
+          <button
+            key={preset.id}
+            onClick={() => !isCustom && applyPresetV2(section._key, preset.id)}
+            className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
+              isActive
+                ? "border-[#076bff] bg-[#076bff]/5"
+                : isCustom
+                ? "border-neutral-200 bg-neutral-50 opacity-60 cursor-default"
+                : "border-neutral-200 bg-white hover:border-neutral-300 hover:bg-neutral-50"
+            }`}
+            title={isCustom ? "Layout doesn't match any preset" : preset.label}
+          >
+            {/* Visual representation */}
+            <div className="flex gap-0.5 w-full h-4">
+              {isCustom ? (
+                <div className="flex-1 rounded-sm bg-neutral-200 flex items-center justify-center">
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" className="text-neutral-400">
+                    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                  </svg>
+                </div>
+              ) : (
+                preset.cols.map((span, i) => (
+                  <div
+                    key={i}
+                    className={`rounded-sm transition-colors ${
+                      isActive ? "bg-[#076bff]" : "bg-neutral-300"
+                    }`}
+                    style={{ flex: span }}
+                  />
+                ))
+              )}
+            </div>
+            <span className={`text-[9px] font-medium ${
+              isActive ? "text-[#076bff]" : "text-neutral-500"
+            }`}>
+              {preset.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================
+// SectionV2Settings — Settings Tab Content
+// ============================================
+
+export default function SectionV2Settings({ section }: { section: PageSectionV2 }) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const settings = section.settings;
+  const activeViewport = store.activeViewport;
+  const isResponsive = activeViewport !== "desktop";
+
+  const hasColOverrides = hasAnyColumnV2Overrides(section, activeViewport);
+  const hasSettingsOverrides = hasAnySectionV2SettingOverrides(section, activeViewport);
+  const hasAnyOverrides = hasColOverrides || hasSettingsOverrides;
+
+  /** Viewport-aware update: desktop writes to settings, tablet/phone to responsive */
+  const updateSettingResponsive = (property: keyof SectionV2SettingsOverridable, value: unknown) => {
+    if (activeViewport === "desktop") {
+      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+    } else {
+      const responsive = buildSectionV2SettingOverride(section, activeViewport, property, value);
+      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+    }
+  };
+
+  const getGapValue = (property: "col_gap" | "row_gap", fallback: number): number => {
+    return getSectionV2SettingValue(section, activeViewport, property, fallback);
+  };
+
+  const handleStack = () => {
+    const colOverrides = buildStackOverride(section);
+    const responsive = buildColumnV2Overrides(section, activeViewport, colOverrides);
+    store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+  };
+
+  const handleReset = () => {
+    // Clear all responsive overrides for the current viewport
+    const existing = section.responsive || {};
+    const vp = activeViewport as "tablet" | "phone";
+    const responsive = { ...existing };
+    delete responsive[vp];
+    store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
+  };
+
+  return (
+    <>
+      {/* Responsive info banner */}
+      {isResponsive && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+            <span className="text-[11px] font-medium text-[#076bff]">
+              Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Responsive actions — Stack & Reset (only in tablet/phone) */}
+      {isResponsive && (
+        <div className="px-4 pt-3">
+          <div className="flex gap-2">
+            <button
+              onClick={handleStack}
+              className="flex-1 rounded-lg bg-[#076bff]/8 border border-[#076bff]/20 py-2 text-xs font-medium text-[#076bff] hover:bg-[#076bff]/15 transition-colors"
+              title="Stack all columns vertically (full width, one per row)"
+            >
+              Stack Columns
+            </button>
+            <button
+              onClick={handleReset}
+              disabled={!hasAnyOverrides}
+              className={`flex-1 rounded-lg border py-2 text-xs font-medium transition-colors ${
+                hasAnyOverrides
+                  ? "bg-neutral-100 border-neutral-200 text-neutral-600 hover:bg-neutral-200"
+                  : "bg-neutral-50 border-neutral-100 text-neutral-300 cursor-not-allowed"
+              }`}
+              title="Reset all responsive overrides for this viewport"
+            >
+              Reset Overrides
+            </button>
+          </div>
+          {hasAnyOverrides && (
+            <p className="text-[10px] text-[#076bff]/60 mt-1.5">
+              {hasColOverrides ? "Column layout" : ""}
+              {hasColOverrides && hasSettingsOverrides ? " + " : ""}
+              {hasSettingsOverrides ? "settings" : ""}
+              {" "}overridden
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Presets — desktop only (changing structure from responsive would be confusing) */}
+      {!isResponsive && (
+        <SettingsSection title="Layout Preset" defaultOpen>
+          <PresetGrid section={section} />
+          <p className="text-[10px] text-neutral-400 mt-1.5">
+            {section.columns.length} column{section.columns.length !== 1 ? "s" : ""}
+            {" · "}
+            {section.columns.map((c) => c.span).join(" + ")}
+            {" / "}{settings.grid_columns}
+          </p>
+        </SettingsSection>
+      )}
+
+      {/* Gaps */}
+      <SettingsSection title="Grid Gaps" defaultOpen>
+        <SettingsField label={
+          <span>
+            Col Gap
+            {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "col_gap") && (
+              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+            )}
+          </span>
+        }>
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={80}
+              step={4}
+              value={getGapValue("col_gap", 20)}
+              onChange={(e) => updateSettingResponsive("col_gap", parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-12 text-right">
+              {getGapValue("col_gap", 20)}px
+            </span>
+            {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "col_gap") && (
+              <button
+                onClick={() => updateSettingResponsive("col_gap", undefined)}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            )}
+          </div>
+        </SettingsField>
+
+        <SettingsField label={
+          <span>
+            Row Gap
+            {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "row_gap") && (
+              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+            )}
+          </span>
+        }>
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={80}
+              step={4}
+              value={getGapValue("row_gap", 20)}
+              onChange={(e) => updateSettingResponsive("row_gap", parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-12 text-right">
+              {getGapValue("row_gap", 20)}px
+            </span>
+            {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "row_gap") && (
+              <button
+                onClick={() => updateSettingResponsive("row_gap", undefined)}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            )}
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Appearance */}
+      <SettingsSection title="Appearance">
+        <SettingsField label="Background">
+          <ColorSwatchPicker
+            value={getSectionV2SettingValue(section, activeViewport, "background_color", "")}
+            onChange={(hex) => updateSettingResponsive("background_color", hex)}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        {getSectionV2SettingValue(section, activeViewport, "background_color", "") && (
+          <SettingsField label="Opacity">
+            <div className="flex items-center gap-2">
+              <input
+                type="range"
+                min={0}
+                max={100}
+                value={getSectionV2SettingValue(section, activeViewport, "background_opacity", 100)}
+                onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
+                className="flex-1 accent-[#076bff]"
+              />
+              <span className="text-xs text-neutral-900 w-10 text-right">
+                {getSectionV2SettingValue(section, activeViewport, "background_opacity", 100)}%
+              </span>
+            </div>
+          </SettingsField>
+        )}
+      </SettingsSection>
+
+    </>
+  );
+}
+
+// Re-export extracted components for backward compatibility
+export { SectionV2LayoutTab } from "./SectionV2LayoutTab";
+export { SectionV2AnimationTab } from "./SectionV2AnimationTab";

package/components/builder/settings-panel/TRBLInputs.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+/**
+ * TRBLInputs — Shared 4-field input row for Top/Right/Bottom/Left values.
+ * Used by both LayoutTab (row spacing/offset) and BlockLayoutTab (block spacing/offset).
+ *
+ * Session 65: Extracted from LayoutTab.tsx.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+
+export function TRBLInputs({
+  top,
+  right,
+  bottom,
+  left,
+  onChange,
+}: {
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+  onChange: (field: "top" | "right" | "bottom" | "left", value: string) => void;
+}) {
+  const store = useBuilderStore();
+  const fields = [
+    { key: "top" as const, label: "TOP", value: top },
+    { key: "right" as const, label: "RIGHT", value: right },
+    { key: "bottom" as const, label: "BOTTOM", value: bottom },
+    { key: "left" as const, label: "LEFT", value: left },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 gap-1.5">
+      {fields.map((f) => (
+        <div key={f.key} className="flex flex-col items-center gap-1">
+          <span className="text-[9px] text-neutral-300 uppercase tracking-wider">
+            {f.label}
+          </span>
+          <input
+            type="number"
+            value={f.value || "0"}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(e) => onChange(f.key, e.target.value)}
+            className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-1.5 py-[6px] text-xs text-neutral-900 text-center outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}