@zylem/ui 0.9.7 → 0.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.9.7",
+  "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/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,

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',
@@ -67,6 +68,18 @@ globalStyle('.zylem-toolbar-btn[data-selected], .zylem-toolbar-btn.selected', {
   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

@@ -8,8 +8,14 @@ export interface ToolbarButtonProps {
   /**
    * The selected look alone, for a button whose label already says its state
    * (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;
+  /**
+   * 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.
@@ -36,7 +42,8 @@ function insidePopup(element: Element | undefined): boolean {
 
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
- * `selected` is the live-green jewel. `on` is the electric-blue toggle.
+ * `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.
@@ -74,7 +81,8 @@ export function ToolbarButton(props: ToolbarButtonProps) {
               ? `zylem-toolbar-btn ${props.class}`
               : 'zylem-toolbar-btn'
           }
-          data-selected={props.selected ? '' : 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}

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/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,

package/src/components/index.ts

@@ -70,6 +70,7 @@ export { Separator, type SeparatorProps } from './Separator/Separator';
 // Composites
 export {
   WindowControls,
+  type DockOption,
   type DockPosition,
   type WindowControlsProps,
 } from './WindowControls/WindowControls';
@@ -144,6 +145,7 @@ export {
   ART_TOOL_ICONS,
   ART_TOOL_LABELS,
   type ArtTool,
+  type IconComponent,
   type ToolButtonProps,
 } from './ToolButton/ToolButton';
 export { AddTile, type AddTileProps, type AddTileVariant } from './AddTile/AddTile';
@@ -208,6 +210,8 @@ export {
   majorTickTimes,
   formatClock,
   formatBeats,
+  type ResolveClipDragOptions,
+  type RulerTickOptions,
 } from './TimelineLanes/lanes-math';
 export { TrackHeader, type TrackHeaderProps } from './TrackHeader/TrackHeader';
 export { PianoRoll, type PianoRollProps, type PianoRollNote } from './PianoRoll/PianoRoll';
@@ -216,6 +220,7 @@ export {
   isBlackKey,
   resolveNoteDrag,
   cellStart,
+  type NoteDragOptions,
 } from './PianoRoll/piano-roll-math';
 export { Knob, arcPath, type KnobProps } from './Mixer/Knob';
 export { MixerStrip, formatDb, formatPan, type MixerStripProps } from './Mixer/MixerStrip';
@@ -231,12 +236,21 @@ export {
 // Camera icons (Lucide-shaped originals; also `@zylem/ui/icons`)
 export {
   CAMERA_ICONS,
+  CAMERA_VIEWS,
   FreePerspective,
   GameCamera,
   IsometricPerspective,
   Perspective,
   SideviewPerspective,
   TopDownPerspective,
+  ViewBottom,
+  ViewIsoLeftBottom,
+  ViewIsoLeftTop,
+  ViewIsoRightBottom,
+  ViewIsoRightTop,
+  ViewLeft,
+  ViewRight,
+  ViewTop,
   Dock,
   cameraIconNodes,
   createZylemIcon,

package/src/icons/icon-nodes.ts

@@ -73,6 +73,34 @@ export const DockNode: IconNode = [
   ],
 ];
 
+/**
+ * One side-view camera — body on the left, lens pointing right, subject plane
+ * on the right — turned about the icon center. Positive degrees are clockwise,
+ * which is what puts the camera on that side of the subject:
+ * 0 left, 45 iso left/top, 90 top, 135 iso right/top, 180 right,
+ * 225 iso right/bottom, 270 bottom, 315 iso left/bottom.
+ */
+const FACING_RIGHT: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'M16 6h4v12h-4' }],
+];
+
+function turnCamera(angle: number): IconNode {
+  if (angle === 0) return FACING_RIGHT;
+  const transform = `rotate(${angle} 12 12)`;
+  return FACING_RIGHT.map(([element, attrs]) => [element, { ...attrs, transform }]) as IconNode;
+}
+
+export const ViewLeftNode = turnCamera(0);
+export const ViewIsoLeftTopNode = turnCamera(45);
+export const ViewTopNode = turnCamera(90);
+export const ViewIsoRightTopNode = turnCamera(135);
+export const ViewRightNode = turnCamera(180);
+export const ViewIsoRightBottomNode = turnCamera(225);
+export const ViewBottomNode = turnCamera(270);
+export const ViewIsoLeftBottomNode = turnCamera(315);
+
 export const cameraIconNodes = {
   perspective: PerspectiveNode,
   'sideview-perspective': SideviewPerspectiveNode,
@@ -80,6 +108,14 @@ export const cameraIconNodes = {
   'isometric-perspective': IsometricPerspectiveNode,
   'free-perspective': FreePerspectiveNode,
   'game-camera': GameCameraNode,
+  'view-left': ViewLeftNode,
+  'view-iso-left-top': ViewIsoLeftTopNode,
+  'view-top': ViewTopNode,
+  'view-iso-right-top': ViewIsoRightTopNode,
+  'view-right': ViewRightNode,
+  'view-iso-right-bottom': ViewIsoRightBottomNode,
+  'view-bottom': ViewBottomNode,
+  'view-iso-left-bottom': ViewIsoLeftBottomNode,
 } as const;
 
 export type CameraIconName = keyof typeof cameraIconNodes;

package/src/icons/index.ts

@@ -8,6 +8,14 @@ import {
   PerspectiveNode,
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
+  ViewBottomNode,
+  ViewIsoLeftBottomNode,
+  ViewIsoLeftTopNode,
+  ViewIsoRightBottomNode,
+  ViewIsoRightTopNode,
+  ViewLeftNode,
+  ViewRightNode,
+  ViewTopNode,
 } from './icon-nodes';
 
 export type { IconNode, CameraIconName } from './icon-nodes';
@@ -19,6 +27,14 @@ export {
   PerspectiveNode,
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
+  ViewBottomNode,
+  ViewIsoLeftBottomNode,
+  ViewIsoLeftTopNode,
+  ViewIsoRightBottomNode,
+  ViewIsoRightTopNode,
+  ViewLeftNode,
+  ViewRightNode,
+  ViewTopNode,
 } from './icon-nodes';
 export { createZylemIcon, type ZylemIconOptions, type ZylemIconProps } from './create-icon';
 
@@ -45,6 +61,23 @@ export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiv
 /** Recorder with controller buttons (game camera). */
 export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
 
+/** Side camera on the left, looking right. */
+export const ViewLeft = createZylemIcon('ViewLeft', ViewLeftNode);
+/** Side camera on the right, looking left. */
+export const ViewRight = createZylemIcon('ViewRight', ViewRightNode);
+/** Camera above the subject, looking down. */
+export const ViewTop = createZylemIcon('ViewTop', ViewTopNode);
+/** Camera below the subject, looking up. */
+export const ViewBottom = createZylemIcon('ViewBottom', ViewBottomNode);
+/** Camera at the upper left, the iso left/top angle. */
+export const ViewIsoLeftTop = createZylemIcon('ViewIsoLeftTop', ViewIsoLeftTopNode);
+/** Camera at the upper right, the iso right/top angle. */
+export const ViewIsoRightTop = createZylemIcon('ViewIsoRightTop', ViewIsoRightTopNode);
+/** Camera at the lower right, the iso right/bottom angle. */
+export const ViewIsoRightBottom = createZylemIcon('ViewIsoRightBottom', ViewIsoRightBottomNode);
+/** Camera at the lower left, the iso left/bottom angle. */
+export const ViewIsoLeftBottom = createZylemIcon('ViewIsoLeftBottom', ViewIsoLeftBottomNode);
+
 /** Filled window frame. Skips the 18px toolbar metric so `size` matches a chevron. */
 export const Dock = createZylemIcon('Dock', DockNode, {
   className: 'zylem-dock',
@@ -60,3 +93,18 @@ export const CAMERA_ICONS = [
   { name: 'free-perspective', label: 'Free / orbit', Icon: FreePerspective },
   { name: 'game-camera', label: 'Game camera', Icon: GameCamera },
 ] as const;
+
+/**
+ * The eight angles around the view cube, clockwise from the top-left corner.
+ * Free, game, and perspective already live on `CAMERA_ICONS`.
+ */
+export const CAMERA_VIEWS = [
+  { name: 'view-iso-left-top', label: 'Iso left/top', Icon: ViewIsoLeftTop },
+  { name: 'view-top', label: 'Top', Icon: ViewTop },
+  { name: 'view-iso-right-top', label: 'Iso right/top', Icon: ViewIsoRightTop },
+  { name: 'view-right', label: 'Right', Icon: ViewRight },
+  { name: 'view-iso-right-bottom', label: 'Iso right/bottom', Icon: ViewIsoRightBottom },
+  { name: 'view-bottom', label: 'Bottom', Icon: ViewBottom },
+  { name: 'view-iso-left-bottom', label: 'Iso left/bottom', Icon: ViewIsoLeftBottom },
+  { name: 'view-left', label: 'Left', Icon: ViewLeft },
+] as const;