@morphika/webframe 0.1.0

package/components/builder/editors/VideoBlockEditor.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { VideoBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+  AssetPathInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+  SELECT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: VideoBlock;
+}
+
+/**
+ * Extract embed ID from Vimeo or YouTube URLs.
+ */
+function extractEmbedId(
+  url: string,
+  type: string
+): { id: string; valid: boolean } {
+  if (!url) return { id: "", valid: false };
+
+  if (type === "vimeo") {
+    const match = url.match(
+      /(?:vimeo\.com\/(?:video\/)?|player\.vimeo\.com\/video\/)(\d+)/
+    );
+    return match ? { id: match[1], valid: true } : { id: url, valid: false };
+  }
+
+  if (type === "youtube") {
+    const match = url.match(
+      /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+    );
+    return match ? { id: match[1], valid: true } : { id: url, valid: false };
+  }
+
+  return { id: url, valid: !!url };
+}
+
+export default function VideoBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  // Responsive-aware update for layout/appearance properties
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  // Direct update (base block, not responsive)
+  const update = (updates: Partial<VideoBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<VideoBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  // Effective values for the active viewport
+  const effectiveWidth = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "width", block.width || "full"
+  );
+  const effectiveAspect = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "aspect_ratio", block.aspect_ratio || "16:9"
+  );
+
+  const embed = extractEmbedId(block.url_or_path || "", block.video_type);
+
+  return (
+    <>
+      <ViewportBadge />
+
+      <SettingsSection title="Source" defaultOpen>
+        <SettingsField label="Video Type">
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "vimeo", label: "Vimeo" },
+                { value: "youtube", label: "YouTube" },
+                { value: "mp4", label: "MP4" },
+                { value: "url", label: "URL" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => update({ video_type: opt.value })}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  (block.video_type || "vimeo") === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField
+          label="URL / Path"
+          hint={
+            block.video_type === "vimeo"
+              ? "Paste Vimeo URL or video ID"
+              : block.video_type === "youtube"
+                ? "Paste YouTube URL or video ID"
+                : block.video_type === "mp4"
+                  ? "Relative path from seed URL"
+                  : "Direct video URL"
+          }
+        >
+          {block.video_type === "mp4" ? (
+            <AssetPathInput
+              value={block.url_or_path || ""}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => updateDebounced({ url_or_path: v })}
+              placeholder="projects/slug/video.mp4"
+              filterType="video"
+            />
+          ) : (
+            <input
+              type="text"
+              value={block.url_or_path || ""}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => updateDebounced({ url_or_path: e.target.value })}
+              className={INPUT_CLASS}
+              placeholder="https://vimeo.com/..."
+            />
+          )}
+        </SettingsField>
+
+        {/* URL validation indicator */}
+        {block.url_or_path && (block.video_type === "vimeo" || block.video_type === "youtube") && (
+          <div className="flex items-center gap-1.5">
+            <div
+              className={`w-1.5 h-1.5 rounded-full ${
+                embed.valid ? "bg-[var(--admin-success)]" : "bg-[var(--admin-error)]"
+              }`}
+            />
+            <span className="text-[11px] text-neutral-600">
+              {embed.valid
+                ? `ID: ${embed.id}`
+                : "Could not extract video ID"}
+            </span>
+          </div>
+        )}
+
+        <SettingsField label="Poster Image" hint="Shown before video plays">
+          <AssetPathInput
+            value={block.poster || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ poster: v })}
+            placeholder="projects/slug/poster.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      <SettingsSection title="Layout">
+        <ResponsiveField
+          label="Width"
+          block={block as ContentBlock}
+          property="width"
+          onReset={() => resetOverride("width")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "full", label: "Full" },
+                { value: "contained", label: "Contained" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateResponsive("width", opt.value)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveWidth === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Aspect Ratio"
+          block={block as ContentBlock}
+          property="aspect_ratio"
+          onReset={() => resetOverride("aspect_ratio")}
+        >
+          <select
+            value={effectiveAspect}
+            onChange={(e) =>
+              updateResponsive("aspect_ratio", e.target.value)
+            }
+            className={SELECT_CLASS}
+          >
+            <option value="16:9">16:9</option>
+            <option value="21:9">21:9</option>
+            <option value="4:3">4:3</option>
+            <option value="auto">Auto</option>
+          </select>
+        </ResponsiveField>
+      </SettingsSection>
+
+      <SettingsSection title="Appearance">
+        <ResponsiveField
+          label="Border Radius"
+          block={block as ContentBlock}
+          property="border_radius"
+          onReset={() => resetOverride("border_radius")}
+        >
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              value={String(getEffectiveValue<string>(block as ContentBlock, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                store._pushSnapshot();
+                updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
+              }}
+              className={INPUT_CLASS}
+              placeholder="0"
+              min={0}
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">px</span>
+          </div>
+        </ResponsiveField>
+      </SettingsSection>
+
+      <SettingsSection title="Playback">
+        <div className="space-y-1.5">
+          <StyledCheckbox
+            label="Autoplay"
+            checked={block.autoplay || false}
+            onChange={(checked) => update({ autoplay: checked })}
+          />
+          <StyledCheckbox
+            label="Loop"
+            checked={block.loop || false}
+            onChange={(checked) => update({ loop: checked })}
+          />
+          <StyledCheckbox
+            label="Muted"
+            checked={block.muted !== false}
+            onChange={(checked) => update({ muted: checked })}
+          />
+          <StyledCheckbox
+            label="Show Controls"
+            checked={block.controls !== false}
+            onChange={(checked) => update({ controls: checked })}
+          />
+        </div>
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/index.ts

@@ -0,0 +1,10 @@
+export { default as TextBlockEditor } from "./TextBlockEditor";
+export { default as ImageBlockEditor } from "./ImageBlockEditor";
+export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
+export { default as VideoBlockEditor } from "./VideoBlockEditor";
+export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
+export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
+export { default as CoverBlockEditor } from "./CoverBlockEditor";
+export { default as ProjectGridEditor } from "./ProjectGridEditor";
+export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
+export { getSpacerPx } from "./SpacerBlockEditor";

package/components/builder/editors/shared.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { hasOverride } from "../../../lib/builder/responsive";
+import type { DeviceViewport } from "../../../lib/builder/types";
+import type { ContentBlock } from "../../../lib/sanity/types";
+import AssetBrowser from "../AssetBrowser";
+
+// ============================================
+// Shared CSS classes — Framer-style design system
+// ============================================
+
+/** Base input class: gray bg, no border, border on focus */
+const INPUT_CLASS =
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal 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)]";
+
+/** Select class — same as input */
+const SELECT_CLASS =
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal 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)]";
+
+// ============================================
+// Hooks
+// ============================================
+
+/**
+ * Hook to get the active viewport from the builder store.
+ */
+export function useActiveViewport(): DeviceViewport {
+  return useBuilderStore((s) => s.activeViewport);
+}
+
+// ============================================
+// Viewport Badge
+// ============================================
+
+/**
+ * Badge that shows when editing non-desktop viewport settings.
+ */
+export function ViewportBadge() {
+  const viewport = useActiveViewport();
+  if (viewport === "desktop") return null;
+
+  const labels: Record<string, string> = {
+    tablet: "Tablet",
+    phone: "Phone",
+  };
+
+  return (
+    <div className="flex items-center gap-1.5 px-3 py-1.5 mb-2 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+      <span className="text-[11px] font-medium text-[#076bff]">
+        Editing {labels[viewport]} overrides
+      </span>
+    </div>
+  );
+}
+
+// ============================================
+// Responsive Field
+// ============================================
+
+/**
+ * Wrapper for a responsive field that shows inherited/overridden state.
+ */
+export function ResponsiveField({
+  label,
+  block,
+  property,
+  children,
+  hint,
+  onReset,
+}: {
+  label: string;
+  block: ContentBlock;
+  property: string;
+  children: ReactNode;
+  hint?: string;
+  onReset?: () => void;
+}) {
+  const viewport = useActiveViewport();
+  const isOverridden = viewport !== "desktop" && hasOverride(block, viewport, property);
+
+  return (
+    <div className="flex items-start gap-3 mb-2 last:mb-0">
+      <label className="text-[11px] text-neutral-400 w-[68px] min-w-[68px] shrink-0 pt-[7px] leading-tight">
+        {label}
+        {viewport !== "desktop" && !isOverridden && (
+          <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
+        )}
+        {isOverridden && (
+          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+        )}
+      </label>
+      <div className="flex-1 min-w-0">
+        {children}
+        {hint && (
+          <p className="text-[10px] text-neutral-400 mt-1">{hint}</p>
+        )}
+        {isOverridden && onReset && (
+          <button
+            onClick={onReset}
+            className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors mt-0.5"
+          >
+            Reset
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Settings Field — Framer inline layout
+// ============================================
+
+/**
+ * Reusable settings field: label left (68px), control right.
+ * If no label provided, control takes full width.
+ */
+export function SettingsField({
+  label,
+  children,
+  hint,
+}: {
+  label?: ReactNode;
+  children: ReactNode;
+  hint?: string;
+}) {
+  if (!label) {
+    return (
+      <div className="mb-2 last:mb-0">
+        {children}
+        {hint && <p className="text-[10px] text-neutral-400 mt-1">{hint}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 mb-2 last:mb-0">
+      <label className="text-[11px] text-neutral-400 w-[68px] min-w-[68px] shrink-0">
+        {label}
+      </label>
+      <div className="flex-1 min-w-0">
+        {children}
+        {hint && <p className="text-[10px] text-neutral-400 mt-1">{hint}</p>}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Settings Section — Framer collapsible
+// ============================================
+
+/**
+ * Collapsible section: clean text header + thin border separator.
+ * No gray background, no uppercase.
+ */
+export function SettingsSection({
+  title,
+  children,
+  defaultOpen = true,
+  icon,
+}: {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  icon?: ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-[#f0f0f0] last:border-b-0">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-4 py-3 transition-colors hover:bg-[#fafafa] group"
+      >
+        <span className="flex items-center gap-1.5 text-xs font-medium text-neutral-900">
+          {icon && <span className="text-neutral-400 flex-shrink-0">{icon}</span>}
+          {title}
+        </span>
+        <span className="text-base text-neutral-300 font-light leading-none transition-colors group-hover:text-neutral-500">
+          {isOpen ? "−" : "+"}
+        </span>
+      </button>
+      {isOpen && (
+        <div className="px-4 pb-3.5 space-y-0">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Styled Select
+// ============================================
+
+export function StyledSelect({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={SELECT_CLASS}
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ============================================
+// Styled Input
+// ============================================
+
+export function StyledInput({
+  value,
+  onChange,
+  onFocus,
+  placeholder,
+  type = "text",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  onFocus?: () => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onFocus={onFocus}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={INPUT_CLASS}
+    />
+  );
+}
+
+// ============================================
+// Styled Checkbox
+// ============================================
+
+export function StyledCheckbox({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-3 mb-2 last:mb-0 cursor-pointer group">
+      <span className="text-[11px] text-neutral-400 w-[68px] min-w-[68px] shrink-0">
+        {label}
+      </span>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => onChange(!checked)}
+          className={`relative w-8 h-[18px] rounded-full transition-colors ${
+            checked ? "bg-[#076bff]" : "bg-neutral-200 group-hover:bg-neutral-300"
+          }`}
+        >
+          <span
+            className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow-sm transition-transform ${
+              checked ? "left-[16px]" : "left-[2px]"
+            }`}
+          />
+        </button>
+      </div>
+    </label>
+  );
+}
+
+// ============================================
+// Asset Path Input
+// ============================================
+
+export function AssetPathInput({
+  value,
+  onChange,
+  onFocus,
+  placeholder,
+  filterType = "all",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  onFocus?: () => void;
+  placeholder?: string;
+  filterType?: "image" | "video" | "all";
+}) {
+  const [browserOpen, setBrowserOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex gap-1.5">
+        <input
+          type="text"
+          value={value}
+          onFocus={onFocus}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder || "projects/slug/file.jpg"}
+          className={`flex-1 min-w-0 ${INPUT_CLASS}`}
+        />
+        <button
+          type="button"
+          onClick={() => setBrowserOpen(true)}
+          className="shrink-0 rounded-lg bg-[#f5f5f5] px-2.5 py-[7px] text-[11px] text-neutral-500 hover:text-neutral-900 hover:bg-[#efefef] transition-colors"
+          title="Browse assets"
+        >
+          Browse
+        </button>
+      </div>
+      <AssetBrowser
+        open={browserOpen}
+        onSelect={(path) => {
+          onChange(path);
+          setBrowserOpen(false);
+        }}
+        onClose={() => setBrowserOpen(false)}
+        filterType={filterType}
+      />
+    </>
+  );
+}
+
+// ============================================
+// Export input class for editors that need raw classes
+// ============================================
+
+export { INPUT_CLASS, SELECT_CLASS };