@nukleas/cyberdesign 0.1.0

package/dist/react/Ticker.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Auto-scrolling data ticker / feed — pauses on hover, respects reduced motion. */
+export function Ticker({ items, speed, fast = false, vertical = false, className = '', ...rest }) {
+    const resolvedSpeed = fast ? 'fast' : speed;
+    return (_jsx("div", { className: cx('cd-ticker', resolvedSpeed && `cd-ticker--${resolvedSpeed}`, vertical && 'cd-ticker--vertical', className), ...rest, children: _jsx("div", { className: "cd-ticker__inner", children: items.map((item, i) => (_jsx("span", { className: "cd-ticker__item", children: item }, i))) }) }));
+}

package/dist/react/Toast.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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 declare function Toast({ variant, icon, title, onDismiss, className, children, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/react/Toast.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Single notification toast — semantic color, icon, title/body and optional dismiss. */
+export function Toast({ variant = 'info', icon, title, onDismiss, className = '', children, ...rest }) {
+    return (_jsxs("div", { className: cx('cd-toast', `cd-toast--${variant}`, className), ...rest, children: [icon != null && _jsx("span", { className: "cd-toast__icon", children: icon }), _jsxs("div", { className: "cd-toast__content", children: [title != null && _jsx("div", { className: "cd-toast__title", children: title }), children != null && _jsx("div", { className: "cd-toast__body", children: children })] }), onDismiss && (_jsx("button", { className: "cd-toast__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u2715" }))] }));
+}

package/dist/react/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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 declare function Tooltip({ tip, below, className, children, ...rest }: TooltipProps): import("react").JSX.Element;

package/dist/react/Tooltip.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** CSS-only tooltip — wraps a trigger and reveals `tip` text on hover. */
+export function Tooltip({ tip, below = false, className = '', children, ...rest }) {
+    return (_jsx("span", { className: cx('cd-tooltip', below && 'cd-tooltip--below', className), "data-tip": tip, ...rest, children: children }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,39 @@
+export * from './GlowCard';
+export * from './Button';
+export * from './AugButton';
+export * from './Badge';
+export * from './Kbd';
+export * from './Spinner';
+export * from './Skeleton';
+export * from './Avatar';
+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';
+export * from './Alert';
+export * from './Toast';
+export * from './Tooltip';
+export * from './Progress';
+export * from './Separator';
+export * from './PanelHeader';
+export * from './Stat';
+export * from './Tabs';
+export * from './Accordion';
+export * from './Breadcrumb';
+export * from './Pagination';
+export * from './Dropdown';
+export * from './Modal';
+export * from './Table';
+export * from './AugPanel';
+export * from './Terminal';
+export * from './HudFrame';
+export * from './HudBar';
+export * from './Gauge';
+export * from './Ticker';
+export * from './Scanner';
+export * from './Interference';

package/dist/react/index.js

@@ -0,0 +1,46 @@
+// 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/dist/tailwind-theme.css

@@ -0,0 +1,171 @@
+/* cyberdesign v0.1.0 — generated by build.ts, DO NOT EDIT */
+
+/* Import this in your globals.css after @import "tailwindcss" */
+
+/* 1. Load CSS variables */
+:root {
+  --cd-bg: #05060a;
+  --cd-bg-panel: #0b0f18;
+  --cd-bg-panel-hover: #111827;
+  --cd-bg-surface: rgba(11, 15, 24, 0.94);
+  --cd-border: #26324c;
+  --cd-border-dim: #1e1e24;
+  --cd-text: #e8e4e0;
+  --cd-text-alt: #f2f7ff;
+  --cd-text-secondary: #a7b7d6;
+  --cd-text-muted: #8a8078;
+  --cd-text-muted-alt: #7a8599;
+  --cd-text-dim: #6a625c;
+  --cd-accent-secondary: #ff2bd6;
+  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
+  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
+  --cd-neon-green: #52ff9f;
+  --cd-neon-red: #ff456c;
+  --cd-neon-blue: #6aa8ff;
+  --cd-neon-purple: #9d7cff;
+  --cd-neon-yellow: #f7ff5a;
+  --cd-neon-amber: #ffaa00;
+  --cd-neon-orange: #ff8800;
+  --cd-neon-cyan: #47f6ff;
+  --cd-neon-magenta: #ff2bd6;
+  --cd-orange: #ff8800;
+  --cd-amber: #ffaa00;
+  --cd-gold: #ffcc00;
+  --cd-cyan: #47f6ff;
+  --cd-magenta: #ff2bd6;
+  --cd-purple: #9d7cff;
+  --cd-green: #52ff9f;
+  --cd-red: #ff456c;
+  --cd-blue: #6aa8ff;
+  --cd-yellow: #f7ff5a;
+  --cd-scanline-color: rgba(0, 0, 0, 0.18);
+  --cd-pixel-grid-color: rgba(71, 246, 255, 0.055);
+  --cd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
+  --cd-text-xs: 0.6875rem;
+  --cd-text-sm: 0.75rem;
+  --cd-text-base: 0.8125rem;
+  --cd-text-md: 0.875rem;
+  --cd-text-lg: 0.9375rem;
+}
+
+.theme-orange {
+  --cd-accent: #ff8800;
+  --cd-accent-bright: #ffaa00;
+  --cd-accent-subtle: rgba(255, 136, 0, 0.12);
+  --cd-accent-glow: rgba(255, 136, 0, 0.40);
+  --cd-accent-subtle-glow: rgba(255, 136, 0, 0.20);
+  --cd-border-glow: rgba(255, 136, 0, 0.20);
+  --cd-scrollbar-thumb: rgba(255, 136, 0, 0.20);
+  --cd-panel-shadow: inset 0 0 0 1px rgba(255, 136, 0, 0.04), 0 0 24px rgba(255, 136, 0, 0.07);
+  --cd-accent-secondary: #ff2bd6;
+  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
+  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
+}
+
+.theme-cyan {
+  --cd-accent: #47f6ff;
+  --cd-accent-bright: #bdffff;
+  --cd-accent-subtle: rgba(71, 246, 255, 0.12);
+  --cd-accent-glow: rgba(71, 246, 255, 0.34);
+  --cd-accent-subtle-glow: rgba(71, 246, 255, 0.20);
+  --cd-border-glow: rgba(71, 246, 255, 0.20);
+  --cd-scrollbar-thumb: rgba(71, 246, 255, 0.20);
+  --cd-panel-shadow: inset 0 0 0 1px rgba(71, 246, 255, 0.04), 0 0 24px rgba(71, 246, 255, 0.07);
+  --cd-accent-secondary: #ff2bd6;
+  --cd-accent-secondary-glow: rgba(255, 43, 214, 0.32);
+  --cd-accent-secondary-subtle: rgba(255, 43, 214, 0.12);
+}
+
+.theme-green {
+  --cd-accent: #00ff00;
+  --cd-accent-bright: #52ff9f;
+  --cd-accent-subtle: rgba(0, 255, 0, 0.12);
+  --cd-accent-glow: rgba(0, 255, 0, 0.34);
+  --cd-accent-subtle-glow: rgba(0, 255, 0, 0.20);
+  --cd-border-glow: rgba(0, 255, 0, 0.20);
+  --cd-scrollbar-thumb: rgba(0, 255, 0, 0.20);
+  --cd-panel-shadow: inset 0 0 0 1px rgba(0, 255, 0, 0.04), 0 0 24px rgba(0, 255, 0, 0.07);
+  --cd-accent-secondary: #9d7cff;
+  --cd-accent-secondary-glow: rgba(157, 124, 255, 0.32);
+  --cd-accent-secondary-subtle: rgba(157, 124, 255, 0.12);
+}
+
+.theme-red {
+  --cd-accent: #ff4444;
+  --cd-accent-bright: #ff7777;
+  --cd-accent-subtle: rgba(255, 68, 68, 0.12);
+  --cd-accent-glow: rgba(255, 68, 68, 0.34);
+  --cd-accent-subtle-glow: rgba(255, 68, 68, 0.20);
+  --cd-border-glow: rgba(255, 68, 68, 0.20);
+  --cd-scrollbar-thumb: rgba(255, 68, 68, 0.20);
+  --cd-panel-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.04), 0 0 24px rgba(255, 68, 68, 0.07);
+  --cd-accent-secondary: #6aa8ff;
+  --cd-accent-secondary-glow: rgba(106, 168, 255, 0.32);
+  --cd-accent-secondary-subtle: rgba(106, 168, 255, 0.12);
+}
+
+.theme-steel {
+  --cd-accent: #9aafc4;
+  --cd-accent-bright: #c8d8e8;
+  --cd-accent-subtle: rgba(154, 175, 196, 0.12);
+  --cd-accent-glow: rgba(154, 175, 196, 0.28);
+  --cd-accent-subtle-glow: rgba(154, 175, 196, 0.16);
+  --cd-border-glow: rgba(154, 175, 196, 0.18);
+  --cd-scrollbar-thumb: rgba(154, 175, 196, 0.20);
+  --cd-panel-shadow: inset 0 0 0 1px rgba(154, 175, 196, 0.06), 0 0 24px rgba(154, 175, 196, 0.06);
+  --cd-accent-secondary: #ffaa00;
+  --cd-accent-secondary-glow: rgba(255, 170, 0, 0.28);
+  --cd-accent-secondary-subtle: rgba(255, 170, 0, 0.12);
+}
+
+/* 2. Expose tokens to Tailwind v4 */
+@theme inline {
+  --color-cd-bg: var(--cd-bg);
+  --color-cd-bg-panel: var(--cd-bg-panel);
+  --color-cd-bg-panel-hover: var(--cd-bg-panel-hover);
+  --color-cd-bg-surface: var(--cd-bg-surface);
+  --color-cd-border: var(--cd-border);
+  --color-cd-border-dim: var(--cd-border-dim);
+  --color-cd-text: var(--cd-text);
+  --color-cd-text-alt: var(--cd-text-alt);
+  --color-cd-text-secondary: var(--cd-text-secondary);
+  --color-cd-text-muted: var(--cd-text-muted);
+  --color-cd-text-muted-alt: var(--cd-text-muted-alt);
+  --color-cd-text-dim: var(--cd-text-dim);
+  --color-cd-accent-secondary: var(--cd-accent-secondary);
+  --color-cd-accent-secondary-glow: var(--cd-accent-secondary-glow);
+  --color-cd-accent-secondary-subtle: var(--cd-accent-secondary-subtle);
+  --color-cd-neon-green: var(--cd-neon-green);
+  --color-cd-neon-red: var(--cd-neon-red);
+  --color-cd-neon-blue: var(--cd-neon-blue);
+  --color-cd-neon-purple: var(--cd-neon-purple);
+  --color-cd-neon-yellow: var(--cd-neon-yellow);
+  --color-cd-neon-amber: var(--cd-neon-amber);
+  --color-cd-neon-orange: var(--cd-neon-orange);
+  --color-cd-neon-cyan: var(--cd-neon-cyan);
+  --color-cd-neon-magenta: var(--cd-neon-magenta);
+  --color-cd-orange: var(--cd-orange);
+  --color-cd-amber: var(--cd-amber);
+  --color-cd-gold: var(--cd-gold);
+  --color-cd-cyan: var(--cd-cyan);
+  --color-cd-magenta: var(--cd-magenta);
+  --color-cd-purple: var(--cd-purple);
+  --color-cd-green: var(--cd-green);
+  --color-cd-red: var(--cd-red);
+  --color-cd-blue: var(--cd-blue);
+  --color-cd-yellow: var(--cd-yellow);
+  --color-cd-text-xs: var(--cd-text-xs);
+  --color-cd-text-sm: var(--cd-text-sm);
+  --color-cd-text-base: var(--cd-text-base);
+  --color-cd-text-md: var(--cd-text-md);
+  --color-cd-text-lg: var(--cd-text-lg);
+  --color-cd-accent: var(--cd-accent);
+  --color-cd-accent-bright: var(--cd-accent-bright);
+  --color-cd-accent-subtle: var(--cd-accent-subtle);
+  --color-cd-accent-glow: var(--cd-accent-glow);
+  --color-cd-accent-subtle-glow: var(--cd-accent-subtle-glow);
+  --color-cd-border-glow: var(--cd-border-glow);
+  --color-cd-scrollbar-thumb: var(--cd-scrollbar-thumb);
+  --color-cd-panel-shadow: var(--cd-panel-shadow);
+  --font-cd-mono: var(--cd-font-mono);
+}

package/dist/tokens/base.d.ts

@@ -0,0 +1,33 @@
+export declare const palette: {
+    readonly bgBase: "#05060a";
+    readonly bgPanel: "#0b0f18";
+    readonly bgPanelHover: "#111827";
+    readonly bgDark: "#0a0a0c";
+    readonly borderDim: "#1e1e24";
+    readonly borderMid: "#26324c";
+    readonly textPrimary: "#e8e4e0";
+    readonly textPrimaryAlt: "#f2f7ff";
+    readonly textSecondary: "#a7b7d6";
+    readonly textMuted: "#8a8078";
+    readonly textMutedAlt: "#7a8599";
+    readonly textDim: "#6a625c";
+    readonly orange: "#ff8800";
+    readonly amber: "#ffaa00";
+    readonly gold: "#ffcc00";
+    readonly cyan: "#47f6ff";
+    readonly cyanBright: "#bdffff";
+    readonly magenta: "#ff2bd6";
+    readonly magentaAlt: "#ff00ff";
+    readonly purple: "#9d7cff";
+    readonly green: "#00ff00";
+    readonly greenBright: "#52ff9f";
+    readonly red: "#ff4444";
+    readonly redAlt: "#ff456c";
+    readonly redBright: "#ff7777";
+    readonly blue: "#4488ff";
+    readonly blueAlt: "#6aa8ff";
+    readonly yellow: "#f7ff5a";
+    readonly steel: "#9aafc4";
+    readonly steelBright: "#c8d8e8";
+    readonly surfaceGlass: "rgba(11, 15, 24, 0.94)";
+};

package/dist/tokens/base.js

@@ -0,0 +1,41 @@
+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)',
+};

package/dist/tokens/index.d.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';

package/dist/tokens/index.js

@@ -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';

package/dist/tokens/semantic.d.ts

@@ -0,0 +1 @@
+export declare const semanticTokens: Record<string, string>;

package/dist/tokens/semantic.js

@@ -0,0 +1,54 @@
+import { palette } from './base.js';
+export const semanticTokens = {
+    // Backgrounds
+    'bg': palette.bgBase,
+    'bg-panel': palette.bgPanel,
+    'bg-panel-hover': palette.bgPanelHover,
+    'bg-surface': palette.surfaceGlass,
+    // Borders
+    'border': palette.borderMid,
+    'border-dim': palette.borderDim,
+    // Text
+    'text': palette.textPrimary,
+    'text-alt': palette.textPrimaryAlt,
+    'text-secondary': palette.textSecondary,
+    'text-muted': palette.textMuted,
+    'text-muted-alt': palette.textMutedAlt,
+    'text-dim': palette.textDim,
+    // Secondary accent — magenta, consistent across all themes
+    'accent-secondary': palette.magenta,
+    'accent-secondary-glow': 'rgba(255, 43, 214, 0.32)',
+    'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+    // Supporting neon palette (for explicit color-coded categories)
+    'neon-green': palette.greenBright,
+    'neon-red': palette.redAlt,
+    'neon-blue': palette.blueAlt,
+    'neon-purple': palette.purple,
+    'neon-yellow': palette.yellow,
+    'neon-amber': palette.amber,
+    'neon-orange': palette.orange,
+    'neon-cyan': palette.cyan,
+    'neon-magenta': palette.magenta,
+    // Raw palette exposed for explicit use (category color maps, etc.)
+    'orange': palette.orange,
+    'amber': palette.amber,
+    'gold': palette.gold,
+    'cyan': palette.cyan,
+    'magenta': palette.magenta,
+    'purple': palette.purple,
+    'green': palette.greenBright,
+    'red': palette.redAlt,
+    'blue': palette.blueAlt,
+    'yellow': palette.yellow,
+    // CRT / effects
+    'scanline-color': 'rgba(0, 0, 0, 0.18)',
+    'pixel-grid-color': 'rgba(71, 246, 255, 0.055)',
+    // Font
+    'font-mono': '"JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace',
+    // Typography scale (rem-based for accessibility + user font scaling)
+    'text-xs': '0.6875rem', // ~11px — dense labels, badges, kbd
+    'text-sm': '0.75rem', // ~12px — current "body"/inputs (transition)
+    'text-base': '0.8125rem', // ~13px — improved readable body, modals
+    'text-md': '0.875rem', // ~14px — larger headings/titles
+    'text-lg': '0.9375rem', // ~15px — prominent display
+};

package/dist/tokens/themes/cyan.d.ts

@@ -0,0 +1 @@
+export declare const cyanTheme: Record<string, string>;

package/dist/tokens/themes/cyan.js

@@ -0,0 +1,15 @@
+import { palette } from '../base.js';
+export const cyanTheme = {
+    'accent': palette.cyan,
+    'accent-bright': palette.cyanBright,
+    'accent-subtle': 'rgba(71, 246, 255, 0.12)',
+    'accent-glow': 'rgba(71, 246, 255, 0.34)',
+    'accent-subtle-glow': 'rgba(71, 246, 255, 0.20)',
+    'border-glow': 'rgba(71, 246, 255, 0.20)',
+    'scrollbar-thumb': 'rgba(71, 246, 255, 0.20)',
+    'panel-shadow': 'inset 0 0 0 1px rgba(71, 246, 255, 0.04), 0 0 24px rgba(71, 246, 255, 0.07)',
+    // complement: magenta — CMY pairing
+    'accent-secondary': '#ff2bd6',
+    'accent-secondary-glow': 'rgba(255, 43, 214, 0.32)',
+    'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+};

package/dist/tokens/themes/green.d.ts

@@ -0,0 +1 @@
+export declare const greenTheme: Record<string, string>;

package/dist/tokens/themes/green.js

@@ -0,0 +1,15 @@
+import { palette } from '../base.js';
+export const greenTheme = {
+    'accent': palette.green,
+    'accent-bright': palette.greenBright,
+    'accent-subtle': 'rgba(0, 255, 0, 0.12)',
+    'accent-glow': 'rgba(0, 255, 0, 0.34)',
+    'accent-subtle-glow': 'rgba(0, 255, 0, 0.20)',
+    'border-glow': 'rgba(0, 255, 0, 0.20)',
+    'scrollbar-thumb': 'rgba(0, 255, 0, 0.20)',
+    'panel-shadow': 'inset 0 0 0 1px rgba(0, 255, 0, 0.04), 0 0 24px rgba(0, 255, 0, 0.07)',
+    // complement: purple — avoids green+magenta clash
+    'accent-secondary': '#9d7cff',
+    'accent-secondary-glow': 'rgba(157, 124, 255, 0.32)',
+    'accent-secondary-subtle': 'rgba(157, 124, 255, 0.12)',
+};

package/dist/tokens/themes/orange.d.ts

@@ -0,0 +1 @@
+export declare const orangeTheme: Record<string, string>;

package/dist/tokens/themes/orange.js

@@ -0,0 +1,15 @@
+import { palette } from '../base.js';
+export const orangeTheme = {
+    'accent': palette.orange,
+    'accent-bright': palette.amber,
+    'accent-subtle': 'rgba(255, 136, 0, 0.12)',
+    'accent-glow': 'rgba(255, 136, 0, 0.40)',
+    'accent-subtle-glow': 'rgba(255, 136, 0, 0.20)',
+    'border-glow': 'rgba(255, 136, 0, 0.20)',
+    'scrollbar-thumb': 'rgba(255, 136, 0, 0.20)',
+    'panel-shadow': 'inset 0 0 0 1px rgba(255, 136, 0, 0.04), 0 0 24px rgba(255, 136, 0, 0.07)',
+    // complement: magenta (default — no override needed but explicit for clarity)
+    'accent-secondary': '#ff2bd6',
+    'accent-secondary-glow': 'rgba(255, 43, 214, 0.32)',
+    'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+};

package/dist/tokens/themes/red.d.ts

@@ -0,0 +1 @@
+export declare const redTheme: Record<string, string>;

package/dist/tokens/themes/red.js

@@ -0,0 +1,15 @@
+import { palette } from '../base.js';
+export const redTheme = {
+    'accent': palette.red,
+    'accent-bright': palette.redBright,
+    'accent-subtle': 'rgba(255, 68, 68, 0.12)',
+    'accent-glow': 'rgba(255, 68, 68, 0.34)',
+    'accent-subtle-glow': 'rgba(255, 68, 68, 0.20)',
+    'border-glow': 'rgba(255, 68, 68, 0.20)',
+    'scrollbar-thumb': 'rgba(255, 68, 68, 0.20)',
+    'panel-shadow': 'inset 0 0 0 1px rgba(255, 68, 68, 0.04), 0 0 24px rgba(255, 68, 68, 0.07)',
+    // complement: blue — cool contrast against hot red
+    'accent-secondary': '#6aa8ff',
+    'accent-secondary-glow': 'rgba(106, 168, 255, 0.32)',
+    'accent-secondary-subtle': 'rgba(106, 168, 255, 0.12)',
+};

package/dist/tokens/themes/steel.d.ts

@@ -0,0 +1 @@
+export declare const steelTheme: Record<string, string>;

package/dist/tokens/themes/steel.js

@@ -0,0 +1,15 @@
+import { palette } from '../base.js';
+export const steelTheme = {
+    'accent': palette.steel,
+    'accent-bright': palette.steelBright,
+    'accent-subtle': 'rgba(154, 175, 196, 0.12)',
+    'accent-glow': 'rgba(154, 175, 196, 0.28)',
+    'accent-subtle-glow': 'rgba(154, 175, 196, 0.16)',
+    'border-glow': 'rgba(154, 175, 196, 0.18)',
+    'scrollbar-thumb': 'rgba(154, 175, 196, 0.20)',
+    'panel-shadow': 'inset 0 0 0 1px rgba(154, 175, 196, 0.06), 0 0 24px rgba(154, 175, 196, 0.06)',
+    // complement: amber — warm tension against cool steel
+    'accent-secondary': '#ffaa00',
+    'accent-secondary-glow': 'rgba(255, 170, 0, 0.28)',
+    'accent-secondary-subtle': 'rgba(255, 170, 0, 0.12)',
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@nukleas/cyberdesign",
+  "version": "0.1.0",
+  "description": "Unified cyber/terminal design system — shared tokens, glow utilities, and component primitives",
+  "license": "MIT",
+  "author": "Nader Heidari <nukleas2001@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nukleas/cyberdesign.git",
+    "directory": "packages/cyberdesign"
+  },
+  "bugs": {
+    "url": "https://github.com/nukleas/cyberdesign/issues"
+  },
+  "homepage": "https://github.com/nukleas/cyberdesign/tree/master/packages/cyberdesign#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "cyberpunk",
+    "tokens",
+    "tailwind"
+  ],
+  "type": "module",
+  "files": [
+    "src/",
+    "dist/",
+    "build.ts"
+  ],
+  "types": "./dist/react/index.d.ts",
+  "exports": {
+    ".": "./dist/cyberdesign.css",
+    "./css": "./dist/cyberdesign.css",
+    "./vars": "./dist/cyberdesign-vars-only.css",
+    "./tailwind": "./dist/tailwind-theme.css",
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "default": "./dist/tokens/index.js"
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsx": "^4",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsx build.ts && tsc -p tsconfig.build.json",
+    "dev": "tsx --watch build.ts",
+    "demo": "npx --yes serve . -p 4980"
+  }
+}