@morphika/andami 0.1.10 → 0.2.0

package/components/blocks/SectionRenderer.tsx

@@ -1,171 +0,0 @@
-"use client";
-
-/**
- * SectionRenderer — renders a first-class PageSection on the public site.
- *
- * Unlike V2 sections (which have columns → blocks), SectionRenderer
- * renders the section block directly — no row/column wrapper needed.
- *
- * Session 76: Created as part of the matryoshka → first-class section refactor.
- * Session 120: Updated for new enter animation system.
- */
-
-import type { PageSection, SectionBlock } from "../../lib/sanity/types";
-import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
-import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
-import BlockRenderer from "./BlockRenderer";
-import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getRowLayoutStyles, hexToRgba } from "../../lib/builder/layout-styles";
-import { colorToOverrideRule, borderColorToOverrideRule, parseColorField } from "../../lib/color-utils";
-import type { ColorField } from "../../lib/sanity/types";
-import { BREAKPOINTS } from "../../lib/builder/constants";
-
-/**
- * BUG-013 fix: Build responsive CSS overrides for section layout settings.
- * Same approach as RowRenderer's buildRowResponsiveCss.
- */
-function buildSectionResponsiveCss(section: PageSection): string | null {
-  const responsive = section.responsive;
-  if (!responsive) return null;
-
-  const key = section._key;
-  const cssRules: string[] = [];
-
-  for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
-    const overrides = responsive[vp];
-    if (!overrides) continue;
-    const rules: string[] = [];
-
-    // px-value properties
-    const pxMap: Record<string, string> = {
-      spacing_top: "padding-top", spacing_right: "padding-right",
-      spacing_bottom: "padding-bottom", spacing_left: "padding-left",
-      offset_top: "margin-top", offset_right: "margin-right",
-      offset_bottom: "margin-bottom", offset_left: "margin-left",
-      border_radius: "border-radius",
-    };
-
-    for (const [field, cssProp] of Object.entries(pxMap)) {
-      const val = overrides[field as keyof typeof overrides];
-      if (val !== undefined && val !== null && val !== "") {
-        rules.push(`${cssProp}:${val}px!important`);
-      }
-    }
-
-    // Border width — side-aware
-    if (overrides.border_width !== undefined && overrides.border_width !== null && overrides.border_width !== "") {
-      const bw = overrides.border_width;
-      const sides = (overrides.border_sides as string) || "all";
-      switch (sides) {
-        case "top":
-          rules.push(`border-top-width:${bw}px!important`);
-          break;
-        case "right":
-          rules.push(`border-right-width:${bw}px!important`);
-          break;
-        case "bottom":
-          rules.push(`border-bottom-width:${bw}px!important`);
-          break;
-        case "left":
-          rules.push(`border-left-width:${bw}px!important`);
-          break;
-        case "top-bottom":
-          rules.push(`border-top-width:${bw}px!important`);
-          rules.push(`border-bottom-width:${bw}px!important`);
-          break;
-        case "left-right":
-          rules.push(`border-left-width:${bw}px!important`);
-          rules.push(`border-right-width:${bw}px!important`);
-          break;
-        default:
-          rules.push(`border-width:${bw}px!important`);
-          break;
-      }
-    }
-
-    // Border color (supports solid + gradients via ColorField bridge)
-    if (overrides.border_color) {
-      rules.push(borderColorToOverrideRule(parseColorField(overrides.border_color)));
-    }
-
-    // Border style
-    if (overrides.border_style && overrides.border_style !== "none") {
-      rules.push(`border-style:${overrides.border_style}!important`);
-    }
-
-    // Background color + opacity (gradient-safe via ColorField bridge)
-    if (overrides.background_color) {
-      const opacity = overrides.background_opacity as number | undefined;
-      rules.push(colorToOverrideRule(
-        parseColorField(overrides.background_color),
-        opacity
-      ));
-    }
-
-    // Background image + sub-properties
-    if (overrides.background_image) {
-      const imgUrl = process.env.NEXT_PUBLIC_ASSET_BASE_URL
-        ? `${(process.env.NEXT_PUBLIC_ASSET_BASE_URL as string).replace(/\/$/, "")}/${overrides.background_image}`
-        : overrides.background_image;
-      rules.push(`background-image:url(${imgUrl})!important`);
-      rules.push(`background-size:${overrides.background_size || "cover"}!important`);
-      rules.push(`background-position:${overrides.background_position || "center center"}!important`);
-      rules.push(`background-repeat:${overrides.background_repeat || "no-repeat"}!important`);
-    } else {
-      if (overrides.background_size) rules.push(`background-size:${overrides.background_size}!important`);
-      if (overrides.background_position) rules.push(`background-position:${overrides.background_position}!important`);
-      if (overrides.background_repeat) rules.push(`background-repeat:${overrides.background_repeat}!important`);
-    }
-
-    if (rules.length > 0) {
-      cssRules.push(`@media(max-width:${breakpoint}px){.section-${key}{${rules.join(";")}}}`);
-    }
-  }
-
-  return cssRules.length > 0 ? cssRules.join("") : null;
-}
-
-interface SectionRendererProps {
-  section: PageSection;
-  /** Page-level enter animation config (from page_settings.enter_animation) */
-  pageEnterAnimation?: EnterAnimationConfig;
-}
-
-export default function SectionRenderer({ section, pageEnterAnimation }: SectionRendererProps) {
-  const s = section.settings ?? {};
-
-  // Get the section block
-  const block = Array.isArray(section.block) ? section.block[0] : undefined;
-  if (!block) return null;
-
-  // Resolve enter animation (section settings → page default → none)
-  const sectionEnterConfig = s.enter_animation;
-  const resolvedEnter = resolveEnterAnimation(undefined, undefined, sectionEnterConfig, pageEnterAnimation);
-  const hasAnimation = resolvedEnter !== null && resolvedEnter.preset !== "none";
-
-  // Section layout styles (background, spacing, border, etc.)
-  const layoutStyles = getRowLayoutStyles(s as Record<string, unknown>);
-
-  // BUG-013 fix: build responsive CSS overrides for section
-  const responsiveCss = buildSectionResponsiveCss(section);
-
-  // Render the section block directly — no columns, no grid
-  // V1 PageSections contain section blocks (ProjectGrid, Parallax) which
-  // don't use the block-level enter/hover cascade — they have their own systems.
-  let content: React.ReactNode = (
-    <section className={`section-${section._key}`} style={layoutStyles}>
-      {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
-      <BlockRenderer block={block} pageEnterAnimation={pageEnterAnimation} sectionEnterAnimation={sectionEnterConfig} />
-    </section>
-  );
-
-  if (hasAnimation && resolvedEnter) {
-    content = (
-      <EnterAnimationWrapper config={resolvedEnter}>
-        {content}
-      </EnterAnimationWrapper>
-    );
-  }
-
-  return content;
-}

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

@@ -1,346 +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 (centralized colored icons — Session 163) ──
-import {
-  SpacingIcon,
-  OffsetIcon,
-  BackgroundIcon,
-  BorderIcon,
-} from "../editors/section-icons";
-
-/**
- * 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={<SpacingIcon />}>
-        <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={<OffsetIcon />}>
-        <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={<BackgroundIcon />}>
-        <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={<BorderIcon />}>
-        <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" };
-    },
-  },
-});