@yugnex/nexui 2.0.0

package/src/primitives/spinner.ts

@@ -0,0 +1,71 @@
+// @yugnex/nexui — NexSpinner Web Component
+// Loading spinner. Lightweight — just CSS animation, no JS after render.
+// Attributes:
+//   size:  xs | sm | md | lg | xl (default: md)
+//   color: accent | live | success | error | muted (default: accent)
+//   label: accessible label (default: "Loading")
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexSpinner extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "label"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { this.render(); }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const size    = this.getAttribute("size") ?? "md";
+    const color   = this.getAttribute("color") ?? "accent";
+    const label   = this.getAttribute("label") ?? "Loading";
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const szMap: Record<string, { px: number; sw: number }> = {
+      xs: { px: 12, sw: 1.5 },
+      sm: { px: 16, sw: 2 },
+      md: { px: 24, sw: 2.5 },
+      lg: { px: 32, sw: 3 },
+      xl: { px: 48, sw: 3.5 },
+    };
+    const { px, sw } = szMap[size] ?? szMap.md;
+
+    const colorMap: Record<string, string> = {
+      accent:  "var(--nx-accent, #E89010)",
+      live:    "var(--nx-live, #0FD4C6)",
+      success: "var(--nx-success, #22C55E)",
+      error:   "var(--nx-error, #EF4444)",
+      muted:   "var(--nx-text-4, #484F58)",
+    };
+    const spinColor = colorMap[color] ?? colorMap.accent;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host { display: inline-flex; align-items: center; justify-content: center; }
+        .ring {
+          width: ${px}px;
+          height: ${px}px;
+          border-radius: 50%;
+          border: ${sw}px solid rgba(255,255,255,0.08);
+          border-top-color: ${spinColor};
+          animation: nx-spin 700ms linear infinite;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .ring { animation-duration: 2s; }
+        }
+        @keyframes nx-spin { to { transform: rotate(360deg); } }
+      </style>
+      <div class="ring" role="status" aria-label="${label}">
+        <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">${label}</span>
+      </div>
+    `;
+  }
+}

package/src/primitives/status-ring.ts

@@ -0,0 +1,109 @@
+// @yugnex/nexui — NexStatusRing Web Component
+// Circular progress ring with animated entry.
+// Attributes: score (0-100), label, color, size
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexStatusRing extends HTMLElement {
+  static get observedAttributes() {
+    return ["score", "label", "color", "size"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const score  = Math.min(100, Math.max(0, parseInt(this.getAttribute("score") ?? "0", 10)));
+    const label  = this.getAttribute("label") ?? "METRIC";
+    const color  = this.getAttribute("color") ?? "var(--nx-accent, #E89010)";
+    const size   = Math.max(40, parseInt(this.getAttribute("size") ?? "80", 10));
+
+    const cx = size / 2;
+    const cy = size / 2;
+    const radius = (size / 2) - (size * 0.075);
+    const sw     = size * 0.075;
+    const circumference = 2 * Math.PI * radius;
+    const targetOffset  = circumference - (score / 100) * circumference;
+    const fontSize      = Math.round(size * 0.175);
+    const labelSize     = Math.round(size * 0.08);
+    const themeCSS      = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    // Key technique: render at full offset (empty ring), then in the next frame
+    // update to the target offset so the CSS transition actually fires.
+    // Without this two-frame approach the element starts at the final value
+    // and the transition is never observed.
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
+        }
+        .ring-arc {
+          transition: stroke-dashoffset 700ms cubic-bezier(0, 0, 0.2, 1);
+          transform-origin: center;
+          transform: rotate(-90deg);
+        }
+        .label {
+          font-size: ${labelSize}px;
+          color: var(--nx-text-3, #6E7681);
+          margin-top: ${Math.round(size * 0.04)}px;
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
+          user-select: none;
+        }
+      </style>
+      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" aria-label="${label}: ${score}%" role="img">
+        <circle
+          cx="${cx}" cy="${cy}" r="${radius}"
+          fill="none"
+          stroke="var(--nx-border, rgba(255,255,255,0.08))"
+          stroke-width="${sw}"
+        />
+        <circle
+          class="ring-arc"
+          cx="${cx}" cy="${cy}" r="${radius}"
+          fill="none"
+          stroke="${color}"
+          stroke-width="${sw}"
+          stroke-linecap="round"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${circumference}"
+        />
+        <text
+          x="${cx}" y="${cy + fontSize * 0.35}"
+          text-anchor="middle"
+          fill="var(--nx-text, #E6EDF3)"
+          font-size="${fontSize}"
+          font-weight="600"
+          font-family="inherit"
+        >${score}</text>
+      </svg>
+      <div class="label">${label}</div>
+    `;
+
+    // Two-frame update triggers the CSS transition
+    const arc = this.shadowRoot.querySelector<SVGCircleElement>(".ring-arc");
+    if (arc) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          arc.style.strokeDashoffset = String(targetOffset);
+        });
+      });
+    }
+  }
+}

package/src/primitives/switch.ts

@@ -0,0 +1,134 @@
+// @yugnex/nexui — NexSwitch Web Component
+// Toggle switch with label and ARIA.
+// Attributes:
+//   checked:  boolean
+//   disabled: boolean
+//   label:    string
+//   size:     sm | md | lg
+//   color:    accent | live | success (default: accent)
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexSwitch extends HTMLElement {
+  private _checked = false;
+
+  static get observedAttributes() {
+    return ["checked", "disabled", "label", "size", "color"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this._checked = this.hasAttribute("checked");
+    this.render();
+    this.shadowRoot?.querySelector(".track")?.addEventListener("click", () => this.toggle());
+    this.shadowRoot?.querySelector(".track")?.addEventListener("keydown", (e) => {
+      if ((e as KeyboardEvent).key === " " || (e as KeyboardEvent).key === "Enter") {
+        e.preventDefault();
+        this.toggle();
+      }
+    });
+  }
+
+  attributeChangedCallback(name: string, _old: string, val: string) {
+    if (name === "checked") this._checked = val !== null;
+    this.render();
+  }
+
+  get checked() { return this._checked; }
+  set checked(v: boolean) {
+    this._checked = v;
+    v ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    this.render();
+  }
+
+  private toggle() {
+    if (this.hasAttribute("disabled")) return;
+    this.checked = !this._checked;
+    this.dispatchEvent(new CustomEvent("change", { detail: { checked: this._checked }, bubbles: true }));
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const size     = this.getAttribute("size") ?? "md";
+    const color    = this.getAttribute("color") ?? "accent";
+    const label    = this.getAttribute("label") ?? "";
+    const disabled = this.hasAttribute("disabled");
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const colorMap: Record<string, string> = {
+      accent:  "var(--nx-accent, #E89010)",
+      live:    "var(--nx-live, #0FD4C6)",
+      success: "var(--nx-success, #22C55E)",
+    };
+    const activeColor = colorMap[color] ?? colorMap.accent;
+
+    const dims = {
+      sm: { w: 28, h: 16, thumb: 12, fs: "11px" },
+      md: { w: 36, h: 20, thumb: 16, fs: "12px" },
+      lg: { w: 44, h: 24, thumb: 20, fs: "13px" },
+    };
+    const d = dims[size as keyof typeof dims] ?? dims.md;
+    const thumbTravel = d.w - d.thumb - 4;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host { display: inline-flex; align-items: center; gap: 8px; }
+        .track {
+          position: relative;
+          width: ${d.w}px;
+          height: ${d.h}px;
+          border-radius: 9999px;
+          background: ${this._checked ? activeColor : "var(--nx-bg-elevated, #1C2128)"};
+          border: 1px solid ${this._checked ? "transparent" : "var(--nx-border-strong, rgba(255,255,255,0.16))"};
+          cursor: ${disabled ? "not-allowed" : "pointer"};
+          opacity: ${disabled ? 0.45 : 1};
+          transition: background 150ms ease, border-color 150ms ease;
+          outline: none;
+          flex-shrink: 0;
+        }
+        .track:focus-visible {
+          box-shadow: 0 0 0 2px var(--nx-bg-base, #0D1117), 0 0 0 4px ${activeColor};
+        }
+        .thumb {
+          position: absolute;
+          top: 50%;
+          left: 2px;
+          transform: translateY(-50%) translateX(${this._checked ? `${thumbTravel}px` : "0"});
+          width: ${d.thumb}px;
+          height: ${d.thumb}px;
+          border-radius: 50%;
+          background: ${this._checked ? "var(--nx-bg-base, #0D1117)" : "var(--nx-text-4, #484F58)"};
+          transition: transform 150ms cubic-bezier(0.34,1.56,0.64,1), background 150ms ease;
+          pointer-events: none;
+        }
+        .label {
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-size: ${d.fs};
+          color: ${disabled ? "var(--nx-text-4, #484F58)" : "var(--nx-text-2, #8B949E)"};
+          user-select: none;
+          cursor: ${disabled ? "not-allowed" : "pointer"};
+        }
+      </style>
+      <div class="track" role="switch" aria-checked="${this._checked}" tabindex="${disabled ? -1 : 0}" part="track">
+        <div class="thumb" part="thumb"></div>
+      </div>
+      ${label ? `<span class="label" part="label">${label}</span>` : ""}
+    `;
+
+    // Re-attach events after innerHTML reset
+    const track = this.shadowRoot.querySelector(".track");
+    track?.addEventListener("click", () => this.toggle());
+    track?.addEventListener("keydown", (e) => {
+      if ((e as KeyboardEvent).key === " " || (e as KeyboardEvent).key === "Enter") {
+        e.preventDefault();
+        this.toggle();
+      }
+    });
+  }
+}

package/src/primitives/text-stream.ts

@@ -0,0 +1,187 @@
+// @yugnex/nexui — NexTextStream Web Component
+// Live log stream viewer with virtual tail rendering.
+// XSS-safe: all user content set via textContent, never innerHTML.
+// Performance: incremental DOM append, not full rebuild per message.
+
+import { nexui_compiler } from "../core/compiler";
+
+type LogFlag = "error" | "verify" | "system" | "warn" | "default";
+
+function detectFlag(text: string): LogFlag {
+  const lower = text.toLowerCase();
+  if (text.includes("🚨") || lower.includes("error") || lower.includes("fatal")) return "error";
+  if (text.includes("⚠") || lower.includes("warn"))                               return "warn";
+  if (text.includes("✓") || lower.includes("verified") || lower.includes("pass")) return "verify";
+  if (text.includes("✦") || lower.includes("system") || lower.includes("[sys]"))  return "system";
+  return "default";
+}
+
+const FLAG_COLORS: Record<LogFlag, string> = {
+  error:   "var(--nx-error,   #EF4444)",
+  warn:    "var(--nx-warning, #EAB308)",
+  verify:  "var(--nx-success, #22C55E)",
+  system:  "var(--nx-accent,  #E89010)",
+  default: "var(--nx-text,    #E6EDF3)",
+};
+
+export class NexTextStream extends HTMLElement {
+  private logBuffer: string[]  = [];
+  private lineElements: HTMLDivElement[] = [];
+  private viewport: HTMLDivElement | null = null;
+  private container: HTMLDivElement | null = null;
+  private lineCount = 0;
+
+  static readonly MAX_BUFFER   = 5000;
+  static readonly VISIBLE_ROWS = 50;
+
+  static get observedAttributes() {
+    return ["max-rows", "show-numbers"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.setupLayout();
+  }
+
+  attributeChangedCallback() {
+    // No re-render needed for these attrs — they affect future appends only
+  }
+
+  private setupLayout() {
+    if (!this.shadowRoot) return;
+
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const style = document.createElement("style");
+    style.textContent = `
+      ${themeCSS}
+      :host {
+        display: block;
+        background-color: var(--nx-bg-void, #040610);
+        border: 1px solid var(--nx-border, #1e293b);
+        border-radius: 6px;
+        padding: 12px;
+        font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
+        font-size: 11px;
+        line-height: 1.8;
+        color: var(--nx-text, #E6EDF3);
+        overflow: hidden;
+      }
+      .viewport {
+        max-height: 400px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255,255,255,0.12) transparent;
+      }
+      .viewport::-webkit-scrollbar       { width: 4px; }
+      .viewport::-webkit-scrollbar-track { background: transparent; }
+      .viewport::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
+      .row {
+        display: flex;
+        gap: 10px;
+        white-space: pre-wrap;
+        word-break: break-all;
+        padding: 1px 0;
+      }
+      .num {
+        color: var(--nx-text-4, #484F58);
+        user-select: none;
+        min-width: 36px;
+        text-align: right;
+        flex-shrink: 0;
+      }
+      .text {
+        flex: 1;
+        min-width: 0;
+      }
+    `;
+
+    const viewport = document.createElement("div");
+    viewport.className = "viewport";
+
+    const container = document.createElement("div");
+    container.setAttribute("aria-live", "polite");
+    container.setAttribute("aria-label", "Log stream");
+    viewport.appendChild(container);
+
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(viewport);
+
+    this.viewport  = viewport;
+    this.container = container;
+  }
+
+  /** Push a single log line. Safe for high-frequency calls (e.g. SSE tokens). */
+  public pushLogTrace(message: string) {
+    // Enforce buffer ceiling
+    if (this.logBuffer.length >= NexTextStream.MAX_BUFFER) {
+      this.logBuffer.shift();
+      // Remove the oldest visible row element
+      const oldest = this.lineElements.shift();
+      if (oldest && this.container) this.container.removeChild(oldest);
+    }
+
+    this.logBuffer.push(message);
+    this.lineCount++;
+    this.appendRow(message, this.lineCount);
+
+    // Trim visible rows beyond the virtual window
+    const maxVisible = parseInt(this.getAttribute("max-rows") ?? "50", 10);
+    while (this.lineElements.length > maxVisible) {
+      const old = this.lineElements.shift();
+      if (old && this.container) this.container.removeChild(old);
+    }
+
+    this.scrollToBottom();
+  }
+
+  /** Push multiple lines at once (batch). More efficient than repeated pushLogTrace. */
+  public pushBatch(messages: string[]) {
+    for (const msg of messages) this.pushLogTrace(msg);
+  }
+
+  /** Clear all log content. */
+  public clear() {
+    this.logBuffer = [];
+    this.lineElements = [];
+    this.lineCount = 0;
+    if (this.container) this.container.textContent = "";
+  }
+
+  private appendRow(text: string, lineNumber: number) {
+    if (!this.container) return;
+
+    const showNums = this.getAttribute("show-numbers") !== "false";
+    const flag     = detectFlag(text);
+    const color    = FLAG_COLORS[flag];
+
+    const row = document.createElement("div");
+    row.className = "row";
+
+    if (showNums) {
+      const num = document.createElement("span");
+      num.className = "num";
+      num.textContent = String(lineNumber);
+      row.appendChild(num);
+    }
+
+    const textSpan = document.createElement("span");
+    textSpan.className = "text";
+    textSpan.style.color = color;
+    textSpan.textContent = text;   // textContent — never innerHTML
+    row.appendChild(textSpan);
+
+    this.container.appendChild(row);
+    this.lineElements.push(row);
+  }
+
+  private scrollToBottom() {
+    if (this.viewport) {
+      this.viewport.scrollTop = this.viewport.scrollHeight;
+    }
+  }
+}

package/src/tokens/colors.ts

@@ -0,0 +1,149 @@
+// @yugnex/nexui — Sovereign Color System
+// Zero external dependencies. All values hand-authored.
+
+export const NEXUI_PALETTE = {
+  void: {
+    0:   "#000000",
+    50:  "#05070C",
+    100: "#0A0D14",
+    200: "#0D1117",
+    300: "#161B22",
+    400: "#1C2128",
+    500: "#21262D",
+    600: "#30363D",
+    700: "#3D444D",
+    800: "#484F58",
+    900: "#6E7681",
+    950: "#8B949E",
+  },
+  amber: {
+    50:  "#FFF8E7",
+    100: "#FDECC8",
+    200: "#F9D07A",
+    300: "#F5B342",
+    400: "#E89010",
+    500: "#C97A0E",
+    600: "#A3630B",
+    700: "#7D4D09",
+    800: "#573606",
+    900: "#3A2304",
+  },
+  teal: {
+    50:  "#E6FFFE",
+    100: "#CCFFFE",
+    200: "#99FFFD",
+    300: "#4DFCF7",
+    400: "#0FD4C6",
+    500: "#0EB5A9",
+    600: "#0B8A81",
+    700: "#086059",
+    800: "#053D38",
+    900: "#021F1C",
+  },
+  green: {
+    50:  "#F0FDF4",
+    100: "#DCFCE7",
+    200: "#BBF7D0",
+    300: "#86EFAC",
+    400: "#4ADE80",
+    500: "#22C55E",
+    600: "#16A34A",
+    700: "#15803D",
+    800: "#166534",
+    900: "#14532D",
+  },
+  red: {
+    50:  "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+  },
+  yellow: {
+    400: "#FACC15",
+    500: "#EAB308",
+    600: "#CA8A04",
+  },
+} as const;
+
+// Semantic layer — what components reference, never raw palette values
+export const NEXUI_SEMANTIC_VOID = {
+  // Surfaces (ground → highest elevation)
+  "bg-void":     NEXUI_PALETTE.void[50],
+  "bg-base":     NEXUI_PALETTE.void[200],
+  "bg-surface":  NEXUI_PALETTE.void[300],
+  "bg-elevated": NEXUI_PALETTE.void[400],
+  "bg-overlay":  NEXUI_PALETTE.void[500],
+
+  // Borders
+  "border":        "rgba(255,255,255,0.08)",
+  "border-strong": "rgba(255,255,255,0.16)",
+  "border-focus":  "rgba(232,144,16,0.60)",
+
+  // Text hierarchy
+  "text-primary":   "#E6EDF3",
+  "text-secondary": NEXUI_PALETTE.void[950],
+  "text-dim":       NEXUI_PALETTE.void[900],
+  "text-ghost":     NEXUI_PALETTE.void[800],
+  "text-inverse":   NEXUI_PALETTE.void[50],
+
+  // Accent (amber — primary brand)
+  "accent":        NEXUI_PALETTE.amber[400],
+  "accent-dim":    "rgba(232,144,16,0.09)",
+  "accent-border": "rgba(232,144,16,0.22)",
+  "accent-text":   NEXUI_PALETTE.amber[300],
+
+  // Live / activity (teal)
+  "live":        NEXUI_PALETTE.teal[400],
+  "live-dim":    "rgba(15,212,198,0.09)",
+  "live-border": "rgba(15,212,198,0.22)",
+
+  // Status
+  "success":       NEXUI_PALETTE.green[500],
+  "success-dim":   "rgba(34,197,94,0.10)",
+  "error":         NEXUI_PALETTE.red[500],
+  "error-dim":     "rgba(239,68,68,0.10)",
+  "warning":       NEXUI_PALETTE.yellow[500],
+  "warning-dim":   "rgba(234,179,8,0.10)",
+} as const;
+
+export const NEXUI_SEMANTIC_TERMINAL = {
+  "bg-void":     "#000000",
+  "bg-base":     "#050505",
+  "bg-surface":  "#0C0E12",
+  "bg-elevated": "#111418",
+  "bg-overlay":  "#161B22",
+
+  "border":        "#1E293B",
+  "border-strong": "#2D3748",
+  "border-focus":  "rgba(16,185,129,0.60)",
+
+  "text-primary":   "#10B981",
+  "text-secondary": "#6EE7B7",
+  "text-dim":       "#34D399",
+  "text-ghost":     "#065F46",
+  "text-inverse":   "#000000",
+
+  "accent":        NEXUI_PALETTE.amber[400],
+  "accent-dim":    "rgba(232,144,16,0.09)",
+  "accent-border": "rgba(232,144,16,0.22)",
+  "accent-text":   NEXUI_PALETTE.amber[300],
+
+  "live":        "#10B981",
+  "live-dim":    "rgba(16,185,129,0.09)",
+  "live-border": "rgba(16,185,129,0.22)",
+
+  "success":       "#10B981",
+  "success-dim":   "rgba(16,185,129,0.10)",
+  "error":         NEXUI_PALETTE.red[500],
+  "error-dim":     "rgba(239,68,68,0.10)",
+  "warning":       NEXUI_PALETTE.yellow[500],
+  "warning-dim":   "rgba(234,179,8,0.10)",
+} as const;
+
+export type NexuiSemanticToken = keyof typeof NEXUI_SEMANTIC_VOID;