@ceebee/ui 1.1.1 → 1.3.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';
@@ -80,6 +80,11 @@ function readCeebeeThemeToken(root) {
     colorText: color("--cb-fg"),
     colorTextSecondary: color("--cb-fg-muted"),
     colorTextTertiary: color("--cb-fg-subtle"),
+    /* Ant derives its placeholder colour from its own algorithm rather than from any token this
+       bridge already sends, and lands on a 25%-alpha grey that fails WCAG AA text contrast in both
+       modes. Placeholder text is text, so it takes the subtle foreground like every other quiet
+       label. */
+    colorTextPlaceholder: color("--cb-fg-subtle"),
     colorTextLightSolid: color("--cb-fg-on-brand"),
     colorBgBase: color("--cb-bg"),
     colorBgContainer: color("--cb-surface"),
@@ -572,14 +577,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 +675,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);
@@ -102,6 +103,10 @@
   --cb-fg-muted: oklch(0.45 0.02 280);
   --cb-fg-subtle: oklch(0.53 0.018 280);
   --cb-fg-on-brand: oklch(0.99 0 0);
+  /* Brand-coloured text on a surface. The brand ramp step that carries body text at WCAG AA is
+     not the same step in both modes, so link colour is a token rather than a ramp reference a
+     product has to pick per theme. */
+  --cb-fg-link: var(--cb-brand-600);
   /* A boundary has to be visible to be a boundary: border-strong carries the 3:1 WCAG asks of a
      control's edge, and border the quieter separation between panels. */
 
@@ -178,6 +183,7 @@
 
     --cb-brand-500: oklch(0.72 0.19 var(--cb-hue-brand));
     --cb-brand-600: oklch(0.64 0.2 var(--cb-hue-brand));
+    --cb-fg-link: var(--cb-brand-500);
 
     --cb-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
     --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
@@ -228,6 +234,7 @@
 
   --cb-brand-500: oklch(0.72 0.19 var(--cb-hue-brand));
   --cb-brand-600: oklch(0.64 0.2 var(--cb-hue-brand));
+  --cb-fg-link: var(--cb-brand-500);
 
   --cb-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
   --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
@@ -918,6 +925,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.3.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {