@zylem/ui 0.9.6 → 0.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -50,18 +50,10 @@
   },
   "files": [
     "dist",
+    "etc",
     "src",
     "vite"
   ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "NODE_ENV=production tsup",
-    "dev": "tsup --watch",
-    "showcase": "vite --host",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check ."
-  },
   "peerDependencies": {
     "solid-js": "^1.9.9"
   },
@@ -72,6 +64,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.7",
+    "@microsoft/api-extractor": "^7.55.2",
     "@clack/prompts": "^1.6.0",
     "@solidjs/testing-library": "^0.8.10",
     "@vanilla-extract/esbuild-plugin": "^2.3.22",
@@ -95,5 +88,13 @@
     "node": ">=22.12.0",
     "pnpm": ">=10.32.1"
   },
-  "packageManager": "pnpm@10.33.0"
-}
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "showcase": "vite --host",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check .",
+    "api:extract": "tsc -p tsconfig.api.json && api-extractor run"
+  }
+}

package/src/components/Button/Button.css.ts

@@ -67,6 +67,20 @@ globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
 	filter: 'brightness(1.08)',
 });
 
+globalStyle('.zylem-button[data-on]', {
+	borderColor: 'rgba(46, 231, 255, 0.9)',
+	background: vars.material.buttonGlassOn,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+	color: '#F3FDFF',
+});
+
+globalStyle('.zylem-button[data-on]:hover:not([disabled])', {
+	background: vars.material.buttonGlassOn,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+	filter: 'brightness(1.08)',
+	color: '#F3FDFF',
+});
+
 globalStyle('.zylem-button[data-variant="active"]', {
 	borderColor: 'rgba(20, 255, 60, 0.78)',
 	background: vars.material.buttonGlassActive,

package/src/components/Button/Button.tsx

@@ -9,18 +9,24 @@ export interface ButtonProps
   size?: ButtonSize;
   /** Icon drawn before the label. Omitted, the button is label only. */
   icon?: JSX.Element | undefined;
+  /**
+   * Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
+   * Pass `false` while off so the button still announces itself.
+   */
+  on?: boolean | undefined;
 }
 
 /**
  * HyperGlass button: squared Aqua-like bevel with glass depth. Variants map
- * to the Zylem palette — `active` for live/run actions, `danger` for
- * destructive actions, `ghost` for low-emphasis chrome.
+ * to the Zylem palette — `active` for live/run actions, `on` for a toggle
+ * that is switched on, `danger` for destructive actions, `ghost` for
+ * low-emphasis chrome.
  *
  * Styling lives on the global `.zylem-button` class (bundled in
  * `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
  */
 export function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon', 'on']);
   return (
     <button
       type="button"
@@ -28,6 +34,8 @@ export function Button(props: ButtonProps) {
       data-variant={local.variant ?? 'default'}
       data-size={local.size ?? 'md'}
       {...rest}
+      data-on={local.on ? '' : undefined}
+      aria-pressed={local.on === undefined ? undefined : local.on}
     >
       <Show when={local.icon}>
         <span class="zylem-button-icon" aria-hidden="true">

package/src/components/Console/Console.tsx

@@ -19,6 +19,11 @@ export interface ConsoleProps {
 /**
  * HyperGlass console: dark low-gloss terminal field with a floating Clear
  * action.
+ *
+ * @example
+ * ```tsx
+ * <Console value={text()} onInput={setText} onClear={() => setText('')} />
+ * ```
  */
 export function Console(props: ConsoleProps) {
   return (

package/src/components/MenuButton/MenuButton.css.ts

@@ -104,3 +104,28 @@ globalStyle('.zylem-menu-button__stack', {
 	gap: vars.spacing.xs,
 	padding: vars.spacing.sm,
 });
+
+/**
+ * View cube. A short row (game camera, perspective) sits above a 3×3 square:
+ * isometric corners, orthographic edges, free camera in the middle.
+ */
+globalStyle('.zylem-menu-button__compass', {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'flex-start',
+	gap: vars.spacing.xs,
+	padding: vars.spacing.sm,
+});
+
+globalStyle('.zylem-menu-button__compass-row, .zylem-menu-button__compass-square', {
+	display: 'grid',
+	gap: vars.spacing.xs,
+});
+
+globalStyle('.zylem-menu-button__compass-row', {
+	gridTemplateColumns: 'repeat(2, auto)',
+});
+
+globalStyle('.zylem-menu-button__compass-square', {
+	gridTemplateColumns: 'repeat(3, auto)',
+});

package/src/components/MenuButton/MenuButton.tsx

@@ -22,6 +22,12 @@ export interface MenuButtonProps {
   onAction?: (() => void) | undefined;
   /** Renders the face in its selected state. */
   selected?: boolean | undefined;
+  /**
+   * Checkbox-like toggle for the face. Electric blue while on. A split face
+   * exposes it as `aria-pressed`, so pass `false` for a toggle that is off and
+   * the face still announces itself.
+   */
+  on?: boolean | undefined;
   disabled?: boolean | undefined;
   /** Tooltip text; defaults to `label`. Pass `null` for no tooltip. */
   tooltip?: string | null | undefined;
@@ -108,6 +114,7 @@ export function MenuButton(props: MenuButtonProps) {
               aria-label={props.label}
               disabled={props.disabled}
               data-selected={props.selected ? '' : undefined}
+              data-on={props.on ? '' : undefined}
             >
               {props.children}
               {/*
@@ -129,8 +136,10 @@ export function MenuButton(props: MenuButtonProps) {
               ref={layer.anchorRef}
               class="zylem-toolbar-btn zylem-menu-button__face"
               aria-label={props.label}
+              aria-pressed={props.on}
               disabled={props.disabled}
               data-selected={props.selected ? '' : undefined}
+              data-on={props.on ? '' : undefined}
               onClick={() => props.onAction?.()}
             >
               {props.children}

package/src/components/NumberField/NumberField.tsx

@@ -1,7 +1,7 @@
 import { NumberField as KNumberField } from '@kobalte/core';
 import ChevronDown from 'lucide-solid/icons/chevron-down';
 import ChevronUp from 'lucide-solid/icons/chevron-up';
-import { Show } from 'solid-js';
+import { createEffect, createSignal, on, onCleanup, Show } from 'solid-js';
 
 export interface NumberFieldProps {
   label?: string;
@@ -9,7 +9,15 @@ export interface NumberFieldProps {
   'aria-label'?: string;
   error?: string;
   value?: number;
+  /** Fires on every edit. */
   onChange?: (value: number) => void;
+  /**
+   * Fires on blur, Enter, and a stepper press. While set, typing stays in the
+   * field and only this reports it, so a parent that snaps or rounds the value
+   * does not fight the typing. A draft also outlasts changes to `value`, and
+   * Escape drops it; after each commit the field shows `value` again.
+   */
+  onCommit?: (value: number) => void;
   minValue?: number;
   maxValue?: number;
   step?: number;
@@ -23,15 +31,91 @@ export interface NumberFieldProps {
  * HyperGlass number field: inset glass input with square jewel steppers.
  */
 export function NumberField(props: NumberFieldProps) {
+  // A stepper press blurs the input before the click lands. Armed on pointer
+  // down, so that blur does not commit the pre-step value, and the click commits
+  // the stepped one.
+  let stepper = false;
+  // Enter commits, and the blur that follows it must not commit again.
+  let committed = false;
+
+  // Kobalte rewrites the input whenever `rawValue` changes, so a value that
+  // moves every frame would overwrite the typing. A draft hands it `held`.
+  const [drafting, setDrafting] = createSignal(false);
+  let held: number | undefined;
+  // A committed draft stays up until `value` changes, so the field does not
+  // flash the old value while the owner's answer is on its way. One frame is
+  // the limit, for an owner that rounds the commit back to the same value.
+  let settling = false;
+  let settleFrame = 0;
+
+  const hold = (value: number | undefined) => {
+    if (drafting() || value === undefined) return;
+    held = value;
+    setDrafting(true);
+  };
+
+  const stopSettling = () => {
+    settling = false;
+    if (settleFrame) cancelAnimationFrame(settleFrame);
+    settleFrame = 0;
+  };
+
+  const release = () => {
+    stopSettling();
+    setDrafting(false);
+  };
+
+  createEffect(
+    on(
+      () => props.value,
+      () => {
+        if (settling) release();
+      },
+      { defer: true },
+    ),
+  );
+  onCleanup(stopSettling);
+
+  const commit = (value: number) => {
+    if (!props.onCommit) return;
+    if (Number.isNaN(value) || value === props.value) {
+      release();
+      return;
+    }
+    // A stepper commit has no draft yet. Held at the stepped value, the field
+    // keeps showing it rather than the value it stepped from.
+    hold(value);
+    settling = true;
+    props.onCommit(value);
+    committed = true;
+    if (settling) settleFrame = requestAnimationFrame(release);
+  };
+
+  const commitInput = (input: HTMLInputElement) => {
+    const parsed = Number.parseFloat(input.value);
+    commit(Number.isFinite(parsed) ? parsed : Number.NaN);
+  };
+
+  const armStepper = () => {
+    stepper = true;
+  };
+
   return (
     <KNumberField.Root
       class={props.class ? `zylem-field-root ${props.class}` : 'zylem-field-root'}
-      rawValue={props.value}
+      rawValue={drafting() ? held : props.value}
       // Kobalte reports the parsed value on mount and after each format pass;
       // only real edits reach the owner, so a controlled form is not marked
       // dirty just by rendering.
       onRawValueChange={(value) => {
-        if (!props.onChange || Number.isNaN(value) || value === props.value) return;
+        if (Number.isNaN(value)) return;
+        if (props.onCommit) {
+          if (!stepper) return;
+          stepper = false;
+          commit(value);
+          return;
+        }
+        if (!props.onChange || value === props.value) return;
         props.onChange(value);
       }}
       minValue={props.minValue}
@@ -51,16 +135,45 @@ export function NumberField(props: NumberFieldProps) {
           class="zylem-field zylem-numberfield-input"
           aria-label={props['aria-label']}
           placeholder={props.placeholder}
+          onInput={() => {
+            committed = false;
+            if (!props.onCommit) return;
+            // Typing again while a commit settles carries on with the draft, so
+            // the value that lands does not overwrite the new keystrokes.
+            stopSettling();
+            hold(props.value);
+          }}
+          onBlur={(event) => {
+            if (!props.onCommit || stepper || committed) {
+              committed = false;
+              return;
+            }
+            commitInput(event.currentTarget);
+          }}
+          onKeyDown={(event) => {
+            if (!props.onCommit || event.defaultPrevented) return;
+            if (event.key === 'Enter') commitInput(event.currentTarget);
+            else if (event.key === 'Escape' && drafting()) {
+              // Claimed, so an accordion or dialog around the field leaves this
+              // Escape alone rather than collapsing or closing as well.
+              event.preventDefault();
+              release();
+            }
+          }}
         />
         <KNumberField.IncrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--up"
           aria-label="Increment"
+          onPointerDown={armStepper}
+          onClick={armStepper}
         >
           <ChevronUp aria-hidden="true" />
         </KNumberField.IncrementTrigger>
         <KNumberField.DecrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--down"
           aria-label="Decrement"
+          onPointerDown={armStepper}
+          onClick={armStepper}
         >
           <ChevronDown aria-hidden="true" />
         </KNumberField.DecrementTrigger>

package/src/components/Property/Property.tsx

@@ -102,9 +102,18 @@ export function PropertyRow(props: PropertyRowProps) {
       <Show
         when={display().isClickable}
         fallback={
-          <span class={`zylem-property-value ${props.valueClass ?? ''}`}>
-            {display().element}
-          </span>
+          // A div when the value is elements. A NumberField root is a div, and a
+          // span would close before it, dropping the fields out of this cell.
+          <Show
+            when={props.children !== undefined}
+            fallback={
+              <span class={`zylem-property-value ${props.valueClass ?? ''}`}>
+                {display().element}
+              </span>
+            }
+          >
+            <div class={`zylem-property-value ${props.valueClass ?? ''}`}>{props.children}</div>
+          </Show>
         }
       >
         <button

package/src/components/TimelineTrack/timeline-math.ts

@@ -1,6 +1,7 @@
 /**
  * Position of `t` along a track, as a 0–100 percentage clamped to the
- * track's range. A degenerate range (max <= min) pins everything to 0.
+ * track's range. A degenerate range, where max is less than or equal to min,
+ * pins everything to 0.
  */
 export function markerPercent(t: number, min: number, max: number): number {
   if (!Number.isFinite(t) || max <= min) {

package/src/components/TitleBar/TitleBar.tsx

@@ -34,6 +34,7 @@ export function TitleBar(props: TitleBarProps) {
     'closeLabel',
     'closeTestId',
     'dock',
+    'dockOptions',
     'onDock',
     'class',
   ]);
@@ -63,6 +64,7 @@ export function TitleBar(props: TitleBarProps) {
         closeLabel={local.closeLabel}
         closeTestId={local.closeTestId}
         dock={local.dock}
+        dockOptions={local.dockOptions}
         onDock={local.onDock}
       />
     </div>

package/src/components/ToolButton/ToolButton.tsx

@@ -21,7 +21,7 @@ export type ArtTool =
   | 'eyedropper'
   | 'move';
 
-type IconComponent = Component<JSX.SvgSVGAttributes<SVGSVGElement>>;
+export type IconComponent = Component<JSX.SvgSVGAttributes<SVGSVGElement>>;
 
 export const ART_TOOL_ICONS: Record<ArtTool, IconComponent> = {
   pencil: Pencil,
@@ -81,6 +81,7 @@ export function ToolButton(props: ToolButtonProps) {
   return (
     <ToolbarButton
       label={label()}
+      selected={props.selected}
       pressed={props.selected ?? false}
       disabled={props.disabled}
       onClick={props.onClick}

package/src/components/ToolbarButton/ToolbarButton.css.ts

@@ -4,7 +4,8 @@ import { vars } from '../../theme.css';
 /**
  * Square glass icon button for toolbars — owns the `.zylem-toolbar-btn`
  * class the editor already uses. Selected state uses the live-green jewel
- * treatment.
+ * treatment. `data-danger` is that same selected state in the danger jewel,
+ * used by the Delete tool.
  */
 globalStyle('.zylem-toolbar-btn', {
   boxSizing: 'border-box',
@@ -48,12 +49,37 @@ globalStyle('.zylem-toolbar-btn:focus-visible', {
   boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
+globalStyle('.zylem-toolbar-btn[data-on]', {
+  borderColor: 'rgba(46, 231, 255, 0.9)',
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  color: '#F3FDFF',
+});
+
+globalStyle('.zylem-toolbar-btn[data-on]:hover', {
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  filter: 'brightness(1.08)',
+});
+
 globalStyle('.zylem-toolbar-btn[data-selected], .zylem-toolbar-btn.selected', {
   borderColor: 'rgba(20, 255, 60, 0.78)',
   background: vars.material.buttonGlassActive,
   boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
 });
 
+globalStyle('.zylem-toolbar-btn[data-danger]', {
+  borderColor: 'rgba(255, 132, 114, 0.78)',
+  background: vars.material.buttonGlassDanger,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+});
+
+globalStyle('.zylem-toolbar-btn[data-danger]:hover', {
+  background: vars.material.buttonGlassDanger,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+  filter: 'brightness(1.1)',
+});
+
 globalStyle('.zylem-toolbar-btn[disabled]', {
   opacity: 0.45,
   cursor: 'not-allowed',

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -7,10 +7,24 @@ export interface ToolbarButtonProps {
   onClick?: (event: MouseEvent) => void;
   /**
    * The selected look alone, for a button whose label already says its state
-   * (Play / Pause). For a toggle with a constant label, use `pressed`.
+   * (Play / Pause). Live green. For a toggle with a constant label, use `on`.
+   * With `danger`, the same state is the danger jewel instead.
    */
   selected?: boolean;
-  /** Makes the button a toggle: the state is exposed as `aria-pressed` and drawn as selected. */
+  /**
+   * Draw `selected` as the danger jewel instead of live green. The button stays
+   * ordinary glass until it is selected. Only Delete uses this.
+   */
+  danger?: boolean;
+  /**
+   * Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
+   * Pass `false` for a toggle that is off so the button still announces itself.
+   */
+  on?: boolean;
+  /**
+   * Toggle drawn as `on`, unless `selected` is also set, which keeps the
+   * live-green jewel. Prefer `on` for new toggles.
+   */
   pressed?: boolean;
   disabled?: boolean;
   children: JSX.Element;
@@ -28,7 +42,8 @@ function insidePopup(element: Element | undefined): boolean {
 
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
- * Selected and pressed states render as a live-green jewel.
+ * `selected` is the live-green jewel. `danger` swaps that jewel for the
+ * danger one while selected. `on` is the electric-blue toggle.
  *
  * The tooltip portals into the layer container for its own tree, so it stays
  * styled when the toolbar lives inside a web component's shadow root.
@@ -58,7 +73,7 @@ export function ToolbarButton(props: ToolbarButtonProps) {
       >
         <KButton.Root
           aria-label={props.label}
-          aria-pressed={props.pressed}
+          aria-pressed={props.on !== undefined ? props.on : props.pressed}
           onClick={props.onClick}
           disabled={props.disabled}
           class={
@@ -66,7 +81,9 @@ export function ToolbarButton(props: ToolbarButtonProps) {
               ? `zylem-toolbar-btn ${props.class}`
               : 'zylem-toolbar-btn'
           }
-          data-selected={props.selected || props.pressed ? '' : undefined}
+          data-selected={props.selected && !props.danger ? '' : undefined}
+          data-danger={props.selected && props.danger ? '' : undefined}
+          data-on={props.on || (props.pressed && !props.selected) ? '' : undefined}
         >
           {props.children}
         </KButton.Root>

package/src/components/ToolbarDropdownMenu/ToolbarDropdownMenu.tsx

@@ -15,6 +15,13 @@ export interface ToolbarDropdownMenuProps {
   items: readonly ToolbarDropdownItem[];
   value: string;
   onChange: (id: string) => void;
+  /**
+   * Draws the face as an on/off toggle instead of always selected, for a picker
+   * where one choice means off, such as the game camera among editor cameras.
+   */
+  on?: boolean | undefined;
+  /** Splits the button: the face fires this and the chevron opens the menu. */
+  onAction?: (() => void) | undefined;
   /** Where the menu opens. Defaults to dropping down from the face. */
   placement?: MenuButtonProps['placement'];
 }
@@ -33,7 +40,9 @@ export function ToolbarDropdownMenu(props: ToolbarDropdownMenuProps) {
       {(item) => (
         <MenuButton
           label={item.label}
-          selected
+          selected={props.on === undefined}
+          on={props.on}
+          onAction={props.onAction}
           placement={props.placement ?? 'bottom-start'}
           menu={(close) => (
             <div class="zylem-menu-button__stack">

package/src/components/ToolboxButton/ToolboxButton.css.ts

@@ -50,6 +50,19 @@ globalStyle('.zylem-toolbox-btn:focus-visible', {
   boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
+globalStyle('.zylem-toolbox-btn[data-on]', {
+  borderColor: 'rgba(46, 231, 255, 0.9)',
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  color: '#F3FDFF',
+});
+
+globalStyle('.zylem-toolbox-btn[data-on]:hover:not([disabled])', {
+  background: vars.material.buttonGlassOn,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
+  filter: 'brightness(1.08)',
+});
+
 globalStyle('.zylem-toolbox-btn[data-selected]', {
   borderColor: 'rgba(20, 255, 60, 0.78)',
   background: vars.material.buttonGlassActive,

package/src/components/ToolboxButton/ToolboxButton.tsx

@@ -11,8 +11,13 @@ export interface ToolboxButtonProps {
   label: string;
   /** Icon rendered above the label. */
   children: JSX.Element;
-  /** Given at all, the tile is a toggle and exposes this as `aria-pressed`. */
+  /** Live-green jewel. Given at all, the tile exposes this as `aria-pressed`. */
   selected?: boolean;
+  /**
+   * Checkbox-like toggle. Electric blue while on. Given at all, the tile
+   * exposes this as `aria-pressed` instead of `selected`.
+   */
+  on?: boolean;
   disabled?: boolean;
   /** Overrides the size inherited from the enclosing `ToolboxGrid`. */
   size?: ToolboxSize;
@@ -30,7 +35,8 @@ export function ToolboxButton(props: ToolboxButtonProps) {
       class={props.class ? `zylem-toolbox-btn ${props.class}` : 'zylem-toolbox-btn'}
       data-size={props.size}
       data-selected={props.selected ? '' : undefined}
-      aria-pressed={props.selected}
+      data-on={props.on ? '' : undefined}
+      aria-pressed={props.on !== undefined ? props.on : props.selected}
       disabled={props.disabled}
       onClick={props.onClick}
     >

package/src/components/WindowControls/WindowControls.tsx

@@ -5,10 +5,17 @@ import X from 'lucide-solid/icons/x';
 import { Dock } from '../../icons';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu';
 
-/** Where a panel sits. `float` leaves it free of the top and bottom edges. */
-export type DockPosition = 'top' | 'float' | 'bottom';
+/** Where a panel sits. `float` leaves it free of a dock edge. */
+export type DockPosition = 'left' | 'right' | 'top' | 'float' | 'bottom';
 
-const DOCK_OPTIONS: readonly { id: DockPosition; label: string }[] = [
+/** One row in the dock menu. */
+export interface DockOption {
+  id: DockPosition;
+  label: string;
+}
+
+/** Top, Float, and Bottom: the menu a strip uses when it docks to those edges. */
+const DEFAULT_DOCK_OPTIONS: readonly DockOption[] = [
   { id: 'top', label: 'Top' },
   { id: 'float', label: 'Float' },
   { id: 'bottom', label: 'Bottom' },
@@ -27,6 +34,11 @@ export interface WindowControlsProps {
   closeTestId?: string | undefined;
   /** Current dock, checked in the menu. Omit for none checked. */
   dock?: DockPosition | undefined;
+  /**
+   * Rows in the dock menu. Defaults to Top, Float, and Bottom. Pass this when
+   * the window docks to other edges, such as Left and Right.
+   */
+  dockOptions?: readonly DockOption[] | undefined;
   /** Renders the dock control. Called with the position chosen from the menu. */
   onDock?: ((position: DockPosition) => void) | undefined;
 }
@@ -34,7 +46,8 @@ export interface WindowControlsProps {
 /**
  * Shared ghost window controls, used by floating and detached panels. Close
  * takes the danger color only while hovered or focused. Dock opens a menu of
- * where the panel sits. Only controls with a handler are rendered.
+ * where the panel sits: Top, Float, and Bottom, or `dockOptions` when the
+ * window uses other edges. Only controls with a handler are rendered.
  */
 export function WindowControls(props: WindowControlsProps) {
   return (
@@ -46,7 +59,7 @@ export function WindowControls(props: WindowControlsProps) {
             triggerClass="zylem-window-control zylem-window-control--dock"
             placement="bottom-end"
             trigger={<Dock size={11} aria-hidden="true" />}
-            items={DOCK_OPTIONS.map((option) => ({
+            items={(props.dockOptions ?? DEFAULT_DOCK_OPTIONS).map((option) => ({
               id: option.id,
               label: option.label,
               checked: props.dock === option.id,