@zylem/ui 0.1.0 → 0.1.1

package/src/components/Console/Console.tsx

@@ -0,0 +1,51 @@
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { Button } from '../Button/Button';
+
+export interface ConsoleProps {
+  /** Console text content. */
+  value: string;
+  /** Editable textarea input handler; omit for read-only display. */
+  onInput?: (value: string) => void;
+  onClear?: () => void;
+  readOnly?: boolean;
+  class?: string;
+  /** Extra action buttons rendered next to Clear. */
+  actions?: JSX.Element;
+}
+
+/**
+ * HyperGlass console: dark low-gloss terminal field with a floating Clear
+ * action.
+ */
+export function Console(props: ConsoleProps) {
+  return (
+    <div
+      class={
+        props.class
+          ? `zylem-console-container ${props.class}`
+          : 'zylem-console-container'
+      }
+    >
+      <div class="zylem-console-wrapper">
+        <textarea
+          class="zylem-console zylem-scroll"
+          value={props.value}
+          spellcheck={false}
+          readOnly={props.readOnly || !props.onInput}
+          onInput={(event) => props.onInput?.(event.currentTarget.value)}
+        />
+        <Show when={props.onClear || props.actions}>
+          <div class="zylem-console-actions">
+            {props.actions}
+            <Show when={props.onClear}>
+              <Button size="sm" variant="ghost" onClick={() => props.onClear?.()}>
+                Clear
+              </Button>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/components/Dialog/Dialog.css.ts

@@ -0,0 +1,86 @@
+import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const overlayEnter = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+const contentEnter = keyframes({
+  from: { opacity: 0, transform: 'translateY(8px) scale(0.98)' },
+  to: { opacity: 1, transform: 'translateY(0) scale(1)' },
+});
+
+globalStyle('.zylem-dialog-overlay', {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 10000,
+  background: 'rgba(5, 10, 18, 0.6)',
+  backdropFilter: 'blur(3px)',
+  animation: `${overlayEnter} 0.15s ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-dialog-positioner', {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 10001,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: vars.spacing.lg,
+});
+
+globalStyle('.zylem-dialog-content', {
+  width: '100%',
+  maxWidth: '440px',
+  borderRadius: vars.radii.window,
+  border: '1px solid rgba(146, 205, 255, 0.54)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+  overflow: 'hidden',
+  animation: `${contentEnter} 0.16s ${vars.motion.easeOut}`,
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.zylem-dialog-header', {
+  minHeight: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.sm,
+  padding: `0 ${vars.spacing.md}`,
+  background: vars.material.glossyBar,
+  borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
+});
+
+globalStyle('.zylem-dialog-title', {
+  margin: 0,
+  fontSize: '13px',
+  fontWeight: 700,
+  letterSpacing: '0.02em',
+  color: '#F4FAFF',
+  fontFamily: vars.typography.fontFamily,
+  textShadow: '0 1px 1px rgba(0,0,0,0.65)',
+});
+
+globalStyle('.zylem-dialog-body', {
+  padding: vars.spacing.lg,
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  lineHeight: 1.45,
+});
+
+globalStyle('.zylem-dialog-footer', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: vars.spacing.sm,
+  padding: `0 ${vars.spacing.lg} ${vars.spacing.lg}`,
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,89 @@
+import { Dialog as KDialog } from '@kobalte/core';
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { Button } from '../Button/Button';
+import { WindowControls } from '../WindowControls/WindowControls';
+
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: JSX.Element;
+  children: JSX.Element;
+  /** Optional footer content (e.g. action buttons). */
+  footer?: JSX.Element;
+}
+
+/**
+ * HyperGlass dialog: glass window with a glossy title bar and jewel close
+ * control, centered over a dimmed backdrop.
+ */
+export function Dialog(props: DialogProps) {
+  return (
+    <KDialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+      <KDialog.Portal>
+        <KDialog.Overlay class="zylem-dialog-overlay" />
+        <div class="zylem-dialog-positioner">
+          <KDialog.Content class="zylem-dialog-content">
+            <div class="zylem-dialog-header">
+              <Show when={props.title}>
+                <KDialog.Title class="zylem-dialog-title">
+                  {props.title}
+                </KDialog.Title>
+              </Show>
+              <WindowControls onClose={() => props.onOpenChange?.(false)} />
+            </div>
+            <KDialog.Description as="div" class="zylem-dialog-body">
+              {props.children}
+            </KDialog.Description>
+            <Show when={props.footer}>
+              <div class="zylem-dialog-footer">{props.footer}</div>
+            </Show>
+          </KDialog.Content>
+        </div>
+      </KDialog.Portal>
+    </KDialog.Root>
+  );
+}
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: JSX.Element;
+  message: JSX.Element;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+  onConfirm: () => void;
+}
+
+/**
+ * Confirmation dialog built on Dialog — a drop-in replacement for
+ * `window.confirm()` flows.
+ */
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      title={props.title ?? 'Confirm'}
+      footer={
+        <>
+          <Button variant="ghost" onClick={() => props.onOpenChange(false)}>
+            {props.cancelLabel ?? 'Cancel'}
+          </Button>
+          <Button
+            variant={props.danger ? 'danger' : 'primary'}
+            onClick={() => {
+              props.onConfirm();
+              props.onOpenChange(false);
+            }}
+          >
+            {props.confirmLabel ?? 'Confirm'}
+          </Button>
+        </>
+      }
+    >
+      {props.message}
+    </Dialog>
+  );
+}

package/src/components/DropdownMenu/DropdownMenu.css.ts

@@ -0,0 +1,76 @@
+import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+const enter = keyframes({
+  from: { opacity: 0, transform: 'translateY(-4px)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
+
+globalStyle('.zylem-dropdown-content', {
+  zIndex: 10000,
+  minWidth: '180px',
+  padding: vars.spacing.xs,
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.45)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+  outline: 'none',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.zylem-dropdown-content[data-expanded]', {
+  animation: `${enter} 0.12s ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-dropdown-item', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.md,
+  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  borderRadius: '4px',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  cursor: 'pointer',
+  userSelect: 'none',
+  outline: 'none',
+});
+
+globalStyle('.zylem-dropdown-item[data-highlighted]', {
+  background: 'rgba(97, 166, 232, 0.22)',
+  color: '#F4FAFF',
+});
+
+globalStyle('.zylem-dropdown-item[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-dropdown-item--danger', {
+  color: '#FF9C8F',
+});
+
+globalStyle('.zylem-dropdown-item--danger[data-highlighted]', {
+  background: 'rgba(230, 69, 52, 0.25)',
+  color: '#FFD9D3',
+});
+
+globalStyle('.zylem-dropdown-shortcut', {
+  fontSize: `calc(${vars.typography.fontSize} - 3px)`,
+  color: vars.colors.textSecondary,
+  letterSpacing: '0.06em',
+});
+
+globalStyle('.zylem-dropdown-separator', {
+  height: '1px',
+  border: 'none',
+  margin: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  background:
+    'linear-gradient(90deg, transparent, rgba(97, 166, 232, 0.35), transparent)',
+});

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,63 @@
+import { DropdownMenu as KDropdownMenu } from '@kobalte/core';
+import { For, Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface DropdownMenuItemConfig {
+  id: string;
+  label: JSX.Element;
+  onSelect?: () => void;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  /** Render a separator line above this item. */
+  separatorAbove?: boolean;
+}
+
+export interface DropdownMenuProps {
+  /** Trigger element; rendered inside a Kobalte trigger button. */
+  trigger: JSX.Element;
+  items: DropdownMenuItemConfig[];
+  placement?: 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top' | 'right-start' | 'left-start';
+  /** Class applied to the trigger button. */
+  triggerClass?: string;
+}
+
+/**
+ * HyperGlass dropdown menu: floating glass sheet with highlight rows.
+ */
+export function DropdownMenu(props: DropdownMenuProps) {
+  return (
+    <KDropdownMenu.Root placement={props.placement ?? 'bottom-start'}>
+      <KDropdownMenu.Trigger class={props.triggerClass}>
+        {props.trigger}
+      </KDropdownMenu.Trigger>
+      <KDropdownMenu.Portal>
+        <KDropdownMenu.Content class="zylem-dropdown-content">
+          <For each={props.items}>
+            {(item) => (
+              <>
+                <Show when={item.separatorAbove}>
+                  <KDropdownMenu.Separator class="zylem-dropdown-separator" />
+                </Show>
+                <KDropdownMenu.Item
+                  class={
+                    item.danger
+                      ? 'zylem-dropdown-item zylem-dropdown-item--danger'
+                      : 'zylem-dropdown-item'
+                  }
+                  disabled={item.disabled}
+                  onSelect={item.onSelect}
+                >
+                  <span>{item.label}</span>
+                  <Show when={item.shortcut}>
+                    <span class="zylem-dropdown-shortcut">{item.shortcut}</span>
+                  </Show>
+                </KDropdownMenu.Item>
+              </>
+            )}
+          </For>
+        </KDropdownMenu.Content>
+      </KDropdownMenu.Portal>
+    </KDropdownMenu.Root>
+  );
+}

package/src/components/EmptyState/EmptyState.css.ts

@@ -0,0 +1,29 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-empty-state', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: vars.spacing.sm,
+  padding: vars.spacing.xl,
+  textAlign: 'center',
+  borderRadius: vars.radii.card,
+  border: '1px dashed rgba(97, 166, 232, 0.3)',
+  background: 'rgba(8, 19, 31, 0.3)',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-empty-state-title', {
+  fontSize: vars.typography.fontSize,
+  fontWeight: 600,
+  color: vars.colors.text,
+});
+
+globalStyle('.zylem-empty-state-message', {
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  lineHeight: 1.45,
+  maxWidth: '360px',
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,32 @@
+import { Show } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface EmptyStateProps {
+  title?: JSX.Element;
+  children?: JSX.Element;
+  /** Optional action (e.g. a Button). */
+  action?: JSX.Element;
+  class?: string;
+}
+
+/**
+ * HyperGlass empty state: dashed glass placeholder card for empty lists and
+ * unbuilt modes.
+ */
+export function EmptyState(props: EmptyStateProps) {
+  return (
+    <div
+      class={
+        props.class ? `zylem-empty-state ${props.class}` : 'zylem-empty-state'
+      }
+    >
+      <Show when={props.title}>
+        <div class="zylem-empty-state-title">{props.title}</div>
+      </Show>
+      <Show when={props.children}>
+        <div class="zylem-empty-state-message">{props.children}</div>
+      </Show>
+      {props.action}
+    </div>
+  );
+}

package/src/components/Kbd/Kbd.css.ts

@@ -0,0 +1,27 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Keyboard hint chip: tiny beveled glass key cap.
+ */
+globalStyle('.zylem-kbd', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '18px',
+  padding: `1px ${vars.spacing.xs}`,
+  borderRadius: '4px',
+  border: '1px solid rgba(97, 166, 232, 0.4)',
+  background:
+    'linear-gradient(180deg, rgba(60, 85, 115, 0.7), rgba(20, 32, 48, 0.85))',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4)',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: '10px',
+  fontWeight: 700,
+  letterSpacing: '0.04em',
+  textTransform: 'uppercase',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+});

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,17 @@
+import type { JSX } from 'solid-js';
+
+export interface KbdProps {
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * HyperGlass keyboard hint: tiny beveled glass key cap for shortcut hints.
+ */
+export function Kbd(props: KbdProps) {
+  return (
+    <kbd class={props.class ? `zylem-kbd ${props.class}` : 'zylem-kbd'}>
+      {props.children}
+    </kbd>
+  );
+}

package/src/components/NumberField/NumberField.css.ts

@@ -0,0 +1,47 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import '../shared/field.css';
+
+globalStyle('.zylem-numberfield-group', {
+  display: 'inline-flex',
+  alignItems: 'stretch',
+  position: 'relative',
+  width: '100%',
+});
+
+globalStyle('.zylem-numberfield-input', {
+  width: '100%',
+  height: '28px',
+  paddingRight: '26px',
+  fontVariantNumeric: 'tabular-nums',
+});
+
+globalStyle('.zylem-numberfield-stepper', {
+  position: 'absolute',
+  right: '3px',
+  width: '20px',
+  height: '11px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  border: '1px solid rgba(150, 210, 255, 0.4)',
+  borderRadius: '4px',
+  background: vars.material.buttonGlass,
+  color: '#F4FAFF',
+  fontSize: '8px',
+  lineHeight: 1,
+  padding: 0,
+  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-numberfield-stepper:hover', {
+  filter: 'brightness(1.25)',
+});
+
+globalStyle('.zylem-numberfield-stepper:active', {
+  filter: 'brightness(0.85)',
+});
+
+globalStyle('.zylem-numberfield-stepper--up', { top: '3px' });
+globalStyle('.zylem-numberfield-stepper--down', { bottom: '3px' });

package/src/components/NumberField/NumberField.tsx

@@ -0,0 +1,66 @@
+import { NumberField as KNumberField } from '@kobalte/core';
+import { Show } from 'solid-js';
+
+export interface NumberFieldProps {
+  label?: string;
+  error?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  disabled?: boolean;
+  placeholder?: string;
+  name?: string;
+  class?: string;
+}
+
+/**
+ * HyperGlass number field: inset glass input with square jewel steppers.
+ */
+export function NumberField(props: NumberFieldProps) {
+  return (
+    <KNumberField.Root
+      class={props.class ? `zylem-field-root ${props.class}` : 'zylem-field-root'}
+      rawValue={props.value}
+      onRawValueChange={(value) => {
+        if (props.onChange && !Number.isNaN(value)) props.onChange(value);
+      }}
+      minValue={props.minValue}
+      maxValue={props.maxValue}
+      step={props.step}
+      disabled={props.disabled}
+      name={props.name}
+      validationState={props.error ? 'invalid' : 'valid'}
+    >
+      <Show when={props.label}>
+        <KNumberField.Label class="zylem-field-label">
+          {props.label}
+        </KNumberField.Label>
+      </Show>
+      <div class="zylem-numberfield-group">
+        <KNumberField.Input
+          class="zylem-field zylem-numberfield-input"
+          placeholder={props.placeholder}
+        />
+        <KNumberField.IncrementTrigger
+          class="zylem-numberfield-stepper zylem-numberfield-stepper--up"
+          aria-label="Increment"
+        >
+          ▲
+        </KNumberField.IncrementTrigger>
+        <KNumberField.DecrementTrigger
+          class="zylem-numberfield-stepper zylem-numberfield-stepper--down"
+          aria-label="Decrement"
+        >
+          ▼
+        </KNumberField.DecrementTrigger>
+      </div>
+      <Show when={props.error}>
+        <KNumberField.ErrorMessage class="zylem-field-error">
+          {props.error}
+        </KNumberField.ErrorMessage>
+      </Show>
+    </KNumberField.Root>
+  );
+}

package/src/components/Panel/Panel.css.ts

@@ -0,0 +1,88 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Glass card: transparent panel with 1px electric-blue border, inner
+ * highlight, subtle blur, and rounded panel corners.
+ */
+globalStyle('.zylem-panel', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  borderRadius: vars.radii.panel,
+  border: '1px solid rgba(97, 166, 232, 0.38)',
+  background: vars.material.glassPanelDark,
+  boxShadow:
+    '0 16px 36px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.09)',
+  backdropFilter: `blur(${vars.effects.blurSm}) saturate(1.14)`,
+  overflow: 'hidden',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+/**
+ * Borderless variant: drops the outline, outer shadow, and background so a
+ * panel can sit flush inside an already-outlined region (fewer outlines).
+ */
+globalStyle('.zylem-panel--borderless', {
+  border: 'none',
+  borderRadius: 0,
+  background: 'transparent',
+  boxShadow: 'none',
+  backdropFilter: 'none',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: 'transparent',
+    },
+  },
+});
+
+/** Brighter blue-glass variant for hero/window surfaces. */
+globalStyle('.zylem-panel--window', {
+  borderRadius: vars.radii.window,
+  border: '1px solid rgba(146, 205, 255, 0.54)',
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+});
+
+/** Aqua-inspired glossy header strip for panels. */
+globalStyle('.zylem-panel-header', {
+  boxSizing: 'border-box',
+  minHeight: '32px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.sm,
+  padding: `0 ${vars.spacing.md}`,
+  borderBottom: '1px solid rgba(97, 166, 232, 0.22)',
+  background: vars.material.panelHeaderGloss,
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-panel-header-title', {
+  fontSize: '11px',
+  fontWeight: 700,
+  letterSpacing: '0.09em',
+  textTransform: 'uppercase',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  textShadow: '0 1px 1px rgba(0,0,0,0.55)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-panel-body', {
+  flex: 1,
+  minHeight: 0,
+  padding: vars.spacing.md,
+});
+
+globalStyle('.zylem-panel-body--flush', {
+  padding: 0,
+});