@morphika/andami 0.1.9 → 0.2.0

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

@@ -1,382 +0,0 @@
-"use client";
-
-/**
- * LayoutTab — Page Section styling (spacing, offset, background, border).
- * Viewport-aware with responsive override support.
- *
- * Session 64: Extracted from SettingsPanel.tsx.
- * Session 65: Split out RowLayoutPresetPicker, TRBLInputs, BlockLayoutTab
- *             into separate modules. This file now contains only LayoutTab.
- * Session 158: Added section title icons matching BlockLayoutTab/SectionV2LayoutTab.
- *              Reordered sections: Spacing → Offset → Background → Border.
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import { resolveEffectiveSpacing } from "../../../lib/builder/layout-styles";
-import type { PageSection } from "../../../lib/sanity/types";
-import {
-  SettingsField,
-  SettingsSection,
-  SELECT_CLASS,
-  AssetPathInput,
-} from "../editors/shared";
-import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
-import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
-import {
-  getRowSettingValue,
-  hasRowSettingOverride,
-  setRowResponsiveOverride,
-} from "./responsive-helpers";
-import { TRBLInputs } from "./TRBLInputs";
-
-// ── Section title icons (matching BlockLayoutTab / SectionV2LayoutTab) ──
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
-
-/**
- * BUG-007 fix: LayoutTab now handles PageSection styling (spacing, background, border).
- * BUG-013 fix: Sections support responsive overrides (tablet/phone).
- */
-export function LayoutTab({ section, sectionKey }: { section: PageSection; sectionKey: string }) {
-  const store = useBuilderStore();
-  const paletteSwatches = usePaletteSwatches();
-  const settings = section.settings || {};
-  const activeViewport = store.activeViewport;
-
-  // Live preview callbacks (Phase 4)
-  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey, field: "background_color", value: val });
-  };
-  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey, field: "border_color", value: val });
-  };
-
-  const updateSetting = (updates: Partial<NonNullable<PageSection["settings"]>>) => {
-    store.updateSectionSettings(sectionKey, updates);
-  };
-
-  /** Update a setting, viewport-aware. Supports sections with responsive overrides. */
-  const updateSettingResponsive = (property: string, value: unknown) => {
-    // BUG-013 fix: Sections now support responsive overrides
-    if (activeViewport === "desktop") {
-      store.updateSectionSettings(sectionKey, { [property]: value });
-    } else {
-      // Build responsive override for section
-      const existing = section.responsive || {};
-      const vp = activeViewport as "tablet" | "phone";
-      const vpOverrides = { ...(existing[vp] || {}), [property]: value };
-      if (value === undefined) delete (vpOverrides as Record<string, unknown>)[property];
-      const responsive = { ...existing, [vp]: vpOverrides };
-      if (Object.keys(vpOverrides).length === 0) delete responsive[vp];
-      store.updateSectionResponsive(sectionKey, Object.keys(responsive).length ? responsive : undefined);
-    }
-  };
-
-  // Resolve effective spacing — shows real values even when legacy enum is active
-  const effective = resolveEffectiveSpacing(settings);
-
-  // Viewport-aware spacing values
-  const effectiveSpacingTop = getRowSettingValue<string>(section, activeViewport, "spacing_top", effective.top);
-  const effectiveSpacingRight = getRowSettingValue<string>(section, activeViewport, "spacing_right", effective.right);
-  const effectiveSpacingBottom = getRowSettingValue<string>(section, activeViewport, "spacing_bottom", effective.bottom);
-  const effectiveSpacingLeft = getRowSettingValue<string>(section, activeViewport, "spacing_left", effective.left);
-
-  // Parse background color + opacity to display
-  const bgOpacity = getRowSettingValue<number>(section, activeViewport, "background_opacity", settings.background_opacity ?? 100);
-
-  const viewportLabel = activeViewport !== "desktop"
-    ? activeViewport === "tablet" ? "Tablet" : "Phone"
-    : null;
-
-  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 icon={<SpacingSectionIcon />}>
-        <TRBLInputs
-          top={effectiveSpacingTop}
-          right={effectiveSpacingRight}
-          bottom={effectiveSpacingBottom}
-          left={effectiveSpacingLeft}
-          onChange={(field, value) => {
-            if (activeViewport === "desktop") {
-              // When user edits TRBL, set explicit TRBL values
-              const base = resolveEffectiveSpacing(settings);
-              updateSetting({
-                spacing_top: field === "top" ? value : (settings.spacing_top ?? base.top),
-                spacing_right: field === "right" ? value : (settings.spacing_right ?? base.right),
-                spacing_bottom: field === "bottom" ? value : (settings.spacing_bottom ?? base.bottom),
-                spacing_left: field === "left" ? value : (settings.spacing_left ?? base.left),
-              });
-            } else {
-              updateSettingResponsive(`spacing_${field}`, value);
-            }
-          }}
-        />
-        {activeViewport !== "desktop" && (
-          ["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"].some(
-            (p) => hasRowSettingOverride(section, activeViewport, p)
-          ) ? (
-            <div className="flex items-center gap-2 mt-1">
-              <span className="text-[9px] text-[#076bff]">overridden</span>
-              <button
-                onClick={() => {
-                  // BUG-021 fix: use proper store action for responsive reset
-                  let updated = section;
-                  ["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"].forEach((p) => {
-                    const updates = setRowResponsiveOverride(updated, activeViewport, p, undefined);
-                    if (updates.responsive !== undefined) {
-                      updated = { ...updated, responsive: updates.responsive };
-                    }
-                  });
-                  store.updateSectionResponsive(sectionKey, (updated as PageSection).responsive);
-                }}
-                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
-              >
-                Reset
-              </button>
-            </div>
-          ) : (
-            <p className="text-[9px] text-neutral-300 italic mt-1">inherited</p>
-          )
-        )}
-      </SettingsSection>
-
-      {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
-        <TRBLInputs
-          top={getRowSettingValue<string>(section, activeViewport, "offset_top", "0")}
-          right={getRowSettingValue<string>(section, activeViewport, "offset_right", "0")}
-          bottom={getRowSettingValue<string>(section, activeViewport, "offset_bottom", "0")}
-          left={getRowSettingValue<string>(section, activeViewport, "offset_left", "0")}
-          onChange={(field, value) => {
-            updateSettingResponsive(`offset_${field}`, value);
-          }}
-        />
-      </SettingsSection>
-
-      {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", ""))}
-            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
-            swatches={paletteSwatches}
-            allowGradients
-            onPreview={handleBgPreview}
-          />
-        </SettingsField>
-
-        <SettingsField label="Opacity">
-          {(() => {
-            const bgIsGrad = isGradient(parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", "")));
-            return (
-              <>
-                <div className="flex items-center gap-2">
-                  <input
-                    type="range"
-                    min={0}
-                    max={100}
-                    value={bgOpacity}
-                    onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
-                    className={`flex-1 accent-[#076bff] ${bgIsGrad ? "opacity-40 pointer-events-none" : ""}`}
-                    disabled={bgIsGrad}
-                  />
-                  <span className="text-xs text-neutral-900 w-10 text-right">
-                    {bgOpacity}%
-                  </span>
-                </div>
-                {bgIsGrad && (
-                  <p className="text-[9px] text-neutral-400 italic mt-1">
-                    Opacity is controlled per stop in gradient mode
-                  </p>
-                )}
-              </>
-            );
-          })()}
-        </SettingsField>
-
-        <SettingsField label="Image">
-          <AssetPathInput
-            value={getRowSettingValue<string>(section, activeViewport, "background_image", "")}
-            onFocus={() => store._pushSnapshot()}
-            onChange={(v) => updateSettingResponsive("background_image", v)}
-            placeholder="path/to/image.jpg"
-            filterType="image"
-          />
-        </SettingsField>
-
-        {getRowSettingValue<string>(section, activeViewport, "background_image", "") && (
-          <>
-            <SettingsField label="Size">
-              <select
-                value={getRowSettingValue<string>(section, activeViewport, "background_size", "cover")}
-                onChange={(e) => updateSettingResponsive("background_size", e.target.value)}
-                className={SELECT_CLASS}
-              >
-                <option value="cover">Cover</option>
-                <option value="contain">Contain</option>
-                <option value="auto">Auto</option>
-              </select>
-            </SettingsField>
-
-            <SettingsField label="Position">
-              <select
-                value={getRowSettingValue<string>(section, activeViewport, "background_position", "center center")}
-                onFocus={() => store._pushSnapshot()}
-                onChange={(e) => updateSettingResponsive("background_position", e.target.value)}
-                className={SELECT_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>
-                <option value="top left">Top Left</option>
-                <option value="top right">Top Right</option>
-                <option value="bottom left">Bottom Left</option>
-                <option value="bottom right">Bottom Right</option>
-              </select>
-            </SettingsField>
-
-            <SettingsField label="Repeat">
-              <select
-                value={getRowSettingValue<string>(section, activeViewport, "background_repeat", "no-repeat")}
-                onChange={(e) => updateSettingResponsive("background_repeat", e.target.value)}
-                className={SELECT_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>
-
-      {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getRowSettingValue<string>(section, activeViewport, "border_color", ""))}
-            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("border_color", serializeColorField(val)); }}
-            swatches={paletteSwatches}
-            allowGradients
-            onPreview={handleBorderPreview}
-          />
-        </SettingsField>
-
-        <SettingsField label="Width">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={20}
-              value={parseInt(getRowSettingValue<string>(section, activeViewport, "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">
-              {getRowSettingValue<string>(section, activeViewport, "border_width", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <SettingsField label="Style">
-          <select
-            value={getRowSettingValue<string>(section, activeViewport, "border_style", "none")}
-            onChange={(e) => updateSettingResponsive("border_style", e.target.value)}
-            className={SELECT_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={getRowSettingValue<string>(section, activeViewport, "border_sides", "all")}
-            onChange={(e) => updateSettingResponsive("border_sides", e.target.value)}
-            className={SELECT_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(getRowSettingValue<string>(section, activeViewport, "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">
-              {getRowSettingValue<string>(section, activeViewport, "border_radius", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-      </SettingsSection>
-    </>
-  );
-}

package/sanity/schemas/pageSection.ts

@@ -1,157 +0,0 @@
-import { defineField, defineType } from "sanity";
-
-/**
- * pageSection — First-class page section type.
- *
- * Unlike regular rows (which contain columns → blocks), page sections are
- * direct, flat entities in the content_rows array. Each section wraps a single
- * section-level block (projectGridBlock) with its own
- * layout settings — no row/column matryoshka.
- *
- * Session 76: Refactored from the old "section row" approach where section
- * blocks were wrapped in row → column → block.
- */
-export default defineType({
-  name: "pageSection",
-  title: "Page Section",
-  type: "object",
-  fields: [
-    defineField({
-      name: "section_type",
-      title: "Section Type",
-      type: "string",
-      options: {
-        list: [
-          { title: "Project Grid", value: "projectGrid" },
-        ],
-      },
-      validation: (Rule) => Rule.required(),
-    }),
-    defineField({
-      name: "block",
-      title: "Section Content",
-      type: "array",
-      of: [{ type: "projectGridBlock" }],
-      validation: (Rule) => Rule.max(1).required(),
-      description: "The section block content (one block per section)",
-    }),
-    defineField({
-      name: "settings",
-      title: "Section Settings",
-      type: "object",
-      fields: [
-        // Background
-        defineField({ name: "background_color", title: "Background Color", type: "string" }),
-        defineField({ name: "background_opacity", title: "Background Opacity", type: "number" }),
-        defineField({ name: "background_image", title: "Background Image", type: "string" }),
-        defineField({
-          name: "background_size",
-          title: "Background Size",
-          type: "string",
-          options: { list: ["cover", "contain", "auto"] },
-        }),
-        defineField({ name: "background_position", title: "Background Position", type: "string" }),
-        defineField({
-          name: "background_repeat",
-          title: "Background Repeat",
-          type: "string",
-          options: { list: ["no-repeat", "repeat", "repeat-x", "repeat-y"] },
-        }),
-        // Spacing (padding TRBL)
-        defineField({ name: "spacing_top", title: "Spacing Top", type: "string" }),
-        defineField({ name: "spacing_right", title: "Spacing Right", type: "string" }),
-        defineField({ name: "spacing_bottom", title: "Spacing Bottom", type: "string" }),
-        defineField({ name: "spacing_left", title: "Spacing Left", type: "string" }),
-        // Offset (margin TRBL)
-        defineField({ name: "offset_top", title: "Offset Top", type: "string" }),
-        defineField({ name: "offset_right", title: "Offset Right", type: "string" }),
-        defineField({ name: "offset_bottom", title: "Offset Bottom", type: "string" }),
-        defineField({ name: "offset_left", title: "Offset Left", type: "string" }),
-        // Border
-        defineField({ name: "border_color", title: "Border Color", type: "string" }),
-        defineField({ name: "border_width", title: "Border Width", type: "string" }),
-        defineField({
-          name: "border_style",
-          title: "Border Style",
-          type: "string",
-          options: { list: ["none", "solid", "dashed", "dotted"] },
-        }),
-        defineField({
-          name: "border_sides",
-          title: "Border Sides",
-          type: "string",
-          options: { list: ["all", "top", "right", "bottom", "left", "top-bottom", "left-right"] },
-        }),
-        defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
-        // Animation
-        defineField({
-          name: "enter_animation",
-          title: "Enter Animation",
-          type: "enterAnimationConfig",
-        }),
-      ],
-    }),
-    // BUG-013 fix: Per-viewport responsive overrides for section settings
-    defineField({
-      name: "responsive",
-      title: "Responsive Overrides",
-      type: "object",
-      hidden: true, // Managed by the visual builder
-      fields: [
-        defineField({
-          name: "tablet",
-          title: "Tablet",
-          type: "object",
-          fields: [
-            defineField({ name: "background_color", type: "string", title: "Background Color" }),
-            defineField({ name: "background_opacity", type: "number", title: "Background Opacity" }),
-            defineField({ name: "spacing_top", type: "string", title: "Spacing Top" }),
-            defineField({ name: "spacing_right", type: "string", title: "Spacing Right" }),
-            defineField({ name: "spacing_bottom", type: "string", title: "Spacing Bottom" }),
-            defineField({ name: "spacing_left", type: "string", title: "Spacing Left" }),
-            defineField({ name: "offset_top", type: "string", title: "Offset Top" }),
-            defineField({ name: "offset_right", type: "string", title: "Offset Right" }),
-            defineField({ name: "offset_bottom", type: "string", title: "Offset Bottom" }),
-            defineField({ name: "offset_left", type: "string", title: "Offset Left" }),
-            defineField({ name: "border_color", type: "string", title: "Border Color" }),
-            defineField({ name: "border_width", type: "string", title: "Border Width" }),
-            defineField({ name: "border_style", type: "string", title: "Border Style" }),
-            defineField({ name: "border_sides", type: "string", title: "Border Sides" }),
-            defineField({ name: "border_radius", type: "string", title: "Border Radius" }),
-          ],
-        }),
-        defineField({
-          name: "phone",
-          title: "Phone",
-          type: "object",
-          fields: [
-            defineField({ name: "background_color", type: "string", title: "Background Color" }),
-            defineField({ name: "background_opacity", type: "number", title: "Background Opacity" }),
-            defineField({ name: "spacing_top", type: "string", title: "Spacing Top" }),
-            defineField({ name: "spacing_right", type: "string", title: "Spacing Right" }),
-            defineField({ name: "spacing_bottom", type: "string", title: "Spacing Bottom" }),
-            defineField({ name: "spacing_left", type: "string", title: "Spacing Left" }),
-            defineField({ name: "offset_top", type: "string", title: "Offset Top" }),
-            defineField({ name: "offset_right", type: "string", title: "Offset Right" }),
-            defineField({ name: "offset_bottom", type: "string", title: "Offset Bottom" }),
-            defineField({ name: "offset_left", type: "string", title: "Offset Left" }),
-            defineField({ name: "border_color", type: "string", title: "Border Color" }),
-            defineField({ name: "border_width", type: "string", title: "Border Width" }),
-            defineField({ name: "border_style", type: "string", title: "Border Style" }),
-            defineField({ name: "border_sides", type: "string", title: "Border Sides" }),
-            defineField({ name: "border_radius", type: "string", title: "Border Radius" }),
-          ],
-        }),
-      ],
-    }),
-  ],
-  preview: {
-    select: { section_type: "section_type" },
-    prepare({ section_type }) {
-      const labels: Record<string, string> = {
-        projectGrid: "Project Grid",
-      };
-      return { title: labels[section_type] || "Section" };
-    },
-  },
-});