@crewlethq/ui 0.31.1 → 0.33.0

package/dist/{chunk-UB7TJEKZ.js → chunk-KV3ODJXH.js}

@@ -1,7 +1,6 @@
 import { EmptyState } from './chunk-RA2ULG6H.js';
-import { Card } from './chunk-ACA27MZH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AccessDeniedCard-WXM5DBDZ.css';
+import './AccessDeniedCard-QVNDMT46.css';
 import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -21,17 +20,17 @@ var LABELS = {
   }
 };
 var GLYPHS = {
-  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: 32 }),
-  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
-  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
-  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: 32 })
+  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: "xl" }),
+  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: "xl" }),
+  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: "xl" }),
+  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: "xl" })
 };
 function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }) {
   const text = {
     titles: { ...LABELS.titles, ...labels?.titles },
     descriptions: { ...LABELS.descriptions, ...labels?.descriptions }
   };
-  return /* @__PURE__ */ jsx(Card, { padding: "lg", className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
     EmptyState,
     {
       icon: GLYPHS[reason],

package/dist/chunk-LL5AFXU7.js

@@ -0,0 +1,96 @@
+import { SlideStage } from './chunk-LV4APO72.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideCompare-HTCMPQFY.css';
+import { useState } from 'react';
+import { MinusGlyph, PlusGlyph, PencilGlyph, ArrowUpDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+var SLIDE_COMPARE_LABELS = {
+  changed: "Changed",
+  added: "Added",
+  removed: "Removed",
+  unchanged: "Unchanged",
+  moved: (from, to) => `Moved from ${from} to ${to}`,
+  missing: "Not in this version",
+  summary: (c) => [
+    c.changed && plural(c.changed, "slide changed", "slides changed"),
+    c.added && plural(c.added, "added", "added"),
+    c.removed && plural(c.removed, "removed", "removed"),
+    c.moved && plural(c.moved, "moved", "moved")
+  ].filter(Boolean).join(", ") + ".",
+  showUnchanged: (n) => `Show the ${plural(n, "unchanged slide", "unchanged slides")}`,
+  hideUnchanged: "Hide the unchanged slides",
+  identical: "The two versions hold the same slides, in the same order."
+};
+var MARKS = {
+  changed: PencilGlyph,
+  added: PlusGlyph,
+  removed: MinusGlyph,
+  unchanged: null
+};
+function SlideCompare({ rows, fromLabel, toLabel, className, labels }) {
+  const text = { ...SLIDE_COMPARE_LABELS, ...labels };
+  const [showAll, setShowAll] = useState(false);
+  const counts = { changed: 0, added: 0, removed: 0, moved: 0 };
+  for (const r of rows) {
+    if (r.change !== "unchanged") counts[r.change] += 1;
+    if (r.moved) counts.moved += 1;
+  }
+  const still = rows.filter((r) => r.change === "unchanged" && !r.moved);
+  const shown = showAll ? rows : rows.filter((r) => r.change !== "unchanged" || r.moved);
+  const differs = counts.changed + counts.added + counts.removed + counts.moved > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-compare", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-slide-compare__summary", children: differs ? text.summary(counts) : text.identical }),
+    shown.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__columns", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { children: fromLabel }),
+        /* @__PURE__ */ jsx("span", { children: toLabel })
+      ] }),
+      /* @__PURE__ */ jsx("ol", { className: "crewlet-slide-compare__list", children: shown.map((row) => {
+        const Mark = MARKS[row.change];
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-slide-compare__row", "data-change": row.change, children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__head", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__title", children: [
+              row.toPosition ?? row.fromPosition,
+              ". ",
+              row.title
+            ] }),
+            row.change === "unchanged" && row.moved ? null : /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
+              Mark ? /* @__PURE__ */ jsx(Mark, { size: "sm" }) : null,
+              text[row.change]
+            ] }),
+            row.moved && row.fromPosition !== void 0 && row.toPosition !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
+              /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "sm" }),
+              text.moved(row.fromPosition, row.toPosition)
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "crewlet-slide-compare__sides", children: [
+            { side: "from", label: fromLabel, node: row.from, at: row.fromPosition },
+            { side: "to", label: toLabel, node: row.to, at: row.toPosition }
+          ].map((s) => /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__side", "data-side": s.side, children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-slide-compare__side-label", "aria-hidden": "true", children: s.label }),
+            s.node !== void 0 && s.node !== null ? /* @__PURE__ */ jsx(SlideStage, { label: `${s.label}, slide ${s.at ?? ""}, ${row.title}`, framed: true, children: s.node }) : /* @__PURE__ */ jsxs("p", { className: "crewlet-slide-compare__missing", children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: `${s.label}: ` }),
+              text.missing
+            ] })
+          ] }, s.side)) })
+        ] }, row.key);
+      }) })
+    ] }) : null,
+    still.length > 0 ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "crewlet-slide-compare__toggle",
+        size: "small",
+        variant: "ghost",
+        onClick: () => setShowAll((v) => !v),
+        children: showAll ? text.hideUnchanged : text.showUnchanged(still.length)
+      }
+    ) : null
+  ] });
+}
+
+export { SLIDE_COMPARE_LABELS, SlideCompare };

package/dist/{chunk-VYOKRN2I.js → chunk-LM3ISVJA.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { useRef, useLayoutEffect } from 'react';
 
 function LayerNodeBridge({ onNode }) {

package/dist/{chunk-O63MWA4G.js → chunk-LV4APO72.js}

@@ -1,6 +1,6 @@
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideStage-KGRRALXR.css';
+import './SlideStage-S2FISF4C.css';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -75,6 +75,8 @@ function SlideStage({
   scale,
   width = SLIDE_WIDTH,
   height = SLIDE_HEIGHT,
+  roleDescription = "slide",
+  framed = false,
   className
 }) {
   const box = useRef(null);
@@ -120,10 +122,15 @@ function SlideStage({
     "div",
     {
       ref: box,
-      className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
+      className: cx(
+        "crewlet-slide-stage",
+        `crewlet-slide-stage--${fit}`,
+        framed && fit !== "contain" && "crewlet-slide-stage--framed",
+        className
+      ),
       style: boxStyle,
       role: "group",
-      "aria-roledescription": "slide",
+      "aria-roledescription": roleDescription,
       "aria-label": label,
       children: /* @__PURE__ */ jsx("div", { className: "crewlet-slide-stage__frame", style: frameStyle, children })
     }

package/dist/{chunk-B4EBHPK3.js → chunk-M5KZX5JE.js}

@@ -1,6 +1,6 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArrangeGroup-GY5YMP6E.css';
+import './ArrangeGroup-KRWWOJKR.css';
 import { useId } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -9,6 +9,7 @@ var PLACEHOLDER = "Name this group";
 function ArrangeGroup({
   title,
   tone = "none",
+  variant = "band",
   collapsed,
   onCollapsedChange,
   count,
@@ -27,7 +28,13 @@ function ArrangeGroup({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: cx("crewlet-arrange-group", `crewlet-arrange-group--${tone}`, collapsed && "is-collapsed", className),
+      className: cx(
+        "crewlet-arrange-group",
+        `crewlet-arrange-group--${tone}`,
+        variant === "section" && "crewlet-arrange-group--section",
+        collapsed && "is-collapsed",
+        className
+      ),
       "aria-label": title || "Untitled group",
       ...rest,
       children: [