@zylem/ui 0.1.0 → 0.2.0

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,66 @@
+import { Show, splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface PanelProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Optional glossy header title. */
+  title?: JSX.Element;
+  /** Extra content rendered on the right side of the header. */
+  headerActions?: JSX.Element;
+  /** Use the brighter window-glass treatment. */
+  window?: boolean;
+  /** Remove body padding (for consoles, lists, etc.). */
+  flush?: boolean;
+  /**
+   * Drop the border, outer shadow, and background so the panel sits flush
+   * inside an already-outlined region.
+   */
+  borderless?: boolean;
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass panel: glass card with a 1px electric-blue border, inner
+ * highlight, subtle blur, and an optional glossy header bar.
+ */
+export function Panel(props: PanelProps) {
+  const [local, rest] = splitProps(props, [
+    'title',
+    'headerActions',
+    'window',
+    'flush',
+    'borderless',
+    'children',
+    'class',
+  ]);
+
+  const classes = () =>
+    [
+      'zylem-panel',
+      local.window ? 'zylem-panel--window' : '',
+      local.borderless ? 'zylem-panel--borderless' : '',
+      local.class ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+  return (
+    <div class={classes()} {...rest}>
+      <Show when={local.title || local.headerActions}>
+        <div class="zylem-panel-header">
+          <span class="zylem-panel-header-title">{local.title}</span>
+          {local.headerActions}
+        </div>
+      </Show>
+      <div
+        class={
+          local.flush
+            ? 'zylem-panel-body zylem-panel-body--flush'
+            : 'zylem-panel-body'
+        }
+      >
+        {local.children}
+      </div>
+    </div>
+  );
+}

package/src/components/Progress/Progress.css.ts

@@ -0,0 +1,51 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-progress-root', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xxs,
+  width: '100%',
+});
+
+globalStyle('.zylem-progress-header', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+globalStyle('.zylem-progress-label', {
+  fontSize: '11px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-progress-value', {
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: vars.colors.primary,
+  fontFamily: vars.typography.fontFamily,
+  fontVariantNumeric: 'tabular-nums',
+});
+
+globalStyle('.zylem-progress-track', {
+  position: 'relative',
+  height: '10px',
+  width: '100%',
+  overflow: 'hidden',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+});
+
+globalStyle('.zylem-progress-fill', {
+  height: '100%',
+  borderRadius: '999px',
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.7), rgba(48, 137, 220, 0.92))',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.5), ${vars.effects.glowPrimary}`,
+  transition: `width ${vars.motion.normal} ${vars.motion.easeOut}`,
+  width: 'var(--kb-progress-fill-width)',
+});

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,43 @@
+import { Progress as KProgress } from '@kobalte/core';
+import { Show } from 'solid-js';
+
+export interface ProgressProps {
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  label?: string;
+  showValue?: boolean;
+  indeterminate?: boolean;
+  class?: string;
+}
+
+/**
+ * HyperGlass progress bar: inset glass track with a glowing blue glass fill.
+ */
+export function Progress(props: ProgressProps) {
+  return (
+    <KProgress.Root
+      class={props.class ? `zylem-progress-root ${props.class}` : 'zylem-progress-root'}
+      value={props.value}
+      minValue={props.minValue}
+      maxValue={props.maxValue}
+      indeterminate={props.indeterminate}
+    >
+      <Show when={props.label || props.showValue}>
+        <div class="zylem-progress-header">
+          <Show when={props.label}>
+            <KProgress.Label class="zylem-progress-label">
+              {props.label}
+            </KProgress.Label>
+          </Show>
+          <Show when={props.showValue}>
+            <KProgress.ValueLabel class="zylem-progress-value" />
+          </Show>
+        </div>
+      </Show>
+      <KProgress.Track class="zylem-progress-track">
+        <KProgress.Fill class="zylem-progress-fill" />
+      </KProgress.Track>
+    </KProgress.Root>
+  );
+}

package/src/components/Property/Property.css.ts

@@ -0,0 +1,70 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * HyperCard-style field list — owns the `.zylem-property-*` classes used by
+ * the editor.
+ */
+globalStyle('.zylem-property-list', {
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: vars.radii.control,
+  border: '1px solid rgba(97, 166, 232, 0.18)',
+  background: 'rgba(8, 19, 31, 0.35)',
+  overflow: 'hidden',
+});
+
+globalStyle('.zylem-property-row', {
+  minHeight: '30px',
+  display: 'grid',
+  gridTemplateColumns: '112px 1fr',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+  borderBottom: '1px solid rgba(97,166,232,0.12)',
+  background: 'linear-gradient(90deg, rgba(97,166,232,0.045), transparent 45%)',
+});
+
+globalStyle('.zylem-property-row:last-child', {
+  borderBottom: 'none',
+});
+
+globalStyle('.zylem-property-row:hover', {
+  background:
+    'linear-gradient(90deg, rgba(97,166,232,0.13), rgba(97,166,232,0.025) 65%)',
+});
+
+globalStyle('.zylem-property-label', {
+  fontSize: '11px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-property-value', {
+  color: vars.colors.primary,
+  fontSize: vars.typography.fontSize,
+  fontFamily: vars.typography.fontFamily,
+  fontWeight: 500,
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-property-value--clickable', {
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textUnderlineOffset: '2px',
+});
+
+globalStyle('.zylem-property-value--clickable:hover', {
+  textDecorationStyle: 'solid',
+  color: vars.colors.active,
+});

package/src/components/Property/Property.tsx

@@ -0,0 +1,118 @@
+import { Show, createMemo } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface PropertyListProps {
+  children: JSX.Element;
+  class?: string;
+}
+
+/**
+ * HyperCard-style field list: wraps `PropertyRow`s in a bordered inset stack.
+ */
+export function PropertyList(props: PropertyListProps) {
+  return (
+    <div
+      class={
+        props.class
+          ? `zylem-property-list ${props.class}`
+          : 'zylem-property-list'
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export interface PropertyRowProps {
+  label: string;
+  /** The value to display. Can be a string, number, or JSX element. */
+  value?: string | number | JSX.Element;
+  /** If true, treat string values as paths and truncate long ones. */
+  isPath?: boolean;
+  /** Maximum path segments to show (default: 3). */
+  maxPathSegments?: number;
+  /** Called with the full value when a truncated path is clicked. */
+  onPathClick?: (fullValue: string) => void;
+  valueClass?: string;
+  /** Children can be used instead of value for complex content. */
+  children?: JSX.Element;
+}
+
+function truncatePath(
+  path: string,
+  maxSegments = 3,
+): { truncated: string; isTruncated: boolean } {
+  const separator = path.includes('\\') ? '\\' : '/';
+  const segments = path.split(separator).filter(Boolean);
+  if (segments.length <= maxSegments) {
+    return { truncated: path, isTruncated: false };
+  }
+  return {
+    truncated: `...${separator}${segments.slice(-maxSegments).join(separator)}`,
+    isTruncated: true,
+  };
+}
+
+function looksLikePath(value: string): boolean {
+  return (
+    value.includes('/') ||
+    value.includes('\\') ||
+    /^[A-Za-z]:/.test(value) ||
+    value.startsWith('.') ||
+    value.startsWith('~')
+  );
+}
+
+/**
+ * HyperGlass property row: label/value inspector field with automatic path
+ * truncation and click-to-reveal.
+ */
+export function PropertyRow(props: PropertyRowProps) {
+  const display = createMemo(() => {
+    if (props.children !== undefined) {
+      return { element: props.children, isClickable: false, fullValue: null as string | null };
+    }
+    if (typeof props.value !== 'string') {
+      return { element: props.value, isClickable: false, fullValue: null as string | null };
+    }
+    const stringValue = props.value;
+    const shouldTruncate = props.isPath ?? looksLikePath(stringValue);
+    if (shouldTruncate) {
+      const { truncated, isTruncated } = truncatePath(
+        stringValue,
+        props.maxPathSegments ?? 3,
+      );
+      return {
+        element: truncated,
+        isClickable: isTruncated && !!props.onPathClick,
+        fullValue: isTruncated ? stringValue : null,
+      };
+    }
+    return { element: stringValue, isClickable: false, fullValue: null as string | null };
+  });
+
+  return (
+    <div class="zylem-property-row">
+      <span class="zylem-property-label">{props.label}</span>
+      <Show
+        when={display().isClickable}
+        fallback={
+          <span class={`zylem-property-value ${props.valueClass ?? ''}`}>
+            {display().element}
+          </span>
+        }
+      >
+        <span
+          class={`zylem-property-value zylem-property-value--clickable ${props.valueClass ?? ''}`}
+          onClick={() => {
+            const fullValue = display().fullValue;
+            if (fullValue) props.onPathClick?.(fullValue);
+          }}
+          title="Click to reveal full path"
+        >
+          {display().element}
+        </span>
+      </Show>
+    </div>
+  );
+}

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,41 @@
+import { splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Scroll direction; defaults to vertical. */
+  direction?: 'vertical' | 'horizontal' | 'both';
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass scroll area: wrapper that opts into the visible Aqua-glass
+ * scrollbar rail (`.zylem-scroll`, defined in hyperglass-base.css.ts).
+ */
+export function ScrollArea(props: ScrollAreaProps) {
+  const [local, rest] = splitProps(props, ['direction', 'children', 'class', 'style']);
+
+  const overflow = () => {
+    switch (local.direction) {
+      case 'horizontal':
+        return { 'overflow-x': 'auto', 'overflow-y': 'hidden' } as const;
+      case 'both':
+        return { overflow: 'auto' } as const;
+      default:
+        return { 'overflow-y': 'auto', 'overflow-x': 'hidden' } as const;
+    }
+  };
+
+  return (
+    <div
+      class={local.class ? `zylem-scroll ${local.class}` : 'zylem-scroll'}
+      style={{
+        ...overflow(),
+        'min-height': 0,
+        ...(typeof local.style === 'object' ? local.style : {}),
+      }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}

package/src/components/SearchInput/SearchInput.css.ts

@@ -0,0 +1,25 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import '../shared/field.css';
+
+globalStyle('.zylem-search', {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+});
+
+globalStyle('.zylem-search-icon', {
+  position: 'absolute',
+  left: vars.spacing.sm,
+  width: '14px',
+  height: '14px',
+  color: vars.colors.textSecondary,
+  pointerEvents: 'none',
+});
+
+globalStyle('.zylem-search-input', {
+  width: '100%',
+  height: '28px',
+  paddingLeft: '28px',
+});

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,31 @@
+import Search from 'lucide-solid/icons/search';
+import type { JSX } from 'solid-js';
+
+export interface SearchInputProps {
+  value?: string;
+  onInput?: (value: string) => void;
+  placeholder?: string;
+  class?: string;
+  'aria-label'?: string;
+  onKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>;
+}
+
+/**
+ * HyperGlass search input: inset glass field with a leading search icon.
+ */
+export function SearchInput(props: SearchInputProps) {
+  return (
+    <div class={props.class ? `zylem-search ${props.class}` : 'zylem-search'}>
+      <Search class="zylem-search-icon" />
+      <input
+        type="search"
+        class="zylem-field zylem-search-input"
+        value={props.value ?? ''}
+        placeholder={props.placeholder ?? 'Search...'}
+        aria-label={props['aria-label'] ?? props.placeholder ?? 'Search'}
+        onInput={(event) => props.onInput?.(event.currentTarget.value)}
+        onKeyDown={props.onKeyDown}
+      />
+    </div>
+  );
+}

package/src/components/Select/Select.css.ts

@@ -0,0 +1,93 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import '../shared/field.css';
+
+globalStyle('.zylem-select-trigger', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.sm,
+  width: '100%',
+  height: '28px',
+  cursor: 'pointer',
+  textAlign: 'left',
+});
+
+globalStyle('.zylem-select-value', {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-select-icon', {
+  flexShrink: 0,
+  fontSize: '9px',
+  color: vars.colors.primary,
+  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-select-trigger[data-expanded] .zylem-select-icon', {
+  transform: 'rotate(180deg)',
+});
+
+globalStyle('.zylem-select-content', {
+  zIndex: 10000,
+  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)`,
+  overflow: 'hidden',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.zylem-select-listbox', {
+  maxHeight: '280px',
+  overflowY: 'auto',
+  padding: vars.spacing.xs,
+  margin: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2px',
+  outline: 'none',
+});
+
+globalStyle('.zylem-select-item', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.sm,
+  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-select-item[data-highlighted]', {
+  background: 'rgba(97, 166, 232, 0.22)',
+  color: '#F4FAFF',
+});
+
+globalStyle('.zylem-select-item[data-selected]', {
+  background: vars.material.buttonGlass,
+  boxShadow: vars.effects.shadowButton,
+  color: '#F4FAFF',
+});
+
+globalStyle('.zylem-select-item[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-select-item-indicator', {
+  color: vars.colors.active,
+  fontSize: '11px',
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,68 @@
+import { Select as KSelect } from '@kobalte/core';
+import { Show } from 'solid-js';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string | null) => void;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  name?: string;
+  class?: string;
+}
+
+/**
+ * HyperGlass select: inset glass trigger opening a floating glass sheet.
+ */
+export function Select(props: SelectProps) {
+  const selected = () =>
+    props.options.find((option) => option.value === props.value) ?? null;
+
+  return (
+    <KSelect.Root<SelectOption>
+      class={props.class ? `zylem-field-root ${props.class}` : 'zylem-field-root'}
+      options={props.options}
+      optionValue="value"
+      optionTextValue="label"
+      optionDisabled="disabled"
+      value={selected()}
+      onChange={(option) => props.onChange?.(option?.value ?? null)}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      name={props.name}
+      itemComponent={(itemProps) => (
+        <KSelect.Item item={itemProps.item} class="zylem-select-item">
+          <KSelect.ItemLabel>{itemProps.item.rawValue.label}</KSelect.ItemLabel>
+          <KSelect.ItemIndicator class="zylem-select-item-indicator">
+            ✓
+          </KSelect.ItemIndicator>
+        </KSelect.Item>
+      )}
+    >
+      <Show when={props.label}>
+        <KSelect.Label class="zylem-field-label">{props.label}</KSelect.Label>
+      </Show>
+      <KSelect.Trigger
+        class="zylem-field zylem-select-trigger"
+        aria-label={props.label}
+      >
+        <KSelect.Value<SelectOption> class="zylem-select-value">
+          {(state) => state.selectedOption()?.label}
+        </KSelect.Value>
+        <KSelect.Icon class="zylem-select-icon">▼</KSelect.Icon>
+      </KSelect.Trigger>
+      <KSelect.Portal>
+        <KSelect.Content class="zylem-select-content">
+          <KSelect.Listbox class="zylem-select-listbox zylem-scroll" />
+        </KSelect.Content>
+      </KSelect.Portal>
+    </KSelect.Root>
+  );
+}

package/src/components/Separator/Separator.css.ts

@@ -0,0 +1,22 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-separator', {
+  border: 'none',
+});
+
+globalStyle('.zylem-separator[data-orientation="horizontal"]', {
+  height: '1px',
+  width: '100%',
+  margin: `${vars.spacing.sm} 0`,
+  background:
+    'linear-gradient(90deg, transparent, rgba(97, 166, 232, 0.4), transparent)',
+});
+
+globalStyle('.zylem-separator[data-orientation="vertical"]', {
+  width: '1px',
+  alignSelf: 'stretch',
+  margin: `0 ${vars.spacing.sm}`,
+  background:
+    'linear-gradient(180deg, transparent, rgba(97, 166, 232, 0.4), transparent)',
+});

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,18 @@
+import { Separator as KSeparator } from '@kobalte/core';
+
+export interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  class?: string;
+}
+
+/**
+ * HyperGlass separator: soft electric-blue gradient rule.
+ */
+export function Separator(props: SeparatorProps) {
+  return (
+    <KSeparator.Root
+      class={props.class ? `zylem-separator ${props.class}` : 'zylem-separator'}
+      orientation={props.orientation}
+    />
+  );
+}