@morphika/webframe 0.1.0

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

@@ -0,0 +1,532 @@
+"use client";
+
+/**
+ * BlockLayoutTab — Per-block layout styling.
+ *
+ * Section order: Alignment → Spacing → Offset → Background → Border.
+ * Each section has a small visual icon next to its title.
+ *
+ * Session 78: Added Alignment section with visual icon buttons.
+ *             Reordered sections. Added section title icons.
+ * Session 82: Made viewport-aware with responsive override support.
+ *             Every property is now editable per viewport (desktop/tablet/phone).
+ *             Uses getBlockLayoutValue/setBlockLayoutOverride from responsive-helpers.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ContentBlock, BlockLayout } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  SELECT_CLASS,
+  AssetPathInput,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { TRBLInputs } from "./TRBLInputs";
+import {
+  getBlockLayoutValue,
+  hasBlockLayoutOverride,
+  setBlockLayoutOverride,
+} from "./responsive-helpers";
+
+// ── Alignment visual icon buttons ──
+
+type AlignH = "left" | "center" | "right";
+type AlignV = "top" | "center" | "bottom";
+
+function HAlignIcon({ value, size = 18 }: { value: AlignH; size?: number }) {
+  // Horizontal lines aligned left/center/right inside a box
+  const w = size;
+  const h = size;
+  const pad = 3;
+  const barH = 2.5;
+  const gap = 1.5;
+  const maxW = w - pad * 2;
+
+  const bars = [
+    { w: maxW * 0.9, y: pad + 1 },
+    { w: maxW * 0.55, y: pad + 1 + barH + gap },
+    { w: maxW * 0.75, y: pad + 1 + (barH + gap) * 2 },
+  ];
+
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
+      {bars.map((bar, i) => {
+        let x = pad;
+        if (value === "center") x = (w - bar.w) / 2;
+        else if (value === "right") x = w - pad - bar.w;
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={bar.y}
+            width={bar.w}
+            height={barH}
+            rx={1}
+            fill="currentColor"
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+function VAlignIcon({ value, size = 18 }: { value: AlignV; size?: number }) {
+  const w = size;
+  const h = size;
+  const pad = 3;
+  const barW = w - pad * 2;
+  const barH = 3;
+
+  // Position of a single bar within the vertical space
+  let y = pad;
+  if (value === "center") y = (h - barH) / 2;
+  else if (value === "bottom") y = h - pad - barH;
+
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
+      {/* Container outline */}
+      <rect
+        x={pad - 0.5}
+        y={pad - 0.5}
+        width={barW + 1}
+        height={h - pad * 2 + 1}
+        rx={1.5}
+        stroke="currentColor"
+        strokeWidth={0.8}
+        opacity={0.3}
+        fill="none"
+      />
+      {/* Bar at position */}
+      <rect
+        x={pad + 1}
+        y={y}
+        width={barW - 2}
+        height={barH}
+        rx={1}
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function AlignmentButtons<T extends string>({
+  options,
+  value,
+  onChange,
+  renderIcon,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  renderIcon: (v: T) => React.ReactNode;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const isActive = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            title={opt.label}
+            onClick={() => onChange(opt.value)}
+            className={`flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
+              isActive
+                ? "bg-[#076bff]/10 border-[#076bff]/30 text-[#076bff]"
+                : "bg-[#f5f5f5] border-transparent text-neutral-400 hover:bg-[#efefef] hover:text-neutral-600"
+            }`}
+          >
+            {renderIcon(opt.value)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Section title icons (small, inline) ──
+
+function AlignmentSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1" y="2" width="9" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
+      <rect x="3" y="6" width="8" height="2" rx="0.5" fill="currentColor" opacity="0.5" />
+      <rect x="2" y="10" width="10" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
+    </svg>
+  );
+}
+
+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>
+  );
+}
+
+// ── Override indicator badge ──
+
+function OverrideBadge({
+  block,
+  viewport,
+  properties,
+  onReset,
+}: {
+  block: ContentBlock;
+  viewport: string;
+  properties: (keyof BlockLayout)[];
+  onReset: () => void;
+}) {
+  if (viewport === "desktop") return null;
+  const hasAny = properties.some((p) => hasBlockLayoutOverride(block, viewport as "tablet" | "phone", p));
+  if (hasAny) {
+    return (
+      <div className="flex items-center gap-2 mt-1">
+        <span className="text-[9px] text-[#076bff]">overridden</span>
+        <button
+          onClick={onReset}
+          className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+        >
+          Reset
+        </button>
+      </div>
+    );
+  }
+  return <p className="text-[9px] text-neutral-300 italic mt-1">inherited</p>;
+}
+
+// ── Main component ──
+
+export function BlockLayoutTab({ block }: { block: ContentBlock }) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const activeViewport = store.activeViewport;
+
+  /** Update a block layout property, viewport-aware */
+  const updateLayout = (property: keyof BlockLayout, value: unknown) => {
+    const updates = setBlockLayoutOverride(block, activeViewport, property, value);
+    store.updateBlock(block._key, updates);
+  };
+
+  /** Reset all layout overrides for a group of properties */
+  const resetGroup = (properties: (keyof BlockLayout)[]) => {
+    store._pushSnapshot();
+    // Accumulate resets by setting each property to undefined
+    let accumulated = block;
+    for (const prop of properties) {
+      const u = setBlockLayoutOverride(accumulated, activeViewport, prop, undefined);
+      accumulated = { ...accumulated, ...u } as ContentBlock;
+    }
+    const responsive = (accumulated as unknown as Record<string, unknown>).responsive;
+    store.updateBlock(block._key, { responsive } as unknown as Partial<ContentBlock>);
+  };
+
+  // Effective values per viewport
+  const bgOpacity = getBlockLayoutValue<number>(block, activeViewport, "background_opacity", 100);
+  const alignH: AlignH = getBlockLayoutValue<string>(block, activeViewport, "align_h", "left") as AlignH;
+  const alignV: AlignV = getBlockLayoutValue<string>(block, activeViewport, "align_v", "top") as AlignV;
+
+  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>
+      )}
+
+      {/* Alignment */}
+      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentSectionIcon />}>
+        <SettingsField label="Horizontal">
+          <AlignmentButtons<AlignH>
+            options={[
+              { value: "left", label: "Left" },
+              { value: "center", label: "Center" },
+              { value: "right", label: "Right" },
+            ]}
+            value={alignH}
+            onChange={(v) => {
+              store._pushSnapshot();
+              updateLayout("align_h", v);
+            }}
+            renderIcon={(v) => <HAlignIcon value={v} />}
+          />
+        </SettingsField>
+
+        <SettingsField label="Vertical">
+          <AlignmentButtons<AlignV>
+            options={[
+              { value: "top", label: "Top" },
+              { value: "center", label: "Center" },
+              { value: "bottom", label: "Bottom" },
+            ]}
+            value={alignV}
+            onChange={(v) => {
+              store._pushSnapshot();
+              updateLayout("align_v", v);
+            }}
+            renderIcon={(v) => <VAlignIcon value={v} />}
+          />
+        </SettingsField>
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["align_h", "align_v"]}
+          onReset={() => resetGroup(["align_h", "align_v"])}
+        />
+      </SettingsSection>
+
+      {/* Spacing (Padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+        <TRBLInputs
+          top={getBlockLayoutValue<string>(block, activeViewport, "spacing_top", "0")}
+          right={getBlockLayoutValue<string>(block, activeViewport, "spacing_right", "0")}
+          bottom={getBlockLayoutValue<string>(block, activeViewport, "spacing_bottom", "0")}
+          left={getBlockLayoutValue<string>(block, activeViewport, "spacing_left", "0")}
+          onChange={(field, value) => {
+            updateLayout(`spacing_${field}` as keyof BlockLayout, value);
+          }}
+        />
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"]}
+          onReset={() => resetGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
+        />
+      </SettingsSection>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+        <TRBLInputs
+          top={getBlockLayoutValue<string>(block, activeViewport, "offset_top", "0")}
+          right={getBlockLayoutValue<string>(block, activeViewport, "offset_right", "0")}
+          bottom={getBlockLayoutValue<string>(block, activeViewport, "offset_bottom", "0")}
+          left={getBlockLayoutValue<string>(block, activeViewport, "offset_left", "0")}
+          onChange={(field, value) => {
+            updateLayout(`offset_${field}` as keyof BlockLayout, value);
+          }}
+        />
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["offset_top", "offset_right", "offset_bottom", "offset_left"]}
+          onReset={() => resetGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
+        />
+      </SettingsSection>
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getBlockLayoutValue<string>(block, activeViewport, "background_color", "")}
+            onChange={(hex) => {
+              store._pushSnapshot();
+              updateLayout("background_color", hex);
+            }}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={bgOpacity}
+              onChange={(e) => updateLayout("background_opacity", parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {bgOpacity}%
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Image">
+          <AssetPathInput
+            value={getBlockLayoutValue<string>(block, activeViewport, "background_image", "")}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(v) => updateLayout("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getBlockLayoutValue<string>(block, activeViewport, "background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getBlockLayoutValue<string>(block, activeViewport, "background_size", "cover")}
+                onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "background_position", "center center")}
+                onChange={(e) => updateLayout("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>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Repeat">
+              <select
+                value={getBlockLayoutValue<string>(block, activeViewport, "background_repeat", "no-repeat")}
+                onChange={(e) => updateLayout("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>
+          </>
+        )}
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"]}
+          onReset={() => resetGroup(["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"])}
+        />
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getBlockLayoutValue<string>(block, activeViewport, "border_color", "")}
+            onChange={(hex) => {
+              store._pushSnapshot();
+              updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_width", "0"))}
+              onChange={(e) => updateLayout("border_width", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getBlockLayoutValue<string>(block, activeViewport, "border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getBlockLayoutValue<string>(block, activeViewport, "border_style", "none")}
+            onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "border_sides", "all")}
+            onChange={(e) => updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0"))}
+              onChange={(e) => updateLayout("border_radius", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["border_color", "border_width", "border_style", "border_sides", "border_radius"]}
+          onReset={() => resetGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
+        />
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+/**
+ * BlockSettings — Delegates to type-specific block editors.
+ *
+ * Session 64: Extracted from SettingsPanel.tsx.
+ */
+
+import type { ContentBlock } from "../../../lib/sanity/types";
+import {
+  TextBlockEditor,
+  ImageBlockEditor,
+  ImageGridBlockEditor,
+  VideoBlockEditor,
+  SpacerBlockEditor,
+  ButtonBlockEditor,
+  CoverBlockEditor,
+  ProjectGridEditor,
+} from "../editors";
+
+export default function BlockSettings({
+  block,
+}: {
+  block: ContentBlock;
+}) {
+  return <BlockTypeEditor block={block} />;
+}
+
+// ============================================
+// Block Type Editor Router
+// ============================================
+
+function BlockTypeEditor({ block }: { block: ContentBlock }) {
+  switch (block._type) {
+    case "textBlock":
+      return (
+        <TextBlockEditor
+          block={block as import("@/lib/sanity/types").TextBlock}
+        />
+      );
+    case "imageBlock":
+      return (
+        <ImageBlockEditor
+          block={block as import("@/lib/sanity/types").ImageBlock}
+        />
+      );
+    case "imageGridBlock":
+      return (
+        <ImageGridBlockEditor
+          block={block as import("@/lib/sanity/types").ImageGridBlock}
+        />
+      );
+    case "videoBlock":
+      return (
+        <VideoBlockEditor
+          block={block as import("@/lib/sanity/types").VideoBlock}
+        />
+      );
+    case "spacerBlock":
+      return (
+        <SpacerBlockEditor
+          block={block as import("@/lib/sanity/types").SpacerBlock}
+        />
+      );
+    case "buttonBlock":
+      return (
+        <ButtonBlockEditor
+          block={block as import("@/lib/sanity/types").ButtonBlock}
+        />
+      );
+    case "coverBlock":
+      return (
+        <CoverBlockEditor
+          block={block as import("@/lib/sanity/types").CoverBlock}
+        />
+      );
+    case "projectGridBlock":
+      return (
+        <ProjectGridEditor
+          block={block as import("@/lib/sanity/types").ProjectGridBlock}
+        />
+      );
+    default:
+      return (
+        <div className="p-4">
+          <div className="rounded-lg bg-[#f5f5f5] p-3">
+            <p className="text-xs text-neutral-400">
+              No editor available for this block type.
+            </p>
+          </div>
+        </div>
+      );
+  }
+}