@textcortex/slidewise 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
   "type": "module",

package/src/SlidewiseEditor.tsx

@@ -1,7 +1,12 @@
 import { forwardRef, type CSSProperties } from "react";
-import { Root, type SlidewiseRootHandle, type SlidewiseRootProps } from "./compound/SlidewiseRoot";
 import {
-  TopBar,
+  Root,
+  type SlidewiseRootHandle,
+  type SlidewiseRootProps,
+  type HistoryState,
+} from "./compound/SlidewiseRoot";
+import { TopBar } from "./compound/topbar";
+import {
   SlideRail,
   Canvas,
   BottomToolbar,
@@ -30,6 +35,11 @@ export interface SlidewiseEditorProps {
   onExport?: (deck: Deck) => void;
   /** Fires when the dirty flag flips. Useful for "unsaved changes" banners. */
   onDirtyChange?: (dirty: boolean) => void;
+  /**
+   * Fires whenever the undo/redo stack depths change. Use this to enable/disable
+   * Undo and Redo buttons reactively without polling `api.canUndo()`.
+   */
+  onHistoryChange?: (state: HistoryState) => void;
   /** Reserved for future use; not enforced yet. */
   readOnly?: boolean;
   /** "light" or "dark"; defaults to "light". Ignored after first render. */
@@ -86,6 +96,7 @@ export const SlidewiseEditor = forwardRef<
     onSave,
     onExport,
     onDirtyChange,
+    onHistoryChange,
     readOnly,
     theme,
     initialSlideId,
@@ -104,6 +115,7 @@ export const SlidewiseEditor = forwardRef<
     onSave,
     onExport,
     onDirtyChange,
+    onHistoryChange,
     readOnly,
     theme,
     initialSlideId,

package/src/SlidewiseFileEditor.tsx

@@ -10,6 +10,7 @@ import { SlidewiseEditor, type SlidewiseEditorHandle } from "./SlidewiseEditor";
 import { parsePptx, serializeDeck } from "@/lib/pptx";
 import type { Deck } from "@/lib/types";
 import type { SlidewiseIcons } from "./compound/IconContext";
+import type { HistoryState } from "./compound/SlidewiseRoot";
 
 export interface SlidewiseFileEditorProps {
   /**
@@ -48,6 +49,12 @@ export interface SlidewiseFileEditorProps {
    * `api.isDirty()` for "unsaved changes" UI.
    */
   onDirtyChange?: (dirty: boolean) => void;
+  /**
+   * Fires whenever the undo/redo stack depths change. Use this to enable/
+   * disable host-rendered Undo/Redo buttons reactively without polling
+   * `api.canUndo()` / `api.canRedo()`.
+   */
+  onHistoryChange?: (state: HistoryState) => void;
   /**
    * Fires when `loadBlob` or `parse` throws on mount. The default render
    * still shows an in-editor "Could not open file" message, but hosts that
@@ -94,6 +101,19 @@ export interface SlidewiseFileEditorApi {
   stop(): void;
   undo(): void;
   redo(): void;
+  /** True iff there's at least one snapshot to undo back to. */
+  canUndo(): boolean;
+  /** True iff there's at least one snapshot to redo forward to. */
+  canRedo(): boolean;
+  /** Current undo/redo stack depths. */
+  getHistorySize(): { undo: number; redo: number };
+  /**
+   * End the in-flight coalesce burst. Call on natural commit boundaries
+   * (mouseup after drag, blur on a text input) so the next mutation starts
+   * a fresh history step. Most hosts won't need this — a 500ms idle window
+   * handles typical typing/drag bursts automatically.
+   */
+  endCoalesce(): void;
   /** Live deck snapshot. Hosts use this for header badges (slide count, etc.). */
   getDeck(): Deck | null;
   getInitialSha256(): string | null;
@@ -117,6 +137,7 @@ export const SlidewiseFileEditor = forwardRef<
     onChange,
     onDirtyChange,
     onLoadError,
+    onHistoryChange,
     theme,
     initialSlideId,
     showTopBar,
@@ -185,6 +206,11 @@ export const SlidewiseFileEditor = forwardRef<
       stop: () => editorRef.current?.stop(),
       undo: () => editorRef.current?.undo(),
       redo: () => editorRef.current?.redo(),
+      canUndo: () => editorRef.current?.canUndo() ?? false,
+      canRedo: () => editorRef.current?.canRedo() ?? false,
+      getHistorySize: () =>
+        editorRef.current?.getHistorySize() ?? { undo: 0, redo: 0 },
+      endCoalesce: () => editorRef.current?.endCoalesce(),
       getDeck: () => editorRef.current?.getDeck() ?? state.deck,
       getInitialSha256: () => initialSha256,
     };
@@ -210,6 +236,11 @@ export const SlidewiseFileEditor = forwardRef<
       stop: () => editorRef.current?.stop(),
       undo: () => editorRef.current?.undo(),
       redo: () => editorRef.current?.redo(),
+      canUndo: () => editorRef.current?.canUndo() ?? false,
+      canRedo: () => editorRef.current?.canRedo() ?? false,
+      getHistorySize: () =>
+        editorRef.current?.getHistorySize() ?? { undo: 0, redo: 0 },
+      endCoalesce: () => editorRef.current?.endCoalesce(),
       getDeck: () =>
         state.status === "ready"
           ? editorRef.current?.getDeck() ?? state.deck
@@ -255,6 +286,7 @@ export const SlidewiseFileEditor = forwardRef<
           setDirty(d);
           onDirtyChangeRef.current?.(d);
         }}
+        onHistoryChange={onHistoryChange}
         onSave={async (next) => {
           const blob = await serialize(next);
           await saveBlob(blob);

package/src/compound/DirtyContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+const DirtyContext = createContext<boolean>(false);
+
+export function DirtyProvider({
+  dirty,
+  children,
+}: {
+  dirty: boolean;
+  children: ReactNode;
+}) {
+  return <DirtyContext.Provider value={dirty}>{children}</DirtyContext.Provider>;
+}
+
+/**
+ * Reactive dirty flag. `true` when the deck has uncommitted edits since the
+ * last save / mount. Use this from host components anywhere under
+ * `<Slidewise.Root>` to render "Unsaved changes" UI without polling
+ * `api.isDirty()`.
+ *
+ * ```tsx
+ * function MyHeader() {
+ *   const dirty = useDirty();
+ *   return dirty ? <Badge>Unsaved</Badge> : null;
+ * }
+ * ```
+ */
+export function useDirty(): boolean {
+  return useContext(DirtyContext);
+}

package/src/compound/SlidewiseRoot.tsx

@@ -4,6 +4,7 @@ import {
   useId,
   useImperativeHandle,
   useRef,
+  useState,
   type CSSProperties,
   type PropsWithChildren,
   type Ref,
@@ -20,6 +21,7 @@ import { PlayMode } from "@/components/editor/PlayMode";
 import { HostProvider } from "./HostContext";
 import { IconProvider, type SlidewiseIcons } from "./IconContext";
 import { ReadOnlyProvider } from "./ReadOnlyContext";
+import { DirtyProvider } from "./DirtyContext";
 
 export interface SlidewiseRootProps {
   /**
@@ -36,6 +38,11 @@ export interface SlidewiseRootProps {
   onExport?: (deck: Deck) => void;
   /** Fires when the dirty flag flips. */
   onDirtyChange?: (dirty: boolean) => void;
+  /**
+   * Fires whenever the undo/redo stacks change depth. Use this to update
+   * "Undo"/"Redo" button enabled state without polling `canUndo()`/`canRedo()`.
+   */
+  onHistoryChange?: (state: HistoryState) => void;
   /**
    * Hide editing affordances (save / undo / redo) and disable canvas
    * mutations. Use this when the host viewer doesn't have write access.
@@ -59,11 +66,32 @@ export interface SlidewiseRootProps {
   style?: CSSProperties;
 }
 
+export interface HistoryState {
+  canUndo: boolean;
+  canRedo: boolean;
+  /** Snapshot counts. Useful for "X steps to redo" indicators. */
+  undoSize: number;
+  redoSize: number;
+}
+
 export interface SlidewiseRootHandle {
   play(): void;
   stop(): void;
   undo(): void;
   redo(): void;
+  /** True iff there's at least one snapshot to undo back to. */
+  canUndo(): boolean;
+  /** True iff there's at least one snapshot to redo forward to. */
+  canRedo(): boolean;
+  /** Current undo/redo stack depths. */
+  getHistorySize(): { undo: number; redo: number };
+  /**
+   * End the in-flight coalesce burst. Call on natural commit boundaries
+   * (mouseup after drag, blur on a text input) so the next mutation starts
+   * a fresh history step. Most hosts won't need this — the 500ms idle
+   * window handles typical typing/drag bursts.
+   */
+  endCoalesce(): void;
   getDeck(): Deck;
   isDirty(): boolean;
   resetDirty(): void;
@@ -95,6 +123,7 @@ function RootInner({
   onSave,
   onExport,
   onDirtyChange,
+  onHistoryChange: props_onHistoryChange,
   readOnly = false,
   theme,
   initialSlideId,
@@ -110,17 +139,20 @@ function RootInner({
   const store = useEditorStore();
   const savedDeckRef = useRef<Deck>(deck);
   const dirtyRef = useRef(false);
+  const [dirty, setDirty] = useState(false);
   const onChangeRef = useRef(onChange);
   const onDirtyChangeRef = useRef(onDirtyChange);
   const onSaveRef = useRef(onSave);
   const onExportRef = useRef(onExport);
+  const onHistoryChangeRef = useRef(props_onHistoryChange);
 
   useEffect(() => {
     onChangeRef.current = onChange;
     onDirtyChangeRef.current = onDirtyChange;
     onSaveRef.current = onSave;
     onExportRef.current = onExport;
-  }, [onChange, onDirtyChange, onSave, onExport]);
+    onHistoryChangeRef.current = props_onHistoryChange;
+  }, [onChange, onDirtyChange, onSave, onExport, props_onHistoryChange]);
 
   useEffect(() => {
     if (theme) {
@@ -147,6 +179,7 @@ function RootInner({
       savedDeckRef.current = deck;
       if (dirtyRef.current) {
         dirtyRef.current = false;
+        setDirty(false);
         onDirtyChangeRef.current?.(false);
       }
     }
@@ -159,11 +192,27 @@ function RootInner({
       collectFontFamilies(store.getState().deck)
     );
     return store.subscribe((state, prev) => {
+      // Fire onHistoryChange whenever stack depths change. Independent of
+      // deck identity so undo/redo always emit, even if the resulting deck
+      // happens to be reference-equal (shouldn't, but defensive).
+      const prevHist = prev.history.length;
+      const prevFut = prev.future.length;
+      const nextHist = state.history.length;
+      const nextFut = state.future.length;
+      if (prevHist !== nextHist || prevFut !== nextFut) {
+        onHistoryChangeRef.current?.({
+          canUndo: nextHist > 0,
+          canRedo: nextFut > 0,
+          undoSize: nextHist,
+          redoSize: nextFut,
+        });
+      }
       if (state.deck === prev.deck) return;
       onChangeRef.current?.(state.deck);
       const nextDirty = state.deck !== savedDeckRef.current;
       if (nextDirty !== dirtyRef.current) {
         dirtyRef.current = nextDirty;
+        setDirty(nextDirty);
         onDirtyChangeRef.current?.(nextDirty);
       }
       ensureGoogleFontsLoaded(instanceId, collectFontFamilies(state.deck));
@@ -183,6 +232,13 @@ function RootInner({
       stop: () => store.getState().stop(),
       undo: () => store.getState().undo(),
       redo: () => store.getState().redo(),
+      canUndo: () => store.getState().canUndo(),
+      canRedo: () => store.getState().canRedo(),
+      getHistorySize: () => {
+        const s = store.getState();
+        return { undo: s.history.length, redo: s.future.length };
+      },
+      endCoalesce: () => store.getState().endCoalesce(),
       getDeck: () => store.getState().deck,
       isDirty: () => dirtyRef.current,
       resetDirty: () => {
@@ -212,15 +268,17 @@ function RootInner({
   return (
     <ReadOnlyProvider readOnly={readOnly}>
       <IconProvider icons={icons ?? {}}>
-        <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-          <RootShell
-            fontFamily={fontFamily}
-            className={className}
-            style={style}
-          >
-            {children}
-          </RootShell>
-        </HostProvider>
+        <DirtyProvider dirty={dirty}>
+          <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
+            <RootShell
+              fontFamily={fontFamily}
+              className={className}
+              style={style}
+            >
+              {children}
+            </RootShell>
+          </HostProvider>
+        </DirtyProvider>
       </IconProvider>
     </ReadOnlyProvider>
   );

package/src/compound/hooks.ts

@@ -0,0 +1,93 @@
+/**
+ * Public store hooks. These let host components anywhere inside
+ * `<Slidewise.Root>` read or write editor state without prop drilling.
+ *
+ * `useEditor` is the generic selector hook — pass any function that takes
+ * the editor state and returns the slice you care about. The convenience
+ * hooks below cover the common cases.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import { useEditor, useSlides, useActiveSlide } from "@textcortex/slidewise";
+ *
+ * function HostHeader() {
+ *   const slideCount = useSlides().length;
+ *   const active = useActiveSlide();
+ *   return <span>Slide {active.id} of {slideCount}</span>;
+ * }
+ * ```
+ */
+import { useEditor } from "@/lib/StoreProvider";
+import type { Slide, SlideElement } from "@/lib/types";
+
+export { useEditor, useEditorStore } from "@/lib/StoreProvider";
+
+/** All slides in the current deck, in display order. */
+export function useSlides(): Slide[] {
+  return useEditor((s) => s.deck.slides);
+}
+
+/**
+ * The currently focused slide. Falls back to the first slide if the
+ * `currentSlideId` no longer exists (shouldn't happen, but defensive).
+ */
+export function useActiveSlide(): Slide {
+  return useEditor((s) => {
+    const found = s.deck.slides.find((sl) => sl.id === s.currentSlideId);
+    return found ?? s.deck.slides[0];
+  });
+}
+
+/** Id of the currently focused slide. */
+export function useActiveSlideId(): string {
+  return useEditor((s) => s.currentSlideId);
+}
+
+/** Ids of currently selected elements on the active slide. */
+export function useSelection(): string[] {
+  return useEditor((s) => s.selectedIds);
+}
+
+/**
+ * Resolved selected element objects on the active slide. Returns `[]` when
+ * nothing is selected. Use this when you need to read element properties
+ * (position, text, fill) — not just their ids.
+ */
+export function useSelectedElements(): SlideElement[] {
+  return useEditor((s) => {
+    const slide = s.deck.slides.find((sl) => sl.id === s.currentSlideId);
+    if (!slide) return [];
+    return slide.elements.filter((e) => s.selectedIds.includes(e.id));
+  });
+}
+
+/** Current theme ("light" or "dark"). */
+export function useTheme(): "light" | "dark" {
+  return useEditor((s) => s.theme);
+}
+
+/** Current zoom scale (1 = 100%). */
+export function useZoom(): number {
+  return useEditor((s) => s.zoom);
+}
+
+/** True when the editor is in present-mode. */
+export function usePlaying(): boolean {
+  return useEditor((s) => s.playing);
+}
+
+/** Live history depth — useful for host-rendered Undo/Redo button state. */
+export function useHistory(): {
+  canUndo: boolean;
+  canRedo: boolean;
+  undoSize: number;
+  redoSize: number;
+} {
+  return useEditor((s) => ({
+    canUndo: s.history.length > 0,
+    canRedo: s.future.length > 0,
+    undoSize: s.history.length,
+    redoSize: s.future.length,
+  }));
+}

package/src/compound/index.ts

@@ -5,7 +5,7 @@
  * thin wrapper rendering this same tree:
  *
  * ```tsx
- * <Slidewise.Root deck={deck} onChange={…} onSave={…}>
+ * <Slidewise.Root deck={deck} onChange={...} onSave={...}>
  *   <Slidewise.TopBar />
  *   <Slidewise.Body>
  *     <Slidewise.SlideRail />
@@ -17,19 +17,28 @@
  * </Slidewise.Root>
  * ```
  *
- * Use the namespace import to keep call sites tidy:
+ * For full control over the top bar (host buttons mixed in, subparts
+ * reordered, individual buttons skinned), drop down to its subparts:
  *
  * ```tsx
- * import * as Slidewise from "@textcortex/slidewise";
+ * <Slidewise.TopBar.Root>
+ *   <MyExitButton />
+ *   <Slidewise.TopBar.Spacer />
+ *   <Slidewise.TopBar.Group>
+ *     <Slidewise.TopBar.Undo />
+ *     <Slidewise.TopBar.Redo />
+ *   </Slidewise.TopBar.Group>
+ *   <Slidewise.TopBar.Save />
+ * </Slidewise.TopBar.Root>
  * ```
  */
 export {
   Root,
   type SlidewiseRootProps,
   type SlidewiseRootHandle,
+  type HistoryState,
 } from "./SlidewiseRoot";
 export {
-  TopBar,
   SlideRail,
   Canvas,
   BottomToolbar,
@@ -38,6 +47,21 @@ export {
   CanvasFrame,
   type RegionProps,
 } from "./parts";
+
+export { TopBar, type TopBarProps, type TopBarSlotId } from "./topbar";
+export type {
+  TopBarRootProps,
+  TopBarTitleProps,
+  TopBarUndoProps,
+  TopBarRedoProps,
+  TopBarSaveProps,
+  TopBarPlayProps,
+  TopBarThemeToggleProps,
+  TopBarExportProps,
+  TopBarSpacerProps,
+  TopBarGroupProps,
+} from "./topbar";
+
 export {
   useHostCallbacks,
   type SlidewiseHostCallbacks,
@@ -48,3 +72,22 @@ export {
   type SlidewiseIcons,
 } from "./IconContext";
 export { ReadOnlyProvider, useReadOnly } from "./ReadOnlyContext";
+export { DirtyProvider, useDirty } from "./DirtyContext";
+
+/**
+ * Store hooks. Use these from host components anywhere under
+ * `<Slidewise.Root>` to read or write editor state without prop drilling.
+ */
+export {
+  useEditor,
+  useEditorStore,
+  useSlides,
+  useActiveSlide,
+  useActiveSlideId,
+  useSelection,
+  useSelectedElements,
+  useTheme,
+  useZoom,
+  usePlaying,
+  useHistory,
+} from "./hooks";

package/src/compound/parts.tsx

@@ -1,14 +1,16 @@
 import type { CSSProperties, ReactNode } from "react";
-import { TopBar as TopBarInternal } from "@/components/editor/TopBar";
 import { SlideRail as SlideRailInternal } from "@/components/editor/SlideRail";
 import { Canvas as CanvasInternal } from "@/components/editor/Canvas";
 import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/BottomToolbar";
-import { useHostCallbacks } from "./HostContext";
 
 /**
  * Region-level compound parts. Each consumes the editor store via context,
  * so any part can be omitted, wrapped, or replaced. None of these accept
  * deck/onChange/onSave props — those live on `<Slidewise.Root>`.
+ *
+ * Note: `<Slidewise.TopBar>` is defined separately in `./topbar/` because
+ * it itself decomposes into subparts (`TopBar.Root`, `TopBar.Title`,
+ * `TopBar.Undo`, etc.) and ships a `hide` prop for per-button removal.
  */
 
 export interface RegionProps {
@@ -16,19 +18,6 @@ export interface RegionProps {
   style?: CSSProperties;
 }
 
-/**
- * The default top bar (title input, undo/redo, save, play, theme toggle,
- * export). Reads host callbacks from context, so the Save and Export
- * buttons fire the host's `onSave` / `onExport` from `<Slidewise.Root>`.
- *
- * Omit it from the tree to hide the whole bar; or render your own toolbar
- * alongside `<Slidewise.Canvas>` for full control.
- */
-export function TopBar(_props: RegionProps = {}) {
-  const { onSave, onExport } = useHostCallbacks();
-  return <TopBarInternal onSave={onSave} onExport={onExport} />;
-}
-
 /**
  * Left-side slide thumbnail rail with add/duplicate/delete.
  */

package/src/compound/topbar/Export.tsx

@@ -0,0 +1,65 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Download } from "lucide-react";
+import { useEditorStore } from "@/lib/StoreProvider";
+import { useHostCallbacks } from "../HostContext";
+import { useIcons } from "../IconContext";
+import { primaryBtnStyle, primaryHoverHandlers } from "./styles";
+
+/**
+ * Export button. Calls the host's `onExport` (from `<Slidewise.Root
+ * onExport>`) with the current deck. If no host callback is registered,
+ * falls back to downloading a `.slidewise.json` of the deck.
+ *
+ * Visually emphasized vs the chrome buttons — uses `--primary-bg` so hosts
+ * retheming the primary surface get a consistent affordance.
+ */
+export interface TopBarExportProps {
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  label?: string;
+  children?: ReactNode;
+}
+
+export function Export({
+  className,
+  style,
+  ariaLabel = "Export",
+  label = "Export",
+  children,
+}: TopBarExportProps = {}) {
+  const store = useEditorStore();
+  const { onExport: onExportHost } = useHostCallbacks();
+  const icons = useIcons();
+
+  const onClick = () => {
+    const deck = store.getState().deck;
+    if (onExportHost) {
+      onExportHost(deck);
+      return;
+    }
+    const blob = new Blob([JSON.stringify(deck, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(deck.title || "deck").replace(/[^a-z0-9-_]+/gi, "-")}.slidewise.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      style={{ ...primaryBtnStyle(), ...style }}
+      {...primaryHoverHandlers()}
+    >
+      {children ?? icons.export ?? <Download size={14} />}
+      {label}
+    </button>
+  );
+}

package/src/compound/topbar/Group.tsx

@@ -0,0 +1,36 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+
+/**
+ * Visual cluster wrapper for a related set of buttons (e.g. Undo + Redo).
+ * Just a flex row with a small inner gap — keeps clusters visually together
+ * separate from the bar's default 10px gap.
+ *
+ * ```tsx
+ * <Slidewise.TopBar.Group>
+ *   <Slidewise.TopBar.Undo />
+ *   <Slidewise.TopBar.Redo />
+ * </Slidewise.TopBar.Group>
+ * ```
+ */
+export interface TopBarGroupProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Gap between children inside the group. Default 2px. */
+  gap?: number;
+}
+
+export function Group({
+  className,
+  style,
+  gap = 2,
+  children,
+}: PropsWithChildren<TopBarGroupProps>) {
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", alignItems: "center", gap, ...style }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/compound/topbar/Play.tsx

@@ -0,0 +1,42 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Play as PlayIcon } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+import { useIcons } from "../IconContext";
+import { chromeBtnStyle, hoverHandlers } from "./styles";
+
+/**
+ * Play button. Enters slideshow / play mode. Always rendered (read-only
+ * viewers should still be able to present).
+ */
+export interface TopBarPlayProps {
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  label?: string;
+  children?: ReactNode;
+}
+
+export function Play({
+  className,
+  style,
+  ariaLabel = "Play",
+  label = "Play",
+  children,
+}: TopBarPlayProps = {}) {
+  const play = useEditor((s) => s.play);
+  const icons = useIcons();
+
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-label={ariaLabel}
+      onClick={play}
+      style={{ ...chromeBtnStyle(), ...style }}
+      {...hoverHandlers()}
+    >
+      {children ?? icons.play ?? <PlayIcon size={14} />}
+      {label}
+    </button>
+  );
+}