@crewlethq/ui 0.34.2 → 0.35.1

package/dist/chunk-PI7HKLIT.js

@@ -0,0 +1,245 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SourceEditor-G2C3STPX.css';
+import { forwardRef, useRef, useId, useState, useImperativeHandle, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SOURCE_EDITOR_KEYS = "Tab indents and Shift+Tab outdents. Press Escape, then Tab, to move to the next control.";
+function lineStart(text, line) {
+  let at = 0;
+  for (let n = 1; n < line; n++) {
+    const next = text.indexOf("\n", at);
+    if (next < 0) return text.length;
+    at = next + 1;
+  }
+  return at;
+}
+function insert(field, text, start, end) {
+  field.setSelectionRange(start, end);
+  const done = typeof document.execCommand === "function" && document.execCommand("insertText", false, text);
+  if (!done) field.setRangeText(text, start, end, "end");
+  return field.value;
+}
+var SourceEditor = forwardRef(
+  function SourceEditor2({
+    value,
+    onChange,
+    label,
+    marks = [],
+    onSubmit,
+    indent = 2,
+    fill = false,
+    rows = 12,
+    className,
+    fieldClassName,
+    onKeyDown,
+    onScroll,
+    "aria-describedby": describedBy,
+    ...rest
+  }, ref) {
+    const field = useRef(null);
+    const tabLeaves = useRef(false);
+    const keysId = useId();
+    const [scrollTop, setScrollTop] = useState(0);
+    const lines = countLines(value);
+    const tone = toneByLine(marks, lines);
+    useImperativeHandle(
+      ref,
+      () => ({
+        revealLine(line) {
+          const el = field.current;
+          if (!el) return;
+          const at = lineStart(el.value, Math.max(1, line));
+          el.focus();
+          el.setSelectionRange(at, at);
+          const height = parseFloat(getComputedStyle(el).lineHeight) || 20;
+          const top = (Math.max(1, line) - 1) * height;
+          if (top < el.scrollTop || top + height > el.scrollTop + el.clientHeight) {
+            el.scrollTop = Math.max(0, top - el.clientHeight / 3);
+          }
+        },
+        focus() {
+          field.current?.focus();
+        },
+        get element() {
+          return field.current;
+        }
+      }),
+      []
+    );
+    useLayoutEffect(() => {
+      const el = field.current;
+      if (el && el.scrollTop !== scrollTop) setScrollTop(el.scrollTop);
+    }, [value, scrollTop]);
+    const keyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const el = event.currentTarget;
+      if (event.key === "Escape") {
+        tabLeaves.current = true;
+        return;
+      }
+      if (event.key === "Tab") {
+        if (tabLeaves.current || event.altKey || event.metaKey || event.ctrlKey) {
+          tabLeaves.current = false;
+          return;
+        }
+        event.preventDefault();
+        onChange(
+          event.shiftKey ? outdent(el, indent) : indentLines(el, indent)
+        );
+        return;
+      }
+      tabLeaves.current = false;
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        if (!onSubmit) return;
+        event.preventDefault();
+        onSubmit();
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey && !event.altKey) {
+        const before = el.value.slice(0, el.selectionStart);
+        const lead = /^[\t ]*/.exec(before.slice(before.lastIndexOf("\n") + 1))?.[0] ?? "";
+        if (!lead) return;
+        event.preventDefault();
+        onChange(insert(el, `
+${lead}`, el.selectionStart, el.selectionEnd));
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("crewlet-source-editor", fill && "is-fill", className),
+        style: {
+          "--crewlet-source-digits": String(String(lines).length)
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-source-editor__gutter", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "crewlet-source-editor__numbers",
+              style: { transform: `translateY(${-scrollTop}px)` },
+              children: Array.from({ length: lines }, (_, i) => {
+                const line = i + 1;
+                const mark = tone.get(line);
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "crewlet-source-editor__number",
+                      mark && `is-${mark.tone}`
+                    ),
+                    title: mark?.message,
+                    children: line
+                  },
+                  line
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-source-editor__body", children: [
+            /* @__PURE__ */ jsx("div", { className: "crewlet-source-editor__marks", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${-scrollTop}px)` }, children: [...tone.entries()].map(([line, mark]) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(
+                  "crewlet-source-editor__mark",
+                  `is-${mark.tone}`
+                ),
+                style: {
+                  "--crewlet-source-line": String(line - 1)
+                }
+              },
+              line
+            )) }) }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: field,
+                className: cx("crewlet-source-editor__field", fieldClassName),
+                "aria-label": label,
+                "aria-describedby": cx(keysId, describedBy) || void 0,
+                "aria-invalid": [...tone.values()].some((m) => m.tone === "danger") || void 0,
+                value,
+                rows,
+                wrap: "off",
+                spellCheck: false,
+                autoCapitalize: "off",
+                autoComplete: "off",
+                autoCorrect: "off",
+                onChange: (event) => onChange(event.target.value),
+                onKeyDown: keyDown,
+                onBlur: () => {
+                  tabLeaves.current = false;
+                },
+                onScroll: (event) => {
+                  onScroll?.(event);
+                  setScrollTop(event.currentTarget.scrollTop);
+                },
+                ...rest
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { id: keysId, children: SOURCE_EDITOR_KEYS })
+        ]
+      }
+    );
+  }
+);
+function countLines(text) {
+  let n = 1;
+  for (let i = text.indexOf("\n"); i >= 0; i = text.indexOf("\n", i + 1)) n++;
+  return n;
+}
+function toneByLine(marks, lines) {
+  const out = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    if (!Number.isInteger(mark.line) || mark.line < 1 || mark.line > lines)
+      continue;
+    const held = out.get(mark.line);
+    if (!held || held.tone === "warning" && mark.tone === "danger")
+      out.set(mark.line, mark);
+  }
+  return out;
+}
+function selectedLines(el) {
+  const text = el.value;
+  const from = text.lastIndexOf("\n", el.selectionStart - 1) + 1;
+  const endAt = el.selectionEnd > el.selectionStart && text[el.selectionEnd - 1] === "\n" ? el.selectionEnd - 1 : el.selectionEnd;
+  const next = text.indexOf("\n", endAt);
+  return { from, to: next < 0 ? text.length : next };
+}
+function indentLines(el, size) {
+  const pad = " ".repeat(size);
+  if (el.selectionStart === el.selectionEnd) {
+    const column = el.selectionStart - (el.value.lastIndexOf("\n", el.selectionStart - 1) + 1);
+    return insert(
+      el,
+      " ".repeat(size - column % size),
+      el.selectionStart,
+      el.selectionEnd
+    );
+  }
+  const { from, to } = selectedLines(el);
+  const block = el.value.slice(from, to).replace(/^/gm, pad);
+  const value = insert(el, block, from, to);
+  el.setSelectionRange(from, from + block.length);
+  return value;
+}
+function outdent(el, size) {
+  const { from, to } = selectedLines(el);
+  const strip = new RegExp(`^(?: {1,${size}}|\\t)`, "gm");
+  const original = el.value.slice(from, to);
+  const block = original.replace(strip, "");
+  if (block === original) return el.value;
+  const caret = el.selectionStart === el.selectionEnd;
+  const at = el.selectionStart;
+  const removed = (/^(?: +|\t)/.exec(original)?.[0].length ?? 0) - (/^(?: +|\t)/.exec(block)?.[0].length ?? 0);
+  const value = insert(el, block, from, to);
+  if (caret) {
+    const back = Math.max(from, at - removed);
+    el.setSelectionRange(back, back);
+  } else el.setSelectionRange(from, from + block.length);
+  return value;
+}
+
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart };

package/dist/{chunk-YZFLH463.js → chunk-QEFHYUCY.js}

@@ -1,6 +1,6 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Input } from './chunk-6QFAK2WV.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-NPQWKZTB.js → chunk-QFNWMWWY.js}

@@ -1,5 +1,5 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DataTable } from './chunk-UXXJDIYE.js';
+import { DataTable } from './chunk-22CQQDFW.js';
 import { DateTimePicker } from './chunk-73A7D5CE.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
@@ -8,7 +8,7 @@ import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-C7DKX453.js → chunk-QH6VYJ3X.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-KK5OYNAF.js';
+import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-BAKPMH3S.js';
 import { Schema, Fragment } from 'prosemirror-model';
 
 function headingTag(level) {

package/dist/{chunk-XV32RKQZ.js → chunk-QIXMNOBD.js}

@@ -1,18 +1,24 @@
 import { SlideStage } from './chunk-LV4APO72.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
+import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideFilmstrip-5U6Z55GS.css';
-import { useRef, useLayoutEffect } from 'react';
-import { EyeOffGlyph, GripVerticalGlyph } from '@crewlethq/icons/glyphs';
+import './SlideFilmstrip-4ITZLMO4.css';
+import { useRef, useLayoutEffect, useState } from 'react';
+import { EyeOffGlyph, GripVerticalGlyph, EllipsisGlyph, CopyGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LABELS = {
   list: "Slides",
   slide: (position, title) => `Slide ${position}, ${title}`,
   hidden: "Hidden when presenting",
-  untitled: "Untitled"
+  untitled: "Untitled",
+  actions: (position, title) => `Actions for slide ${position}, ${title}`,
+  duplicate: "Duplicate slide",
+  delete: "Delete slide"
 };
+var DELETE_KEY = () => isApplePlatform() ? "Backspace" : "Delete";
 var STEP_KEYS = {
   vertical: { back: "ArrowUp", forward: "ArrowDown" },
   horizontal: { back: "ArrowLeft", forward: "ArrowRight" }
@@ -24,6 +30,10 @@ function SlideFilmstrip({
   renderSlide,
   onReorder,
   orientation = "vertical",
+  onDuplicate,
+  onDelete,
+  actions,
+  footer,
   className,
   labels
 }) {
@@ -53,7 +63,43 @@ function SlideFilmstrip({
     onSelect(id);
     options.current.get(id)?.focus();
   };
+  const [menuFor, setMenuFor] = useState(null);
+  const menuOf = (id) => [
+    ...onDuplicate ? [{
+      key: "duplicate",
+      label: text.duplicate,
+      icon: /* @__PURE__ */ jsx(CopyGlyph, { size: "sm" }),
+      onSelect: () => onDuplicate(id),
+      hint: /* @__PURE__ */ jsx(Kbd, { subtle: true, keys: ["Mod", "D"] })
+    }] : [],
+    ...onDelete ? [{
+      key: "delete",
+      label: text.delete,
+      icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+      onSelect: () => onDelete(id),
+      danger: true,
+      hint: /* @__PURE__ */ jsx(Kbd, { subtle: true, keys: [DELETE_KEY()] })
+    }] : [],
+    ...actions?.(id) ?? []
+  ];
   const onKeyDown = (event) => {
+    const mod = event.metaKey || event.ctrlKey;
+    if (onDuplicate && mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "d") {
+      event.preventDefault();
+      onDuplicate(selected);
+      return;
+    }
+    if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+      if (menuOf(selected).length === 0) return;
+      event.preventDefault();
+      setMenuFor(selected);
+      return;
+    }
+    if (onDelete && !mod && !event.altKey && (event.key === "Delete" || event.key === "Backspace")) {
+      event.preventDefault();
+      onDelete(selected);
+      return;
+    }
     const at = order.indexOf(selected);
     const step = STEP_KEYS[orientation];
     const to = {
@@ -82,6 +128,7 @@ function SlideFilmstrip({
             children: order.map((id, i) => {
               const slide = byId.get(id);
               const isSelected = id === selected;
+              const menu = menuOf(id);
               return /* @__PURE__ */ jsxs(
                 "li",
                 {
@@ -111,14 +158,28 @@ function SlideFilmstrip({
                         ]
                       }
                     ),
-                    onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null
+                    onReorder || menu.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-filmstrip__controls", children: [
+                      onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null,
+                      menu.length > 0 ? /* @__PURE__ */ jsx(
+                        Menu,
+                        {
+                          label: text.actions(i + 1, titleOf(id)),
+                          icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "sm" }),
+                          triggerTabIndex: -1,
+                          items: menu,
+                          open: menuFor === id,
+                          onOpenChange: (open) => setMenuFor(open ? id : null)
+                        }
+                      ) : null
+                    ] }) : null
                   ]
                 },
                 id
               );
             })
           }
-        )
+        ),
+        footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-slide-filmstrip__footer", children: footer }) : null
       ]
     }
   );

package/dist/{chunk-GPHWCK7M.js → chunk-SUXP4OBT.js}

@@ -3,10 +3,13 @@ import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 
+function HueSwatch({ hue, className }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("crewlet-hue-picker__swatch", `crewlet-hue-picker__swatch--${hue}`, className) });
+}
 var optionsFor = (disabled) => NODE_HUES.map((hue) => ({
   value: hue,
   label: NODE_HUE_NAMES[hue],
-  icon: /* @__PURE__ */ jsx("span", { className: `crewlet-hue-picker__swatch crewlet-hue-picker__swatch--${hue}` }),
+  icon: /* @__PURE__ */ jsx(HueSwatch, { hue }),
   disabled
 }));
 var ENABLED = optionsFor(false);
@@ -18,7 +21,7 @@ function HuePicker(props) {
     {
       value: "none",
       label: props.none,
-      icon: /* @__PURE__ */ jsx("span", { className: "crewlet-hue-picker__swatch crewlet-hue-picker__swatch--none" }),
+      icon: /* @__PURE__ */ jsx(HueSwatch, { hue: "none" }),
       disabled
     },
     ...hues
@@ -42,4 +45,4 @@ function HuePicker(props) {
   );
 }
 
-export { HuePicker };
+export { HuePicker, HueSwatch };

package/dist/{chunk-TRQCHF2F.js → chunk-SWD4QBL6.js}

@@ -1,4 +1,4 @@
-import { readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
+import { readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 
 // src/RichEditor/roundtrip.ts
 function roundTripMarkdown(markdown) {

package/dist/chunk-THDGBD6Y.js

@@ -0,0 +1,154 @@
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FileDrop-WE7BNZGV.css';
+import { forwardRef, useRef, useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function clean(path) {
+  return path.replace(/\\/g, "/").replace(/^\/+/, "");
+}
+async function walk(entry, out) {
+  if (entry.isFile && entry.file) {
+    const file = await new Promise((ok, fail) => entry.file(ok, fail));
+    out.push({ path: clean(entry.fullPath || entry.name), file });
+    return;
+  }
+  if (entry.isDirectory && entry.createReader) {
+    const reader = entry.createReader();
+    for (; ; ) {
+      const batch = await new Promise(
+        (ok, fail) => reader.readEntries(ok, fail)
+      );
+      if (batch.length === 0) break;
+      for (const child of batch) await walk(child, out);
+    }
+  }
+}
+async function droppedFiles(data) {
+  const entries = [];
+  for (const item of Array.from(data.items ?? [])) {
+    if (item.kind !== "file") continue;
+    const entry = item.webkitGetAsEntry?.();
+    if (entry) entries.push(entry);
+  }
+  if (entries.length === 0) {
+    return Array.from(data.files ?? []).map((file) => ({
+      path: clean(file.name),
+      file
+    }));
+  }
+  const out = [];
+  for (const entry of entries) await walk(entry, out);
+  return out;
+}
+function pickedFiles(list) {
+  return Array.from(list ?? []).map((file) => ({
+    path: clean(
+      file.webkitRelativePath || file.name
+    ),
+    file
+  }));
+}
+function carriesFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+var FilePickButton = forwardRef(function FilePickButton2({ onFiles, accept, directory = false, multiple = true, children, ...rest }, ref) {
+  const input = useRef(null);
+  const folder = directory ? {
+    webkitdirectory: "",
+    directory: ""
+  } : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { ref, ...rest, onClick: () => input.current?.click(), children }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: input,
+        type: "file",
+        className: "crewlet-file-drop__input",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        accept,
+        multiple: directory || multiple,
+        onChange: (event) => {
+          const files = pickedFiles(event.currentTarget.files);
+          event.currentTarget.value = "";
+          if (files.length > 0) onFiles(files);
+        },
+        ...folder
+      }
+    )
+  ] });
+});
+var FileDrop = forwardRef(
+  function FileDrop2({
+    onFiles,
+    children,
+    title,
+    hint,
+    actions,
+    disabled = false,
+    className,
+    ...rest
+  }, ref) {
+    const [over, setOver] = useState(false);
+    const depth = useRef(0);
+    const region = children !== void 0;
+    const enter = (event) => {
+      if (disabled || !carriesFiles(event)) return;
+      event.preventDefault();
+      depth.current += 1;
+      setOver(true);
+    };
+    const leave = (event) => {
+      if (disabled || !carriesFiles(event)) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setOver(false);
+    };
+    const overIt = (event) => {
+      if (disabled || !carriesFiles(event)) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+    };
+    const drop = (event) => {
+      if (disabled || !carriesFiles(event)) return;
+      event.preventDefault();
+      depth.current = 0;
+      setOver(false);
+      void droppedFiles(event.dataTransfer).then((files) => {
+        if (files.length > 0) onFiles(files);
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          "crewlet-file-drop",
+          region ? "is-region" : "is-target",
+          over && "is-over",
+          disabled && "is-disabled",
+          className
+        ),
+        onDragEnter: enter,
+        onDragLeave: leave,
+        onDragOver: overIt,
+        onDrop: drop,
+        ...rest,
+        children: region ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          over ? /* @__PURE__ */ jsxs("div", { className: "crewlet-file-drop__overlay", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-file-drop__title", children: title }),
+            hint ? /* @__PURE__ */ jsx("span", { className: "crewlet-file-drop__hint", children: hint }) : null
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-file-drop__title", children: title }),
+          hint ? /* @__PURE__ */ jsx("span", { className: "crewlet-file-drop__hint", children: hint }) : null,
+          actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-file-drop__actions", children: actions }) : null
+        ] })
+      }
+    );
+  }
+);
+
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles };

package/dist/{chunk-C2FRTWKO.js → chunk-W3UVOZKL.js}

@@ -2,7 +2,7 @@ import { ThemeSwatch } from './chunk-MNFU2RNT.js';
 import { useHighlightRest } from './chunk-F73MC7EZ.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ThemeGallery-NITASULQ.css';
+import './ThemeGallery-HSUKBDWY.css';
 import { useId } from 'react';
 import { themeGroups, themeRegistry } from '@crewlethq/tokens';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -16,6 +16,7 @@ function ThemeGallery({
   groups = themeGroups,
   columns = 3,
   disabled = false,
+  renderPreview,
   className,
   style,
   ...rest
@@ -77,7 +78,7 @@ function ThemeGallery({
                     onKeyDown: (event) => onKeyDown(event, true),
                     onMouseEnter: () => preview.rest(theme.id),
                     children: [
-                      /* @__PURE__ */ jsx(ThemeSwatch, { swatch: theme.swatch, size: "card" }),
+                      renderPreview ? /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__preview", "aria-hidden": "true", children: renderPreview(theme) }) : theme.swatch ? /* @__PURE__ */ jsx(ThemeSwatch, { swatch: theme.swatch, size: "card" }) : null,
                       /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__name", children: theme.name })
                     ]
                   },