@ceebee/ui 1.1.1 → 1.2.0

package/dist/client.d.ts

@@ -309,4 +309,24 @@ declare const StickerGroup: typeof StickerGroupRoot & {
     Skeleton: typeof StickerGroupSkeleton;
 };
 
-export { Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+interface PanZoomCanvasSkeletonProps {
+    label?: string;
+}
+declare function PanZoomCanvasSkeleton({ label }: PanZoomCanvasSkeletonProps): react.JSX.Element;
+
+interface PanZoomCanvasProps {
+    label: string;
+    children: ReactNode;
+    hint?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    resetLabel?: string;
+    zoomStatusLabel?: string;
+    motion?: boolean;
+}
+declare function PanZoomCanvasRoot({ label, children, hint, zoomInLabel, zoomOutLabel, resetLabel, zoomStatusLabel, motion: motionEnabled, }: PanZoomCanvasProps): react.JSX.Element;
+declare const PanZoomCanvas: typeof PanZoomCanvasRoot & {
+    Skeleton: typeof PanZoomCanvasSkeleton;
+};
+
+export { Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,14 +1,14 @@
 "use client";
-import { theme, ConfigProvider, Progress } from 'antd';
+import { Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useContext, useMemo, useState, useCallback, useEffect, Children } from 'react';
+import { createContext, useState, useRef, useContext, useMemo, useCallback, useEffect, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 export { default as enUSLocale } from 'antd/locale/en_US.js';
 export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_US.js';
 export { default as idIDLocale } from 'antd/locale/id_ID.js';
 export { default as zhCNLocale } from 'antd/locale/zh_CN.js';
 import { Dialog } from '@base-ui/react/dialog';
-import { X, Search, Check, ChevronRight, PanelLeftOpen, PanelLeftClose, Info, XCircle, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { X, Minus, Plus, RotateCcw, Search, Check, ChevronRight, PanelLeftOpen, PanelLeftClose, Info, XCircle, AlertTriangle, CheckCircle2 } from 'lucide-react';
 import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
 import { AnimatePresence, motion } from 'motion/react';
@@ -572,14 +572,14 @@ var OFFSETS = {
 function Reveal({
   children,
   from = "below",
-  distance = 12,
+  distance: distance2 = 12,
   delay = 0,
   spring = "soft",
   onView = false,
   className
 }) {
   const { enabled, spring: transition } = useMotionSettings();
-  const offset = enabled ? OFFSETS[from](distance) : {};
+  const offset = enabled ? OFFSETS[from](distance2) : {};
   const hidden = { opacity: 0, ...offset };
   const shown = { opacity: 1, x: 0, y: 0 };
   return /* @__PURE__ */ jsx(
@@ -670,5 +670,150 @@ function StickerGroupRoot({
   }) }) });
 }
 var StickerGroup = Object.assign(StickerGroupRoot, { Skeleton: StickerGroupSkeleton });
+function PanZoomCanvasSkeleton({ label = "Loading canvas" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-pan-zoom-canvas cb-pan-zoom-canvas--skeleton", role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("span", { className: "cb-pan-zoom-canvas__skeleton-controls", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cb-pan-zoom-canvas__skeleton-node cb-pan-zoom-canvas__skeleton-node--start", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cb-pan-zoom-canvas__skeleton-line", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cb-pan-zoom-canvas__skeleton-node cb-pan-zoom-canvas__skeleton-node--end", "aria-hidden": "true" })
+  ] });
+}
+var MIN_SCALE = 0.5;
+var MAX_SCALE = 2;
+var SCALE_STEP = 0.25;
+function clampScale(value) {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, value));
+}
+function distance([first, second]) {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+function PanZoomCanvasRoot({
+  label,
+  children,
+  hint,
+  zoomInLabel = "Zoom in",
+  zoomOutLabel = "Zoom out",
+  resetLabel = "Reset canvas",
+  zoomStatusLabel = "Canvas zoom",
+  motion: motionEnabled = true
+}) {
+  const motionSettings = useMotionSettings();
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [scale, setScale] = useState(1);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const dragOrigin = useRef(null);
+  const pinchOrigin = useRef(null);
+  const stepRef = useRef(null);
+  const shouldAnimate = motionEnabled && motionSettings.enabled;
+  function reset() {
+    setPan({ x: 0, y: 0 });
+    setScale(1);
+  }
+  function zoom(delta) {
+    setScale((current) => clampScale(current + delta));
+  }
+  function onKeyDown(event) {
+    const movement = {
+      ArrowLeft: { x: -1, y: 0 },
+      ArrowRight: { x: 1, y: 0 },
+      ArrowUp: { x: 0, y: -1 },
+      ArrowDown: { x: 0, y: 1 }
+    };
+    if (movement[event.key]) {
+      event.preventDefault();
+      setPan((current) => ({ x: current.x + movement[event.key].x, y: current.y + movement[event.key].y }));
+      return;
+    }
+    if (event.key === "+" || event.key === "=") {
+      event.preventDefault();
+      zoom(SCALE_STEP);
+    }
+    if (event.key === "-") {
+      event.preventDefault();
+      zoom(-SCALE_STEP);
+    }
+    if (event.key === "0" || event.key === "Home") {
+      event.preventDefault();
+      reset();
+    }
+  }
+  function onPointerDown(event) {
+    if (event.target.closest("a, button, input, select, textarea")) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const points = [...pointers.current.values()];
+    if (points.length === 1) dragOrigin.current = { point: points[0], pan };
+    if (points.length === 2) pinchOrigin.current = { distance: distance(points), scale };
+  }
+  function onPointerMove(event) {
+    if (!pointers.current.has(event.pointerId)) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const points = [...pointers.current.values()];
+    if (points.length === 2 && pinchOrigin.current) {
+      const nextDistance = distance(points);
+      setScale(clampScale(pinchOrigin.current.scale * (nextDistance / pinchOrigin.current.distance)));
+      return;
+    }
+    if (points.length === 1 && dragOrigin.current) {
+      const step = stepRef.current?.getBoundingClientRect().width || 1;
+      setPan({
+        x: dragOrigin.current.pan.x + (points[0].x - dragOrigin.current.point.x) / step,
+        y: dragOrigin.current.pan.y + (points[0].y - dragOrigin.current.point.y) / step
+      });
+    }
+  }
+  function releasePointer(event) {
+    pointers.current.delete(event.pointerId);
+    pinchOrigin.current = null;
+    const remaining = [...pointers.current.values()];
+    dragOrigin.current = remaining.length === 1 ? { point: remaining[0], pan } : null;
+  }
+  function onWheel(event) {
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    zoom(event.deltaY < 0 ? SCALE_STEP : -SCALE_STEP);
+  }
+  const transformStyle = {
+    "--cb-pan-zoom-x": pan.x,
+    "--cb-pan-zoom-y": pan.y,
+    "--cb-pan-zoom-scale": scale
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "cb-pan-zoom-canvas", "data-motion": String(shouldAnimate), children: [
+    /* @__PURE__ */ jsxs("div", { className: "cb-pan-zoom-canvas__toolbar", children: [
+      hint ? /* @__PURE__ */ jsx("p", { className: "cb-pan-zoom-canvas__hint", children: hint }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("div", { className: "cb-pan-zoom-canvas__controls", children: [
+        /* @__PURE__ */ jsx(Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" }), "aria-label": zoomOutLabel, onClick: () => zoom(-SCALE_STEP), disabled: scale <= MIN_SCALE }),
+        /* @__PURE__ */ jsxs("output", { className: "cb-pan-zoom-canvas__zoom", "aria-label": zoomStatusLabel, children: [
+          Math.round(scale * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }), "aria-label": zoomInLabel, onClick: () => zoom(SCALE_STEP), disabled: scale >= MAX_SCALE }),
+        /* @__PURE__ */ jsx(Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }), "aria-label": resetLabel, onClick: reset })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "cb-pan-zoom-canvas__viewport",
+        role: "region",
+        "aria-label": label,
+        tabIndex: 0,
+        "data-pan-x": pan.x,
+        "data-pan-y": pan.y,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: releasePointer,
+        onPointerCancel: releasePointer,
+        onWheel,
+        children: [
+          /* @__PURE__ */ jsx("span", { ref: stepRef, className: "cb-pan-zoom-canvas__step", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "cb-pan-zoom-canvas__content", style: transformStyle, children })
+        ]
+      }
+    )
+  ] });
+}
+var PanZoomCanvas = Object.assign(PanZoomCanvasRoot, { Skeleton: PanZoomCanvasSkeleton });
 
-export { Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, MotionProvider, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/styles.css

@@ -41,6 +41,7 @@
   --cb-control-height-sm: 2rem;
   --cb-control-height-md: 2.5rem;
   --cb-control-height-lg: 3rem;
+  --cb-canvas-block-size: 32rem;
 
   --cb-sticker-enter-y: var(--cb-space-3);
   --cb-sticker-exit-x: var(--cb-space-6);
@@ -918,6 +919,134 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   object-fit: cover;
 }
 
+/* data/pan-zoom-canvas/pan-zoom-canvas.css */
+.cb-pan-zoom-canvas {
+  background: var(--cb-surface);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg);
+  color: var(--cb-fg);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.cb-pan-zoom-canvas__toolbar {
+  align-items: center;
+  background: var(--cb-bg-subtle);
+  border-block-end: var(--cb-border-width) solid var(--cb-border);
+  display: flex;
+  gap: var(--cb-space-3);
+  justify-content: space-between;
+  min-block-size: var(--cb-control-height-lg);
+  padding: var(--cb-space-2) var(--cb-space-3);
+}
+
+.cb-pan-zoom-canvas__hint {
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-xs);
+  margin: 0;
+}
+
+.cb-pan-zoom-canvas__controls {
+  align-items: center;
+  display: flex;
+  gap: var(--cb-space-1);
+}
+
+.cb-pan-zoom-canvas__controls svg {
+  block-size: var(--cb-text-md);
+  inline-size: var(--cb-text-md);
+}
+
+.cb-pan-zoom-canvas__zoom {
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-xs);
+  font-variant-numeric: tabular-nums;
+  min-inline-size: var(--cb-control-height-md);
+  text-align: center;
+}
+
+.cb-pan-zoom-canvas__viewport {
+  block-size: var(--cb-canvas-block-size);
+  cursor: grab;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+}
+
+.cb-pan-zoom-canvas__viewport:active { cursor: grabbing; }
+
+.cb-pan-zoom-canvas__viewport:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-focus);
+  outline-offset: var(--cb-focus-offset-inset);
+}
+
+.cb-pan-zoom-canvas__step {
+  inline-size: var(--cb-space-5);
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+
+.cb-pan-zoom-canvas__content {
+  min-block-size: 100%;
+  min-inline-size: 100%;
+  transform: translate(
+    calc(var(--cb-space-5) * var(--cb-pan-zoom-x)),
+    calc(var(--cb-space-5) * var(--cb-pan-zoom-y))
+  ) scale(var(--cb-pan-zoom-scale));
+  transform-origin: center;
+}
+
+.cb-pan-zoom-canvas[data-motion="true"] .cb-pan-zoom-canvas__content {
+  transition: transform var(--cb-duration-base) var(--cb-ease-standard);
+}
+
+.cb-pan-zoom-canvas--skeleton {
+  block-size: var(--cb-canvas-block-size);
+  position: relative;
+}
+
+.cb-pan-zoom-canvas__skeleton-controls,
+.cb-pan-zoom-canvas__skeleton-node,
+.cb-pan-zoom-canvas__skeleton-line {
+  background: var(--cb-bg-subtle);
+  display: block;
+  position: absolute;
+}
+
+.cb-pan-zoom-canvas__skeleton-controls {
+  block-size: var(--cb-control-height-sm);
+  border-radius: var(--cb-radius-sm);
+  inline-size: calc(var(--cb-space-8) * 2);
+  inset-block-start: var(--cb-space-3);
+  inset-inline-end: var(--cb-space-3);
+}
+
+.cb-pan-zoom-canvas__skeleton-node {
+  block-size: var(--cb-control-height-lg);
+  border-radius: var(--cb-radius-md);
+  inline-size: calc(var(--cb-space-8) * 2);
+  inset-block-start: 50%;
+}
+
+.cb-pan-zoom-canvas__skeleton-node--start { inset-inline-start: var(--cb-space-6); }
+.cb-pan-zoom-canvas__skeleton-node--end { inset-inline-end: var(--cb-space-6); }
+
+.cb-pan-zoom-canvas__skeleton-line {
+  block-size: var(--cb-border-width);
+  inset-block-start: calc(50% + var(--cb-space-3));
+  inset-inline: calc(var(--cb-space-8) * 3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-pan-zoom-canvas__content { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .cb-pan-zoom-canvas,
+  .cb-pan-zoom-canvas__toolbar { border-color: CanvasText; }
+}
+
 /* data/sticker-group/sticker-group.css */
 .cb-sticker-group {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {