@ceebee/ui 1.0.2 → 1.2.0

package/dist/client.d.ts

@@ -178,6 +178,7 @@ interface ChecklistProps {
 declare function Checklist({ title, tasks, completeSlot, className }: ChecklistProps): react.JSX.Element;
 
 type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
+type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
 
 type ToastPosition = 'bottom-end' | 'bottom-center' | 'bottom-start' | 'top-end' | 'top-center' | 'top-start';
 interface ToastProviderProps {
@@ -275,4 +276,57 @@ interface StaggerProps {
 /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
 declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
 
-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, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+interface StickerGroupSkeletonProps {
+    count?: number;
+    label?: string;
+}
+declare function StickerGroupSkeleton({ count, label }: StickerGroupSkeletonProps): react.JSX.Element;
+
+interface StickerItem {
+    id: string;
+    label: ReactNode;
+    /** Decorative only; use app copy to communicate meaning. */
+    hue?: DecorHue;
+    /** Accessible item name when `label` is not plain text. */
+    ariaLabel?: string;
+}
+interface StickerGroupProps {
+    items: StickerItem[];
+    onDismiss: (id: string) => void;
+    /** Names the collection when the surrounding heading does not. */
+    label?: string;
+    /** Localises the button name. */
+    getDismissLabel?: (item: StickerItem) => string;
+    motion?: boolean;
+    className?: string;
+}
+/**
+ * A controlled list of removable values. Each sticker is one native button: Tab reaches it and
+ * Enter or Space dismisses it. The collection owns only exit choreography, never product state.
+ */
+declare function StickerGroupRoot({ items, onDismiss, label, getDismissLabel, motion: motionEnabled, className, }: StickerGroupProps): react.JSX.Element;
+declare const StickerGroup: typeof StickerGroupRoot & {
+    Skeleton: typeof StickerGroupSkeleton;
+};
+
+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,17 +1,17 @@
 "use client";
-import { theme, ConfigProvider, Progress } from 'antd';
+import { Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useState, useCallback, useEffect, useMemo, useContext, 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 { Search, Check, ChevronRight, X, 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 { motion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 
 var SKIN_LINK_ID = "cb-skin";
 function ThemeBridge({ children, mode, theme: theme$1 }) {
@@ -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(
@@ -596,5 +596,224 @@ function Reveal({
 function Stagger({ children, step = 0.06, from = "below", onView = false, className }) {
   return /* @__PURE__ */ jsx("div", { className, children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(Reveal, { from, delay: index * step, onView, children: child })) });
 }
+function StickerGroupSkeleton({ count = 3, label = "Loading items" }) {
+  return /* @__PURE__ */ jsx("div", { className: "cb-sticker-group cb-sticker-group--skeleton", role: "status", "aria-label": label, children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("span", { className: "cb-sticker-group__skeleton-item", "aria-hidden": "true" }, index)) });
+}
+var STICKER_VARIANTS = {
+  hidden: {
+    opacity: 0,
+    y: "var(--cb-sticker-enter-y)",
+    rotate: "var(--cb-tilt-none)",
+    scale: "var(--cb-sticker-enter-scale)"
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    rotate: "var(--cb-sticker-tilt)",
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    x: "var(--cb-sticker-resolved-exit-x)",
+    y: "var(--cb-sticker-enter-y)",
+    rotate: "var(--cb-sticker-resolved-exit-rotate)",
+    scale: "var(--cb-sticker-exit-scale)"
+  },
+  still: { opacity: 1, x: 0, y: 0, rotate: 0, scale: 1 },
+  stillExit: { opacity: 0, x: 0, y: 0, rotate: 0, scale: 1 }
+};
+function StickerGroupRoot({
+  items,
+  onDismiss,
+  label,
+  getDismissLabel,
+  motion: motionEnabled = true,
+  className
+}) {
+  const motionSettings = useMotionSettings();
+  const shouldMove = motionEnabled && motionSettings.enabled;
+  return /* @__PURE__ */ jsx("ul", { className: cn("cb-sticker-group", className), "aria-label": label, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((item, index) => {
+    const tilt = index % 3 === 0 ? "left" : index % 3 === 1 ? "right" : "none";
+    const exit = index % 2 === 0 ? "left" : "right";
+    const itemLabel = item.ariaLabel ?? (typeof item.label === "string" ? item.label : "item");
+    const dismissLabel = getDismissLabel?.(item) ?? `Remove ${itemLabel}`;
+    return /* @__PURE__ */ jsx(
+      motion.li,
+      {
+        className: "cb-sticker-group__item",
+        "data-exit": exit,
+        "data-hue": item.hue,
+        "data-tilt": tilt,
+        initial: shouldMove ? "hidden" : false,
+        animate: shouldMove ? "visible" : "still",
+        exit: shouldMove ? "exit" : "stillExit",
+        layout: shouldMove ? "position" : false,
+        transition: shouldMove ? motionSettings.spring("bouncy") : { duration: 0 },
+        variants: STICKER_VARIANTS,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "cb-sticker-group__button",
+            "aria-label": dismissLabel,
+            onClick: () => onDismiss(item.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "cb-sticker-group__label", children: item.label }),
+              /* @__PURE__ */ jsx(X, { className: "cb-sticker-group__icon", "aria-hidden": "true" })
+            ]
+          }
+        )
+      },
+      item.id
+    );
+  }) }) });
+}
+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, 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/index.d.ts

@@ -8,12 +8,15 @@ type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
 type Size = 'sm' | 'md' | 'lg';
 type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
 
-type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient';
+type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient' | 'paper';
 type GlassStyle = 'regular' | 'clear';
+type PaperTilt = 'left' | 'none' | 'right';
 interface SurfaceProps {
     variant?: SurfaceVariant;
     /** Glass density. `clear` is reserved for bold controls over visually rich content. */
     glassStyle?: GlassStyle;
+    /** Decorative paper rotation. Only applies to the `paper` variant. */
+    paperTilt?: PaperTilt;
     /** Semantic colour for `tinted`; ignored by `plain`. */
     tone?: Tone;
     /** Decorative hue for `tinted` / `gradient` — the pastel card set. Wins over `tone`. */
@@ -32,7 +35,7 @@ interface SurfaceProps {
  * variants rather than being baked into the brand, so one Skin reproduces the
  * reference board and another produces something sober without touching a component.
  */
-declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
+declare function Surface({ variant, glassStyle, paperTilt, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
 
 type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 interface StackProps {
@@ -211,4 +214,4 @@ interface LeaderboardProps {
 declare function LeaderboardRoot({ entries, label, medals, className }: LeaderboardProps): react.JSX.Element;
 declare const Leaderboard: typeof LeaderboardRoot;
 
-export { BarMini, type BarMiniProps, Container, type ContainerProps, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, type Size, Sparkline, type SparklineGeometry, type SparklineProps, type StackProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, type Tone, cn, donutArcs, sparklineGeometry };
+export { BarMini, type BarMiniProps, Container, type ContainerProps, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, PageContainer, type PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps, type PaperTilt, type Size, Sparkline, type SparklineGeometry, type SparklineProps, type StackProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, type Tone, cn, donutArcs, sparklineGeometry };

package/dist/index.js

@@ -7,6 +7,7 @@ function cn(...parts) {
 function Surface({
   variant = "plain",
   glassStyle = "regular",
+  paperTilt = "none",
   tone = "neutral",
   hue,
   elevation = "sm",
@@ -33,6 +34,7 @@ function Surface({
       "data-tone": variant === "plain" ? void 0 : tone,
       "data-hue": hue,
       "data-glass-style": variant === "glass" ? glassStyle : void 0,
+      "data-paper-tilt": variant === "paper" ? paperTilt : void 0,
       children
     }
   );

package/dist/skins/moodboard.css

@@ -0,0 +1,92 @@
+/* Moodboard: the warm taped-paper Skin first shaped for Ceebee List.
+   A Skin rewrites tokens only; paper and sticker geometry stay component-owned. */
+:root {
+  --cb-hue-brand: 348;
+
+  --cb-bg: oklch(0.9611 0.0103 67.7);
+  --cb-bg-subtle: oklch(0.9702 0.03 83.6);
+  --cb-surface: oklch(0.9942 0.0069 88.6);
+  --cb-surface-raised: oklch(1 0 0);
+  --cb-border: oklch(0.8575 0.0147 57.6);
+  --cb-border-strong: oklch(0.62 0.0264 291);
+
+  --cb-fg: oklch(0.3255 0.0264 291);
+  --cb-fg-muted: oklch(0.47 0.0264 291);
+  --cb-fg-subtle: oklch(0.54 0.022 291);
+
+  --cb-decor-violet: oklch(0.8986 0.0385 295.4);
+  --cb-decor-blue: oklch(0.9243 0.0227 233.4);
+  --cb-decor-teal: oklch(0.9184 0.0267 163.2);
+  --cb-decor-green: oklch(0.9184 0.0267 163.2);
+  --cb-decor-amber: oklch(0.9247 0.0745 96.8);
+  --cb-decor-rose: oklch(0.8816 0.0434 348);
+
+  --cb-shadow-sm: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3255 0.0264 291 / 0.09);
+  --cb-shadow-md: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3255 0.0264 291 / 0.12);
+  --cb-shadow-lg: 0 var(--cb-space-5) var(--cb-space-7) oklch(0.3255 0.0264 291 / 0.16);
+
+  --cb-paper-bg: oklch(0.9942 0.0069 88.6);
+  --cb-paper-bg-warm: oklch(0.9702 0.03 83.6);
+  --cb-paper-fg: oklch(0.3255 0.0264 291);
+  --cb-paper-border: oklch(0.8575 0.0147 57.6);
+  --cb-paper-tape: oklch(0.9247 0.0745 96.8 / 0.74);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3255 0.0264 291 / 0.14);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3255 0.0264 291 / 0.16);
+
+  --cb-tint-strength: 0.18;
+}
+
+:root[data-theme="dark"] {
+  --cb-bg: oklch(0.2117 0.0158 279.4);
+  --cb-bg-subtle: oklch(0.2811 0.0183 285.2);
+  --cb-surface: oklch(0.2811 0.0183 285.2);
+  --cb-surface-raised: oklch(0.3022 0.0113 55.9);
+  --cb-border: oklch(0.4028 0.0177 308);
+  --cb-border-strong: oklch(0.58 0.022 308);
+
+  --cb-fg: oklch(0.9524 0.0093 62.6);
+  --cb-fg-muted: oklch(0.78 0.018 62.6);
+  --cb-fg-subtle: oklch(0.68 0.018 62.6);
+
+  --cb-decor-violet: oklch(0.3447 0.0451 290.9);
+  --cb-decor-blue: oklch(0.3645 0.0299 235.5);
+  --cb-decor-teal: oklch(0.3731 0.0308 170.1);
+  --cb-decor-green: oklch(0.3731 0.0308 170.1);
+  --cb-decor-amber: oklch(0.3918 0.039 91.8);
+  --cb-decor-rose: oklch(0.3478 0.0374 349);
+
+  --cb-paper-bg: oklch(0.2811 0.0183 285.2);
+  --cb-paper-bg-warm: oklch(0.3022 0.0113 55.9);
+  --cb-paper-fg: oklch(0.9524 0.0093 62.6);
+  --cb-paper-border: oklch(0.4028 0.0177 308);
+  --cb-paper-tape: oklch(0.4773 0.0499 96.2 / 0.82);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.46);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.42);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --cb-bg: oklch(0.2117 0.0158 279.4);
+    --cb-bg-subtle: oklch(0.2811 0.0183 285.2);
+    --cb-surface: oklch(0.2811 0.0183 285.2);
+    --cb-surface-raised: oklch(0.3022 0.0113 55.9);
+    --cb-border: oklch(0.4028 0.0177 308);
+    --cb-border-strong: oklch(0.58 0.022 308);
+    --cb-fg: oklch(0.9524 0.0093 62.6);
+    --cb-fg-muted: oklch(0.78 0.018 62.6);
+    --cb-fg-subtle: oklch(0.68 0.018 62.6);
+    --cb-decor-violet: oklch(0.3447 0.0451 290.9);
+    --cb-decor-blue: oklch(0.3645 0.0299 235.5);
+    --cb-decor-teal: oklch(0.3731 0.0308 170.1);
+    --cb-decor-green: oklch(0.3731 0.0308 170.1);
+    --cb-decor-amber: oklch(0.3918 0.039 91.8);
+    --cb-decor-rose: oklch(0.3478 0.0374 349);
+    --cb-paper-bg: oklch(0.2811 0.0183 285.2);
+    --cb-paper-bg-warm: oklch(0.3022 0.0113 55.9);
+    --cb-paper-fg: oklch(0.9524 0.0093 62.6);
+    --cb-paper-border: oklch(0.4028 0.0177 308);
+    --cb-paper-tape: oklch(0.4773 0.0499 96.2 / 0.82);
+    --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.46);
+    --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.42);
+  }
+}

package/dist/styles.css

@@ -18,6 +18,11 @@
   --cb-radius-xl: 1.75rem;
   --cb-radius-full: 999px;
 
+  /* Small decorative rotations shared by paper and sticker materials. */
+  --cb-tilt-left: -1.5deg;
+  --cb-tilt-none: 0deg;
+  --cb-tilt-right: 1.5deg;
+
   --cb-text-xs: 0.75rem;
   --cb-text-sm: 0.875rem;
   --cb-text-md: 1rem;
@@ -36,6 +41,13 @@
   --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);
+  --cb-sticker-enter-scale: 0.94;
+  --cb-sticker-exit-scale: 0.9;
+  --cb-sticker-exit-rotate: 8deg;
 
   --cb-border-width: 1px;
   --cb-focus-width: 2px;
@@ -120,6 +132,15 @@
   --cb-shadow-md: 0 4px 16px oklch(0.3 0.03 280 / 0.08);
   --cb-shadow-lg: 0 18px 48px oklch(0.3 0.03 280 / 0.12);
 
+  /* Paper is a material seam: Skins may retune it without changing Surface or StickerGroup. */
+  --cb-paper-bg: var(--cb-surface);
+  --cb-paper-bg-warm: oklch(0.98 0.018 80);
+  --cb-paper-fg: var(--cb-fg);
+  --cb-paper-border: var(--cb-border);
+  --cb-paper-tape: oklch(0.9 0.055 92 / 0.78);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0.3 0.03 280 / 0.1);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0.3 0.03 280 / 0.12);
+
   --cb-glass-bg: oklch(1 0 0 / 0.74);
   --cb-glass-bg-opaque: oklch(0.985 0.004 280);
   --cb-glass-border: oklch(1 0 0 / 0.55);
@@ -163,6 +184,14 @@
     --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
     --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
 
+    --cb-paper-bg: var(--cb-surface);
+    --cb-paper-bg-warm: oklch(0.3 0.025 70);
+    --cb-paper-fg: var(--cb-fg);
+    --cb-paper-border: var(--cb-border);
+    --cb-paper-tape: oklch(0.46 0.05 92 / 0.82);
+    --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.42);
+    --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.38);
+
     --cb-glass-bg: oklch(0.28 0.028 280 / 0.72);
     --cb-glass-bg-opaque: oklch(0.25 0.024 280);
     --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
@@ -205,6 +234,14 @@
   --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
   --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
 
+  --cb-paper-bg: var(--cb-surface);
+  --cb-paper-bg-warm: oklch(0.3 0.025 70);
+  --cb-paper-fg: var(--cb-fg);
+  --cb-paper-border: var(--cb-border);
+  --cb-paper-tape: oklch(0.46 0.05 92 / 0.82);
+  --cb-paper-shadow: 0 var(--cb-space-2) var(--cb-space-5) oklch(0 0 0 / 0.42);
+  --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.38);
+
   --cb-glass-bg: oklch(0.28 0.028 280 / 0.72);
   --cb-glass-bg-opaque: oklch(0.25 0.024 280);
   --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
@@ -461,11 +498,40 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   );
 }
 
+.cb-surface--paper {
+  background: var(--cb-paper-bg);
+  border-color: var(--cb-paper-border);
+  color: var(--cb-paper-fg);
+  position: relative;
+  transform: rotate(var(--cb-tilt-none));
+  box-shadow: var(--cb-paper-shadow);
+}
+
+.cb-surface--paper::before {
+  background: var(--cb-paper-tape);
+  content: "";
+  height: var(--cb-space-3);
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  top: calc(var(--cb-space-2) * -1);
+  transform: translateX(-50%) rotate(var(--cb-tilt-left));
+  width: calc(var(--cb-space-7) + var(--cb-space-2));
+}
+
+.cb-surface--paper[data-paper-tilt="left"] { transform: rotate(var(--cb-tilt-left)); }
+.cb-surface--paper[data-paper-tilt="right"] { transform: rotate(var(--cb-tilt-right)); }
+
 .cb-elevation--none { box-shadow: var(--cb-surface-material-shadow); }
 .cb-elevation--sm { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-sm); }
 .cb-elevation--md { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-md); }
 .cb-elevation--lg { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-lg); }
 
+.cb-surface--paper.cb-elevation--none,
+.cb-surface--paper.cb-elevation--sm,
+.cb-surface--paper.cb-elevation--md,
+.cb-surface--paper.cb-elevation--lg { box-shadow: var(--cb-paper-shadow); }
+
 @supports not ((backdrop-filter: blur(var(--cb-glass-blur))) or (-webkit-backdrop-filter: blur(var(--cb-glass-blur)))) {
   .cb-surface--glass { background: var(--cb-glass-opaque-fill); }
 }
@@ -496,6 +562,16 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
+
+
+  .cb-surface--paper {
+    background: Canvas;
+    border-color: CanvasText;
+    color: CanvasText;
+    transform: none;
+  }
+
+  .cb-surface--paper::before { display: none; }
 }
 
 .cb-radius--none { border-radius: var(--cb-radius-none); }
@@ -843,6 +919,223 @@ 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;
+  flex-wrap: wrap;
+  gap: var(--cb-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cb-sticker-group__item {
+  --cb-sticker-fill: var(--cb-paper-bg-warm);
+  --cb-sticker-tilt: var(--cb-tilt-none);
+  --cb-sticker-resolved-exit-x: var(--cb-sticker-exit-x);
+  --cb-sticker-resolved-exit-rotate: var(--cb-sticker-exit-rotate);
+}
+
+.cb-sticker-group__item[data-tilt="left"] { --cb-sticker-tilt: var(--cb-tilt-left); }
+.cb-sticker-group__item[data-tilt="right"] { --cb-sticker-tilt: var(--cb-tilt-right); }
+.cb-sticker-group__item[data-exit="left"] {
+  --cb-sticker-resolved-exit-x: calc(var(--cb-sticker-exit-x) * -1);
+  --cb-sticker-resolved-exit-rotate: calc(var(--cb-sticker-exit-rotate) * -1);
+}
+
+.cb-sticker-group__item[data-hue="violet"] { --cb-sticker-fill: var(--cb-decor-violet); }
+.cb-sticker-group__item[data-hue="blue"] { --cb-sticker-fill: var(--cb-decor-blue); }
+.cb-sticker-group__item[data-hue="teal"] { --cb-sticker-fill: var(--cb-decor-teal); }
+.cb-sticker-group__item[data-hue="green"] { --cb-sticker-fill: var(--cb-decor-green); }
+.cb-sticker-group__item[data-hue="amber"] { --cb-sticker-fill: var(--cb-decor-amber); }
+.cb-sticker-group__item[data-hue="rose"] { --cb-sticker-fill: var(--cb-decor-rose); }
+
+.cb-sticker-group__button {
+  align-items: center;
+  appearance: none;
+  background: color-mix(in oklch, var(--cb-sticker-fill) 72%, var(--cb-paper-bg));
+  border: var(--cb-border-width) dashed color-mix(in oklch, var(--cb-paper-fg) 28%, transparent);
+  border-radius: var(--cb-radius-sm);
+  box-shadow: var(--cb-sticker-shadow);
+  color: var(--cb-paper-fg);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: var(--cb-weight-semibold);
+  gap: var(--cb-space-2);
+  min-height: var(--cb-control-height-md);
+  padding: var(--cb-space-2) var(--cb-space-3);
+  text-align: start;
+}
+
+@media (hover: hover) {
+  .cb-sticker-group__button:hover {
+    background: color-mix(in oklch, var(--cb-sticker-fill) 84%, var(--cb-paper-bg));
+  }
+}
+
+.cb-sticker-group__button:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+.cb-sticker-group__icon {
+  flex: none;
+  height: var(--cb-text-sm);
+  width: var(--cb-text-sm);
+}
+
+.cb-sticker-group--skeleton { align-items: center; }
+
+.cb-sticker-group__skeleton-item {
+  background: var(--cb-bg-subtle);
+  border-radius: var(--cb-radius-sm);
+  display: block;
+  height: var(--cb-control-height-md);
+  width: calc(var(--cb-space-7) + var(--cb-space-5));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-sticker-group__item { transform: none !important; }
+}
+
+@media (forced-colors: active) {
+  .cb-sticker-group__button {
+    background: ButtonFace;
+    border-color: ButtonText;
+    box-shadow: none;
+    color: ButtonText;
+  }
+}
+
 /* nav/nav.css */
 .cb-menu-positioner {
   position: absolute;

package/package.json

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