@nukleas/cyberdesign 0.1.0

package/src/react/Stat.tsx

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface StatProps extends HTMLAttributes<HTMLDivElement> {
+  /** Uppercase caption above the value. */
+  label: ReactNode;
+  /** The headline metric. */
+  value: ReactNode;
+  /** Secondary change/context line below the value. */
+  delta?: ReactNode;
+  /** Tints the delta green (`up`) or red (`down`). */
+  trend?: 'up' | 'down';
+  /** Color treatment for the value. Default is the neon-green metric look. */
+  variant?: 'default' | 'accent' | 'red' | 'yellow' | 'blue' | 'magenta';
+}
+
+/** Metric block — uppercase label, neon value and optional trend delta. */
+export function Stat({
+  label,
+  value,
+  delta,
+  trend,
+  variant = 'default',
+  className = '',
+  ...rest
+}: StatProps) {
+  return (
+    <div
+      className={cx('cd-stat', variant !== 'default' && `cd-stat--${variant}`, className)}
+      {...rest}
+    >
+      <span className="cd-stat__label">{label}</span>
+      <span className="cd-stat__value">{value}</span>
+      {delta != null && (
+        <span className={cx('cd-stat__delta', trend && `cd-stat__delta--${trend}`)}>{delta}</span>
+      )}
+    </div>
+  );
+}
+
+/** Grid container that separates `Stat` cards with 1px border lines. */
+export function StatGrid({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cx('cd-stats', className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+Stat.Grid = StatGrid;

package/src/react/Switch.tsx

@@ -0,0 +1,25 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface SwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /** `sm` is the compact track; default is the standard size. */
+  size?: 'sm' | 'md';
+  /** Text shown beside the toggle. */
+  label?: ReactNode;
+}
+
+/** Toggle switch — visually-hidden checkbox driving a neon track + thumb. */
+export function Switch({ size = 'md', label, className = '', ...rest }: SwitchProps) {
+  return (
+    <label className={cx('cd-switch', size === 'sm' && 'cd-switch--sm', className)}>
+      <input type="checkbox" className="cd-switch__input" {...rest} />
+      <span className="cd-switch__track">
+        <span className="cd-switch__thumb" />
+      </span>
+      {label != null && <span className="cd-switch__label">{label}</span>}
+    </label>
+  );
+}

package/src/react/Table.tsx

@@ -0,0 +1,144 @@
+import type {
+  HTMLAttributes,
+  TableHTMLAttributes,
+  ThHTMLAttributes,
+  TdHTMLAttributes,
+  ReactNode,
+} from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  /** Tighter padding and smaller type. */
+  compact?: boolean;
+  /** Draw cell borders. */
+  bordered?: boolean;
+  /** Wrap the table in a horizontally-scrollable `cd-table-wrap` container. */
+  scroll?: boolean;
+  /** Props forwarded to the wrapping `cd-table-wrap` div when `scroll` is set. */
+  wrapProps?: HTMLAttributes<HTMLDivElement>;
+  children?: ReactNode;
+}
+
+/** Cyber data table — accent uppercase headers, status dots, numeric cells. Compose with Table.Head/Body/Row/HeaderCell/Cell. */
+export function Table({
+  compact = false,
+  bordered = false,
+  scroll = false,
+  wrapProps,
+  className = '',
+  children,
+  ...rest
+}: TableProps) {
+  const table = (
+    <table
+      className={cx(
+        'cd-table',
+        compact && 'cd-table--compact',
+        bordered && 'cd-table--bordered',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </table>
+  );
+
+  if (!scroll) return table;
+
+  const { className: wrapClassName = '', ...wrapRest } = wrapProps ?? {};
+  return (
+    <div className={cx('cd-table-wrap', wrapClassName)} {...wrapRest}>
+      {table}
+    </div>
+  );
+}
+
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+/** `<thead>` group for the table header row(s). */
+function TableHead({ children, ...rest }: TableHeadProps) {
+  return <thead {...rest}>{children}</thead>;
+}
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+/** `<tbody>` group for the table data rows. */
+function TableBody({ children, ...rest }: TableBodyProps) {
+  return <tbody {...rest}>{children}</tbody>;
+}
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+}
+
+/** `<tr>` table row. */
+function TableRow({ children, ...rest }: TableRowProps) {
+  return <tr {...rest}>{children}</tr>;
+}
+
+export interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+  /** Right-aligned tabular-numeric header cell (`cd-table__num`). */
+  numeric?: boolean;
+  /** Mark column sortable; `'asc'`/`'desc'` show a direction arrow (sets `data-sort`). */
+  sort?: boolean | 'asc' | 'desc';
+  children?: ReactNode;
+}
+
+/** `<th>` header cell — supports numeric alignment and a sortable `data-sort` indicator. */
+function TableHeaderCell({
+  numeric = false,
+  sort,
+  className = '',
+  children,
+  ...rest
+}: TableHeaderCellProps) {
+  const dataSort = sort === true ? '' : sort || undefined;
+  return (
+    <th
+      className={cx(numeric && 'cd-table__num', className)}
+      data-sort={dataSort}
+      {...rest}
+    >
+      {children}
+    </th>
+  );
+}
+
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  /** Right-aligned tabular-numeric, accent-colored cell (`cd-table__num`). */
+  numeric?: boolean;
+  /** Status dot prefix (sets `data-status`). */
+  status?: 'ok' | 'warn' | 'err' | 'idle';
+  children?: ReactNode;
+}
+
+/** `<td>` data cell — supports numeric alignment and a leading status dot. */
+function TableCell({
+  numeric = false,
+  status,
+  className = '',
+  children,
+  ...rest
+}: TableCellProps) {
+  return (
+    <td
+      className={cx(numeric && 'cd-table__num', className)}
+      data-status={status}
+      {...rest}
+    >
+      {children}
+    </td>
+  );
+}
+
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;

package/src/react/Tabs.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface TabItem {
+  /** Tab label (also the trigger text). */
+  label: ReactNode;
+  /** Panel content shown when this tab is active. */
+  content?: ReactNode;
+  /** Optional trailing badge node in the trigger (e.g. a count). */
+  badge?: ReactNode;
+  /** Disable selection of this tab. */
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  /** The tabs to render, in order. */
+  items: TabItem[];
+  /** Layout style: underline (default), pills, or vertical. */
+  variant?: 'underline' | 'pills' | 'vertical';
+  /** Index of the initially-active tab (uncontrolled). */
+  defaultActive?: number;
+  /** Controlled active index. When set, `onTabChange` should update it. */
+  active?: number;
+  /** Fires with the new index when a tab is selected. */
+  onTabChange?: (index: number) => void;
+  /** Hide the panels region (trigger-only, e.g. a filter bar). */
+  hidePanels?: boolean;
+  className?: string;
+}
+
+/** Tabbed navigation — underline / pills / vertical, with optional badges and panels. */
+export function Tabs({
+  items,
+  variant = 'underline',
+  defaultActive = 0,
+  active,
+  onTabChange,
+  hidePanels = false,
+  className = '',
+}: TabsProps) {
+  const [internal, setInternal] = useState(defaultActive);
+  const current = active ?? internal;
+
+  const select = (i: number) => {
+    if (items[i]?.disabled) return;
+    if (active == null) setInternal(i);
+    onTabChange?.(i);
+  };
+
+  return (
+    <div
+      className={cx(
+        'cd-tabs',
+        variant === 'pills' && 'cd-tabs--pills',
+        variant === 'vertical' && 'cd-tabs--vertical',
+        className,
+      )}
+    >
+      <div className="cd-tabs__list" role="tablist">
+        {items.map((item, i) => (
+          <button
+            key={i}
+            type="button"
+            role="tab"
+            aria-selected={i === current}
+            disabled={item.disabled}
+            className={cx('cd-tabs__trigger', i === current && 'is-active')}
+            onClick={() => select(i)}
+          >
+            {item.label}
+            {item.badge != null && (
+              <span className="cd-badge cd-badge--orange" style={{ marginLeft: 4 }}>
+                {item.badge}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+      {!hidePanels && (
+        <div className="cd-tabs__panels">
+          {items.map((item, i) => (
+            <div
+              key={i}
+              role="tabpanel"
+              className={cx('cd-tabs__panel', i === current && 'is-active')}
+            >
+              {item.content}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/Terminal.tsx

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+/** Semantic line kinds — map to `cd-terminal__line--*` modifiers. */
+export type TerminalLineType = 'system' | 'prompt' | 'command' | 'output' | 'error';
+
+export interface TerminalLine {
+  /** Line text content. */
+  text: ReactNode;
+  /** Line kind; omit for the default (plain) line. */
+  type?: TerminalLineType;
+  /** Prompt glyph shown before the text (for `prompt` lines, e.g. `root@net> `). */
+  prompt?: ReactNode;
+}
+
+export interface TerminalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Header title text (theme-accent colored). Omit to hide the header. */
+  title?: ReactNode;
+  /** Show the min/max/close window control dots in the header. */
+  controls?: boolean;
+  /** The log lines to render in the body. */
+  lines?: TerminalLine[];
+  /** Tighter spacing / smaller type. */
+  compact?: boolean;
+  /** Extra CRT inner scanline overlay. */
+  crt?: boolean;
+  /** Render a bottom command input row. */
+  input?: boolean;
+  /** Prompt glyph shown before the input field. */
+  inputPrompt?: ReactNode;
+  /** Props forwarded to the input field element. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  /** Extra body content rendered after `lines`. */
+  children?: ReactNode;
+}
+
+/** Cyberpunk terminal/console window — header, scrollable log body and optional command input. */
+export function Terminal({
+  title,
+  controls = false,
+  lines = [],
+  compact = false,
+  crt = false,
+  input = false,
+  inputPrompt = 'root@net> ',
+  inputProps,
+  className = '',
+  children,
+  ...rest
+}: TerminalProps) {
+  return (
+    <div
+      className={cx(
+        'cd-terminal',
+        compact && 'cd-terminal--compact',
+        crt && 'cd-terminal--crt',
+        className,
+      )}
+      {...rest}
+    >
+      {(title != null || controls) && (
+        <div className="cd-terminal__header">
+          {title != null && <span className="cd-terminal__title">{title}</span>}
+          {controls && (
+            <div className="cd-terminal__controls">
+              <span className="cd-terminal__dot cd-terminal__dot--min" title="Minimize" />
+              <span className="cd-terminal__dot cd-terminal__dot--max" title="Maximize" />
+              <span className="cd-terminal__dot cd-terminal__dot--close" title="Close" />
+            </div>
+          )}
+        </div>
+      )}
+      <div className="cd-terminal__body cd-scrollbar">
+        {lines.map((line, i) => (
+          <div
+            key={i}
+            className={cx('cd-terminal__line', line.type && `cd-terminal__line--${line.type}`)}
+          >
+            {line.prompt != null && <span className="cd-terminal__prompt">{line.prompt}</span>}
+            {line.text}
+          </div>
+        ))}
+        {children}
+      </div>
+      {input && (
+        <div className="cd-terminal__input">
+          {inputPrompt != null && <span className="cd-terminal__prompt">{inputPrompt}</span>}
+          <input className="cd-terminal__field" placeholder="type command..." {...inputProps} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/Textarea.tsx

@@ -0,0 +1,20 @@
+import type { TextareaHTMLAttributes } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface TextareaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Error state — red border. */
+  error?: boolean;
+}
+
+/** Cyber multi-line text area — vertical resize, neon focus ring, error state. */
+export function Textarea({ error = false, className = '', ...rest }: TextareaProps) {
+  return (
+    <textarea
+      className={cx('cd-textarea', error && 'cd-textarea--error', className)}
+      {...rest}
+    />
+  );
+}

package/src/react/Ticker.tsx

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface TickerProps extends HTMLAttributes<HTMLDivElement> {
+  /** The feed items to scroll, in order. */
+  items: ReactNode[];
+  /** Scroll speed; `fast` ≈ 9s, `slow` ≈ 32s (default ≈ 18s). */
+  speed?: 'fast' | 'slow';
+  /** Shorthand for `speed="fast"`. */
+  fast?: boolean;
+  /** Scroll vertically instead of horizontally. */
+  vertical?: boolean;
+}
+
+/** Auto-scrolling data ticker / feed — pauses on hover, respects reduced motion. */
+export function Ticker({
+  items,
+  speed,
+  fast = false,
+  vertical = false,
+  className = '',
+  ...rest
+}: TickerProps) {
+  const resolvedSpeed = fast ? 'fast' : speed;
+  return (
+    <div
+      className={cx(
+        'cd-ticker',
+        resolvedSpeed && `cd-ticker--${resolvedSpeed}`,
+        vertical && 'cd-ticker--vertical',
+        className,
+      )}
+      {...rest}
+    >
+      <div className="cd-ticker__inner">
+        {items.map((item, i) => (
+          <span key={i} className="cd-ticker__item">
+            {item}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/react/Toast.tsx

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Semantic color. `accent` follows the active theme accent. */
+  variant?: 'info' | 'success' | 'warning' | 'error' | 'accent';
+  /** Leading glyph (e.g. ℹ ✓ ⚠ ✕ ⬡). */
+  icon?: ReactNode;
+  /** Bold uppercase heading line. */
+  title?: ReactNode;
+  /** When provided, renders a dismiss ✕ that calls this on click. */
+  onDismiss?: () => void;
+  /** Message body. */
+  children?: ReactNode;
+}
+
+/** Single notification toast — semantic color, icon, title/body and optional dismiss. */
+export function Toast({
+  variant = 'info',
+  icon,
+  title,
+  onDismiss,
+  className = '',
+  children,
+  ...rest
+}: ToastProps) {
+  return (
+    <div className={cx('cd-toast', `cd-toast--${variant}`, className)} {...rest}>
+      {icon != null && <span className="cd-toast__icon">{icon}</span>}
+      <div className="cd-toast__content">
+        {title != null && <div className="cd-toast__title">{title}</div>}
+        {children != null && <div className="cd-toast__body">{children}</div>}
+      </div>
+      {onDismiss && (
+        <button className="cd-toast__dismiss" onClick={onDismiss} aria-label="Dismiss">
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}

package/src/react/Tooltip.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const cx = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(' ');
+
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+  /** Tooltip text shown on hover (rendered via the `data-tip` attribute). */
+  tip: string;
+  /** Show the tooltip below the trigger instead of above. */
+  below?: boolean;
+  /** The trigger content the tooltip wraps. */
+  children?: ReactNode;
+}
+
+/** CSS-only tooltip — wraps a trigger and reveals `tip` text on hover. */
+export function Tooltip({
+  tip,
+  below = false,
+  className = '',
+  children,
+  ...rest
+}: TooltipProps) {
+  return (
+    <span
+      className={cx('cd-tooltip', below && 'cd-tooltip--below', className)}
+      data-tip={tip}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}

package/src/react/index.ts

@@ -0,0 +1,52 @@
+// cyberdesign React bindings — thin wrappers over the cd-* CSS contract.
+// The look comes from dist/cyberdesign.css; these components only apply classes.
+
+export * from './GlowCard';
+
+// Primitives
+export * from './Button';
+export * from './AugButton';
+export * from './Badge';
+export * from './Kbd';
+export * from './Spinner';
+export * from './Skeleton';
+export * from './Avatar';
+
+// Form controls
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Switch';
+export * from './Slider';
+export * from './Label';
+export * from './Field';
+
+// Feedback & display
+export * from './Alert';
+export * from './Toast';
+export * from './Tooltip';
+export * from './Progress';
+export * from './Separator';
+export * from './PanelHeader';
+export * from './Stat';
+
+// Navigation & layout
+export * from './Tabs';
+export * from './Accordion';
+export * from './Breadcrumb';
+export * from './Pagination';
+export * from './Dropdown';
+export * from './Modal';
+export * from './Table';
+export * from './AugPanel';
+
+// Cyber / terminal
+export * from './Terminal';
+export * from './HudFrame';
+export * from './HudBar';
+export * from './Gauge';
+export * from './Ticker';
+export * from './Scanner';
+export * from './Interference';

package/src/tokens/base.ts

@@ -0,0 +1,48 @@
+export const palette = {
+  // Backgrounds — unified range from both source apps
+  bgBase:       '#05060a',   // AI-shell app's darkest
+  bgPanel:      '#0b0f18',   // AI-shell app bg-light / dashboard app panel midpoint
+  bgPanelHover: '#111827',   // AI-shell app bg-lighter / dashboard app hover midpoint
+  bgDark:       '#0a0a0c',   // dashboard app's darkest (kept for compat)
+
+  // Borders
+  borderDim:    '#1e1e24',   // dashboard app --color-border-dim
+  borderMid:    '#26324c',   // AI-shell app --border
+
+  // Text — warm (dashboard app) and cool (AI-shell app) variants both exposed
+  textPrimary:    '#e8e4e0', // dashboard app warm off-white
+  textPrimaryAlt: '#f2f7ff', // AI-shell app cool white
+  textSecondary:  '#a7b7d6', // AI-shell app --text-secondary
+  textMuted:      '#8a8078', // bumped for WCAG AA 4.5:1+ (was #706860)
+  textMutedAlt:   '#7a8599', // bumped for WCAG AA (was #687797, cooler variant)
+  textDim:        '#6a625c', // bumped for ~3.3:1 large/decorative text (was #4a4440)
+
+  // Orange family (dashboard app primary accent)
+  orange:  '#ff8800',  // normalized from #f80
+  amber:   '#ffaa00',  // normalized from #fa0
+  gold:    '#ffcc00',  // normalized from #fc0
+
+  // Cyan family (AI-shell app primary accent)
+  cyan:       '#47f6ff',
+  cyanBright: '#bdffff',
+
+  // Shared secondary accents
+  magenta:      '#ff2bd6',  // AI-shell app; close to dashboard app's #f0f
+  magentaAlt:   '#ff00ff',  // dashboard app pure magenta (kept as alias)
+  purple:       '#9d7cff',  // AI-shell app --purple / --violet
+  green:        '#00ff00',  // dashboard app pure green
+  greenBright:  '#52ff9f',  // AI-shell app --green-bright
+  red:          '#ff4444',  // dashboard app #f44
+  redAlt:       '#ff456c',  // AI-shell app --red
+  redBright:    '#ff7777',  // lighter red for accent-bright
+  blue:         '#4488ff',  // dashboard app #48f
+  blueAlt:      '#6aa8ff',  // AI-shell app --ai-blue
+  yellow:       '#f7ff5a',  // AI-shell app --viz-active
+
+  // Steel / metallic family
+  steel:        '#9aafc4',  // blue-grey steel
+  steelBright:  '#c8d8e8',  // chrome highlight
+
+  // Surface
+  surfaceGlass: 'rgba(11, 15, 24, 0.94)',
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,7 @@
+export { palette } from './base.js';
+export { semanticTokens } from './semantic.js';
+export { orangeTheme } from './themes/orange.js';
+export { cyanTheme } from './themes/cyan.js';
+export { greenTheme } from './themes/green.js';
+export { redTheme } from './themes/red.js';
+export { steelTheme } from './themes/steel.js';