@zylem/ui 0.2.3 → 0.8.9

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.2.3",
+  "version": "0.8.9",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -34,21 +34,21 @@
       "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"
   },
@@ -82,5 +82,12 @@
     "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 ."
+  }
+}

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

@@ -0,0 +1,78 @@
+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)`,
+});
+
+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-label', {
+  fontSize: '11px',
+  fontWeight: 600,
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+});

package/src/components/AddTile/AddTile.tsx

@@ -0,0 +1,37 @@
+import Plus from 'lucide-solid/icons/plus';
+import { Show } from 'solid-js';
+
+export interface AddTileProps {
+  /** Text under the plus (tall variant) and the accessible name. */
+  label?: string;
+  /** `square` matches a swatch; `tall` matches a frame thumb with room for text. */
+  variant?: 'square' | 'tall';
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Dashed "add" tile that sits at the end of a swatch row or frame strip. The
+ * plus is centered on its own; the tall variant stacks a label beneath it.
+ */
+export function AddTile(props: AddTileProps) {
+  const variant = () => props.variant ?? 'square';
+  const label = () => props.label ?? 'Add';
+  return (
+    <button
+      type="button"
+      class={props.class ? `zylem-add-tile ${props.class}` : 'zylem-add-tile'}
+      data-variant={variant()}
+      aria-label={variant() === 'square' || !props.label ? label() : undefined}
+      title={variant() === 'square' ? label() : undefined}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    >
+      <Plus class="zylem-icon zylem-add-tile-icon" aria-hidden="true" />
+      <Show when={variant() === 'tall' && props.label}>
+        <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/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',
+});

package/src/components/ColorPalette/ColorPalette.tsx

@@ -0,0 +1,78 @@
+import { For, Show } from 'solid-js';
+import { AddTile } from '../AddTile/AddTile';
+
+/** Sentinel colour for the eraser / transparent swatch. */
+export const TRANSPARENT = 'transparent';
+
+export interface SwatchProps {
+  /** Any CSS colour, or `'transparent'` for the checkered swatch. */
+  color: string;
+  selected?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  /** Accessible name; defaults to the colour string. */
+  label?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+/** One palette colour: a small glass-edged square, ringed when selected. */
+export function Swatch(props: SwatchProps) {
+  const transparent = () => props.color === TRANSPARENT;
+  return (
+    <button
+      type="button"
+      class={props.class ? `zylem-swatch ${props.class}` : 'zylem-swatch'}
+      style={transparent() ? undefined : { '--zylem-swatch-color': props.color }}
+      data-transparent={transparent() ? '' : undefined}
+      data-selected={props.selected ? '' : undefined}
+      aria-pressed={props.selected ? 'true' : 'false'}
+      aria-label={props.label ?? (transparent() ? 'Transparent' : props.color)}
+      title={props.label ?? (transparent() ? 'Transparent' : props.color)}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    />
+  );
+}
+
+export interface ColorPaletteProps {
+  colors: readonly string[];
+  /** Currently selected colour (compare with `colors` entries or `'transparent'`). */
+  value?: string;
+  onSelect?: (color: string) => void;
+  /** When provided, an add tile follows the swatches. */
+  onAdd?: () => void;
+  /** Lead with the transparent swatch. Defaults to true. */
+  includeTransparent?: boolean;
+  class?: string;
+}
+
+/** Row of swatches with an optional transparent lead and add tile. */
+export function ColorPalette(props: ColorPaletteProps) {
+  return (
+    <div
+      role="listbox"
+      aria-label="Palette"
+      class={props.class ? `zylem-palette ${props.class}` : 'zylem-palette'}
+    >
+      <Show when={props.includeTransparent ?? true}>
+        <Swatch
+          color={TRANSPARENT}
+          selected={props.value === TRANSPARENT}
+          onClick={() => props.onSelect?.(TRANSPARENT)}
+        />
+      </Show>
+      <For each={props.colors}>
+        {(color) => (
+          <Swatch
+            color={color}
+            selected={props.value === color}
+            onClick={() => props.onSelect?.(color)}
+          />
+        )}
+      </For>
+      <Show when={props.onAdd}>
+        <AddTile label="Add color" onClick={() => props.onAdd?.()} />
+      </Show>
+    </div>
+  );
+}

package/src/components/FrameStrip/FrameStrip.css.ts

@@ -0,0 +1,132 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import { FRAME_SIZE } from '../AddTile/AddTile.css';
+import { checkerBackground } from '../PixelGrid/PixelGrid.css';
+import { artCaption } from '../ToolGroup/ToolGroup.css';
+
+globalStyle('.zylem-frame-strip', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.sm,
+  minWidth: 0,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-frame-strip-header', {
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-frame-strip-label', artCaption);
+
+globalStyle('.zylem-frame-strip-title', {
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  color: vars.colors.text,
+});
+
+globalStyle('.zylem-frame-strip-row', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: vars.spacing.sm,
+  padding: `${vars.spacing.xs} ${vars.spacing.xs} ${vars.spacing.sm}`,
+  overflowX: 'auto',
+  overflowY: 'hidden',
+});
+
+// Thumb: checker surface with the frame number in a glass badge beneath.
+globalStyle('.zylem-frame-thumb', {
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 'none',
+  width: FRAME_SIZE,
+  height: `calc(${FRAME_SIZE} + 18px)`,
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(150, 210, 255, 0.4)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  color: '#E8F4FF',
+  fontFamily: vars.typography.fontFamily,
+  transition: `border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-frame-thumb:hover', {
+  borderColor: 'rgba(178, 219, 255, 0.8)',
+  transform: 'translateY(-1px)',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-frame-thumb:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-frame-thumb[data-selected]', {
+  borderColor: 'rgba(178, 219, 255, 0.95)',
+  boxShadow: `${vars.effects.shadowInset}, 0 0 0 1px rgba(178, 219, 255, 0.6), ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-frame-thumb-surface', {
+  position: 'relative',
+  display: 'block',
+  flex: 'none',
+  width: '100%',
+  aspectRatio: '1 / 1',
+  vars: { '--zylem-pixel-grid-cell': '6px' },
+  background: checkerBackground,
+  imageRendering: 'pixelated',
+});
+
+globalStyle(
+  '.zylem-frame-thumb-surface > canvas, .zylem-frame-thumb-surface > img, .zylem-frame-thumb-surface > svg',
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    imageRendering: 'pixelated',
+  }
+);
+
+globalStyle('.zylem-frame-thumb-index', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '1 1 auto',
+  fontSize: '11px',
+  fontWeight: 600,
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
+  background: vars.material.panelHeaderGloss,
+  borderTop: '1px solid rgba(150, 210, 255, 0.25)',
+});
+
+// Actions row: commands left, step arrows right, all vertically centered.
+globalStyle('.zylem-frame-actions', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+});
+
+globalStyle('.zylem-frame-actions .zylem-button .zylem-icon', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-frame-actions-spacer', {
+  flex: '1 1 auto',
+});
+
+globalStyle('.zylem-frame-actions-step', {
+  width: '34px',
+  padding: 0,
+});