@zylem/ui 0.2.0 → 0.8.8

package/dist/styles.js

@@ -1 +1 @@
-import"./chunk-VGOOWBSO.js";
+import"./chunk-3TP2SNNW.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.2.0",
+  "version": "0.8.8",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -51,13 +51,16 @@
   "devDependencies": {
     "@biomejs/biome": "^2.3.7",
     "@clack/prompts": "^1.6.0",
+    "@solidjs/testing-library": "^0.8.10",
     "@vanilla-extract/esbuild-plugin": "^2.3.22",
     "@vanilla-extract/vite-plugin": "^5.2.2",
+    "happy-dom": "^20.11.2",
     "solid-js": "^1.9.9",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
     "vite": "7.0.4",
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.8",
+    "vitest": "^4.1.10"
   },
   "dependencies": {
     "@kobalte/core": "^0.13.11",
@@ -66,11 +69,16 @@
     "@vanilla-extract/sprinkles": "^1.6.5",
     "lucide-solid": "^0.511.0"
   },
+  "engines": {
+    "node": ">=22.12.0",
+    "pnpm": ">=10.32.1"
+  },
   "scripts": {
-    "zylem": "node --experimental-strip-types ./scripts/zylem-runner.ts",
     "build": "tsup",
     "dev": "tsup --watch",
     "showcase": "vite --host",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "biome check ."
   }
 }

package/src/components/Dialog/Dialog.css.ts

@@ -14,7 +14,7 @@ const contentEnter = keyframes({
 globalStyle('.zylem-dialog-overlay', {
   position: 'fixed',
   inset: 0,
-  zIndex: 10000,
+  zIndex: vars.layers.modal,
   background: 'rgba(5, 10, 18, 0.6)',
   backdropFilter: 'blur(3px)',
   animation: `${overlayEnter} 0.15s ${vars.motion.easeOut}`,
@@ -23,7 +23,8 @@ globalStyle('.zylem-dialog-overlay', {
 globalStyle('.zylem-dialog-positioner', {
   position: 'fixed',
   inset: 0,
-  zIndex: 10001,
+  // One above the backdrop it shares a tier with.
+  zIndex: `calc(${vars.layers.modal} + 1)`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

package/src/components/Dialog/Dialog.tsx

@@ -1,6 +1,7 @@
 import { Dialog as KDialog } from '@kobalte/core';
 import { Show } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { createDismissGuard, LayerScope, useLayer } from '../../layers';
 import { Button } from '../Button/Button';
 import { WindowControls } from '../WindowControls/WindowControls';
 
@@ -16,31 +17,54 @@ export interface DialogProps {
 /**
  * HyperGlass dialog: glass window with a glossy title bar and jewel close
  * control, centered over a dimmed backdrop.
+ *
+ * The body is a {@link LayerScope}, so overlays opened from inside the dialog
+ * stack against the dialog's own content rather than against the page. A tooltip
+ * on a dialog field floats over the dialog, but a menu belonging to the page
+ * behind still wins — which is what keeps a dialog from leaking overlays across
+ * the rest of the app.
  */
 export function Dialog(props: DialogProps) {
+  const layer = useLayer('modal');
+  const dismiss = createDismissGuard();
+
   return (
     <KDialog.Root open={props.open} onOpenChange={props.onOpenChange}>
-      <KDialog.Portal>
-        <KDialog.Overlay class="zylem-dialog-overlay" />
-        <div class="zylem-dialog-positioner">
-          <KDialog.Content class="zylem-dialog-content">
-            <div class="zylem-dialog-header">
-              <Show when={props.title}>
-                <KDialog.Title class="zylem-dialog-title">
-                  {props.title}
-                </KDialog.Title>
-              </Show>
-              <WindowControls onClose={() => props.onOpenChange?.(false)} />
+      {/*
+        A dialog is controlled and renders no trigger, so it has nothing in the
+        page to resolve its tree from. This marker sits where the dialog was
+        declared, which is enough to find an enclosing shadow root.
+      */}
+      <span ref={layer.anchorRef} style={{ display: 'none' }} aria-hidden="true" />
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KDialog.Portal mount={mount}>
+            <KDialog.Overlay class="zylem-dialog-overlay" />
+            <div class="zylem-dialog-positioner">
+              <KDialog.Content
+                ref={dismiss.ref}
+                class="zylem-dialog-content"
+                onInteractOutside={dismiss.onInteractOutside}
+              >
+                <div class="zylem-dialog-header">
+                  <Show when={props.title}>
+                    <KDialog.Title class="zylem-dialog-title">
+                      {props.title}
+                    </KDialog.Title>
+                  </Show>
+                  <WindowControls onClose={() => props.onOpenChange?.(false)} />
+                </div>
+                <KDialog.Description as="div" class="zylem-dialog-body">
+                  <LayerScope>{props.children}</LayerScope>
+                </KDialog.Description>
+                <Show when={props.footer}>
+                  <div class="zylem-dialog-footer">{props.footer}</div>
+                </Show>
+              </KDialog.Content>
             </div>
-            <KDialog.Description as="div" class="zylem-dialog-body">
-              {props.children}
-            </KDialog.Description>
-            <Show when={props.footer}>
-              <div class="zylem-dialog-footer">{props.footer}</div>
-            </Show>
-          </KDialog.Content>
-        </div>
-      </KDialog.Portal>
+          </KDialog.Portal>
+        )}
+      </Show>
     </KDialog.Root>
   );
 }

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

@@ -7,7 +7,7 @@ const enter = keyframes({
 });
 
 globalStyle('.zylem-dropdown-content', {
-  zIndex: 10000,
+  zIndex: vars.layers.menu,
   minWidth: '180px',
   padding: vars.spacing.xs,
   borderRadius: vars.radii.control,

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,6 +1,7 @@
 import { DropdownMenu as KDropdownMenu } from '@kobalte/core';
 import { For, Show } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
 
 export interface DropdownMenuItemConfig {
   id: string;
@@ -24,40 +25,58 @@ export interface DropdownMenuProps {
 
 /**
  * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ *
+ * Portals into the layer container for its tree at the `menu` tier, so it opens
+ * over panels and dialogs and stays styled inside a shadow root.
  */
 export function DropdownMenu(props: DropdownMenuProps) {
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
+
+  const items = () => (
+    <For each={props.items}>
+      {(item) => (
+        <>
+          <Show when={item.separatorAbove}>
+            <KDropdownMenu.Separator class="zylem-dropdown-separator" />
+          </Show>
+          <KDropdownMenu.Item
+            class={
+              item.danger
+                ? 'zylem-dropdown-item zylem-dropdown-item--danger'
+                : 'zylem-dropdown-item'
+            }
+            disabled={item.disabled}
+            onSelect={item.onSelect}
+          >
+            <span>{item.label}</span>
+            <Show when={item.shortcut}>
+              <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
+            </Show>
+          </KDropdownMenu.Item>
+        </>
+      )}
+    </For>
+  );
+
   return (
     <KDropdownMenu.Root placement={props.placement ?? 'bottom-start'}>
-      <KDropdownMenu.Trigger class={props.triggerClass}>
+      <KDropdownMenu.Trigger ref={layer.anchorRef} class={props.triggerClass}>
         {props.trigger}
       </KDropdownMenu.Trigger>
-      <KDropdownMenu.Portal>
-        <KDropdownMenu.Content class="zylem-dropdown-content">
-          <For each={props.items}>
-            {(item) => (
-              <>
-                <Show when={item.separatorAbove}>
-                  <KDropdownMenu.Separator class="zylem-dropdown-separator" />
-                </Show>
-                <KDropdownMenu.Item
-                  class={
-                    item.danger
-                      ? 'zylem-dropdown-item zylem-dropdown-item--danger'
-                      : 'zylem-dropdown-item'
-                  }
-                  disabled={item.disabled}
-                  onSelect={item.onSelect}
-                >
-                  <span>{item.label}</span>
-                  <Show when={item.shortcut}>
-                    <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
-                  </Show>
-                </KDropdownMenu.Item>
-              </>
-            )}
-          </For>
-        </KDropdownMenu.Content>
-      </KDropdownMenu.Portal>
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KDropdownMenu.Portal mount={mount}>
+            <KDropdownMenu.Content
+              ref={dismiss.ref}
+              class="zylem-dropdown-content"
+              onInteractOutside={dismiss.onInteractOutside}
+            >
+              {items()}
+            </KDropdownMenu.Content>
+          </KDropdownMenu.Portal>
+        )}
+      </Show>
     </KDropdownMenu.Root>
   );
 }

package/src/components/ItemPicker/ItemPicker.css.ts

@@ -0,0 +1,101 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Searchable, grouped picker list. Sized to sit inside a MenuButton panel, but
+ * width and height are capped rather than fixed so it also works as a sidebar
+ * or dialog section.
+ */
+
+globalStyle('.zylem-picker', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.sm,
+  width: '260px',
+  maxHeight: '340px',
+  padding: vars.spacing.sm,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-picker__search', {
+  flexShrink: 0,
+});
+
+globalStyle('.zylem-picker__groups', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.md,
+  overflowY: 'auto',
+});
+
+globalStyle('.zylem-picker__group-title', {
+  margin: `0 0 ${vars.spacing.xs}`,
+  fontSize: '9px',
+  fontWeight: 600,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-picker__item', {
+  display: 'flex',
+  gap: vars.spacing.sm,
+  alignItems: 'center',
+  width: '100%',
+  padding: `${vars.spacing.xs} ${vars.spacing.xs}`,
+  fontFamily: 'inherit',
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: 'inherit',
+  textAlign: 'left',
+  background: 'transparent',
+  border: '1px solid transparent',
+  borderRadius: vars.radii.control,
+  cursor: 'pointer',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-picker__item:hover:not([disabled])', {
+  background: 'rgba(255, 255, 255, 0.08)',
+});
+
+globalStyle('.zylem-picker__item:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-picker__item[data-selected]', {
+  background: 'rgba(120, 180, 255, 0.16)',
+  borderColor: 'rgba(120, 180, 255, 0.45)',
+});
+
+globalStyle('.zylem-picker__item[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-picker__item-glyph', {
+  display: 'inline-flex',
+  flexShrink: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'currentColor',
+});
+
+globalStyle('.zylem-picker__item-glyph svg', {
+  width: vars.sizes.iconSm,
+  height: vars.sizes.iconSm,
+});
+
+globalStyle('.zylem-picker__item-label', {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-picker__empty', {
+  margin: 0,
+  padding: `${vars.spacing.sm} ${vars.spacing.xs}`,
+  fontSize: `calc(${vars.typography.fontSize} - 3px)`,
+  opacity: 0.6,
+});

package/src/components/ItemPicker/ItemPicker.tsx

@@ -0,0 +1,108 @@
+import { For, Show, createMemo, createSignal, type JSX } from 'solid-js';
+import { SearchInput } from '../SearchInput/SearchInput';
+import { filterItems, groupItems, type PickerItem } from './filter-items';
+
+export interface ItemPickerProps<T extends PickerItem = PickerItem> {
+  items: T[];
+  onSelect: (item: T) => void;
+  /** Marked as the current choice. */
+  selectedId?: string | null | undefined;
+  /** Hide the search field for a list short enough not to need one. */
+  searchable?: boolean | undefined;
+  searchPlaceholder?: string | undefined;
+  /**
+   * Focus the search field on mount. On by default: the picker is opened
+   * deliberately, so typing straight into it is the expected behaviour.
+   */
+  autoFocus?: boolean | undefined;
+  /** Shown when `items` is empty, as opposed to filtered down to nothing. */
+  emptyMessage?: JSX.Element | undefined;
+  class?: string | undefined;
+}
+
+/**
+ * Searchable, grouped list of choices — the picker half of a MenuButton, and
+ * usable on its own.
+ *
+ * Icons arrive as markup strings rather than components because the common case
+ * is a list supplied at runtime by something that does not share an icon library
+ * with the UI (the editor's entity catalog comes over a bridge from the running
+ * game, for instance).
+ */
+export function ItemPicker<T extends PickerItem>(props: ItemPickerProps<T>) {
+  const [query, setQuery] = createSignal('');
+
+  const searchable = () => props.searchable !== false;
+  const groups = createMemo(() => groupItems(filterItems(props.items, query())));
+
+  return (
+    <div class={props.class ? `zylem-picker ${props.class}` : 'zylem-picker'}>
+      <Show when={searchable()}>
+        <SearchInput
+          class="zylem-picker__search"
+          value={query()}
+          onInput={setQuery}
+          placeholder={props.searchPlaceholder ?? 'Search…'}
+          ref={(element) => {
+            if (props.autoFocus === false) return;
+            // Deferred: the element is not focusable until it is in the document,
+            // which for a portaled panel is after this ref runs.
+            queueMicrotask(() => element.focus());
+          }}
+        />
+      </Show>
+
+      <Show
+        when={props.items.length}
+        fallback={
+          <p class="zylem-picker__empty">
+            {props.emptyMessage ?? 'Nothing to choose from.'}
+          </p>
+        }
+      >
+        <Show
+          when={groups().length}
+          fallback={
+            <p class="zylem-picker__empty">No matches for “{query()}”.</p>
+          }
+        >
+          <div class="zylem-picker__groups zylem-scroll">
+            <For each={groups()}>
+              {(group) => (
+                <div class="zylem-picker__group">
+                  <h4 class="zylem-picker__group-title">{group.group}</h4>
+                  <For each={group.items}>
+                    {(item) => (
+                      <button
+                        type="button"
+                        class="zylem-picker__item"
+                        disabled={item.disabled}
+                        data-selected={
+                          props.selectedId === item.id ? '' : undefined
+                        }
+                        title={item.description}
+                        onClick={() => props.onSelect(item)}
+                      >
+                        <Show when={item.icon}>
+                          {(icon) => (
+                            <span
+                              class="zylem-picker__item-glyph"
+                              // Markup from the caller's own registry, in the
+                              // caller's own realm; not a new trust boundary.
+                              innerHTML={icon()}
+                            />
+                          )}
+                        </Show>
+                        <span class="zylem-picker__item-label">{item.label}</span>
+                      </button>
+                    )}
+                  </For>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
+      </Show>
+    </div>
+  );
+}

package/src/components/ItemPicker/filter-items.ts

@@ -0,0 +1,75 @@
+/**
+ * Search and grouping for {@link ItemPicker}, kept pure and separate so the
+ * matching rules can be tested and reused without rendering anything.
+ */
+
+/**
+ * Optional fields accept an explicit `undefined` so callers compiled with
+ * `exactOptionalPropertyTypes` can map their own optional data straight across
+ * without narrowing every field first.
+ */
+export interface PickerItem {
+  id: string;
+  label: string;
+  /** Heading this item is filed under. Ungrouped items fall under `Other`. */
+  group?: string | undefined;
+  /**
+   * Leading glyph. A string is treated as inline SVG or HTML markup, which is
+   * what a host that does not share an icon library can realistically supply.
+   */
+  icon?: string | undefined;
+  /** Shown as the row's title attribute. */
+  description?: string | undefined;
+  /** Extra search terms that are not visible on the row. */
+  tags?: string[] | undefined;
+  disabled?: boolean | undefined;
+}
+
+export interface PickerGroup<T extends PickerItem = PickerItem> {
+  group: string;
+  items: T[];
+}
+
+/** Heading for items that declare no group. */
+export const UNGROUPED_LABEL = 'Other';
+
+/**
+ * Filter by a query matched against label, id, and tags. An empty or
+ * whitespace-only query returns everything, so an unopened search box is not a
+ * filter.
+ */
+export function filterItems<T extends PickerItem>(items: T[], query: string): T[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return items;
+
+  return items.filter((item) => {
+    if (item.label.toLowerCase().includes(needle)) return true;
+    if (item.id.toLowerCase().includes(needle)) return true;
+    return item.tags?.some((tag) => tag.toLowerCase().includes(needle)) ?? false;
+  });
+}
+
+/**
+ * Bucket items under their group.
+ *
+ * Order comes from the input rather than the alphabet, for both the groups and
+ * the items within them: the caller has already decided what should be near the
+ * top, and sorting here would throw that away.
+ */
+export function groupItems<T extends PickerItem>(items: T[]): PickerGroup<T>[] {
+  const groups: PickerGroup<T>[] = [];
+  const byName = new Map<string, T[]>();
+
+  for (const item of items) {
+    const name = item.group ?? UNGROUPED_LABEL;
+    let bucket = byName.get(name);
+    if (!bucket) {
+      bucket = [];
+      byName.set(name, bucket);
+      groups.push({ group: name, items: bucket });
+    }
+    bucket.push(item);
+  }
+
+  return groups;
+}

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

@@ -0,0 +1,91 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Split button with an attached menu. The face reuses `.zylem-toolbar-btn` for
+ * its look, so a MenuButton dropped into a toolbar matches its neighbours.
+ */
+
+globalStyle('.zylem-menu-button', {
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'stretch',
+});
+
+globalStyle('.zylem-menu-button__face', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+/*
+ * The chevron overlaps the face's trailing corner rather than sitting beside it,
+ * so gaining a second affordance does not widen the button and break a toolbar's
+ * rhythm.
+ */
+globalStyle('.zylem-menu-button__chevron', {
+  position: 'absolute',
+  right: '-2px',
+  bottom: '-2px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '14px',
+  height: '14px',
+  padding: 0,
+  fontSize: '9px',
+  lineHeight: 1,
+  color: 'rgba(255, 255, 255, 0.75)',
+  background: 'rgba(20, 24, 32, 0.92)',
+  border: '1px solid rgba(255, 255, 255, 0.16)',
+  borderRadius: vars.radii.control,
+  cursor: 'pointer',
+  transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+/*
+ * The non-split chevron is decoration over a face that is already the trigger.
+ * Ignoring the pointer keeps it from hovering or hit-testing like its own
+ * control, and lets clicks through to the face beneath.
+ */
+globalStyle('.zylem-menu-button__chevron--static', {
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-menu-button__chevron:hover:not([disabled])', {
+  color: '#fff',
+  borderColor: 'rgba(255, 255, 255, 0.4)',
+});
+
+globalStyle('.zylem-menu-button__chevron:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-menu-button__chevron[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-menu-button__panel', {
+  zIndex: vars.layers.menu,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  borderRadius: vars.radii.panel,
+  border: '1px solid rgba(97, 166, 232, 0.45)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+  outline: 'none',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+/** Icon glyphs supplied as inline SVG markup rather than components. */
+globalStyle('.zylem-menu-button__face svg', {
+  width: '18px',
+  height: '18px',
+});