@zylem/ui 0.1.0 → 0.1.1

package/dist/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -41,6 +41,7 @@
     "src"
   ],
   "scripts": {
+    "zylem": "node --experimental-strip-types ./scripts/zylem-runner.ts",
     "build": "tsup",
     "prepublishOnly": "NODE_ENV=production tsup",
     "dev": "tsup --watch",
@@ -57,10 +58,9 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.7",
-    "@kobalte/core": "^0.13.11",
+    "@clack/prompts": "^1.6.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.22",
     "@vanilla-extract/vite-plugin": "^5.2.2",
-    "lucide-solid": "^0.511.0",
     "solid-js": "^1.9.9",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
@@ -68,7 +68,10 @@
     "vite-plugin-solid": "^2.11.8"
   },
   "dependencies": {
+    "@kobalte/core": "^0.13.11",
     "@vanilla-extract/css": "^1.20.1",
-    "@vanilla-extract/sprinkles": "^1.6.5"
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "lucide-solid": "^0.511.0"
   }
 }

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,60 @@
+import { Accordion as KAccordion } from '@kobalte/core';
+import { For } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface AccordionItemConfig {
+  id: string;
+  title: JSX.Element;
+  content: () => JSX.Element;
+}
+
+export interface AccordionProps {
+  items: AccordionItemConfig[];
+  multiple?: boolean;
+  collapsible?: boolean;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  defaultValue?: string[];
+  class?: string;
+  /** Extra class applied to each content region (e.g. scroll helpers). */
+  contentClass?: string;
+}
+
+/**
+ * HyperGlass accordion: stack of glossy card headers over glass content
+ * regions. Uses the same `.zylem-accordion` / `.accordion-*` classes as the
+ * editor markup, so both stay visually in sync.
+ */
+export function Accordion(props: AccordionProps) {
+  return (
+    <KAccordion.Root
+      class={props.class ? `zylem-accordion ${props.class}` : 'zylem-accordion'}
+      multiple={props.multiple}
+      collapsible={props.collapsible ?? true}
+      value={props.value}
+      onChange={props.onChange}
+      defaultValue={props.defaultValue}
+    >
+      <For each={props.items}>
+        {(item) => (
+          <KAccordion.Item value={item.id} class="accordion-item">
+            <KAccordion.Header class="accordion-header">
+              <KAccordion.Trigger class="accordion-trigger">
+                {item.title}
+              </KAccordion.Trigger>
+            </KAccordion.Header>
+            <KAccordion.Content
+              class={
+                props.contentClass
+                  ? `accordion-content ${props.contentClass}`
+                  : 'accordion-content'
+              }
+            >
+              {item.content()}
+            </KAccordion.Content>
+          </KAccordion.Item>
+        )}
+      </For>
+    </KAccordion.Root>
+  );
+}

package/src/components/Badge/Badge.css.ts

@@ -0,0 +1,52 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-badge', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xxs,
+  padding: `1px ${vars.spacing.sm}`,
+  borderRadius: '5px',
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 3px)`,
+  fontWeight: 700,
+  letterSpacing: '0.05em',
+  textTransform: 'uppercase',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+  color: '#F4FAFF',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.4)',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-badge[data-tone="info"], .zylem-badge:not([data-tone])', {
+  border: '1px solid rgba(150, 210, 255, 0.55)',
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.4), rgba(30, 94, 148, 0.85))',
+});
+
+globalStyle('.zylem-badge[data-tone="warning"]', {
+  border: '1px solid rgba(255, 226, 150, 0.6)',
+  background:
+    'linear-gradient(180deg, rgba(255, 240, 168, 0.45), rgba(180, 128, 20, 0.85))',
+});
+
+globalStyle('.zylem-badge[data-tone="error"]', {
+  border: '1px solid rgba(255, 132, 114, 0.65)',
+  background:
+    'linear-gradient(180deg, rgba(255, 179, 168, 0.45), rgba(190, 52, 38, 0.88))',
+});
+
+globalStyle('.zylem-badge[data-tone="success"]', {
+  border: '1px solid rgba(120, 255, 150, 0.55)',
+  background:
+    'linear-gradient(180deg, rgba(182, 255, 195, 0.42), rgba(18, 130, 46, 0.86))',
+});
+
+globalStyle('.zylem-badge[data-tone="neutral"]', {
+  border: '1px solid rgba(97, 166, 232, 0.35)',
+  background:
+    'linear-gradient(180deg, rgba(60, 80, 105, 0.6), rgba(26, 31, 39, 0.85))',
+  color: vars.colors.text,
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+import type { JSX } from 'solid-js';
+
+export type BadgeTone = 'info' | 'warning' | 'error' | 'success' | 'neutral';
+
+export interface BadgeProps {
+  tone?: BadgeTone;
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * HyperGlass badge: small beveled glass tag for statuses and counts.
+ */
+export function Badge(props: BadgeProps) {
+  return (
+    <span
+      class={props.class ? `zylem-badge ${props.class}` : 'zylem-badge'}
+      data-tone={props.tone ?? 'info'}
+    >
+      {props.children}
+    </span>
+  );
+}

package/src/components/Button/Button.css.ts

@@ -0,0 +1,124 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * HyperGlass button — owns the `.zylem-button` class (previously defined in
+ * global/editor-base.css.ts). Variants are selected via `data-variant` and
+ * sizes via `data-size`, so the styles work from the raw CSS bundle without
+ * requiring consumers to compile vanilla-extract.
+ */
+
+globalStyle('.zylem-button', {
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: vars.spacing.xs,
+  minHeight: '28px',
+  padding: `0 ${vars.spacing.md}`,
+  cursor: 'pointer',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+  borderRadius: vars.radii.button,
+  border: '1px solid rgba(150, 210, 255, 0.55)',
+  color: '#F4FAFF',
+  background: vars.material.buttonGlass,
+  boxShadow: vars.effects.shadowButton,
+  textShadow: '0 1px 1px rgba(0,0,0,0.72)',
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  fontWeight: 600,
+  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-button:hover:not([disabled])', {
+  background: vars.material.buttonGlassHover,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
+  color: '#F4FAFF',
+});
+
+globalStyle('.zylem-button:active:not([disabled])', {
+  transform: 'translateY(1px)',
+  filter: 'brightness(0.92)',
+});
+
+globalStyle('.zylem-button:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-button[disabled], .zylem-button[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+// Variants
+
+globalStyle('.zylem-button[data-variant="primary"]', {
+  borderColor: 'rgba(178, 219, 255, 0.8)',
+  background: vars.material.buttonGlassHover,
+});
+
+globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
+  filter: 'brightness(1.08)',
+});
+
+globalStyle('.zylem-button[data-variant="active"]', {
+  borderColor: 'rgba(20, 255, 60, 0.78)',
+  background: vars.material.buttonGlassActive,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+});
+
+globalStyle('.zylem-button[data-variant="active"]:hover:not([disabled])', {
+  background: vars.material.buttonGlassActive,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+  filter: 'brightness(1.1)',
+});
+
+globalStyle('.zylem-button[data-variant="danger"]', {
+  borderColor: 'rgba(255, 132, 114, 0.78)',
+  background: vars.material.buttonGlassDanger,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+});
+
+globalStyle('.zylem-button[data-variant="danger"]:hover:not([disabled])', {
+  background: vars.material.buttonGlassDanger,
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+  filter: 'brightness(1.1)',
+});
+
+globalStyle('.zylem-button[data-variant="ghost"]', {
+  border: '1px solid rgba(97, 166, 232, 0.35)',
+  background: 'transparent',
+  boxShadow: 'none',
+  color: vars.colors.primary,
+  textShadow: 'none',
+});
+
+globalStyle('.zylem-button[data-variant="ghost"]:hover:not([disabled])', {
+  background: 'rgba(97, 166, 232, 0.12)',
+  boxShadow: vars.effects.glowPrimary,
+  color: vars.colors.primary,
+});
+
+// Sizes
+
+globalStyle('.zylem-button[data-size="sm"]', {
+  minHeight: '22px',
+  padding: `0 ${vars.spacing.sm}`,
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+});
+
+globalStyle('.zylem-button[data-size="lg"]', {
+  minHeight: '36px',
+  padding: `0 ${vars.spacing.lg}`,
+  fontSize: `calc(${vars.typography.fontSize} + 1px)`,
+});
+
+globalStyle('.zylem-button[data-size="icon"]', {
+  minHeight: '28px',
+  minWidth: '28px',
+  padding: vars.spacing.xs,
+  borderRadius: vars.radii.control,
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,34 @@
+import type { JSX } from 'solid-js';
+import { splitProps } from 'solid-js';
+
+export type ButtonVariant = 'default' | 'primary' | 'active' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+/**
+ * HyperGlass button: squared Aqua-like bevel with glass depth. Variants map
+ * to the Zylem palette — `active` for live/run actions, `danger` for
+ * destructive actions, `ghost` for low-emphasis chrome.
+ *
+ * Styling lives on the global `.zylem-button` class (bundled in
+ * `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
+ */
+export function Button(props: ButtonProps) {
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children']);
+  return (
+    <button
+      type="button"
+      class={local.class ? `zylem-button ${local.class}` : 'zylem-button'}
+      data-variant={local.variant ?? 'default'}
+      data-size={local.size ?? 'md'}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Index card: small HyperCard-style tile with a blue glow on hover.
+ */
+globalStyle('.zylem-card', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xs,
+  padding: vars.spacing.md,
+  borderRadius: vars.radii.card,
+  border: '1px solid rgba(97, 166, 232, 0.32)',
+  background: vars.material.glassPanelDark,
+  boxShadow:
+    '0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08)',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-card--interactive', {
+  cursor: 'pointer',
+  textAlign: 'left',
+});
+
+globalStyle('.zylem-card--interactive:hover', {
+  borderColor: 'rgba(150, 210, 255, 0.6)',
+  boxShadow: `0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08), ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
+});
+
+globalStyle('.zylem-card--interactive:active', {
+  transform: 'translateY(1px)',
+});
+
+globalStyle('.zylem-card--interactive:focus-visible', {
+  outline: 'none',
+  boxShadow: `0 8px 20px rgba(0,0,0,0.3), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-card--selected', {
+  borderColor: 'rgba(20, 255, 60, 0.6)',
+  boxShadow: `0 8px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08), ${vars.effects.glowActive}`,
+});
+
+globalStyle('.zylem-card-title', {
+  fontSize: vars.typography.fontSize,
+  fontWeight: 700,
+  color: '#F4FAFF',
+  textShadow: '0 1px 1px rgba(0,0,0,0.55)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-card-description', {
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: vars.colors.textSecondary,
+  lineHeight: 1.4,
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,54 @@
+import { Show, splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface CardProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: JSX.Element;
+  description?: JSX.Element;
+  /** Renders hover glow + pointer cursor and click affordances. */
+  interactive?: boolean;
+  selected?: boolean;
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass card: small index-card tile with a blue glow. Use for entity
+ * tiles, project tiles, and asset thumbnails.
+ */
+export function Card(props: CardProps) {
+  const [local, rest] = splitProps(props, [
+    'title',
+    'description',
+    'interactive',
+    'selected',
+    'children',
+    'class',
+  ]);
+
+  const classes = () =>
+    [
+      'zylem-card',
+      local.interactive ? 'zylem-card--interactive' : '',
+      local.selected ? 'zylem-card--selected' : '',
+      local.class ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+  return (
+    <div
+      class={classes()}
+      role={local.interactive ? 'button' : undefined}
+      tabIndex={local.interactive ? 0 : undefined}
+      {...rest}
+    >
+      <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>
+    </div>
+  );
+}

package/src/{global/checkbox.css.ts → components/Checkbox/Checkbox.css.ts}

@@ -1,10 +1,10 @@
 import { globalStyle } from '@vanilla-extract/css';
-import { vars } from '../theme.css';
+import { vars } from '../../theme.css';
 
 globalStyle('.zylem-checkbox-root', {
   display: 'inline-flex',
   alignItems: 'center',
-  gap: vars.spacing.md,
+  gap: vars.spacing.sm,
   cursor: 'pointer',
   userSelect: 'none',
 });
@@ -26,41 +26,41 @@ globalStyle('.zylem-checkbox-input', {
   border: 0,
 });
 
+// Square glass toggle: beveled jewel that fills with blue glass when checked.
 globalStyle('.zylem-checkbox-control', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: '20px',
-  height: '20px',
-  border: `${vars.borders.width} solid ${vars.colors.primary}`,
-  borderRadius: `calc(${vars.borders.radius} / 3)`,
-  background: 'transparent',
-  transition: 'background-color 0.15s ease, border-color 0.15s ease',
+  width: '18px',
+  height: '18px',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.5)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-checkbox-root:hover .zylem-checkbox-control', {
-  borderColor: vars.colors.primaryHover,
-  background: 'rgba(97, 166, 232, 0.1)',
+  borderColor: 'rgba(150, 210, 255, 0.7)',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.glowPrimary}`,
 });
 
 globalStyle('.zylem-checkbox-root[data-checked] .zylem-checkbox-control', {
-  background: vars.colors.primary,
-  borderColor: vars.colors.primary,
+  background: vars.material.buttonGlass,
+  border: '1px solid rgba(150, 210, 255, 0.65)',
+  boxShadow: vars.effects.shadowButton,
 });
 
-globalStyle(
-  '.zylem-checkbox-root[data-checked]:hover .zylem-checkbox-control',
-  {
-    background: vars.colors.primaryHover,
-    borderColor: vars.colors.primaryHover,
-  },
-);
+globalStyle('.zylem-checkbox-root:focus-within .zylem-checkbox-control', {
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
 
 globalStyle('.zylem-checkbox-icon', {
-  width: '14px',
-  height: '14px',
-  color: vars.colors.background,
-  strokeWidth: 3,
+  width: '12px',
+  height: '12px',
+  color: '#F4FAFF',
+  strokeWidth: 3.5,
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.6))',
 });
 
 globalStyle('.zylem-checkbox-label', {

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,41 @@
+import { Checkbox as KCheckbox } from '@kobalte/core';
+import Check from 'lucide-solid/icons/check';
+import { Show } from 'solid-js';
+
+export interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  name?: string;
+  class?: string;
+}
+
+/**
+ * HyperGlass checkbox: square glass jewel with a beveled checked state.
+ */
+export function Checkbox(props: CheckboxProps) {
+  return (
+    <KCheckbox.Root
+      class={props.class ? `zylem-checkbox-root ${props.class}` : 'zylem-checkbox-root'}
+      checked={props.checked}
+      defaultChecked={props.defaultChecked}
+      onChange={props.onChange}
+      disabled={props.disabled}
+      name={props.name}
+    >
+      <KCheckbox.Input class="zylem-checkbox-input" />
+      <KCheckbox.Control class="zylem-checkbox-control">
+        <KCheckbox.Indicator>
+          <Check class="zylem-checkbox-icon" />
+        </KCheckbox.Indicator>
+      </KCheckbox.Control>
+      <Show when={props.label}>
+        <KCheckbox.Label class="zylem-checkbox-label">
+          {props.label}
+        </KCheckbox.Label>
+      </Show>
+    </KCheckbox.Root>
+  );
+}

package/src/components/Console/Console.css.ts

@@ -0,0 +1,65 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-console-container', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: vars.spacing.sm,
+});
+
+globalStyle('.zylem-console-wrapper', {
+  position: 'relative',
+  display: 'flex',
+  flex: 1,
+  minHeight: 0,
+});
+
+/** Dark low-gloss terminal field — owns the `.zylem-console` class. */
+globalStyle('.zylem-console', {
+  flex: 1,
+  minHeight: '96px',
+  width: '100%',
+  height: '100%',
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: vars.spacing.sm,
+  resize: 'none',
+  overflowY: 'auto',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: 'rgba(4, 12, 20, 0.72)',
+  boxShadow: vars.effects.shadowInset,
+  color: vars.colors.consoleText,
+  fontFamily: "'Courier New', monospace",
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  lineHeight: 1.45,
+  outline: 'none',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+});
+
+globalStyle('.zylem-console:focus-visible', {
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-console-actions', {
+  position: 'absolute',
+  top: vars.spacing.xs,
+  right: vars.spacing.sm,
+  display: 'flex',
+  gap: vars.spacing.xs,
+  zIndex: 1,
+});
+
+// Legacy hook used by the editor's clear button.
+globalStyle('.zylem-console-clear', {
+  position: 'absolute',
+  top: vars.spacing.sm,
+  right: vars.spacing.sm,
+  zIndex: 1,
+});