@morphika/webframe 0.1.0

package/components/builder/CanvasToolbar.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useRef, useState, useEffect, useCallback } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+
+// ============================================
+// CanvasToolbar — Floating mini toolbar
+// ============================================
+
+const ZOOM_PRESETS = [25, 50, 75, 100, 150, 200];
+
+interface CanvasToolbarProps {
+  /** Ref to the viewport element — needed for zoomToFit dimensions */
+  viewportRef?: React.RefObject<HTMLDivElement | null>;
+  /** Callback to trigger smooth animation on programmatic zoom/pan */
+  onAnimatedAction?: () => void;
+}
+
+export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasToolbarProps) {
+  const zoom = useBuilderStore((s) => s.canvasZoom);
+  const tool = useBuilderStore((s) => s.canvasTool);
+  const setCanvasZoom = useBuilderStore((s) => s.setCanvasZoom);
+  const setCanvasTool = useBuilderStore((s) => s.setCanvasTool);
+  const zoomToPoint = useBuilderStore((s) => s.zoomToPoint);
+  const zoomToFit = useBuilderStore((s) => s.zoomToFit);
+
+  const [showPresets, setShowPresets] = useState(false);
+  const presetsRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!showPresets) return;
+    function handleClick(e: MouseEvent) {
+      if (presetsRef.current && !presetsRef.current.contains(e.target as Node)) {
+        setShowPresets(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showPresets]);
+
+  const handleZoomIn = useCallback(() => {
+    onAnimatedAction?.();
+    const newZoom = Math.min(2, zoom + 0.1);
+    setCanvasZoom(newZoom);
+  }, [zoom, setCanvasZoom, onAnimatedAction]);
+
+  const handleZoomOut = useCallback(() => {
+    onAnimatedAction?.();
+    const newZoom = Math.max(0.1, zoom - 0.1);
+    setCanvasZoom(newZoom);
+  }, [zoom, setCanvasZoom, onAnimatedAction]);
+
+  const handleFit = useCallback(() => {
+    onAnimatedAction?.();
+    const el = viewportRef?.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      zoomToFit(rect.width, rect.height);
+    }
+  }, [viewportRef, zoomToFit, onAnimatedAction]);
+
+  const handlePresetSelect = useCallback(
+    (pct: number) => {
+      onAnimatedAction?.();
+      setCanvasZoom(pct / 100);
+      setShowPresets(false);
+    },
+    [setCanvasZoom, onAnimatedAction]
+  );
+
+  const zoomPercent = Math.round(zoom * 100);
+
+  return (
+    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-px rounded-full bg-[#1a1a1a] shadow-xl px-1 py-1"
+      style={{ userSelect: "none" }}
+    >
+      {/* Select tool */}
+      <button
+        onClick={() => setCanvasTool("select")}
+        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+          tool === "select"
+            ? "bg-white/15 text-white"
+            : "text-neutral-400 hover:text-white hover:bg-white/10"
+        }`}
+        title="Select tool (V)"
+        aria-label="Select tool"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path
+            d="M2 1L12 7L7 8L5 13L2 1Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {/* Hand tool */}
+      <button
+        onClick={() => setCanvasTool("hand")}
+        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+          tool === "hand"
+            ? "bg-white/15 text-white"
+            : "text-neutral-400 hover:text-white hover:bg-white/10"
+        }`}
+        title="Hand tool (H)"
+        aria-label="Hand tool"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+          {/* Five-finger open hand — cleaner icon */}
+          <path d="M18 11V6.5a1.5 1.5 0 0 0-3 0V11" />
+          <path d="M15 9.5V4a1.5 1.5 0 0 0-3 0v7" />
+          <path d="M12 11V5.5a1.5 1.5 0 0 0-3 0v6.5" />
+          <path d="M9 11V9a1.5 1.5 0 0 0-3 0v3c0 4.42 2.69 8 6 8h1c3.31 0 6-3.58 6-8V11" />
+        </svg>
+      </button>
+
+      {/* Divider */}
+      <div className="w-px h-5 bg-white/20 mx-1" />
+
+      {/* Zoom out */}
+      <button
+        onClick={handleZoomOut}
+        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
+        title="Zoom out (Ctrl + −)"
+        aria-label="Zoom out"
+      >
+        −
+      </button>
+
+      {/* Zoom percentage (clickable dropdown) */}
+      <div className="relative" ref={presetsRef}>
+        <button
+          onClick={() => setShowPresets((v) => !v)}
+          className="flex items-center justify-center min-w-[48px] h-8 text-white text-[11px] font-medium hover:bg-white/10 rounded-md transition-colors px-1"
+          title="Click to select zoom level"
+          aria-label="Select zoom level"
+        >
+          {zoomPercent}%
+        </button>
+
+        {showPresets && (
+          <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-[#1a1a1a] border border-white/10 rounded-lg shadow-xl overflow-hidden py-1 min-w-[80px]">
+            {ZOOM_PRESETS.map((pct) => (
+              <button
+                key={pct}
+                onClick={() => handlePresetSelect(pct)}
+                className={`w-full text-left px-3 py-1.5 text-[11px] transition-colors ${
+                  zoomPercent === pct
+                    ? "text-white bg-white/10"
+                    : "text-neutral-400 hover:text-white hover:bg-white/5"
+                }`}
+              >
+                {pct}%
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Zoom in */}
+      <button
+        onClick={handleZoomIn}
+        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
+        title="Zoom in (Ctrl + +)"
+        aria-label="Zoom in"
+      >
+        +
+      </button>
+
+      {/* Divider */}
+      <div className="w-px h-5 bg-white/20 mx-1" />
+
+      {/* Fit */}
+      <button
+        onClick={handleFit}
+        className="flex items-center justify-center w-8 h-8 rounded-full text-neutral-400 hover:text-white hover:bg-white/10 transition-colors"
+        title="Zoom to fit (Ctrl + 0)"
+        aria-label="Zoom to fit"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <rect
+            x="2"
+            y="2"
+            width="10"
+            height="10"
+            rx="1.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          />
+          <path
+            d="M5 2V0M9 2V0M5 14V12M9 14V12M0 5H2M0 9H2M12 5H14M12 9H14"
+            stroke="currentColor"
+            strokeWidth="1"
+            opacity="0.5"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/components/builder/ColorPicker.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+/**
+ * ColorPicker — Full-featured HSL color picker with hex/RGB display.
+ * Used in the Global Styles palette editor and inline block editors.
+ */
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { hexToHSL, hsvToHex, hexToHSV, isValidHex } from "../../lib/color-utils";
+
+// ─── ColorPicker Component ───
+
+interface ColorPickerProps {
+  color: string;
+  onChange: (hex: string) => void;
+  onClose?: () => void;
+  /** Label for the confirm button */
+  confirmLabel?: string;
+  /** If true, shows a compact version (no confirm/cancel buttons, live onChange) */
+  compact?: boolean;
+}
+
+export default function ColorPicker({
+  color,
+  onChange,
+  onClose,
+  confirmLabel = "Confirm",
+  compact = false,
+}: ColorPickerProps) {
+  const initHsv = hexToHSV(isValidHex(color) ? color : "#ffffff");
+  const [hue, setHue] = useState(initHsv.h);
+  const [sat, setSat] = useState(initHsv.s);
+  const [val, setVal] = useState(initHsv.v);
+  const [hex, setHex] = useState(isValidHex(color) ? color : "#ffffff");
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const hueRef = useRef<HTMLDivElement>(null);
+  const draggingCanvas = useRef(false);
+  const draggingHue = useRef(false);
+
+  // Sync hex from HSV
+  const updateHex = useCallback((h: number, s: number, v: number) => {
+    const newHex = hsvToHex(h, s, v);
+    setHex(newHex);
+    if (compact) onChange(newHex);
+  }, [compact, onChange]);
+
+  // Canvas (saturation + value) interaction
+  const handleCanvasMove = useCallback((e: React.MouseEvent | MouseEvent) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    const s = Math.round(x * 100);
+    const v = Math.round((1 - y) * 100);
+    setSat(s);
+    setVal(v);
+    updateHex(hue, s, v);
+  }, [hue, updateHex]);
+
+  // Hue slider interaction
+  const handleHueMove = useCallback((e: React.MouseEvent | MouseEvent) => {
+    const rect = hueRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const h = Math.round(x * 360);
+    setHue(h);
+    updateHex(h, sat, val);
+  }, [sat, val, updateHex]);
+
+  // Global mouse up
+  useEffect(() => {
+    const handleUp = () => {
+      draggingCanvas.current = false;
+      draggingHue.current = false;
+    };
+    const handleMove = (e: MouseEvent) => {
+      if (draggingCanvas.current) handleCanvasMove(e);
+      if (draggingHue.current) handleHueMove(e);
+    };
+    window.addEventListener("mouseup", handleUp);
+    window.addEventListener("mousemove", handleMove);
+    return () => {
+      window.removeEventListener("mouseup", handleUp);
+      window.removeEventListener("mousemove", handleMove);
+    };
+  }, [handleCanvasMove, handleHueMove]);
+
+  const handleHexInput = (v: string) => {
+    setHex(v);
+    if (isValidHex(v)) {
+      const hsv = hexToHSV(v);
+      setHue(hsv.h);
+      setSat(hsv.s);
+      setVal(hsv.v);
+      if (compact) onChange(v);
+    }
+  };
+
+  // Keyboard handlers for canvas (saturation/value) and hue slider
+  const handleCanvasKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const step = e.shiftKey ? 10 : 2;
+    let newSat = sat;
+    let newVal = val;
+    switch (e.key) {
+      case "ArrowRight": newSat = Math.min(100, sat + step); break;
+      case "ArrowLeft":  newSat = Math.max(0, sat - step); break;
+      case "ArrowUp":    newVal = Math.min(100, val + step); break;
+      case "ArrowDown":  newVal = Math.max(0, val - step); break;
+      default: return;
+    }
+    e.preventDefault();
+    setSat(newSat);
+    setVal(newVal);
+    updateHex(hue, newSat, newVal);
+  }, [sat, val, hue, updateHex]);
+
+  const handleHueKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const step = e.shiftKey ? 20 : 5;
+    let newHue = hue;
+    switch (e.key) {
+      case "ArrowRight": newHue = Math.min(360, hue + step); break;
+      case "ArrowLeft":  newHue = Math.max(0, hue - step); break;
+      default: return;
+    }
+    e.preventDefault();
+    setHue(newHue);
+    updateHex(newHue, sat, val);
+  }, [hue, sat, val, updateHex]);
+
+  const r = parseInt(hex.slice(1, 3), 16) || 0;
+  const g = parseInt(hex.slice(3, 5), 16) || 0;
+  const b = parseInt(hex.slice(5, 7), 16) || 0;
+
+  return (
+    <div className="bg-white rounded-2xl p-4 w-[260px] shadow-xl border border-neutral-200">
+      {/* Saturation/Value canvas */}
+      <div
+        ref={canvasRef}
+        role="slider"
+        tabIndex={0}
+        aria-label="Color saturation and brightness"
+        aria-valuetext={`Saturation ${sat}%, Brightness ${val}%`}
+        className="w-full h-[160px] rounded-xl cursor-crosshair relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
+        style={{
+          background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`,
+        }}
+        onMouseDown={(e) => { draggingCanvas.current = true; handleCanvasMove(e); }}
+        onKeyDown={handleCanvasKeyDown}
+      >
+        <div
+          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
+          style={{
+            left: `${sat}%`,
+            top: `${100 - val}%`,
+            transform: "translate(-50%, -50%)",
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3)",
+          }}
+        />
+      </div>
+
+      {/* Hue slider */}
+      <div
+        ref={hueRef}
+        role="slider"
+        tabIndex={0}
+        aria-label="Color hue"
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={hue}
+        aria-valuetext={`Hue ${hue} degrees`}
+        className="w-full h-3.5 rounded-full mt-3 cursor-pointer relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
+        style={{
+          background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
+        }}
+        onMouseDown={(e) => { draggingHue.current = true; handleHueMove(e); }}
+        onKeyDown={handleHueKeyDown}
+      >
+        <div
+          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
+          style={{
+            left: `${(hue / 360) * 100}%`,
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+            background: `hsl(${hue}, 100%, 50%)`,
+            boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+          }}
+        />
+      </div>
+
+      {/* Hex input */}
+      <div className="flex items-center gap-2.5 mt-3.5">
+        <div
+          className="w-8 h-8 rounded-lg border border-neutral-200 shrink-0"
+          style={{ background: hex }}
+        />
+        <input
+          value={hex.toUpperCase()}
+          onChange={(e) => handleHexInput(e.target.value)}
+          className="flex-1 bg-neutral-50 border border-neutral-200 rounded-lg px-2.5 py-1.5 text-neutral-900 text-xs font-mono outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors"
+        />
+      </div>
+
+      {/* RGB readout */}
+      <div className="flex gap-2 mt-2.5">
+        {[
+          { label: "R", val: r },
+          { label: "G", val: g },
+          { label: "B", val: b },
+        ].map(({ label, val: v }) => (
+          <div key={label} className="flex-1">
+            <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-0.5">{label}</div>
+            <div className="bg-neutral-50 border border-neutral-200 rounded-md px-2 py-1 text-neutral-600 text-[11px] text-center font-mono">
+              {v}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Buttons (non-compact mode) */}
+      {!compact && (
+        <div className="flex gap-2 mt-3.5">
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="flex-1 py-2 rounded-lg border border-neutral-200 bg-transparent text-neutral-500 text-xs font-mono cursor-pointer hover:border-neutral-300 hover:text-neutral-700 transition-colors"
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            onClick={() => { onChange(hex); onClose?.(); }}
+            className="flex-1 py-2 rounded-lg border-none bg-[#076bff] text-white text-xs font-mono font-semibold cursor-pointer hover:bg-[#0559d4] transition-colors"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Export helpers ───
+export { isValidHex, hexToHSL, hexToHSV, hsvToHex };