@morphika/webframe 0.1.0

package/components/builder/editors/SpacerBlockEditor.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { SpacerBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: SpacerBlock;
+}
+
+const HEIGHT_PRESETS: {
+  value: SpacerBlock["height"];
+  label: string;
+  px: number;
+}[] = [
+  { value: "small", label: "S", px: 24 },
+  { value: "medium", label: "M", px: 48 },
+  { value: "large", label: "L", px: 96 },
+  { value: "xlarge", label: "XL", px: 128 },
+  { value: "custom", label: "\u2699", px: 0 },
+];
+
+export function getSpacerPx(block: SpacerBlock): number {
+  if (block.height === "custom") return block.custom_height || 48;
+  const preset = HEIGHT_PRESETS.find((p) => p.value === block.height);
+  return preset?.px || 48;
+}
+
+export default function SpacerBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block, viewport, property, value);
+      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  const effectiveHeight = getEffectiveValue<string>(
+    block, viewport, "height", block.height || "medium"
+  );
+  const effectiveCustomHeight = getEffectiveValue<number>(
+    block, viewport, "custom_height", block.custom_height || 48
+  );
+
+  const isCustom = effectiveHeight === "custom";
+  const currentPx = isCustom
+    ? effectiveCustomHeight
+    : (HEIGHT_PRESETS.find((p) => p.value === effectiveHeight)?.px || 48);
+
+  return (
+    <>
+      <ViewportBadge />
+
+      <SettingsSection title="Height" defaultOpen>
+        <ResponsiveField
+          label="Preset"
+          block={block}
+          property="height"
+          onReset={() => resetOverride("height")}
+        >
+          <div className="flex gap-1">
+            {HEIGHT_PRESETS.map((preset) => (
+              <button
+                key={preset.value}
+                onClick={() => updateResponsive("height", preset.value)}
+                className={`flex-1 rounded border py-1.5 text-xs transition-colors flex flex-col items-center gap-0.5 ${
+                  effectiveHeight === preset.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+                title={
+                  preset.value === "custom"
+                    ? "Custom height"
+                    : `${preset.px}px`
+                }
+              >
+                <span>{preset.label}</span>
+                {preset.value !== "custom" && (
+                  <span className="text-[8px] text-neutral-600">
+                    {preset.px}px
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        {isCustom && (
+          <ResponsiveField
+            label="Custom Height (px)"
+            block={block}
+            property="custom_height"
+            onReset={() => resetOverride("custom_height")}
+          >
+            <div className="flex items-center gap-2">
+              <input
+                type="range"
+                min={8}
+                max={400}
+                step={4}
+                value={effectiveCustomHeight}
+                onChange={(e) =>
+                  updateResponsive("custom_height", parseInt(e.target.value))
+                }
+                className="flex-1 accent-[#076bff]"
+              />
+              <input
+                type="number"
+                min={1}
+                max={400}
+                value={effectiveCustomHeight}
+                onChange={(e) =>
+                  updateResponsive("custom_height", Math.max(1, parseInt(e.target.value) || 1))
+                }
+                className={`w-16 ${INPUT_CLASS}`}
+              />
+            </div>
+          </ResponsiveField>
+        )}
+
+        {/* Visual ruler preview */}
+        <SettingsField label="Preview">
+          <div className="relative rounded border border-neutral-800 bg-white/50 overflow-hidden">
+            <div
+              className="relative w-full transition-all duration-200"
+              style={{ height: `${Math.min(currentPx, 200)}px` }}
+            >
+              <div className="absolute left-0 right-0 top-1/2 border-t border-dashed border-neutral-200" />
+              <div className="absolute left-2 top-0 w-px h-2 bg-[#076bff]" />
+              <div className="absolute left-2 bottom-0 w-px h-2 bg-[#076bff]" />
+              <div className="absolute left-2 top-0 bottom-0 w-px bg-[#076bff]/20" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <span className="text-xs text-neutral-500 bg-white/80 px-1.5 py-0.5 rounded">
+                  {currentPx}px
+                </span>
+              </div>
+            </div>
+            {currentPx > 200 && (
+              <div className="text-center py-1 border-t border-neutral-800">
+                <span className="text-[11px] text-neutral-600">
+                  Scaled to fit (actual: {currentPx}px)
+                </span>
+              </div>
+            )}
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/StaggerSettings.tsx

@@ -0,0 +1,108 @@
+import { SettingsSection, SettingsField } from "./shared";
+
+// ============================================
+// Types
+// ============================================
+
+export interface StaggerConfig {
+  enabled?: boolean;
+  delayPerChild?: number;
+  direction?: "left-to-right" | "right-to-left";
+}
+
+// ============================================
+// CSS constants
+// ============================================
+
+const SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+const TOGGLE_CLASS_ON =
+  "relative w-8 h-[18px] rounded-full bg-[#076bff] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[15px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+const TOGGLE_CLASS_OFF =
+  "relative w-8 h-[18px] rounded-full bg-[#d4d4d4] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+// ============================================
+// Stagger Section (row mode only)
+// ============================================
+
+export default function StaggerSettings({
+  stagger,
+  onChange,
+}: {
+  stagger?: StaggerConfig;
+  onChange: (s: StaggerConfig) => void;
+}) {
+  const enabled = stagger?.enabled ?? false;
+  const delay = stagger?.delayPerChild ?? 100;
+  const direction = stagger?.direction ?? "left-to-right";
+
+  return (
+    <SettingsSection title="Stagger Children">
+      <div className="space-y-3">
+        {/* Enable toggle */}
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-neutral-500">
+            {enabled ? "Enabled" : "Disabled"}
+          </span>
+          <button
+            type="button"
+            onClick={() => onChange({ ...stagger, enabled: !enabled })}
+            className={enabled ? TOGGLE_CLASS_ON : TOGGLE_CLASS_OFF}
+            aria-label={enabled ? "Stagger enabled" : "Stagger disabled"}
+          />
+        </div>
+
+        {enabled && (
+          <>
+            {/* Delay slider */}
+            <SettingsField label={`Delay — ${delay}ms`}>
+              <input
+                type="range"
+                min={50}
+                max={5000}
+                step={10}
+                value={delay}
+                onChange={(e) =>
+                  onChange({ ...stagger, enabled: true, delayPerChild: Number(e.target.value) })
+                }
+                className={SLIDER_CLASS}
+              />
+              <div className="flex justify-between mt-0.5">
+                <span className="text-[10px] text-neutral-400">50ms</span>
+                <span className="text-[10px] text-neutral-400">5000ms</span>
+              </div>
+            </SettingsField>
+
+            {/* Direction */}
+            <SettingsField label="Direction">
+              <div className="flex gap-1">
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "left-to-right" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "left-to-right"
+                      ? "bg-[#076bff] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  L → R
+                </button>
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "right-to-left" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "right-to-left"
+                      ? "bg-[#076bff] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  R → L
+                </button>
+              </div>
+            </SettingsField>
+          </>
+        )}
+      </div>
+    </SettingsSection>
+  );
+}

package/components/builder/editors/TextAlignmentIcons.tsx

@@ -0,0 +1,39 @@
+// ============================================
+// Alignment SVG icons for text editor
+// ============================================
+
+export function AlignLeftIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <line x1="1" y1="2.5" x2="13" y2="2.5" /><line x1="1" y1="5.5" x2="9" y2="5.5" />
+      <line x1="1" y1="8.5" x2="11" y2="8.5" /><line x1="1" y1="11.5" x2="7" y2="11.5" />
+    </svg>
+  );
+}
+
+export function AlignCenterIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <line x1="1" y1="2.5" x2="13" y2="2.5" /><line x1="3" y1="5.5" x2="11" y2="5.5" />
+      <line x1="2" y1="8.5" x2="12" y2="8.5" /><line x1="4" y1="11.5" x2="10" y2="11.5" />
+    </svg>
+  );
+}
+
+export function AlignRightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <line x1="1" y1="2.5" x2="13" y2="2.5" /><line x1="5" y1="5.5" x2="13" y2="5.5" />
+      <line x1="3" y1="8.5" x2="13" y2="8.5" /><line x1="7" y1="11.5" x2="13" y2="11.5" />
+    </svg>
+  );
+}
+
+export function AlignJustifyIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <line x1="1" y1="2.5" x2="13" y2="2.5" /><line x1="1" y1="5.5" x2="13" y2="5.5" />
+      <line x1="1" y1="8.5" x2="13" y2="8.5" /><line x1="1" y1="11.5" x2="13" y2="11.5" />
+    </svg>
+  );
+}