@bendyline/squisq-editor-react 2.11.27 → 2.12.1

package/dist/{chunk-V2OLZOYJ.js → chunk-PXO3D42N.js}

@@ -1,10 +1,10 @@
 import {
   MarkdownEscape
-} from "./chunk-OCQEWWHI.js";
+} from "./chunk-KI5XQWRU.js";
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-HSWWEWT4.js";
+} from "./chunk-WMNL2WEI.js";
 
 // src/jsonEditor/JsonEditorContext.tsx
 import { createContext, useContext, useEffect, useMemo } from "react";

package/dist/{chunk-UFK47ZAI.js → chunk-TCGWKYME.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-LRZJD5YD.js";
 import {
   Icon
-} from "./chunk-GS7QWYFT.js";
+} from "./chunk-UYB5CPRE.js";
 import {
   NarrationStage,
   buildTimingJson,
@@ -1851,7 +1851,9 @@ function resolveSlideVisual(doc, block, slide, theme, viewport, index, totalBloc
 }
 
 // src/recorder/slides/RecorderSlidesPanel.tsx
-import { useCallback as useCallback3 } from "react";
+import { useBuildNavigation } from "@bendyline/squisq-react";
+import { blockBuildSteps, buildSourceText } from "@bendyline/squisq/doc";
+import { useCallback as useCallback3, useEffect as useEffect4 } from "react";
 
 // src/TimelineBlockPreview.tsx
 import { memo } from "react";
@@ -1860,11 +1862,21 @@ import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var BlockThumbnail = memo(function BlockThumbnail2({
   visual,
+  buildPlayback = "all",
   viewport = VIEWPORT_PRESETS.landscape,
   basePath = "/",
   mediaProvider = null
 }) {
-  return /* @__PURE__ */ jsx3(MediaContext.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx3(BlockRenderer, { block: visual, blockTime: 0, basePath, viewport }) });
+  return /* @__PURE__ */ jsx3(MediaContext.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx3(
+    BlockRenderer,
+    {
+      buildPlayback,
+      block: visual,
+      blockTime: 0,
+      basePath,
+      viewport
+    }
+  ) });
 });
 
 // src/recorder/slides/RecorderSlidesPanel.tsx
@@ -1949,13 +1961,28 @@ function RecorderSlidesPanel({
   basePath = "/",
   mediaProvider = null,
   recording = false,
-  shownBlockIds
+  shownBlockIds,
+  onBuildShown
 }) {
   const count = slides.length;
   const active = slides[clampSlideIndex(index, count)];
+  const builds = useBuildNavigation(active?.visual, true, true);
+  const { next: nextBuild, previous: previousBuild, enter: enterBuild } = builds;
+  const sourceText = active?.visual ? buildSourceText(blockBuildSteps(active.visual)) : "";
+  useEffect4(() => {
+    if (!active || !onBuildShown) return;
+    for (let step2 = 0; step2 < builds.cursor.revealed; step2++)
+      onBuildShown(active.blockId, step2, sourceText);
+  }, [active, builds.cursor.revealed, sourceText, recording, onBuildShown]);
   const step = useCallback3(
-    (delta) => onIndexChange(clampSlideIndex(index + delta, count)),
-    [index, count, onIndexChange]
+    (delta) => {
+      if (delta > 0 ? nextBuild() : previousBuild()) return;
+      const next = clampSlideIndex(index + delta, count);
+      if (next === index) return;
+      enterBuild(slides[next]?.visual, delta < 0);
+      onIndexChange(next);
+    },
+    [index, count, onIndexChange, nextBuild, previousBuild, enterBuild, slides]
   );
   const handleKeyDown = useCallback3(
     (event) => {
@@ -1985,7 +2012,8 @@ function RecorderSlidesPanel({
             "Slide ",
             index + 1,
             " of ",
-            count
+            count,
+            builds.count > 0 ? ` \xB7 Build ${builds.cursor.revealed} of ${builds.count}` : ""
           ] }),
           /* @__PURE__ */ jsx4("span", { style: dotsStyle, "aria-hidden": "true", children: slides.map((slide, i) => /* @__PURE__ */ jsx4(
             "span",
@@ -2005,7 +2033,7 @@ function RecorderSlidesPanel({
               type: "button",
               style: navButtonStyle,
               onClick: () => step(-1),
-              disabled: index <= 0,
+              disabled: index <= 0 && builds.cursor.revealed === 0,
               "aria-label": "Previous slide",
               children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-left" })
             }
@@ -2016,7 +2044,7 @@ function RecorderSlidesPanel({
               type: "button",
               style: navButtonStyle,
               onClick: () => step(1),
-              disabled: index >= count - 1,
+              disabled: index >= count - 1 && builds.cursor.revealed >= builds.count && builds.cursor.progress >= 1,
               "aria-label": "Next slide",
               children: /* @__PURE__ */ jsx4(Icon, { icon: "fa-solid fa-chevron-right" })
             }
@@ -2036,6 +2064,7 @@ function RecorderSlidesPanel({
               BlockThumbnail,
               {
                 visual: active.visual,
+                buildPlayback: builds.cursor,
                 viewport,
                 basePath,
                 mediaProvider
@@ -2074,10 +2103,11 @@ function RecorderSlidesPanel({
 }
 
 // src/recorder/RecorderModal.tsx
+import { recordBuildAdvance } from "@bendyline/squisq/schemas";
 import {
   Fragment as Fragment2,
   useCallback as useCallback4,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useId as useId2,
   useMemo,
   useRef as useRef2,
@@ -2278,14 +2308,17 @@ var modalStyle = {
   border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 0,
   padding: "24px 28px",
+  boxSizing: "border-box",
   width: "min(560px, calc(100vw - 48px))",
-  maxHeight: "calc(100vh - 48px)",
+  maxHeight: "calc(100dvh - 48px)",
   overflowY: "auto",
+  overscrollBehaviorY: "contain",
   boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
   fontFamily: "system-ui, -apple-system, sans-serif",
   color: "var(--squisq-recorder-text)"
 };
 var titleStyle = {
+  flexShrink: 0,
   margin: "0 0 16px 0",
   fontSize: 18,
   fontWeight: 600,
@@ -2466,8 +2499,7 @@ var recordingStatusStyle = {
 var modalExpandedStyle = {
   ...modalStyle,
   width: "calc(100vw - 48px)",
-  height: "calc(100vh - 48px)",
-  maxHeight: "none",
+  height: "calc(100dvh - 48px)",
   overflowY: "hidden",
   display: "flex",
   flexDirection: "column"
@@ -2481,6 +2513,7 @@ var bodyRowStyle = {
 var leftColStyle = {
   flex: "0 0 min(420px, 38vw)",
   overflowY: "auto",
+  overscrollBehaviorY: "contain",
   minHeight: 0,
   paddingRight: 4
 };
@@ -2499,6 +2532,11 @@ var checkboxRowStyle = {
   marginBottom: 12,
   fontSize: 13
 };
+var modeTogglesStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  columnGap: 20
+};
 var meterLevelStyle = {
   position: "absolute",
   left: 0,
@@ -2708,6 +2746,19 @@ function RecorderModal({
   const slidesAvailable = slideDeck.length > 0;
   const slidesCaptureTimings = Boolean(slides?.captureTimings && slides?.doc);
   const [slideIndex, setSlideIndex] = useState3(0);
+  const [buildLog, setBuildLog] = useState3([]);
+  const buildLogRef = useRef2(buildLog);
+  buildLogRef.current = buildLog;
+  const handleBuildShown = useCallback4(
+    (blockId, step, sourceText2) => {
+      const elapsed = recorder.getElapsedMs();
+      if (elapsed !== null)
+        setBuildLog(
+          (log) => recordBuildAdvance(log, { blockId, step, sourceText: sourceText2, time: elapsed / 1e3 })
+        );
+    },
+    [recorder]
+  );
   const [advanceLog, setAdvanceLog] = useState3(EMPTY_ADVANCE_LOG);
   const [applySlideTimings, setApplySlideTimings] = useState3(true);
   const slideIndexRef = useRef2(slideIndex);
@@ -2732,11 +2783,12 @@ function RecorderModal({
     [recorder]
   );
   const slideDeckKey = slideDeck.map((slide) => slide.blockId).join("\0");
-  useEffect4(() => {
+  useEffect5(() => {
     setAdvanceLog(EMPTY_ADVANCE_LOG);
+    setBuildLog([]);
     setSlideIndex(0);
   }, [slidesOn, slideDeckKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationOn || narrationRecording) return;
     const controller = stageRef.current.controller;
     if (recorder.state === "recording") controller.play();
@@ -2754,7 +2806,7 @@ function RecorderModal({
     [narrationRecording]
   );
   const narrationMicDeviceId = stage.controller.prefs.micDeviceId ?? "";
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationRecording) return;
     setDeviceSettings(
       (current) => current.audio.deviceId === narrationMicDeviceId ? current : {
@@ -2764,7 +2816,7 @@ function RecorderModal({
     );
   }, [narrationMicDeviceId, narrationRecording]);
   const prevNarrationOnRef = useRef2(narrationOn);
-  useEffect4(() => {
+  useEffect5(() => {
     const was = prevNarrationOnRef.current;
     prevNarrationOnRef.current = narrationOn;
     if (was === narrationOn) return;
@@ -2779,7 +2831,7 @@ function RecorderModal({
       if (s.float.isOpen) s.float.close();
     }
   }, [narrationOn, narrationRecording, recorder]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!narrationOn) return;
     const onKey = (event) => {
       if (event.key !== "Escape") return;
@@ -2792,7 +2844,7 @@ function RecorderModal({
   const narrationMicLive = stage.controller.mic.status === "live";
   const narrationPreviewWanted = narrationRecording && stage.recorder.withCamera && narrationMicLive && stage.recorder.cameraStream === null && stage.recorder.state !== "processing" && stage.recorder.state !== "review" && stage.recorder.state !== "saving";
   const narrationPreviewRef = useRef2(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const existing = narrationPreviewRef.current;
     if (existing) {
       for (const track of existing.getTracks()) track.stop();
@@ -2843,7 +2895,7 @@ function RecorderModal({
   const activePrimaryStream = narrationRecording ? stage.controller.mic.stream : recorder.stream;
   const activeCameraStream = narrationRecording ? narrationCameraStream : recorder.camera?.stream ?? null;
   const { devices: mediaDevices, refresh: refreshMediaDevices } = useMediaDevices();
-  useEffect4(() => {
+  useEffect5(() => {
     if (activePrimaryStream || activeCameraStream) refreshMediaDevices();
   }, [activeCameraStream, activePrimaryStream, refreshMediaDevices]);
   useStreamPreview(
@@ -2854,7 +2906,7 @@ function RecorderModal({
     cameraPreviewRef,
     !narrationRecording && isDual && recorder.state !== "stopped" ? recorder.camera?.stream ?? null : null
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setPlaybackPositionMs(0);
     if (!recorder.blob) {
       setPlaybackUrl(null);
@@ -2867,7 +2919,7 @@ function RecorderModal({
     };
   }, [recorder.blob]);
   const cameraBlob = recorder.camera?.blob ?? null;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!cameraBlob) {
       setCameraPlaybackUrl(null);
       return;
@@ -2881,7 +2933,7 @@ function RecorderModal({
   const captureKey = `${source}:${cameraOn ? micOn : ""}:${includeSystemAudio}:${JSON.stringify(deviceSettings)}`;
   const previousKeyRef = useRef2(captureKey);
   const dualSaveProgressRef = useRef2({});
-  useEffect4(() => {
+  useEffect5(() => {
     if (previousKeyRef.current !== captureKey) {
       previousKeyRef.current = captureKey;
       dualSaveProgressRef.current = {};
@@ -2937,6 +2989,7 @@ function RecorderModal({
       setCountingIn(false);
       if (!rolled) return;
     }
+    setBuildLog([]);
     recorder.start();
     const blockId = slideDeckRef.current[slideIndexRef.current]?.blockId;
     setAdvanceLog(blockId ? recordSlideShown(EMPTY_ADVANCE_LOG, blockId, 0) : EMPTY_ADVANCE_LOG);
@@ -2955,7 +3008,10 @@ function RecorderModal({
       if (!slidesOn || !slidesCaptureTimings || !applySlideTimings || !doc) return null;
       const log = advanceLogRef.current;
       if (log.length === 0) return null;
-      const timing = buildAdvanceTimingJson(doc, log, durationSec);
+      const timing = {
+        ...buildAdvanceTimingJson(doc, log, durationSec),
+        builds: buildLogRef.current
+      };
       const encoded = encodeNarrationTimingJson(timing);
       const sidecarPath = timingPathFor(mediaRelativePath);
       if (container) {
@@ -3167,13 +3223,16 @@ function RecorderModal({
     [source, recorder.extension, recorder.blob, isDual, basename, filenameSeed]
   );
   const timingDownloadFilename = `${downloadFilename}.timing.json`;
-  useEffect4(() => {
+  useEffect5(() => {
     if (narrationRecording || !canSave) {
       setTimingDownloadUrl(null);
       return;
     }
     const duration = recorder.durationMs / 1e3;
-    const encoded = slidesOn && slidesCaptureTimings && applySlideTimings && slides?.doc && advanceLog.length > 0 ? encodeNarrationTimingJson(buildAdvanceTimingJson(slides.doc, advanceLog, duration)) : source === "mic" ? encodeTimingJson(buildTimingJson(sourceText, duration)) : null;
+    const encoded = slidesOn && slidesCaptureTimings && applySlideTimings && slides?.doc && advanceLog.length > 0 ? encodeNarrationTimingJson({
+      ...buildAdvanceTimingJson(slides.doc, advanceLog, duration),
+      builds: buildLog
+    }) : source === "mic" ? encodeTimingJson(buildTimingJson(sourceText, duration)) : null;
     if (encoded === null) {
       setTimingDownloadUrl(null);
       return;
@@ -3187,6 +3246,7 @@ function RecorderModal({
     narrationRecording,
     canSave,
     recorder.durationMs,
+    buildLog,
     slidesOn,
     slidesCaptureTimings,
     applySlideTimings,
@@ -3322,33 +3382,35 @@ function RecorderModal({
                       }) })
                     ] }, group.label)) }),
                     /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: narrationRecording ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                    narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                      /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: "checkbox",
-                          style: { accentColor: "var(--squisq-recorder-accent)" },
-                          checked: narrationOn,
-                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
-                          disabled: narrationToggleDisabled,
-                          title: narrationToggleDisabled ? narrationRecording ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
-                        }
-                      ),
-                      "Show narration mode"
-                    ] }),
-                    slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                      /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: "checkbox",
-                          style: { accentColor: "var(--squisq-recorder-accent)" },
-                          checked: slidesOn,
-                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
-                          disabled: narrationToggleDisabled,
-                          title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
-                        }
-                      ),
-                      "Show slides mode"
+                    /* @__PURE__ */ jsxs5("div", { style: modeTogglesStyle, children: [
+                      narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            style: { accentColor: "var(--squisq-recorder-accent)" },
+                            checked: narrationOn,
+                            onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
+                            disabled: narrationToggleDisabled,
+                            title: narrationToggleDisabled ? narrationRecording ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
+                          }
+                        ),
+                        "Show narration mode"
+                      ] }),
+                      slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            style: { accentColor: "var(--squisq-recorder-accent)" },
+                            checked: slidesOn,
+                            onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
+                            disabled: narrationToggleDisabled,
+                            title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
+                          }
+                        ),
+                        "Show slides mode"
+                      ] })
                     ] }),
                     /* @__PURE__ */ jsx6(
                       RecorderDeviceQuickPicks,
@@ -3764,6 +3826,7 @@ function RecorderModal({
                   slides: slideDeck,
                   index: slideIndex,
                   onIndexChange: handleSlideIndexChange,
+                  onBuildShown: handleBuildShown,
                   viewport: slidesViewport,
                   basePath: slides?.basePath,
                   mediaProvider: slides?.mediaProvider ?? mediaProvider,

package/dist/chunk-UYB5CPRE.js

@@ -0,0 +1,235 @@
+// src/chromeIcons.ts
+import {
+  AppWindow,
+  ArrowDown,
+  ArrowLeftRight,
+  ArrowUp,
+  Ban,
+  Bold,
+  Captions,
+  ChartColumn,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsRight,
+  ChevronUp,
+  CirclePlay,
+  Clock,
+  Code,
+  Copy,
+  CopyPlus,
+  Crop,
+  Ellipsis,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FaceSlightlySmiling,
+  File,
+  FileCode,
+  FileCog,
+  FileImage,
+  FileText,
+  FileUp,
+  Film,
+  Folder,
+  FolderOpen,
+  FolderPlus,
+  FolderTree,
+  GitBranch,
+  GitCommitHorizontal,
+  GripHorizontal,
+  GripVertical,
+  Image,
+  Images,
+  Italic,
+  LayoutDashboard,
+  LayoutPanelLeft,
+  LayoutTemplate,
+  Link,
+  List,
+  ListChecks,
+  ListIndentDecrease,
+  ListIndentIncrease,
+  ListOrdered,
+  Lock,
+  LockOpen,
+  Maximize2,
+  MessageSquareMore,
+  Mic,
+  MicVocal,
+  Minimize2,
+  Minus,
+  Monitor,
+  MousePointer2,
+  Move,
+  MoveRight,
+  PaintBucket,
+  Paperclip,
+  Pencil,
+  PenTool,
+  Plus,
+  Printer,
+  Quote,
+  RotateCcwClock,
+  Search,
+  Settings2,
+  Shapes,
+  Share2,
+  SlidersHorizontal,
+  Square,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TextAlignCenter,
+  TextAlignEnd,
+  TextAlignStart,
+  Trash,
+  TriangleAlert,
+  Type,
+  Unlink,
+  Volume2,
+  WandSparkles,
+  Workflow,
+  X
+} from "lucide-react";
+var CHROME_ICONS = {
+  // Text formatting
+  bold: Bold,
+  italic: Italic,
+  strikethrough: Strikethrough,
+  superscript: Superscript,
+  subscript: Subscript,
+  font: Type,
+  code: Code,
+  "quote-left": Quote,
+  "list-ul": List,
+  "list-ol": ListOrdered,
+  "list-check": ListChecks,
+  indent: ListIndentIncrease,
+  outdent: ListIndentDecrease,
+  "align-left": TextAlignStart,
+  "align-center": TextAlignCenter,
+  "align-right": TextAlignEnd,
+  minus: Minus,
+  // Insert
+  plus: Plus,
+  link: Link,
+  "link-slash": Unlink,
+  table: Table,
+  image: Image,
+  images: Images,
+  "photo-film": Images,
+  "file-image": FileImage,
+  "file-arrow-up": FileUp,
+  "file-code": FileCode,
+  "chart-column": ChartColumn,
+  "diagram-project": Workflow,
+  "code-branch": GitBranch,
+  "folder-tree": FolderTree,
+  timeline: GitCommitHorizontal,
+  "pen-nib": PenTool,
+  "object-group": LayoutPanelLeft,
+  "circle-play": CirclePlay,
+  "face-smile": FaceSlightlySmiling,
+  microphone: Mic,
+  "microphone-lines": MicVocal,
+  "comment-dots": MessageSquareMore,
+  "volume-high": Volume2,
+  film: Film,
+  // Documents and files
+  file: File,
+  "file-lines": FileText,
+  folder: Folder,
+  "folder-open": FolderOpen,
+  "folder-plus": FolderPlus,
+  paperclip: Paperclip,
+  print: Printer,
+  "share-nodes": Share2,
+  "up-right-from-square": ExternalLink,
+  // Views and modes
+  eye: Eye,
+  "eye-slash": EyeOff,
+  display: Monitor,
+  "window-maximize": AppWindow,
+  "table-cells-large": LayoutDashboard,
+  expand: Maximize2,
+  compress: Minimize2,
+  "closed-captioning": Captions,
+  "clock-rotate-left": RotateCcwClock,
+  clock: Clock,
+  // Editing actions
+  pen: Pencil,
+  copy: Copy,
+  clone: CopyPlus,
+  trash: Trash,
+  check: Check,
+  xmark: X,
+  ban: Ban,
+  lock: Lock,
+  "lock-open": LockOpen,
+  "crop-simple": Crop,
+  "fill-drip": PaintBucket,
+  "border-top-left": Square,
+  square: Square,
+  shapes: Shapes,
+  sliders: SlidersHorizontal,
+  "wand-magic-sparkles": WandSparkles,
+  "magnifying-glass": Search,
+  "right-left": ArrowLeftRight,
+  "triangle-exclamation": TriangleAlert,
+  // Navigation and handles
+  "chevron-up": ChevronUp,
+  "chevron-down": ChevronDown,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "angles-right": ChevronsRight,
+  "arrow-up": ArrowUp,
+  "arrow-down": ArrowDown,
+  "arrow-right-long": MoveRight,
+  "arrow-pointer": MousePointer2,
+  "arrows-up-down-left-right": Move,
+  "grip-vertical": GripVertical,
+  "grip-lines": GripHorizontal,
+  ellipsis: Ellipsis,
+  // Lucide-only glyphs, named directly by a call site
+  "layout-template": LayoutTemplate,
+  "file-cog": FileCog,
+  "settings-2": Settings2
+};
+var FA_MODIFIERS = /* @__PURE__ */ new Set(["fa-solid", "fa-regular", "fa-light", "fa-thin", "fa-fw", "fa-lg"]);
+function chromeIconFor(icon) {
+  const tokens = icon.split(/\s+/u).filter(Boolean);
+  if (tokens.includes("fa-brands")) return void 0;
+  for (const token of tokens) {
+    if (FA_MODIFIERS.has(token)) continue;
+    const glyph = CHROME_ICONS[token.startsWith("fa-") ? token.slice(3) : token];
+    if (glyph) return glyph;
+  }
+  return void 0;
+}
+
+// src/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+var STROKE_WIDTH = 1.75;
+function Icon({ icon, className, style }) {
+  const Glyph = chromeIconFor(icon);
+  if (Glyph) {
+    return /* @__PURE__ */ jsx(
+      Glyph,
+      {
+        className: className ? `squisq-icon ${className}` : "squisq-icon",
+        style,
+        strokeWidth: STROKE_WIDTH,
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("i", { className: className ? `${icon} ${className}` : icon, style, "aria-hidden": "true" });
+}
+
+export {
+  Icon
+};