@snowcone-app/ui 0.1.43 → 0.2.0

package/src/composed/Lightbox.index.ts

@@ -0,0 +1,2 @@
+export { Lightbox } from "./Lightbox";
+export type { LightboxProps } from "./Lightbox";

package/src/composed/Lightbox.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import React, { useState, useEffect, useRef, type ComponentType } from "react";
+import { X as LucideX, Plus as LucidePlus, Minus as LucideMinus } from "lucide-react";
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string; size?: number; strokeWidth?: number; "aria-hidden"?: boolean | "true" | "false" };
+const XIcon = LucideX as ComponentType<IconProps>;
+const PlusIcon = LucidePlus as ComponentType<IconProps>;
+const MinusIcon = LucideMinus as ComponentType<IconProps>;
+
+export interface LightboxProps {
+  imageUrl: string;
+  alt?: string;
+  onClose: () => void;
+  className?: string;
+}
+
+export function Lightbox({
+  imageUrl,
+  alt = "Lightbox image",
+  onClose,
+  className,
+}: LightboxProps) {
+  const [isZoomed, setIsZoomed] = useState(false);
+  const [origin, setOrigin] = useState({ x: 50, y: 50 });
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+  const [showCursor, setShowCursor] = useState(false);
+  const [isHoveringImage, setIsHoveringImage] = useState(false);
+  const [announcement, setAnnouncement] = useState("");
+  const imageRef = useRef<HTMLImageElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
+
+  // Focus management - trap focus and restore on close
+  useEffect(() => {
+    // Save the previously focused element
+    previousActiveElementRef.current = document.activeElement as HTMLElement;
+
+    // Focus close button on mount
+    closeButtonRef.current?.focus();
+    setAnnouncement("Image opened in lightbox. Press plus to zoom in, minus to zoom out, Escape to close.");
+
+    // Restore focus on unmount
+    return () => {
+      if (previousActiveElementRef.current && typeof previousActiveElementRef.current.focus === 'function') {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (isZoomed) {
+          setIsZoomed(false);
+          setOrigin({ x: 50, y: 50 });
+          setAnnouncement("Zoomed out");
+        } else {
+          onClose();
+        }
+      } else if (e.key === "+" || e.key === "=") {
+        // Zoom in with + or =
+        e.preventDefault();
+        setIsZoomed(true);
+        setAnnouncement("Zoomed in to 200%");
+      } else if (e.key === "-" || e.key === "_") {
+        // Zoom out with -
+        e.preventDefault();
+        setIsZoomed(false);
+        setOrigin({ x: 50, y: 50 });
+        setAnnouncement("Zoomed out to 100%");
+      } else if (e.key === "Tab") {
+        // Trap focus - try to focus close button, fallback to document body if unavailable
+        e.preventDefault();
+        if (closeButtonRef.current) {
+          closeButtonRef.current.focus();
+        } else {
+          // Fallback: allow focus to escape to body to prevent focus trap deadlock
+          (document.activeElement as HTMLElement)?.blur();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isZoomed, onClose]);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+
+    if (!isZoomed) {
+      setOrigin({ x, y });
+    }
+    setIsZoomed(!isZoomed);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Update cursor position
+    setCursorPos({ x: e.clientX, y: e.clientY });
+
+    if (!isZoomed) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    setOrigin({ x, y });
+  };
+
+  const handleMouseEnter = () => setShowCursor(true);
+  const handleMouseLeave = () => setShowCursor(false);
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 bg-background flex items-center justify-center ${
+        className || ""
+      }`}
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image lightbox"
+    >
+      {/* Screen reader announcements */}
+      <div className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </div>
+
+      {/* Instructions for screen readers */}
+      <div className="sr-only">
+        Use plus and minus keys to zoom. Press Escape to close.
+      </div>
+
+      {/* Close button with white circle and border */}
+      <button
+        ref={closeButtonRef}
+        onClick={onClose}
+        className="absolute top-6 right-6 w-12 h-12 bg-background border border-border rounded-avatar flex items-center justify-center z-10 hover:bg-muted cursor-pointer"
+        aria-label="Close lightbox (Escape)"
+      >
+        <XIcon
+          size={16}
+          className="text-foreground"
+          strokeWidth={2}
+          aria-hidden="true"
+        />
+      </button>
+
+      {/* Image container - maximized for full viewport */}
+      <div
+        className="relative w-full h-full overflow-hidden flex items-center justify-center p-4 select-none"
+        onClick={(e) => {
+          // Close if clicking outside the image
+          e.stopPropagation();
+          onClose();
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          cursor: isHoveringImage ? (isZoomed ? "zoom-out" : "zoom-in") : "default",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+        }}
+      >
+        <img
+          ref={imageRef}
+          src={imageUrl}
+          alt={alt}
+          crossOrigin="anonymous"
+          className="max-w-[95vw] max-h-[95vh] w-auto h-auto object-contain transition-transform duration-300"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleClick(e);
+          }}
+          onMouseEnter={() => setIsHoveringImage(true)}
+          onMouseLeave={() => setIsHoveringImage(false)}
+          style={{
+            transform: isZoomed ? "scale(2)" : "scale(1)",
+            transformOrigin: `${origin.x}% ${origin.y}%`,
+            userSelect: "none",
+            WebkitUserSelect: "none",
+          }}
+          draggable={false}
+        />
+      </div>
+
+      {/* Custom cursor that follows mouse */}
+      {showCursor && (
+        <div
+          className="fixed pointer-events-none z-50"
+          style={{
+            left: cursorPos.x,
+            top: cursorPos.y,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <div className="bg-background rounded-avatar p-2 shadow-lg">
+            {!isHoveringImage ? (
+              <XIcon
+                size={20}
+                className="text-foreground"
+                strokeWidth={1.5}
+              />
+            ) : isZoomed ? (
+              <MinusIcon
+                size={20}
+                className="text-foreground"
+                strokeWidth={1.5}
+              />
+            ) : (
+              <PlusIcon
+                size={20}
+                className="text-foreground"
+                strokeWidth={1.5}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/composed/PlacementClipShapeSelector.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React from "react";
+import { useProduct } from "../patterns/Product";
+import type { ClipShape } from "../patterns/Product";
+
+/**
+ * PlacementClipShapeSelector - Select menu for choosing artboard clip shapes per placement
+ *
+ * Allows users to choose between rectangle, circle, and custom (heart) shapes for the
+ * currently selected placement. Also includes a toggle to control whether the clip shape
+ * is included in exported images. Integrates with Product context for state management.
+ *
+ * Features:
+ * - Per-placement clip shape configuration
+ * - Toggle to include/exclude clip shape in exports
+ * - Syncs with Product context
+ * - Works alongside placement selection
+ *
+ * @example
+ * ```tsx
+ * <Product productId="cap-123">
+ *   <PlacementSelector />
+ *   <PlacementClipShapeSelector />
+ *   <SnowconeCanvas artboards={[...]} />
+ * </Product>
+ * ```
+ */
+export function PlacementClipShapeSelector() {
+  const {
+    selectedPlacement,
+    setPlacementClipShape,
+    getPlacementClipShape,
+    setClipShapeInExport,
+    getClipShapeInExport
+  } = useProduct();
+
+  if (!selectedPlacement) {
+    return null;
+  }
+
+  const currentClipShape = getPlacementClipShape(selectedPlacement);
+  const includeInExport = getClipShapeInExport(selectedPlacement);
+
+  const handleClipShapeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newClipShape = e.target.value as ClipShape;
+    setPlacementClipShape(selectedPlacement, newClipShape);
+  };
+
+  const handleExportToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setClipShapeInExport(selectedPlacement, e.target.checked);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 mb-4 p-3 border border-border rounded-md bg-card">
+      {/* Clip Shape Selector */}
+      <div className="flex items-center gap-2">
+        <label htmlFor="clip-shape-selector" className="text-sm font-label text-foreground min-w-[100px]">
+          Clip Shape:
+        </label>
+        <select
+          id="clip-shape-selector"
+          className="flex-1 px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+          value={currentClipShape}
+          onChange={handleClipShapeChange}
+        >
+          <option value="rectangle">Rectangle</option>
+          <option value="circle">Circle</option>
+          <option value="custom">Heart (Custom SVG)</option>
+        </select>
+      </div>
+
+      {/* Include in Export Toggle */}
+      <div className="flex items-center gap-2">
+        <label htmlFor="clip-shape-export-toggle" className="flex items-center gap-2 text-sm font-label text-foreground cursor-pointer">
+          <input
+            id="clip-shape-export-toggle"
+            type="checkbox"
+            checked={includeInExport}
+            onChange={handleExportToggle}
+            className="w-4 h-4 rounded border-border bg-background text-primary focus:ring-2 focus:ring-primary cursor-pointer"
+          />
+          <span>Include clip shape border in export</span>
+        </label>
+      </div>
+    </div>
+  );
+}

package/src/composed/PlacementTabs.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import React, { useRef, useState, useLayoutEffect } from "react";
+
+/**
+ * Configuration for a placement option
+ */
+export interface PlacementConfig {
+  /** Display label for the placement */
+  label: string;
+  /** Type of placement background */
+  type: "image" | "color";
+  /** Width of the placement area */
+  width: number;
+  /** Height of the placement area */
+  height: number;
+  /** Default scale mode for artwork: "fill" crops to fill, "fit" shows full artwork. Default: "fill" */
+  defaultScaleMode?: "fill" | "fit";
+  /** Top margin in pixels for fit mode (reduces available area before scaling) */
+  fitMarginTop?: number;
+  /** Right margin in pixels for fit mode */
+  fitMarginRight?: number;
+  /** Bottom margin in pixels for fit mode */
+  fitMarginBottom?: number;
+  /** Left margin in pixels for fit mode */
+  fitMarginLeft?: number;
+  /** Alignment for fit mode (9-point grid: 'tl','t','tr','l','c','r','bl','b','br') */
+  fitAlign?: string;
+}
+
+export interface PlacementTabsProps {
+  /** List of placement options to display */
+  placements: PlacementConfig[];
+  /** Currently selected placement label */
+  selectedPlacement: string;
+  /** Callback when placement selection changes */
+  onPlacementChange: (placement: string) => void;
+  /** When true, don't reserve space for toolbar (it's in the header on desktop) */
+  isDesktop?: boolean;
+  /** ID for the toolbar placeholder element (default: "toolbar-placeholder") */
+  toolbarPlaceholderId?: string;
+  /** Size of the toolbar placeholder in pixels (default: 120) */
+  toolbarSize?: number;
+  /** Additional className for the container */
+  className?: string;
+}
+
+/**
+ * PlacementTabs - Renders placement tabs with optional floating toolbar placeholder.
+ *
+ * Uses CSS shape-outside for wrap-around behavior on mobile, allowing text
+ * to flow around the toolbar placeholder. On desktop, renders simple tabs
+ * without the toolbar placeholder (toolbar is typically in header).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PlacementTabs
+ *   placements={[
+ *     { label: "Front", type: "image", width: 400, height: 400 },
+ *     { label: "Back", type: "image", width: 400, height: 400 },
+ *   ]}
+ *   selectedPlacement="Front"
+ *   onPlacementChange={(label) => setSelectedPlacement(label)}
+ * />
+ *
+ * // Desktop mode (toolbar in header)
+ * <PlacementTabs
+ *   placements={placements}
+ *   selectedPlacement={selected}
+ *   onPlacementChange={setSelected}
+ *   isDesktop
+ * />
+ * ```
+ */
+export function PlacementTabs({
+  placements,
+  selectedPlacement,
+  onPlacementChange,
+  isDesktop = false,
+  toolbarPlaceholderId = "toolbar-placeholder",
+  toolbarSize = 120,
+  className = "",
+}: PlacementTabsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [lineHeight, setLineHeight] = useState(24); // Default estimate
+
+  // Measure actual line height from rendered content
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      const computedStyle = window.getComputedStyle(containerRef.current);
+      const measuredLineHeight = parseFloat(computedStyle.lineHeight);
+      if (!isNaN(measuredLineHeight) && measuredLineHeight > 0) {
+        setLineHeight(measuredLineHeight);
+      }
+    }
+  }, []);
+
+  // When only one placement, just render the toolbar placeholder (no tabs needed)
+  // On desktop, toolbar is in header so we don't need anything here
+  if (placements.length <= 1) {
+    if (isDesktop) {
+      return null;
+    }
+    return (
+      <div className={`flex justify-end w-full ${className}`}>
+        <span
+          id={toolbarPlaceholderId}
+          className="block"
+          style={{ width: toolbarSize, height: toolbarSize }}
+        />
+      </div>
+    );
+  }
+
+  // Desktop: just render placement tabs without toolbar placeholder
+  if (isDesktop) {
+    return (
+      <div className={`flex flex-wrap gap-x-3 text-sm leading-relaxed w-full ${className}`}>
+        {placements.map((p) => (
+          <button
+            key={p.label}
+            onClick={() => onPlacementChange(p.label)}
+            className={`transition-all duration-200 cursor-pointer border-b-2 ${
+              selectedPlacement === p.label
+                ? "text-foreground border-primary"
+                : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"
+            }`}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  // Mobile: render with floating toolbar placeholder
+  // Calculate shape-outside to match toolbar height in terms of line heights
+  // This ensures the toolbar occupies space equivalent to whole line(s)
+  const linesForToolbar = Math.ceil(toolbarSize / lineHeight);
+  const shapeInsetPx = linesForToolbar * lineHeight;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`flex overflow-hidden text-sm leading-relaxed w-full ${className}`}
+    >
+      <p className="m-0 w-full">
+        <span
+          className="float-right h-full ml-2 flex items-end"
+          style={{
+            shapeOutside: `inset(calc(100% - ${shapeInsetPx}px) 0 0)`,
+          }}
+        >
+          <span
+            id={toolbarPlaceholderId}
+            className="block"
+            style={{ width: toolbarSize, height: toolbarSize }}
+          />
+        </span>
+
+        {/* Placement tabs */}
+        {placements.map((p) => (
+          <button
+            key={p.label}
+            onClick={() => onPlacementChange(p.label)}
+            className={`inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${
+              selectedPlacement === p.label
+                ? "text-foreground border-primary"
+                : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"
+            }`}
+          >
+            {p.label}
+          </button>
+        ))}
+      </p>
+    </div>
+  );
+}