@zylem/ui 0.8.8 → 0.8.11

package/src/components/Waveform/Waveform.tsx

@@ -0,0 +1,195 @@
+import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+import { computePeaks, peaksFromAudioBuffer } from './peaks';
+
+export type { PeakSource } from './peaks';
+
+export interface WaveformRegion {
+  /** Seconds. */
+  start: number;
+  end: number;
+}
+
+export interface WaveformProps {
+  /** Pre-computed peaks (0–1 per column); wins over `buffer`. */
+  peaks?: ArrayLike<number>;
+  /** Source audio; peaks are computed to match the drawn width. */
+  buffer?: { duration: number; numberOfChannels: number; getChannelData(channel: number): Float32Array };
+  /** Seconds the peaks span; defaults to `buffer.duration`. Needed for regions and the playhead. */
+  duration?: number;
+  /** Highlighted span with draggable edges. */
+  region?: WaveformRegion;
+  onRegionChange?: (region: WaveformRegion) => void;
+  onRegionCommit?: (region: WaveformRegion) => void;
+  /** Seconds. */
+  playhead?: number;
+  /** Any CSS color for the peaks. */
+  color?: string;
+  height?: number;
+  /** Click anywhere to seek. */
+  onSeek?: (seconds: number) => void;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Canvas waveform with an optional trim region and playhead. Peaks are
+ * redrawn on resize so the shape stays crisp at any width.
+ */
+export function Waveform(props: WaveformProps) {
+  let canvas: HTMLCanvasElement | undefined;
+  let host: HTMLDivElement | undefined;
+  const [width, setWidth] = createSignal(0);
+  const height = () => props.height ?? 64;
+  const duration = () => props.duration ?? props.buffer?.duration ?? 0;
+
+  const peaks = createMemo(() => {
+    const bins = Math.max(1, Math.floor(width()));
+    if (props.peaks) {
+      const source = Float32Array.from(props.peaks as ArrayLike<number>);
+      return source.length === bins ? source : resample(source, bins);
+    }
+    if (props.buffer) return peaksFromAudioBuffer(props.buffer, bins);
+    return new Float32Array(bins);
+  });
+
+  onMount(() => {
+    if (!host) return;
+    setWidth(host.clientWidth);
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(Math.floor(entry.contentRect.width));
+    });
+    observer.observe(host);
+    onCleanup(() => observer.disconnect());
+  });
+
+  createEffect(() => {
+    if (!canvas) return;
+    const w = width();
+    const h = height();
+    const data = peaks();
+    const color =
+      props.color ??
+      (getComputedStyle(canvas).getPropertyValue('--zylem-color-primary').trim() || '#61a6e8');
+    const ratio = typeof devicePixelRatio === 'number' ? devicePixelRatio : 1;
+    canvas.width = Math.max(1, Math.floor(w * ratio));
+    canvas.height = Math.max(1, Math.floor(h * ratio));
+    const context = canvas.getContext('2d');
+    if (!context) return;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.clearRect(0, 0, w, h);
+    const mid = h / 2;
+    context.strokeStyle = 'rgba(205, 232, 255, 0.18)';
+    context.beginPath();
+    context.moveTo(0, mid + 0.5);
+    context.lineTo(w, mid + 0.5);
+    context.stroke();
+    context.fillStyle = color;
+    for (let x = 0; x < data.length; x += 1) {
+      const amplitude = Math.max(1, (data[x] ?? 0) * (mid - 2));
+      context.fillRect(x, mid - amplitude, 1, amplitude * 2);
+    }
+  });
+
+  const secondsAt = (clientX: number) => {
+    if (!host || duration() <= 0) return 0;
+    const rect = host.getBoundingClientRect();
+    return clamp(((clientX - rect.left) / rect.width) * duration(), 0, duration());
+  };
+  const percent = (seconds: number) => (duration() > 0 ? (seconds / duration()) * 100 : 0);
+
+  const beginRegionDrag = (edge: 'start' | 'end') => (event: PointerEvent) => {
+    const region = props.region;
+    if (props.disabled || !region || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture?.(event.pointerId);
+    let last = region;
+    const move = (moveEvent: PointerEvent) => {
+      const seconds = secondsAt(moveEvent.clientX);
+      last =
+        edge === 'start'
+          ? { start: Math.min(seconds, region.end - 0.01), end: region.end }
+          : { start: region.start, end: Math.max(seconds, region.start + 0.01) };
+      props.onRegionChange?.(last);
+    };
+    const stop = () => {
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      props.onRegionCommit?.(last);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  return (
+    <div
+      ref={host}
+      class={props.class ? `zylem-waveform ${props.class}` : 'zylem-waveform'}
+      style={{ height: `${height()}px` }}
+      data-disabled={props.disabled ? '' : undefined}
+      onPointerDown={(event) => {
+        if (props.disabled || !props.onSeek || event.button !== 0) return;
+        props.onSeek(secondsAt(event.clientX));
+      }}
+    >
+      <canvas ref={canvas} class="zylem-waveform-canvas" aria-hidden="true" />
+      <Show when={props.region && duration() > 0}>
+        {(_) => {
+          const region = () => props.region!;
+          return (
+            <>
+              <div
+                class="zylem-waveform-shade"
+                style={{ left: 0, width: `${percent(region().start)}%` }}
+              />
+              <div
+                class="zylem-waveform-shade"
+                style={{ left: `${percent(region().end)}%`, right: 0 }}
+              />
+              <div
+                class="zylem-waveform-edge"
+                data-edge="start"
+                style={{ left: `${percent(region().start)}%` }}
+                onPointerDown={beginRegionDrag('start')}
+                role="slider"
+                aria-label="Trim start"
+                aria-valuenow={region().start}
+                aria-valuemin={0}
+                aria-valuemax={duration()}
+              />
+              <div
+                class="zylem-waveform-edge"
+                data-edge="end"
+                style={{ left: `${percent(region().end)}%` }}
+                onPointerDown={beginRegionDrag('end')}
+                role="slider"
+                aria-label="Trim end"
+                aria-valuenow={region().end}
+                aria-valuemin={0}
+                aria-valuemax={duration()}
+              />
+            </>
+          );
+        }}
+      </Show>
+      <Show when={props.playhead !== undefined && duration() > 0}>
+        <div
+          class="zylem-waveform-playhead"
+          style={{ left: `${percent(props.playhead ?? 0)}%` }}
+          aria-hidden="true"
+        />
+      </Show>
+    </div>
+  );
+}
+
+function resample(source: Float32Array, bins: number): Float32Array {
+  return computePeaks({ channels: [source] }, bins);
+}

package/src/components/Waveform/peaks.ts

@@ -0,0 +1,49 @@
+/**
+ * Peak extraction for waveform drawing: folds PCM samples into `bins`
+ * columns, each the largest absolute sample in its slice, normalised so the
+ * loudest bin is 1 (silence stays 0).
+ */
+
+export interface PeakSource {
+  /** One `Float32Array` per channel; channels are mixed by taking the max. */
+  channels: readonly Float32Array[];
+}
+
+export function computePeaks(source: PeakSource | Float32Array, bins: number): Float32Array {
+  const channels = source instanceof Float32Array ? [source] : source.channels;
+  const count = Math.max(1, Math.floor(bins));
+  const peaks = new Float32Array(count);
+  const length = channels[0]?.length ?? 0;
+  if (length === 0 || channels.length === 0) return peaks;
+  const perBin = length / count;
+  let loudest = 0;
+  for (let bin = 0; bin < count; bin += 1) {
+    const from = Math.floor(bin * perBin);
+    const to = Math.min(length, Math.max(from + 1, Math.floor((bin + 1) * perBin)));
+    let peak = 0;
+    for (const channel of channels) {
+      for (let i = from; i < to; i += 1) {
+        const value = Math.abs(channel[i] ?? 0);
+        if (value > peak) peak = value;
+      }
+    }
+    peaks[bin] = peak;
+    if (peak > loudest) loudest = peak;
+  }
+  if (loudest > 0 && loudest !== 1) {
+    for (let bin = 0; bin < count; bin += 1) peaks[bin] = peaks[bin]! / loudest;
+  }
+  return peaks;
+}
+
+/** Peaks from a Web Audio `AudioBuffer` without depending on its type here. */
+export function peaksFromAudioBuffer(
+  buffer: { numberOfChannels: number; getChannelData(channel: number): Float32Array },
+  bins: number,
+): Float32Array {
+  const channels: Float32Array[] = [];
+  for (let channel = 0; channel < buffer.numberOfChannels; channel += 1) {
+    channels.push(buffer.getChannelData(channel));
+  }
+  return computePeaks({ channels }, bins);
+}

package/src/components/index.ts

@@ -38,6 +38,7 @@ export {
   TabsTrigger,
   TabsContent,
   type TabsProps,
+  type TabsTriggerProps,
 } from './Tabs/Tabs';
 export {
   Accordion,
@@ -47,17 +48,22 @@ export {
 export { Tooltip, type TooltipProps } from './Tooltip/Tooltip';
 export {
   DropdownMenu,
+  MenuItems,
   type DropdownMenuProps,
   type DropdownMenuItemConfig,
 } from './DropdownMenu/DropdownMenu';
+export { Menubar, type MenubarProps, type MenubarMenuConfig } from './Menubar/Menubar';
 export {
   Dialog,
   ConfirmDialog,
   type DialogProps,
+  type DialogSize,
   type ConfirmDialogProps,
 } from './Dialog/Dialog';
 export { Progress, type ProgressProps } from './Progress/Progress';
 export { Badge, type BadgeProps, type BadgeTone } from './Badge/Badge';
+export { Callout, type CalloutProps, type CalloutTone } from './Callout/Callout';
+export { Toast, type ToastProps, type ToastTone } from './Toast/Toast';
 export { Separator, type SeparatorProps } from './Separator/Separator';
 
 // Composites
@@ -95,3 +101,119 @@ 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, type AddTileVariant } 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';
+
+// Timeline / Music (Creator director and music editors)
+export {
+  TimelineLanes,
+  TimelineLane,
+  TimelineLaneGroup,
+  TimelineClip,
+  KeyframeMarker,
+  useTimeline,
+  type TimelineLanesProps,
+  type TimelineLaneProps,
+  type TimelineLaneGroupProps,
+  type TimelineClipProps,
+  type TimelineClipChange,
+  type TimelineContextValue,
+  type TimelineRange,
+  type KeyframeMarkerProps,
+  type TimeScale,
+  type TimeUnit,
+  type RulerTick,
+  type ClipBounds,
+} from './TimelineLanes/TimelineLanes';
+export {
+  snapTime,
+  resolveClipDrag,
+  rulerTicks,
+  majorTickTimes,
+  formatClock,
+  formatBeats,
+} from './TimelineLanes/lanes-math';
+export { TrackHeader, type TrackHeaderProps } from './TrackHeader/TrackHeader';
+export { PianoRoll, type PianoRollProps, type PianoRollNote } from './PianoRoll/PianoRoll';
+export {
+  pitchName,
+  isBlackKey,
+  resolveNoteDrag,
+  cellStart,
+} from './PianoRoll/piano-roll-math';
+export { Knob, arcPath, type KnobProps } from './Mixer/Knob';
+export { MixerStrip, formatDb, formatPan, type MixerStripProps } from './Mixer/MixerStrip';
+export { Waveform, type WaveformProps, type WaveformRegion } from './Waveform/Waveform';
+export { computePeaks, peaksFromAudioBuffer, type PeakSource } from './Waveform/peaks';
+export {
+  TransportBar,
+  formatTransportTime,
+  type TransportBarProps,
+  type TransportTimeSignature,
+} from './TransportBar/TransportBar';

package/src/global/accordion.css.ts

@@ -81,6 +81,29 @@ globalStyle('.accordion-content', {
   transition: 'height 0.3s ease',
 });
 
+/**
+ * Stack layout: natural-height sections, no per-section scrolling. The
+ * accordion grows with its content and leaves scrolling to the parent.
+ */
+globalStyle('.zylem-accordion--stack', {
+  height: 'auto',
+  flex: 'none',
+});
+
+globalStyle('.zylem-accordion--stack .accordion-item[data-expanded]', {
+  flex: 'none',
+});
+
+// The parent scrolls, so headers must not pin over the sections above them.
+globalStyle('.zylem-accordion--stack .accordion-header', {
+  position: 'static',
+});
+
+globalStyle('.zylem-accordion--stack .accordion-content', {
+  flex: 'none',
+  overflow: 'visible',
+});
+
 globalStyle('.accordion-trigger::after', {
   content: "'\\25BC'",
   position: 'relative',

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

@@ -32,9 +32,12 @@ import './components/Slider/Slider.css';
 import './components/Tabs/Tabs.css';
 import './components/Tooltip/Tooltip.css';
 import './components/DropdownMenu/DropdownMenu.css';
+import './components/Menubar/Menubar.css';
 import './components/Dialog/Dialog.css';
 import './components/Progress/Progress.css';
 import './components/Badge/Badge.css';
+import './components/Callout/Callout.css';
+import './components/Toast/Toast.css';
 import './components/Separator/Separator.css';
 import './components/WindowControls/WindowControls.css';
 import './components/TitleBar/TitleBar.css';
@@ -49,3 +52,23 @@ 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';
+
+// Timeline / Music surfaces (Creator director and music editors).
+import './components/TimelineLanes/TimelineLanes.css';
+import './components/TrackHeader/TrackHeader.css';
+import './components/PianoRoll/PianoRoll.css';
+import './components/Mixer/Mixer.css';
+import './components/Waveform/Waveform.css';
+import './components/TransportBar/TransportBar.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};