@beyondwork/docx-react-component 1.0.19 → 1.0.20

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -6,20 +6,32 @@ import * as Toggle from "@radix-ui/react-toggle";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
   Bold,
   ChevronDown,
   Download,
   Eye,
   EyeOff,
   FileText,
+  Highlighter,
+  ImagePlus,
   Indent,
   Italic,
   MessageSquare,
   Minus,
   Monitor,
+  MoreHorizontal,
   Outdent,
   Plus,
   Redo2,
+  Rows3,
+  Strikethrough,
+  Subscript,
+  Superscript,
   ShieldAlert,
   ShieldCheck,
   Underline,
@@ -31,7 +43,11 @@ import type {
   EditorStoryTarget,
   EditorWarning,
   FormattingStateSnapshot,
+  FormattingAlignment,
+  InsertImageOptions,
+  SectionBreakType,
   StyleCatalogSnapshot,
+  WorkflowBlockedCommandReason,
   WorkspaceMode,
   ZoomLevel,
 } from "../../api/public-types";
@@ -45,6 +61,7 @@ export interface TwToolbarProps {
   capabilities?: SessionCapabilities;
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
+  blockedReasons?: WorkflowBlockedCommandReason[];
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
@@ -61,9 +78,21 @@ export interface TwToolbarProps {
   onToggleBold?: () => void;
   onToggleItalic?: () => void;
   onToggleUnderline?: () => void;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+  onSetFontFamily?: (fontFamily: string) => void;
+  onSetFontSize?: (fontSize: number) => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onSetAlignment?: (alignment: FormattingAlignment) => void;
   onOutdent?: () => void;
   onIndent?: () => void;
   onAddComment: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
   onExport: () => void;
   onWorkspaceModeChange: (value: WorkspaceMode) => void;
   onZoomChange?: (level: ZoomLevel) => void;
@@ -77,12 +106,24 @@ export function getSupportedZoomPresets(): ReadonlyArray<number> {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
+const FONT_FAMILIES = ["Arial", "Times New Roman", "Calibri", "Cambria", "Georgia", "Verdana"];
+const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36];
+const TEXT_COLORS = ["#000000", "#434343", "#1660a8", "#1a7f37", "#cf222e", "#7a4f00"];
+const HIGHLIGHT_COLORS = [
+  { value: "#ffff00", label: "Yellow" },
+  { value: "#00ff00", label: "Green" },
+  { value: "#00ffff", label: "Cyan" },
+  { value: "#ff69b4", label: "Pink" },
+  { value: null, label: "None" },
+] as const;
+
 export function TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
   const workspaceMode = props.workspaceMode;
   const isPageMode = workspaceMode === "page";
   const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
   const zoomLevel = props.zoomLevel ?? 100;
+  const canEdit = caps ? caps.canEdit : false;
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -109,12 +150,23 @@ export function TwToolbar(props: TwToolbarProps) {
         <div className="mx-1 h-4 w-px bg-border" />
 
         <ToolbarParagraphStyleSelect
-          disabled={!caps?.canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
+          disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
           styles={paragraphStyles}
           value={props.formattingState?.paragraphStyleId}
           onValueChange={props.onSetParagraphStyle}
         />
 
+        <ToolbarFontFamilySelect
+          disabled={!canEdit || !props.onSetFontFamily}
+          value={props.formattingState?.fontFamily}
+          onValueChange={props.onSetFontFamily}
+        />
+        <ToolbarFontSizeSelect
+          disabled={!canEdit || !props.onSetFontSize}
+          value={props.formattingState?.fontSize}
+          onValueChange={props.onSetFontSize}
+        />
+
         <div className="mx-1 h-4 w-px bg-border" />
 
         <TwToolbarIconButton
@@ -135,24 +187,63 @@ export function TwToolbar(props: TwToolbarProps) {
           icon={Underline}
           label="Underline"
           active={props.formattingState?.underline ?? false}
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onToggleUnderline}
         />
+        <ToolbarFormattingOverflow
+          disabled={!canEdit}
+          formattingState={props.formattingState}
+          onToggleStrikethrough={props.onToggleStrikethrough}
+          onToggleSuperscript={props.onToggleSuperscript}
+          onToggleSubscript={props.onToggleSubscript}
+        />
+        <ToolbarColorPopover
+          ariaLabel="Text color"
+          colors={TEXT_COLORS.map((value) => ({ value, label: value }))}
+          disabled={!canEdit || !props.onSetTextColor}
+          icon={<Baseline className="h-3.5 w-3.5" />}
+          onSelect={(value) => {
+            if (value) {
+              props.onSetTextColor?.(value);
+            }
+          }}
+          title="Text color"
+        />
+        <ToolbarColorPopover
+          ariaLabel="Highlight color"
+          colors={HIGHLIGHT_COLORS.map((entry) => ({ value: entry.value, label: entry.label }))}
+          disabled={!canEdit || !props.onSetHighlightColor}
+          icon={<Highlighter className="h-3.5 w-3.5" />}
+          onSelect={(value) => props.onSetHighlightColor?.(value)}
+          title="Highlight color"
+        />
+        <ToolbarAlignmentPopover
+          activeAlignment={props.formattingState?.alignment}
+          disabled={!canEdit || !props.onSetAlignment}
+          onSelect={(alignment) => props.onSetAlignment?.(alignment)}
+        />
 
         <div className="mx-1 h-4 w-px bg-border" />
 
         <TwToolbarIconButton
           icon={Outdent}
           label="Outdent"
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onOutdent}
         />
         <TwToolbarIconButton
           icon={Indent}
           label="Indent"
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onIndent}
         />
+        <ToolbarInsertMenu
+          disabled={!canEdit}
+          onInsertImage={props.onInsertImage}
+          onInsertPageBreak={props.onInsertPageBreak}
+          onInsertSectionBreak={props.onInsertSectionBreak}
+          onInsertTable={props.onInsertTable}
+        />
 
         {/* Story focus breadcrumb — visible when editing a secondary story */}
         {props.activeStory && props.activeStory.kind !== "main" ? (
@@ -400,6 +491,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 align="end"
               >
                 <TwHealthPanel
+                  blockedReasons={props.blockedReasons}
                   compatibility={props.compatibility}
                   warnings={props.warnings}
                 />
@@ -452,7 +544,7 @@ function ToolbarParagraphStyleSelect(props: {
   const resolvedValue =
     props.value && props.styles.some((style) => style.styleId === props.value)
       ? props.value
-      : undefined;
+      : "";
 
   return (
     <Select.Root
@@ -494,6 +586,452 @@ function ToolbarParagraphStyleSelect(props: {
   );
 }
 
+function ToolbarFontFamilySelect(props: {
+  value?: string;
+  disabled: boolean;
+  onValueChange?: (fontFamily: string) => void;
+}) {
+  const resolvedValue = props.value && FONT_FAMILIES.includes(props.value) ? props.value : "";
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(value)}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Font family"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[7rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Font" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <Select.Viewport className="p-1">
+            {FONT_FAMILIES.map((font) => (
+              <Select.Item
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                key={font}
+                value={font}
+              >
+                <Select.ItemText>{font}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ToolbarFontSizeSelect(props: {
+  value?: number;
+  disabled: boolean;
+  onValueChange?: (fontSize: number) => void;
+}) {
+  const resolvedValue =
+    typeof props.value === "number" && FONT_SIZES.includes(props.value) ? String(props.value) : "";
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(Number(value))}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Font size"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[4rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Size" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <Select.Viewport className="p-1">
+            {FONT_SIZES.map((size) => (
+              <Select.Item
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                key={size}
+                value={String(size)}
+              >
+                <Select.ItemText>{size}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ToolbarFormattingOverflow(props: {
+  disabled: boolean;
+  formattingState?: FormattingStateSnapshot;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="More text formatting"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+            More text formatting
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Text styling
+          </div>
+          <div className="grid grid-cols-3 gap-1">
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.strikethrough ?? false}
+              ariaLabel="Strikethrough"
+              disabled={props.disabled}
+              icon={<Strikethrough className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleStrikethrough?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.superscript ?? false}
+              ariaLabel="Superscript"
+              disabled={props.disabled}
+              icon={<Superscript className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleSuperscript?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarPopoverActionButton
+              active={props.formattingState?.subscript ?? false}
+              ariaLabel="Subscript"
+              disabled={props.disabled}
+              icon={<Subscript className="h-3.5 w-3.5" />}
+              onClick={() => {
+                props.onToggleSubscript?.();
+                setOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarColorPopover(props: {
+  ariaLabel: string;
+  colors: ReadonlyArray<{ value: string | null; label: string }>;
+  disabled: boolean;
+  icon: React.ReactNode;
+  title: string;
+  onSelect: (value: string | null) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label={props.ariaLabel}
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            {props.icon}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+            {props.title}
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[180px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            {props.title}
+          </div>
+          <div className="grid grid-cols-3 gap-1">
+            {props.colors.map((color) => (
+              <button
+                key={`${props.ariaLabel}-${color.label}`}
+                type="button"
+                aria-label={`${props.title} ${color.label}`}
+                disabled={props.disabled}
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => {
+                  props.onSelect(color.value);
+                  setOpen(false);
+                }}
+                className={`inline-flex h-8 items-center justify-center rounded-md border border-border text-[10px] font-medium text-primary transition-transform hover:scale-[1.04] disabled:cursor-not-allowed disabled:opacity-40 ${
+                  color.value ? "" : "bg-surface"
+                } ${focusRingClass}`}
+                style={color.value ? { backgroundColor: color.value } : undefined}
+              >
+                {color.value ? <span className="sr-only">{color.label}</span> : "None"}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarAlignmentPopover(props: {
+  activeAlignment?: FormattingAlignment;
+  disabled: boolean;
+  onSelect: (alignment: FormattingAlignment) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const alignments = [
+    { value: "left" as const, label: "Align left", icon: <AlignLeft className="h-3.5 w-3.5" /> },
+    { value: "center" as const, label: "Align center", icon: <AlignCenter className="h-3.5 w-3.5" /> },
+    { value: "right" as const, label: "Align right", icon: <AlignRight className="h-3.5 w-3.5" /> },
+    { value: "justify" as const, label: "Align justify", icon: <AlignJustify className="h-3.5 w-3.5" /> },
+  ];
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="Paragraph alignment"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            {(alignments.find((entry) => entry.value === props.activeAlignment) ?? alignments[0])?.icon}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+            Paragraph alignment
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Paragraph alignment
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            {alignments.map((entry) => (
+              <ToolbarPopoverActionButton
+                key={entry.value}
+                active={props.activeAlignment === entry.value}
+                ariaLabel={entry.label}
+                disabled={props.disabled}
+                icon={entry.icon}
+                onClick={() => {
+                  props.onSelect(entry.value);
+                  setOpen(false);
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarInsertMenu(props: {
+  disabled: boolean;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  async function handleImageChange(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+    const file = event.target.files?.[0];
+    if (!file || props.disabled || !props.onInsertImage) {
+      event.target.value = "";
+      return;
+    }
+    const data = new Uint8Array(await file.arrayBuffer());
+    props.onInsertImage({
+      data,
+      mimeType: file.type || "image/png",
+      altText: file.name,
+    });
+    setOpen(false);
+    event.target.value = "";
+  }
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="Insert"
+            aria-expanded={open}
+            disabled={props.disabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+          >
+            Insert
+            <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+            Insert
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[220px] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="space-y-1">
+            <ToolbarMenuButton
+              ariaLabel="Insert page break"
+              disabled={props.disabled || !props.onInsertPageBreak}
+              icon={<Minus className="h-3.5 w-3.5" />}
+              label="Page break"
+              onClick={() => {
+                props.onInsertPageBreak?.();
+                setOpen(false);
+              }}
+            />
+            <ToolbarMenuButton
+              ariaLabel="Insert table"
+              disabled={props.disabled || !props.onInsertTable}
+              icon={<Rows3 className="h-3.5 w-3.5" />}
+              label="Table"
+              onClick={() => {
+                props.onInsertTable?.();
+                setOpen(false);
+              }}
+            />
+            <label
+              className={`flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface ${
+                props.disabled || !props.onInsertImage ? "pointer-events-none opacity-40" : ""
+              }`}
+            >
+              <ImagePlus className="h-3.5 w-3.5 text-secondary" />
+              <span>Image</span>
+              <input
+                accept="image/png,image/jpeg,image/gif"
+                aria-label="Insert image"
+                className="sr-only"
+                disabled={props.disabled || !props.onInsertImage}
+                type="file"
+                onChange={(event) => {
+                  void handleImageChange(event);
+                }}
+              />
+            </label>
+            <ToolbarMenuButton
+              ariaLabel="Insert next-page section break"
+              disabled={props.disabled || !props.onInsertSectionBreak}
+              icon={<FileText className="h-3.5 w-3.5" />}
+              label="Next-page section break"
+              onClick={() => {
+                props.onInsertSectionBreak?.("nextPage");
+                setOpen(false);
+              }}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarPopoverActionButton(props: {
+  active: boolean;
+  ariaLabel: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      aria-pressed={props.active}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-8 items-center justify-center rounded-md border border-border transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+        props.active ? "bg-accent-soft text-accent" : "bg-canvas text-secondary hover:bg-surface"
+      } ${focusRingClass}`}
+    >
+      {props.icon}
+    </button>
+  );
+}
+
+function ToolbarMenuButton(props: {
+  ariaLabel: string;
+  disabled: boolean;
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+    >
+      <span className="text-secondary">{props.icon}</span>
+      <span>{props.label}</span>
+    </button>
+  );
+}
+
 function storyLabel(target: EditorStoryTarget): string {
   switch (target.kind) {
     case "header":