@zylem/ui 0.8.8 → 0.8.11

package/dist/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.8",
+  "version": "0.8.11",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -34,12 +34,30 @@
       "types": "./src/components/index.ts",
       "import": "./src/components/index.ts"
     },
+    "./build-label": {
+      "types": "./src/components/BuildLabel/mount-build-label.ts",
+      "import": "./src/components/BuildLabel/mount-build-label.ts"
+    },
+    "./vite": {
+      "types": "./vite/index.ts",
+      "import": "./vite/index.ts"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
-    "src"
+    "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"
   },
@@ -73,12 +91,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/Accordion/Accordion.tsx

@@ -18,6 +18,13 @@ export interface AccordionProps {
   class?: string;
   /** Extra class applied to each content region (e.g. scroll helpers). */
   contentClass?: string;
+  /**
+   * Inspector layout: sections take their natural height and the accordion
+   * grows with them, so the surrounding panel scrolls as a whole. Without it
+   * the accordion fills its container and expanded sections share the space
+   * and scroll individually (the editor sidebar behaviour).
+   */
+  stack?: boolean;
 }
 
 /**
@@ -28,7 +35,9 @@ export interface AccordionProps {
 export function Accordion(props: AccordionProps) {
   return (
     <KAccordion.Root
-      class={props.class ? `zylem-accordion ${props.class}` : 'zylem-accordion'}
+      class={['zylem-accordion', props.stack ? 'zylem-accordion--stack' : '', props.class ?? '']
+        .filter(Boolean)
+        .join(' ')}
       multiple={props.multiple}
       collapsible={props.collapsible ?? true}
       value={props.value}

package/src/components/AddTile/AddTile.css.ts

@@ -0,0 +1,95 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/** Swatch / tile edge length shared by the palette and add tiles. */
+export const TILE_SIZE = '26px';
+/** Frame thumb edge length shared by the strip and the tall add tile. */
+export const FRAME_SIZE = '56px';
+
+globalStyle('.zylem-add-tile', {
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: vars.spacing.xs,
+  flex: 'none',
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  userSelect: 'none',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  borderRadius: vars.radii.control,
+  border: '1px dashed rgba(150, 210, 255, 0.55)',
+  background: 'rgba(97, 166, 232, 0.06)',
+  transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-add-tile[data-variant="square"]', {
+  width: TILE_SIZE,
+  height: TILE_SIZE,
+});
+
+globalStyle('.zylem-add-tile[data-variant="tall"]', {
+  width: FRAME_SIZE,
+  height: `calc(${FRAME_SIZE} + 18px)`,
+});
+
+// Stands in for a card: fills its grid cell and rounds like one.
+globalStyle('.zylem-add-tile[data-variant="fill"]', {
+  width: '100%',
+  height: '100%',
+  minHeight: '110px',
+  borderRadius: vars.radii.card,
+});
+
+globalStyle('.zylem-add-tile:hover:not([disabled])', {
+  color: '#E8F4FF',
+  borderColor: 'rgba(178, 219, 255, 0.9)',
+  background: 'rgba(97, 166, 232, 0.16)',
+  boxShadow: vars.effects.glowPrimary,
+});
+
+globalStyle('.zylem-add-tile:active:not([disabled])', {
+  background: 'rgba(97, 166, 232, 0.24)',
+});
+
+globalStyle('.zylem-add-tile:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-add-tile[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-add-tile-icon', {
+  display: 'block',
+  width: '16px',
+  height: '16px',
+  stroke: 'currentColor',
+  flex: 'none',
+});
+
+globalStyle('.zylem-add-tile[data-variant="tall"] .zylem-add-tile-icon', {
+  width: '20px',
+  height: '20px',
+});
+
+globalStyle('.zylem-add-tile[data-variant="fill"] .zylem-add-tile-icon', {
+  width: '24px',
+  height: '24px',
+});
+
+globalStyle('.zylem-add-tile-label', {
+  fontSize: '11px',
+  fontWeight: 600,
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-add-tile[data-variant="fill"] .zylem-add-tile-label', {
+  fontSize: '13px',
+});

package/src/components/AddTile/AddTile.tsx

@@ -0,0 +1,45 @@
+import Plus from 'lucide-solid/icons/plus';
+import { Show } from 'solid-js';
+
+export type AddTileVariant = 'square' | 'tall' | 'fill';
+
+export interface AddTileProps {
+  /** Text under the plus (tall and fill variants) and the accessible name. */
+  label?: string;
+  /**
+   * `square` matches a swatch; `tall` matches a frame thumb with room for
+   * text; `fill` takes the whole grid cell it is placed in, so it can stand
+   * in for a card ("New project") in a card grid.
+   */
+  variant?: AddTileVariant;
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Dashed "add" tile that sits at the end of a swatch row, frame strip, or
+ * card grid. The plus is centered on its own; the tall and fill variants
+ * stack a label beneath it.
+ */
+export function AddTile(props: AddTileProps) {
+  const variant = () => props.variant ?? 'square';
+  const label = () => props.label ?? 'Add';
+  const showsLabel = () => variant() !== 'square' && Boolean(props.label);
+  return (
+    <button
+      type="button"
+      class={props.class ? `zylem-add-tile ${props.class}` : 'zylem-add-tile'}
+      data-variant={variant()}
+      aria-label={showsLabel() ? undefined : label()}
+      title={variant() === 'square' ? label() : undefined}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    >
+      <Plus class="zylem-icon zylem-add-tile-icon" aria-hidden="true" />
+      <Show when={showsLabel()}>
+        <span class="zylem-add-tile-label">{props.label}</span>
+      </Show>
+    </button>
+  );
+}

package/src/components/BuildLabel/BuildLabel.css.ts

@@ -0,0 +1,31 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Tiny corner HUD for the resolved Zylem build number. Sits above game
+ * chrome (`tooltip` tier) and stays out of the way of the editor toggle
+ * (bottom-right).
+ */
+globalStyle('.zylem-build-label', {
+  position: 'fixed',
+  top: '10px',
+  right: '12px',
+  zIndex: vars.layers.tooltip,
+  pointerEvents: 'auto',
+  padding: `2px ${vars.spacing.sm}`,
+  borderRadius: '5px',
+  border: '1px solid rgba(97, 166, 232, 0.35)',
+  background:
+    'linear-gradient(180deg, rgba(60, 80, 105, 0.55), rgba(26, 31, 39, 0.78))',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.35)',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: '10px',
+  fontWeight: 700,
+  letterSpacing: '0.06em',
+  lineHeight: 1.4,
+  textShadow: '0 1px 1px rgba(0,0,0,0.55)',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+});

package/src/components/BuildLabel/BuildLabel.tsx

@@ -0,0 +1,37 @@
+import { createMemo, onMount } from 'solid-js';
+import {
+  formatBuildLabel,
+  packagesTitle,
+  resolveBuildVersion,
+  type BuildLabelModel,
+} from './resolve-build-version';
+import { BUILD_LABEL_ID, ensureFallbackStyles } from './mount-build-label';
+
+export type BuildLabelProps = BuildLabelModel;
+
+/**
+ * Fixed top-right HUD showing the resolved Zylem build number.
+ *
+ * Demo and showcase apps mount this (or `mountBuildLabel`) so the engine
+ * version is visible without opening DevTools. Creator is the exception:
+ * it shows only its own version in the menu bar.
+ */
+export function BuildLabel(props: BuildLabelProps) {
+  const label = createMemo(() => formatBuildLabel(resolveBuildVersion(props)));
+  const title = createMemo(() => packagesTitle(props.packages));
+
+  onMount(() => {
+    ensureFallbackStyles();
+  });
+
+  return (
+    <div
+      id={BUILD_LABEL_ID}
+      class="zylem-build-label"
+      aria-label="Build version"
+      title={title()}
+    >
+      {label()}
+    </div>
+  );
+}

package/src/components/BuildLabel/mount-build-label.ts

@@ -0,0 +1,77 @@
+import {
+  formatBuildLabel,
+  packagesTitle,
+  resolveBuildVersion,
+  type BuildLabelModel,
+} from './resolve-build-version';
+
+export type { BuildLabelModel };
+
+export const BUILD_LABEL_ID = 'zylem-build-label';
+export const BUILD_LABEL_STYLE_ID = 'zylem-build-label-styles';
+
+/**
+ * Fallback rules so the HUD still paints in apps that do not import
+ * `@zylem/ui/styles.css` (arena). Themed apps get the vanilla-extract class
+ * as well; both targets use the same selectors so they do not fight.
+ */
+const FALLBACK_CSS = `
+#${BUILD_LABEL_ID} {
+  position: fixed;
+  top: 10px;
+  right: 12px;
+  z-index: var(--zylem-layer-tooltip, 4000);
+  pointer-events: auto;
+  padding: 2px 8px;
+  border-radius: 5px;
+  border: 1px solid rgba(97, 166, 232, 0.35);
+  background: linear-gradient(180deg, rgba(60, 80, 105, 0.55), rgba(26, 31, 39, 0.78));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
+  color: #c5d0da;
+  font-family: var(--zylem-font-family, 'Exo 2', sans-serif);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 1.4;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
+  user-select: none;
+  white-space: nowrap;
+}
+`;
+
+export function ensureFallbackStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(BUILD_LABEL_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = BUILD_LABEL_STYLE_ID;
+  style.textContent = FALLBACK_CSS;
+  document.head.append(style);
+}
+
+/**
+ * Mount the build-number HUD on `parent` (defaults to `document.body`).
+ * Replaces a previous mount with the same id.
+ */
+export function mountBuildLabel(
+  model: BuildLabelModel,
+  parent: ParentNode = document.body
+): HTMLElement {
+  ensureFallbackStyles();
+  parent.querySelector(`#${BUILD_LABEL_ID}`)?.remove();
+
+  const el = document.createElement('div');
+  el.id = BUILD_LABEL_ID;
+  el.className = 'zylem-build-label';
+  el.setAttribute('aria-label', 'Build version');
+  el.textContent = formatBuildLabel(resolveBuildVersion(model));
+  const title = packagesTitle(model.packages);
+  if (title) el.title = title;
+
+  if (model.packages) {
+    (globalThis as { __ZYLEM_PACKAGE_VERSIONS__?: Record<string, string> }).__ZYLEM_PACKAGE_VERSIONS__ =
+      model.packages;
+  }
+
+  parent.append(el);
+  return el;
+}

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

@@ -0,0 +1,47 @@
+export interface BuildLabelModel {
+  /** Host app version, used when `packages` does not resolve a preferred entry. */
+  version?: string;
+  /** Resolved `@zylem/*` package versions collected at build time. */
+  packages?: Record<string, string>;
+}
+
+const PREFERRED_PACKAGES = [
+  '@zylem/game-lib',
+  '@zylem/editor',
+  '@zylem/ui',
+  '@zylem/behaviors',
+  '@zylem/runtime',
+] as const;
+
+/**
+ * Pick the version to show as the HUD build number.
+ *
+ * Demo/showcase apps prefer the engine (`@zylem/game-lib`) so the overlay
+ * reports the stack being exercised rather than the host app's own version.
+ */
+export function resolveBuildVersion(model: BuildLabelModel): string {
+  const packages = model.packages;
+  if (packages) {
+    for (const name of PREFERRED_PACKAGES) {
+      const version = packages[name];
+      if (version) return version;
+    }
+    const first = Object.values(packages)[0];
+    if (first) return first;
+  }
+  return model.version ?? '';
+}
+
+/** Display form used in the HUD: the version prefixed with `v`. */
+export function formatBuildLabel(version: string): string {
+  if (!version) return '';
+  return version.startsWith('v') ? version : `v${version}`;
+}
+
+/** Hover text listing every collected package. */
+export function packagesTitle(packages: Record<string, string> | undefined): string | undefined {
+  if (!packages || Object.keys(packages).length === 0) return undefined;
+  return Object.entries(packages)
+    .map(([name, version]) => `${name} ${version}`)
+    .join('\n');
+}

package/src/components/Callout/Callout.css.ts

@@ -0,0 +1,45 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-callout', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xxs,
+  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  borderLeft: '2px solid rgba(150, 210, 255, 0.7)',
+  borderRadius: `0 ${vars.radii.control} ${vars.radii.control} 0`,
+  background: 'rgba(97, 166, 232, 0.1)',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  lineHeight: 1.45,
+});
+
+globalStyle('.zylem-callout-title', {
+  fontWeight: 700,
+  letterSpacing: '0.02em',
+});
+
+globalStyle('.zylem-callout-message code', {
+  fontFamily: "'Courier New', monospace",
+  fontSize: '0.95em',
+});
+
+globalStyle('.zylem-callout[data-tone="warning"]', {
+  borderLeftColor: 'rgba(252, 211, 77, 0.8)',
+  background: 'rgba(252, 211, 77, 0.09)',
+  color: '#FDE68A',
+});
+
+globalStyle('.zylem-callout[data-tone="error"]', {
+  borderLeftColor: 'rgba(255, 132, 114, 0.85)',
+  background: 'rgba(230, 69, 52, 0.14)',
+  color: '#FFD9D3',
+});
+
+globalStyle('.zylem-callout[data-tone="success"]', {
+  borderLeftColor: 'rgba(120, 255, 150, 0.7)',
+  background: 'rgba(60, 200, 100, 0.12)',
+  color: '#D9FFE3',
+});

package/src/components/Callout/Callout.tsx

@@ -0,0 +1,32 @@
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export type CalloutTone = 'info' | 'warning' | 'error' | 'success';
+
+export interface CalloutProps {
+  tone?: CalloutTone;
+  /** Short bold lead-in before the message. */
+  title?: JSX.Element;
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Inline note: a tinted strip with a coloured left rule for hints, warnings,
+ * and errors that belong next to the thing they describe (a form, a footer).
+ * For transient messages use `Toast`; for one-word labels use `Badge`.
+ */
+export function Callout(props: CalloutProps) {
+  return (
+    <div
+      class={props.class ? `zylem-callout ${props.class}` : 'zylem-callout'}
+      role={props.tone === 'error' ? 'alert' : 'note'}
+      data-tone={props.tone ?? 'info'}
+    >
+      <Show when={props.title}>
+        <span class="zylem-callout-title">{props.title}</span>
+      </Show>
+      <span class="zylem-callout-message">{props.children}</span>
+    </div>
+  );
+}

package/src/components/Card/Card.css.ts

@@ -45,6 +45,24 @@ globalStyle('.zylem-card--selected', {
   boxShadow: `0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08), ${vars.effects.glowActive}`,
 });
 
+// Artwork well: fills the card width, clips its content to the control radius.
+globalStyle('.zylem-card-media', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '64px',
+  borderRadius: vars.radii.control,
+  overflow: 'hidden',
+  color: 'rgba(255, 255, 255, 0.85)',
+});
+
+globalStyle('.zylem-card-media > img', {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
 globalStyle('.zylem-card-title', {
   fontSize: vars.typography.fontSize,
   fontWeight: 700,

package/src/components/Card/Card.tsx

@@ -5,24 +5,30 @@ export interface CardProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: JSX.Element;
   description?: JSX.Element;
+  /** Artwork above the title: a thumbnail, preview swatch, or icon well. */
+  media?: JSX.Element;
   /** Renders hover glow + pointer cursor and click affordances. */
   interactive?: boolean;
   selected?: boolean;
+  /** Rendered after the description: tags, actions, metadata. */
   children?: JSX.Element;
 }
 
 /**
  * HyperGlass card: small index-card tile with a blue glow. Use for entity
- * tiles, project tiles, and asset thumbnails.
+ * tiles, project tiles, and asset thumbnails. Order is media, title,
+ * description, then children.
  */
 export function Card(props: CardProps) {
   const [local, rest] = splitProps(props, [
     'title',
     'description',
+    'media',
     'interactive',
     'selected',
     'children',
     'class',
+    'onKeyDown',
   ]);
 
   const classes = () =>
@@ -35,20 +41,37 @@ export function Card(props: CardProps) {
       .filter(Boolean)
       .join(' ');
 
+  // An interactive card is a button in all but tag name, so Enter and Space
+  // activate it like one.
+  const onKeyDown = (event: KeyboardEvent & { currentTarget: HTMLDivElement; target: Element }) => {
+    if (typeof local.onKeyDown === 'function') local.onKeyDown(event);
+    else if (local.onKeyDown) local.onKeyDown[0](local.onKeyDown[1], event);
+    if (!local.interactive || event.defaultPrevented) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+
   return (
     <div
       class={classes()}
       role={local.interactive ? 'button' : undefined}
       tabIndex={local.interactive ? 0 : undefined}
+      aria-pressed={local.interactive && local.selected !== undefined ? local.selected : undefined}
+      onKeyDown={onKeyDown}
       {...rest}
     >
+      <Show when={local.media}>
+        <div class="zylem-card-media">{local.media}</div>
+      </Show>
       <Show when={local.title}>
         <div class="zylem-card-title">{local.title}</div>
       </Show>
-      {local.children}
       <Show when={local.description}>
         <div class="zylem-card-description">{local.description}</div>
       </Show>
+      {local.children}
     </div>
   );
 }

package/src/components/ColorPalette/ColorPalette.css.ts

@@ -0,0 +1,51 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import { TILE_SIZE } from '../AddTile/AddTile.css';
+import { checkerBackground } from '../PixelGrid/PixelGrid.css';
+
+globalStyle('.zylem-palette', {
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-swatch', {
+  boxSizing: 'border-box',
+  width: TILE_SIZE,
+  height: TILE_SIZE,
+  flex: 'none',
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(150, 210, 255, 0.4)',
+  background: 'var(--zylem-swatch-color, transparent)',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 3px rgba(0,0,0,0.4)',
+  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-swatch[data-transparent]', {
+  vars: { '--zylem-pixel-grid-cell': '5px' },
+  background: checkerBackground,
+});
+
+globalStyle('.zylem-swatch:hover:not([disabled])', {
+  transform: 'translateY(-1px)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.45), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-swatch:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-swatch[data-selected]', {
+  borderColor: '#F4FAFF',
+  boxShadow: `0 0 0 2px rgba(10, 20, 30, 0.9), 0 0 0 3px rgba(244, 250, 255, 0.85), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-swatch[disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});