@ceebee/ui 1.5.3 → 1.6.0

package/dist/client.d.ts

@@ -367,9 +367,11 @@ interface PanZoomCanvasProps {
     zoomOutLabel?: string;
     resetLabel?: string;
     zoomStatusLabel?: string;
+    fullscreenLabel?: string;
+    exitFullscreenLabel?: string;
     motion?: boolean;
 }
-declare function PanZoomCanvasRoot({ label, children, hint, zoomInLabel, zoomOutLabel, resetLabel, zoomStatusLabel, motion: motionEnabled, }: PanZoomCanvasProps): react.JSX.Element;
+declare function PanZoomCanvasRoot({ label, children, hint, zoomInLabel, zoomOutLabel, resetLabel, zoomStatusLabel, fullscreenLabel, exitFullscreenLabel, motion: motionEnabled, }: PanZoomCanvasProps): react.JSX.Element;
 declare const PanZoomCanvas: typeof PanZoomCanvasRoot & {
     Skeleton: typeof PanZoomCanvasSkeleton;
 };

package/dist/client.js

@@ -1,7 +1,7 @@
 "use client";
 import { Modal as Modal$1, Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useContext, useMemo, useEffect, Children } from 'react';
+import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useEffect, useContext, useMemo, Children } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 export { default as enUSLocale } from 'antd/locale/en_US.js';
@@ -9,7 +9,7 @@ export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_
 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, Minus, Plus, RotateCcw, Search, Check, ChevronRight, PanelLeftOpen, PanelLeftClose, Info, XCircle, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { X, Minus, Plus, RotateCcw, Minimize2, Maximize2, 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';
@@ -866,6 +866,20 @@ function readCeebeeThemeToken(root) {
        surface, so placeholders take the muted foreground that clears it against every surface a
        control can sit on. */
     colorTextPlaceholder: color("--cb-fg-muted"),
+    /* The same defect as the placeholder above, in the same shape: Ant derives its disabled
+           foreground from its own algorithm and lands on a 25%-alpha grey — measured at 1.19:1 on a
+           light stage and 2.08:1 on a dark one, which is a word you can see the shape of and not read.
+           WCAG exempts inactive controls, and that exemption is the wrong thing to lean on: the label on
+           a disabled control is exactly what tells you why it is disabled and what would enable it, so
+           it is the one piece of text on the control that has to survive.
+    
+           The muted foreground rather than the subtle one, for the reason the placeholder note above
+           already records: subtle clears AA against the plain surface and nothing else, and a disabled
+           control sits on a translucent wash over whatever surface the product put it on. Measured on a
+           consumer's own panel, subtle came back at 4.37:1 — under the bar, from the one step that
+           looked quiet enough. Disabled still reads as disabled: the control also loses its border and
+           its ground, which are cues that do not depend on colour at all. */
+    colorTextDisabled: color("--cb-fg-muted"),
     colorTextLightSolid: color("--cb-fg-on-brand"),
     colorBgBase: color("--cb-bg"),
     colorBgContainer: color("--cb-surface"),
@@ -1503,9 +1517,14 @@ function PanZoomCanvasRoot({
   zoomOutLabel = "Zoom out",
   resetLabel = "Reset canvas",
   zoomStatusLabel = "Canvas zoom",
+  fullscreenLabel = "Enter fullscreen",
+  exitFullscreenLabel = "Exit fullscreen",
   motion: motionEnabled = true
 }) {
   const motionSettings = useMotionSettings();
+  const rootRef = useRef(null);
+  const [fullscreenAvailable, setFullscreenAvailable] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [scale, setScale] = useState(1);
   const pointers = useRef(/* @__PURE__ */ new Map());
@@ -1513,6 +1532,21 @@ function PanZoomCanvasRoot({
   const pinchOrigin = useRef(null);
   const stepRef = useRef(null);
   const shouldAnimate = motionEnabled && motionSettings.enabled;
+  useEffect(() => {
+    setFullscreenAvailable(typeof document !== "undefined" && document.fullscreenEnabled === true && typeof rootRef.current?.requestFullscreen === "function");
+    function onChange() {
+      setFullscreen(document.fullscreenElement === rootRef.current);
+    }
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  function toggleFullscreen() {
+    if (document.fullscreenElement === rootRef.current) {
+      void document.exitFullscreen();
+      return;
+    }
+    void rootRef.current?.requestFullscreen();
+  }
   function reset() {
     setPan({ x: 0, y: 0 });
     setScale(1);
@@ -1586,7 +1620,7 @@ function PanZoomCanvasRoot({
     "--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: [
+  return /* @__PURE__ */ jsxs("section", { ref: rootRef, className: "cb-pan-zoom-canvas", "data-motion": String(shouldAnimate), "data-fullscreen": String(fullscreen), 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: [
@@ -1596,7 +1630,18 @@ function PanZoomCanvasRoot({
           "%"
         ] }),
         /* @__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__ */ jsx(Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }), "aria-label": resetLabel, onClick: reset }),
+        fullscreenAvailable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "text",
+            size: "small",
+            icon: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true" }),
+            "aria-label": fullscreen ? exitFullscreenLabel : fullscreenLabel,
+            "aria-pressed": fullscreen,
+            onClick: toggleFullscreen
+          }
+        ) : null
       ] })
     ] }),
     /* @__PURE__ */ jsxs(

package/dist/styles.css

@@ -1073,6 +1073,19 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   inset-inline: calc(var(--cb-space-8) * 3);
 }
 
+/* Fullscreen hands the element the whole screen, so the fixed canvas height stops being the right
+   size: the viewport takes the space the toolbar leaves instead of leaving the rest blank. */
+.cb-pan-zoom-canvas:fullscreen {
+  border-radius: var(--cb-radius-none);
+  display: flex;
+  flex-direction: column;
+}
+
+.cb-pan-zoom-canvas:fullscreen .cb-pan-zoom-canvas__viewport {
+  block-size: auto;
+  flex: 1;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .cb-pan-zoom-canvas__content { transition: none; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -35,10 +35,6 @@
     "./styles.css": "./dist/styles.css",
     "./skins/*.css": "./dist/skins/*.css"
   },
-  "scripts": {
-    "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
-    "lint": "tsc -p tsconfig.json --noEmit"
-  },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",
     "lucide-react": ">=0.400.0",
@@ -61,5 +57,9 @@
     "@ant-design/cssinjs": "2.1.2",
     "antd": "6.6.1",
     "dayjs": "1.11.18"
+  },
+  "scripts": {
+    "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
+    "lint": "tsc -p tsconfig.json --noEmit"
   }
-}
+}