@ceebee/ui 1.5.4 → 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';
@@ -1517,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());
@@ -1527,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);
@@ -1600,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: [
@@ -1610,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.4",
+  "version": "1.6.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {