@zylem/ui 0.8.8 → 0.8.9

package/src/components/index.ts

@@ -95,3 +95,71 @@ export { SearchInput, type SearchInputProps } from './SearchInput/SearchInput';
 export { EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea/ScrollArea';
 export { Kbd, type KbdProps } from './Kbd/Kbd';
+export {
+  BuildLabel,
+  type BuildLabelProps,
+} from './BuildLabel/BuildLabel';
+export {
+  mountBuildLabel,
+  BUILD_LABEL_ID,
+  type BuildLabelModel,
+} from './BuildLabel/mount-build-label';
+export {
+  formatBuildLabel,
+  resolveBuildVersion,
+} from './BuildLabel/resolve-build-version';
+
+// Art / Director (Creator sprite editor, director, toolbox)
+export { PixelGrid, type PixelGridProps } from './PixelGrid/PixelGrid';
+export {
+  SpriteSizePicker,
+  type SpriteSizePickerProps,
+} from './SpriteSizePicker/SpriteSizePicker';
+export {
+  snapSize,
+  SPRITE_SIZE_PRESETS,
+  type SnapOptions,
+  type SpriteSize,
+} from './SpriteSizePicker/snap-size';
+export { ToolGroup, type ToolGroupProps } from './ToolGroup/ToolGroup';
+export {
+  ToolButton,
+  ART_TOOLS,
+  ART_TOOL_ICONS,
+  ART_TOOL_LABELS,
+  type ArtTool,
+  type ToolButtonProps,
+} from './ToolButton/ToolButton';
+export { AddTile, type AddTileProps } from './AddTile/AddTile';
+export {
+  ColorPalette,
+  Swatch,
+  TRANSPARENT,
+  type ColorPaletteProps,
+  type SwatchProps,
+} from './ColorPalette/ColorPalette';
+export {
+  FrameStrip,
+  FrameThumb,
+  FrameActions,
+  type FrameStripProps,
+  type FrameThumbProps,
+  type FrameActionsProps,
+} from './FrameStrip/FrameStrip';
+export {
+  PlaybackControls,
+  type PlaybackControlsProps,
+} from './PlaybackControls/PlaybackControls';
+export { TimelineTrack, type TimelineTrackProps } from './TimelineTrack/TimelineTrack';
+export {
+  formatSeconds,
+  intervalTicks,
+  markerPercent,
+} from './TimelineTrack/timeline-math';
+export {
+  ToolboxButton,
+  ToolboxGrid,
+  type ToolboxButtonProps,
+  type ToolboxGridProps,
+  type ToolboxSize,
+} from './ToolboxButton/ToolboxButton';

package/src/global/hyperglass-base.css.ts

@@ -46,12 +46,15 @@ globalStyle(
 // containing block for the sheen — don't override them to `relative` or they
 // stretch in flex parents. `.entity-grid-item` already sets `relative` in
 // editor-base.
-globalStyle('.zylem-button:not(.zylem-console-clear), .zylem-toolbar-btn', {
-  position: 'relative',
-});
+globalStyle(
+  '.zylem-button:not(.zylem-console-clear), .zylem-toolbar-btn, .zylem-toolbox-btn',
+  {
+    position: 'relative',
+  },
+);
 
 globalStyle(
-  '.zylem-button::before, .zylem-toolbar-btn::before, .entity-grid-item::before',
+  '.zylem-button::before, .zylem-toolbar-btn::before, .zylem-toolbox-btn::before, .entity-grid-item::before',
   {
     content: '""',
     position: 'absolute',
@@ -81,7 +84,7 @@ globalStyle(
 );
 
 globalStyle(
-  '.zylem-button:hover:not([disabled])::before, .zylem-toolbar-btn:hover:not([disabled])::before, .entity-grid-item:hover::before',
+  '.zylem-button:hover:not([disabled])::before, .zylem-toolbar-btn:hover:not([disabled])::before, .zylem-toolbox-btn:hover:not([disabled])::before, .entity-grid-item:hover::before',
   {
     backgroundPosition: '25% 50%',
     opacity: 0.5,
@@ -94,7 +97,7 @@ globalStyle(
 );
 
 globalStyle(
-  '.zylem-button:active:not([disabled])::before, .zylem-toolbar-btn:active:not([disabled])::before, .entity-grid-item:active::before',
+  '.zylem-button:active:not([disabled])::before, .zylem-toolbar-btn:active:not([disabled])::before, .zylem-toolbox-btn:active:not([disabled])::before, .entity-grid-item:active::before',
   {
     backgroundPosition: '50% 15%',
     opacity: 0.58,

package/src/styles.ts

@@ -49,3 +49,15 @@ import './components/MenuButton/MenuButton.css';
 import './components/ItemPicker/ItemPicker.css';
 import './components/EmptyState/EmptyState.css';
 import './components/Kbd/Kbd.css';
+import './components/BuildLabel/BuildLabel.css';
+
+// Art / Director surfaces (Creator sprite editor, director, toolbox).
+import './components/PixelGrid/PixelGrid.css';
+import './components/SpriteSizePicker/SpriteSizePicker.css';
+import './components/ToolGroup/ToolGroup.css';
+import './components/AddTile/AddTile.css';
+import './components/ColorPalette/ColorPalette.css';
+import './components/FrameStrip/FrameStrip.css';
+import './components/PlaybackControls/PlaybackControls.css';
+import './components/TimelineTrack/TimelineTrack.css';
+import './components/ToolboxButton/ToolboxButton.css';

package/src/theme.css.ts

@@ -112,6 +112,16 @@ const tokens = {
 		normal: '160ms',
 		easeOut: 'cubic-bezier(.2,.8,.2,1)',
 	},
+	/**
+	 * Art / pixel-editor surfaces. The checker pair reads as "transparent"
+	 * behind sprite pixels, so it sits lighter than the panel palette; canvas
+	 * renderers can draw the same values from `tokenValues.art`.
+	 */
+	art: {
+		checkerLight: '#4F5C72',
+		checkerDark: '#3C4759',
+		canvasBorder: 'rgba(150, 210, 255, 0.5)',
+	},
 	/**
 	 * Stacking tiers. Declared in `layers/tiers.ts` because the runtime side of
 	 * the layer system reads the same ladder without loading this file.
@@ -212,6 +222,11 @@ const varNames = {
 		normal: 'zylem-motion-normal',
 		easeOut: 'zylem-motion-ease-out',
 	},
+	art: {
+		checkerLight: 'zylem-art-checker-light',
+		checkerDark: 'zylem-art-checker-dark',
+		canvasBorder: 'zylem-art-canvas-border',
+	},
 	layers: layerTierVarNames,
 } as const;
 

package/vite/collect-zylem-versions.ts

@@ -0,0 +1,82 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+interface PackageManifest {
+  name?: string;
+  version?: string;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+}
+
+function readManifest(dir: string): PackageManifest | null {
+  const pkgPath = join(dir, 'package.json');
+  try {
+    return JSON.parse(readFileSync(pkgPath, 'utf8')) as PackageManifest;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve an installed package directory from a declaring package's context. */
+function resolvePackageDir(fromDir: string, name: string): string | null {
+  let dir = fromDir;
+  while (dir !== dirname(dir)) {
+    const candidate = join(dir, 'node_modules', name);
+    if (existsSync(join(candidate, 'package.json'))) {
+      return candidate;
+    }
+    dir = dirname(dir);
+  }
+  return null;
+}
+
+/**
+ * Walk the resolved `@zylem/*` dependency graph starting from `rootPkgDir`
+ * and return a sorted map of package name → installed version.
+ */
+export function collectZylemPackageVersions(rootPkgDir: string): Record<string, string> {
+  const versions: Record<string, string> = {};
+  const seenNames = new Set<string>();
+  const visitedDirs = new Set<string>();
+  const queue: Array<{ dir: string; isRoot: boolean }> = [{ dir: rootPkgDir, isRoot: true }];
+
+  while (queue.length > 0) {
+    const { dir, isRoot } = queue.shift()!;
+    if (visitedDirs.has(dir)) continue;
+    visitedDirs.add(dir);
+
+    const manifest = readManifest(dir);
+    if (!manifest) continue;
+
+    if (typeof manifest.name === 'string' && manifest.name.startsWith('@zylem/')) {
+      versions[manifest.name] =
+        typeof manifest.version === 'string' ? manifest.version : '0.0.0';
+    }
+
+    const depFields: Array<'dependencies' | 'devDependencies'> = isRoot
+      ? ['dependencies', 'devDependencies']
+      : ['dependencies'];
+
+    for (const field of depFields) {
+      const deps = manifest[field] ?? {};
+      for (const name of Object.keys(deps)) {
+        if (!name.startsWith('@zylem/') || seenNames.has(name)) continue;
+        seenNames.add(name);
+
+        const resolvedDir = resolvePackageDir(dir, name);
+        if (!resolvedDir) continue;
+
+        const resolvedManifest = readManifest(resolvedDir);
+        if (!resolvedManifest) continue;
+
+        versions[name] =
+          typeof resolvedManifest.version === 'string'
+            ? resolvedManifest.version
+            : '0.0.0';
+        queue.push({ dir: resolvedDir, isRoot: false });
+      }
+    }
+  }
+
+  return Object.fromEntries(Object.entries(versions).sort(([a], [b]) => a.localeCompare(b)));
+}

package/vite/index.ts

@@ -0,0 +1,30 @@
+import type { Plugin } from 'vite';
+import { collectZylemPackageVersions } from './collect-zylem-versions.ts';
+
+export { collectZylemPackageVersions } from './collect-zylem-versions.ts';
+
+export const VIRTUAL_ZYLEM_VERSIONS_ID = 'virtual:zylem-versions';
+const RESOLVED_VIRTUAL_ZYLEM_VERSIONS_ID = `\0${VIRTUAL_ZYLEM_VERSIONS_ID}`;
+
+/**
+ * Vite plugin that injects a `virtual:zylem-versions` module containing
+ * every resolved `@zylem/*` package version in `rootPkgDir`'s dependency
+ * graph. Demo/showcase apps mount that map as the top-right build HUD.
+ */
+export function zylemVersionsPlugin(rootPkgDir: string): Plugin {
+  const versions = collectZylemPackageVersions(rootPkgDir);
+
+  return {
+    name: 'zylem-versions',
+    resolveId(id) {
+      if (id === VIRTUAL_ZYLEM_VERSIONS_ID) {
+        return RESOLVED_VIRTUAL_ZYLEM_VERSIONS_ID;
+      }
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_ZYLEM_VERSIONS_ID) {
+        return `export const ZYLEM_PACKAGE_VERSIONS = ${JSON.stringify(versions)};`;
+      }
+    },
+  };
+}

package/dist/chunk-3TP2SNNW.js

@@ -1 +0,0 @@
-var l={colors:{primary:"#61A6E8",primaryHover:"#3B8AD8",primaryActive:"#0C6EB8",accent:"#E64534",accentHover:"#C93A2C",accentActive:"#A82F24",background:"#11151C",backgroundTranslucent:"rgba(10, 20, 30, 0.46)",surface:"#1A1F27",surfaceHover:"#222831",border:"#2D3643",active:"rgba(20, 255, 60, 0.7)",activeHover:"rgba(20, 255, 60, 0.4)",successHover:"#2a6734b3",text:"#E6EBEF",textSecondary:"#88929E",consoleBackground:"rgba(20, 40, 60, 0.25)",consoleText:"#61A6E8"},spacing:{xxs:"0.125rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem",xxl:"2rem",xxxl:"3rem"},sizes:{icon:"28px",iconSm:"16px",iconLg:"96px"},typography:{fontFamily:"'Exo 2', sans-serif",fontSize:"14px"},borders:{radius:"12px",width:"1.5px"},material:{glassPanel:"linear-gradient(180deg, rgba(38, 76, 112, 0.74), rgba(10, 24, 38, 0.58))",glassPanelDark:"linear-gradient(180deg, rgba(26, 31, 39, 0.75), rgba(10, 20, 30, 0.68))",glossyBar:"linear-gradient(180deg, rgba(205, 232, 255, 0.55) 0%, rgba(97, 166, 232, 0.34) 38%, rgba(18, 54, 88, 0.86) 100%)",buttonGlass:"linear-gradient(180deg, rgba(178, 219, 255, 0.34), rgba(30, 94, 148, 0.72) 48%, rgba(9, 34, 58, 0.92))",buttonGlassHover:"linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))",buttonGlassActive:"linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))",buttonGlassDanger:"linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))",fieldGlass:"linear-gradient(180deg, rgba(8, 19, 31, 0.82), rgba(15, 39, 62, 0.72))",panelHeaderGloss:"linear-gradient(180deg, rgba(190, 226, 255, 0.18), rgba(61, 118, 165, 0.16) 46%, rgba(10, 27, 44, 0.26))"},effects:{blurSm:"8px",blurMd:"14px",blurLg:"24px",shadowPanel:"0 22px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.10)",shadowButton:"inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.45), 0 2px 7px rgba(0,0,0,0.35)",shadowInset:"inset 0 1px 2px rgba(0,0,0,0.42), inset 0 -1px 0 rgba(255,255,255,0.08)",glowPrimary:"0 0 18px rgba(97, 166, 232, 0.28)",glowActive:"0 0 20px rgba(20, 255, 60, 0.26)",glowDanger:"0 0 20px rgba(230, 69, 52, 0.24)",focusRing:"0 0 0 2px rgba(97, 166, 232, 0.38), 0 0 18px rgba(97, 166, 232, 0.22)"},radii:{window:"14px",panel:"12px",button:"7px",control:"6px",card:"10px"},motion:{fast:"120ms",normal:"160ms",easeOut:"cubic-bezier(.2,.8,.2,1)"},layers:{base:"0",panel:"1000",modal:"2000",popover:"3000",tooltip:"4000",menu:"5000"}},o={colors:{primary:"var(--zylem-color-primary)",primaryHover:"var(--zylem-color-primary-hover)",primaryActive:"var(--zylem-color-primary-active)",accent:"var(--zylem-color-accent)",accentHover:"var(--zylem-color-accent-hover)",accentActive:"var(--zylem-color-accent-active)",background:"var(--zylem-color-background)",backgroundTranslucent:"var(--zylem-color-background-translucent)",surface:"var(--zylem-color-surface)",surfaceHover:"var(--zylem-color-surface-hover)",border:"var(--zylem-color-border)",active:"var(--zylem-color-active)",activeHover:"var(--zylem-color-active-hover)",successHover:"var(--zylem-color-success-hover)",text:"var(--zylem-color-text)",textSecondary:"var(--zylem-color-text-secondary)",consoleBackground:"var(--zylem-color-console-background)",consoleText:"var(--zylem-color-console-text)"},spacing:{xxs:"var(--zylem-spacing-xxs)",xs:"var(--zylem-spacing-xs)",sm:"var(--zylem-spacing-sm)",md:"var(--zylem-spacing-md)",lg:"var(--zylem-spacing-lg)",xl:"var(--zylem-spacing-xl)",xxl:"var(--zylem-spacing-xxl)",xxxl:"var(--zylem-spacing-xxxl)"},sizes:{icon:"var(--zylem-size-icon)",iconSm:"var(--zylem-size-icon-sm)",iconLg:"var(--zylem-size-icon-lg)"},typography:{fontFamily:"var(--zylem-font-family)",fontSize:"var(--zylem-font-size)"},borders:{radius:"var(--zylem-radius)",width:"var(--zylem-border)"},material:{glassPanel:"var(--zylem-material-glass-panel)",glassPanelDark:"var(--zylem-material-glass-panel-dark)",glossyBar:"var(--zylem-material-glossy-bar)",buttonGlass:"var(--zylem-material-button-glass)",buttonGlassHover:"var(--zylem-material-button-glass-hover)",buttonGlassActive:"var(--zylem-material-button-glass-active)",buttonGlassDanger:"var(--zylem-material-button-glass-danger)",fieldGlass:"var(--zylem-material-field-glass)",panelHeaderGloss:"var(--zylem-material-panel-header-gloss)"},effects:{blurSm:"var(--zylem-effect-blur-sm)",blurMd:"var(--zylem-effect-blur-md)",blurLg:"var(--zylem-effect-blur-lg)",shadowPanel:"var(--zylem-effect-shadow-panel)",shadowButton:"var(--zylem-effect-shadow-button)",shadowInset:"var(--zylem-effect-shadow-inset)",glowPrimary:"var(--zylem-effect-glow-primary)",glowActive:"var(--zylem-effect-glow-active)",glowDanger:"var(--zylem-effect-glow-danger)",focusRing:"var(--zylem-effect-focus-ring)"},radii:{window:"var(--zylem-radius-window)",panel:"var(--zylem-radius-panel)",button:"var(--zylem-radius-button)",control:"var(--zylem-radius-control)",card:"var(--zylem-radius-card)"},motion:{fast:"var(--zylem-motion-fast)",normal:"var(--zylem-motion-normal)",easeOut:"var(--zylem-motion-ease-out)"},layers:{base:"var(--zylem-layer-base)",panel:"var(--zylem-layer-panel)",modal:"var(--zylem-layer-modal)",popover:"var(--zylem-layer-popover)",tooltip:"var(--zylem-layer-tooltip)",menu:"var(--zylem-layer-menu)"}};export{l as a,o as b};