@zylem/ui 0.9.3 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -53,6 +53,15 @@
     "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"
   },
@@ -86,12 +95,5 @@
     "node": ">=22.12.0",
     "pnpm": ">=10.32.1"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "showcase": "vite --host",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check ."
-  }
-}
+  "packageManager": "pnpm@10.33.0"
+}

package/src/components/BuildLabel/resolve-build-version.ts

@@ -3,6 +3,11 @@ export interface BuildLabelModel {
   version?: string;
   /** Resolved `@zylem/*` package versions collected at build time. */
   packages?: Record<string, string>;
+  /**
+   * Package name to show when it is present in `packages`. Demo apps leave
+   * this unset and keep the engine-first default.
+   */
+  prefer?: string;
 }
 
 const PREFERRED_PACKAGES = [
@@ -21,6 +26,10 @@ const PREFERRED_PACKAGES = [
  */
 export function resolveBuildVersion(model: BuildLabelModel): string {
   const packages = model.packages;
+  if (packages && model.prefer) {
+    const preferred = packages[model.prefer];
+    if (preferred) return preferred;
+  }
   if (packages) {
     for (const name of PREFERRED_PACKAGES) {
       const version = packages[name];

package/src/components/DropdownMenu/DropdownMenu.css.ts

@@ -8,7 +8,7 @@ const enter = keyframes({
 
 globalStyle('.zylem-dropdown-content', {
   zIndex: vars.layers.menu,
-  minWidth: '180px',
+  width: 'max-content',
   padding: vars.spacing.xs,
   borderRadius: vars.radii.control,
   border: '1px solid rgba(97, 166, 232, 0.45)',

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -17,6 +17,11 @@ export interface DropdownMenuItemConfig {
    * one-of-many the way a stage picker works).
    */
   checked?: boolean;
+  /**
+   * Close the menu when this item is chosen. Checkable items stay open unless
+   * this is set, so a one-of-many picker can dismiss itself.
+   */
+  closeOnSelect?: boolean;
   /** Render a separator line above this item. */
   separatorAbove?: boolean;
 }
@@ -28,6 +33,8 @@ export interface DropdownMenuProps {
   placement?: 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top' | 'right-start' | 'left-start';
   /** Class applied to the trigger button. */
   triggerClass?: string;
+  /** Accessible name when the trigger content is only an icon. */
+  triggerLabel?: string;
 }
 
 /**
@@ -85,6 +92,7 @@ export function MenuItems(props: { items: DropdownMenuItemConfig[] }) {
               class={itemClass(item)}
               checked={item.checked}
               disabled={item.disabled}
+              closeOnSelect={item.closeOnSelect}
               onSelect={item.onSelect}
             >
               {body(item)}
@@ -108,7 +116,12 @@ export function DropdownMenu(props: DropdownMenuProps) {
 
   return (
     <KDropdownMenu.Root placement={props.placement ?? 'bottom-start'}>
-      <KDropdownMenu.Trigger ref={layer.anchorRef} class={props.triggerClass}>
+      <KDropdownMenu.Trigger
+        ref={layer.anchorRef}
+        class={props.triggerClass}
+        aria-label={props.triggerLabel}
+        title={props.triggerLabel}
+      >
         {props.trigger}
       </KDropdownMenu.Trigger>
       <Show when={layer.mount()} keyed>

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

@@ -92,3 +92,15 @@ globalStyle('.zylem-menu-button__face svg', {
 	width: '18px',
 	height: '18px',
 });
+
+/**
+ * Vertical column of icon buttons inside the panel. The panel chrome stays on
+ * `.zylem-menu-button__panel`; this only stacks and pads its contents.
+ */
+globalStyle('.zylem-menu-button__stack', {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	gap: vars.spacing.xs,
+	padding: vars.spacing.sm,
+});

package/src/components/TitleBar/TitleBar.tsx

@@ -33,6 +33,8 @@ export function TitleBar(props: TitleBarProps) {
     'collapsed',
     'closeLabel',
     'closeTestId',
+    'dock',
+    'onDock',
     'class',
   ]);
 
@@ -60,6 +62,8 @@ export function TitleBar(props: TitleBarProps) {
         collapsed={local.collapsed}
         closeLabel={local.closeLabel}
         closeTestId={local.closeTestId}
+        dock={local.dock}
+        onDock={local.onDock}
       />
     </div>
   );

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -1,5 +1,5 @@
 import { Button as KButton, Tooltip as KTooltip } from '@kobalte/core';
-import { Show, type JSX } from 'solid-js';
+import { Show, createSignal, onMount, type JSX } from 'solid-js';
 import { useLayer } from '../../layers';
 
 export interface ToolbarButtonProps {
@@ -17,6 +17,15 @@ export interface ToolbarButtonProps {
   class?: string;
 }
 
+/**
+ * A floating popup (menu, popover) wraps its panel in a popper positioner.
+ * Tooltips inside one open beside the button, because a vertical stack has no
+ * free room above or below an item.
+ */
+function insidePopup(element: Element | undefined): boolean {
+  return Boolean(element?.closest('[data-popper-positioner]'));
+}
+
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
  * Selected and pressed states render as a live-green jewel.
@@ -26,10 +35,27 @@ export interface ToolbarButtonProps {
  */
 export function ToolbarButton(props: ToolbarButtonProps) {
   const layer = useLayer('tooltip');
+  const [beside, setBeside] = createSignal(false);
+  let trigger: HTMLElement | undefined;
+
+  const syncPlacement = () => setBeside(insidePopup(trigger));
+  onMount(syncPlacement);
 
   return (
-    <KTooltip.Root openDelay={400}>
-      <KTooltip.Trigger as="span" ref={layer.anchorRef}>
+    <KTooltip.Root
+      openDelay={400}
+      placement={beside() ? 'right' : undefined}
+      flip={beside() ? 'left' : undefined}
+      gutter={beside() ? 8 : undefined}
+    >
+      <KTooltip.Trigger
+        as="span"
+        ref={(element: HTMLElement) => {
+          trigger = element;
+          layer.anchorRef(element);
+        }}
+        onPointerEnter={syncPlacement}
+      >
         <KButton.Root
           aria-label={props.label}
           aria-pressed={props.pressed}
@@ -48,7 +74,9 @@ export function ToolbarButton(props: ToolbarButtonProps) {
       <Show when={layer.mount()} keyed>
         {(mount) => (
           <KTooltip.Portal mount={mount}>
-            <KTooltip.Content class="zylem-tooltip">
+            <KTooltip.Content
+              class={beside() ? 'zylem-tooltip zylem-tooltip--front' : 'zylem-tooltip'}
+            >
               {props.label}
             </KTooltip.Content>
           </KTooltip.Portal>

package/src/components/ToolbarDropdownMenu/ToolbarDropdownMenu.tsx

@@ -0,0 +1,61 @@
+import { For, Show, type Component } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { MenuButton, type MenuButtonProps } from '../MenuButton/MenuButton';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+
+export interface ToolbarDropdownItem {
+  id: string;
+  label: string;
+  /** Glyph for the face and for this row in the menu. */
+  icon: Component<{ class?: string }>;
+}
+
+export interface ToolbarDropdownMenuProps {
+  /** Choices. The face shows whichever matches `value`. */
+  items: readonly ToolbarDropdownItem[];
+  value: string;
+  onChange: (id: string) => void;
+  /** Where the menu opens. Defaults to dropping down from the face. */
+  placement?: MenuButtonProps['placement'];
+}
+
+/**
+ * A toolbar button that shows the current choice and opens a vertical menu of
+ * the others. The face is the selected item; the rows are plain icon buttons,
+ * and picking one updates the face and closes the menu.
+ */
+export function ToolbarDropdownMenu(props: ToolbarDropdownMenuProps) {
+  const current = () =>
+    props.items.find((item) => item.id === props.value) ?? props.items[0];
+
+  return (
+    <Show when={current()} keyed>
+      {(item) => (
+        <MenuButton
+          label={item.label}
+          selected
+          placement={props.placement ?? 'bottom-start'}
+          menu={(close) => (
+            <div class="zylem-menu-button__stack">
+              <For each={props.items}>
+                {(entry) => (
+                  <ToolbarButton
+                    label={entry.label}
+                    onClick={() => {
+                      props.onChange(entry.id);
+                      close();
+                    }}
+                  >
+                    <Dynamic component={entry.icon} class="zylem-icon" />
+                  </ToolbarButton>
+                )}
+              </For>
+            </div>
+          )}
+        >
+          <Dynamic component={item.icon} class="zylem-icon" />
+        </MenuButton>
+      )}
+    </Show>
+  );
+}

package/src/components/Tooltip/Tooltip.css.ts

@@ -33,3 +33,12 @@ globalStyle('.zylem-tooltip', {
 globalStyle('.zylem-tooltip[data-enter]', {
   animation: `${enter} 0.15s ${vars.motion.easeOut}`,
 });
+
+/**
+ * Opened from inside a popup. The menu tier sits above tooltips, so one step
+ * past it is what puts this label over the popup it came from and over
+ * everything else.
+ */
+globalStyle('.zylem-tooltip.zylem-tooltip--front', {
+  zIndex: `calc(${vars.layers.menu} + 1)`,
+});

package/src/components/WindowControls/WindowControls.tsx

@@ -1,7 +1,18 @@
 import { Show } from 'solid-js';
 import ChevronDown from 'lucide-solid/icons/chevron-down';
 import ChevronUp from 'lucide-solid/icons/chevron-up';
+import Dock from 'lucide-solid/icons/dock';
 import X from 'lucide-solid/icons/x';
+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';
+
+const DOCK_OPTIONS: readonly { id: DockPosition; label: string }[] = [
+  { id: 'top', label: 'Top' },
+  { id: 'float', label: 'Float' },
+  { id: 'bottom', label: 'Bottom' },
+];
 
 export interface WindowControlsProps {
   // Optional props accept an explicit `undefined` so callers compiled with
@@ -14,17 +25,36 @@ export interface WindowControlsProps {
   closeLabel?: string | undefined;
   /** Forwarded as data-testid on the close button. */
   closeTestId?: string | undefined;
+  /** Current dock, checked in the menu. Omit for none checked. */
+  dock?: DockPosition | undefined;
+  /** Renders the dock control. Called with the position chosen from the menu. */
+  onDock?: ((position: DockPosition) => void) | undefined;
 }
 
 /**
  * Shared ghost window controls, used by floating and detached panels. Close
- * takes the danger color only while hovered or focused. Only controls with a
- * handler are rendered.
+ * 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.
  */
 export function WindowControls(props: WindowControlsProps) {
   return (
-    <Show when={props.onClose || props.onCollapse}>
+    <Show when={props.onClose || props.onCollapse || props.onDock}>
       <div class="zylem-window-controls" role="group" aria-label="Window controls">
+        <Show when={props.onDock}>
+          <DropdownMenu
+            triggerLabel="Dock panel"
+            triggerClass="zylem-window-control zylem-window-control--dock"
+            placement="bottom-end"
+            trigger={<Dock size={11} strokeWidth={2.5} aria-hidden="true" />}
+            items={DOCK_OPTIONS.map((option) => ({
+              id: option.id,
+              label: option.label,
+              checked: props.dock === option.id,
+              closeOnSelect: true,
+              onSelect: () => props.onDock?.(option.id),
+            }))}
+          />
+        </Show>
         <Show when={props.onCollapse}>
           <button
             type="button"

package/src/components/index.ts

@@ -68,7 +68,11 @@ export { Toast, type ToastProps, type ToastTone } from './Toast/Toast';
 export { Separator, type SeparatorProps } from './Separator/Separator';
 
 // Composites
-export { WindowControls, type WindowControlsProps } from './WindowControls/WindowControls';
+export {
+  WindowControls,
+  type DockPosition,
+  type WindowControlsProps,
+} from './WindowControls/WindowControls';
 export { TitleBar, type TitleBarProps } from './TitleBar/TitleBar';
 export { Panel, type PanelProps } from './Panel/Panel';
 export { Toolbar, type ToolbarProps } from './Toolbar/Toolbar';
@@ -90,6 +94,11 @@ export {
 } from './Sidebar/Sidebar';
 export { Card, type CardProps } from './Card/Card';
 export { MenuButton, type MenuButtonProps } from './MenuButton/MenuButton';
+export {
+  ToolbarDropdownMenu,
+  type ToolbarDropdownItem,
+  type ToolbarDropdownMenuProps,
+} from './ToolbarDropdownMenu/ToolbarDropdownMenu';
 export { ItemPicker, type ItemPickerProps } from './ItemPicker/ItemPicker';
 export {
   filterItems,