@yugnex/nexui 2.0.0

package/src/core/matrix.ts

@@ -0,0 +1,195 @@
+// @yugnex/nexui — Layout Matrix
+// Encodes layout intent as a composable 32-bit bitmask.
+// Bits 0-3: padding · Bits 4-7: flex/display · Bits 8-11: border-radius
+// Bits 12-15: gap · Bits 16-19: width · Bits 20-23: overflow
+// Compose with bitwise OR: PAD_MD | FLEX_ROW | ALIGN_CENTER | RAD_MD
+
+export const enum LayoutMatrix {
+  // Padding (bits 0-3)
+  PAD_NONE   = 0x0,
+  PAD_XS     = 0x1,   // 0.25rem / 4px
+  PAD_SM     = 0x2,   // 0.5rem  / 8px
+  PAD_MD     = 0x3,   // 0.75rem / 12px
+  PAD_LG     = 0x4,   // 1rem    / 16px
+  PAD_XL     = 0x5,   // 1.5rem  / 24px
+  PAD_2XL    = 0x6,   // 2rem    / 32px
+
+  // Display / Flex direction (bits 4-7)
+  FLEX_ROW   = 0x10,  // display:flex; flex-direction:row
+  FLEX_COL   = 0x20,  // display:flex; flex-direction:column
+  GRID_2     = 0x30,  // display:grid; grid-template-columns:repeat(2,1fr)
+  GRID_3     = 0x40,  // display:grid; grid-template-columns:repeat(3,1fr)
+  GRID_4     = 0x50,  // display:grid; grid-template-columns:repeat(4,1fr)
+
+  // Alignment (bits 5-6 override when used with FLEX_*)
+  ALIGN_START   = 0x60,  // align-items:flex-start
+  ALIGN_CENTER  = 0x70,  // align-items:center
+  ALIGN_END     = 0x80,  // align-items:flex-end
+  ALIGN_STRETCH = 0x90,  // align-items:stretch
+
+  // Justify content (bits 6-7 secondary)
+  JUSTIFY_START  = 0xA0,  // justify-content:flex-start
+  JUSTIFY_CENTER = 0xB0,  // justify-content:center
+  JUSTIFY_END    = 0xC0,  // justify-content:flex-end
+  JUSTIFY_BET    = 0xD0,  // justify-content:space-between
+  JUSTIFY_AROUND = 0xE0,  // justify-content:space-around
+  JUSTIFY_EVEN   = 0xF0,  // justify-content:space-evenly
+
+  // Border radius (bits 8-11)
+  RAD_NONE   = 0x000,
+  RAD_XS     = 0x100,  // 2px
+  RAD_SM     = 0x200,  // 4px
+  RAD_MD     = 0x300,  // 6px
+  RAD_LG     = 0x400,  // 8px
+  RAD_XL     = 0x500,  // 12px
+  RAD_2XL    = 0x600,  // 16px
+  RAD_FULL   = 0x700,  // 9999px
+
+  // Gap (bits 12-15)
+  GAP_NONE   = 0x0000,
+  GAP_XS     = 0x1000,  // 0.25rem / 4px
+  GAP_SM     = 0x2000,  // 0.5rem  / 8px
+  GAP_MD     = 0x3000,  // 1rem    / 16px
+  GAP_LG     = 0x4000,  // 1.5rem  / 24px
+  GAP_XL     = 0x5000,  // 2rem    / 32px
+
+  // Width (bits 16-19)
+  W_AUTO     = 0x00000,
+  W_FULL     = 0x10000,  // width:100%
+  W_SCREEN   = 0x20000,  // width:100vw
+  W_FIT      = 0x30000,  // width:fit-content
+  W_MIN      = 0x40000,  // width:min-content
+  W_MAX      = 0x50000,  // width:max-content
+
+  // Overflow (bits 20-23)
+  OVERFLOW_VIS    = 0x000000,  // overflow:visible (default)
+  OVERFLOW_HIDDEN = 0x100000,  // overflow:hidden
+  OVERFLOW_AUTO   = 0x200000,  // overflow:auto
+  OVERFLOW_SCROLL = 0x300000,  // overflow:scroll
+}
+
+// Maps bitmask bits to CSS strings — used by the compiler
+export const MATRIX_PAD_MAP: Record<number, string> = {
+  0x1: "padding:0.25rem;",
+  0x2: "padding:0.5rem;",
+  0x3: "padding:0.75rem;",
+  0x4: "padding:1rem;",
+  0x5: "padding:1.5rem;",
+  0x6: "padding:2rem;",
+};
+
+export const MATRIX_DISPLAY_MAP: Record<number, string> = {
+  0x10: "display:flex;flex-direction:row;",
+  0x20: "display:flex;flex-direction:column;",
+  0x30: "display:grid;grid-template-columns:repeat(2,1fr);",
+  0x40: "display:grid;grid-template-columns:repeat(3,1fr);",
+  0x50: "display:grid;grid-template-columns:repeat(4,1fr);",
+  0x60: "align-items:flex-start;",
+  0x70: "align-items:center;",
+  0x80: "align-items:flex-end;",
+  0x90: "align-items:stretch;",
+  0xA0: "justify-content:flex-start;",
+  0xB0: "justify-content:center;",
+  0xC0: "justify-content:flex-end;",
+  0xD0: "justify-content:space-between;",
+  0xE0: "justify-content:space-around;",
+  0xF0: "justify-content:space-evenly;",
+};
+
+export const MATRIX_RADIUS_MAP: Record<number, string> = {
+  0x100: "border-radius:2px;",
+  0x200: "border-radius:4px;",
+  0x300: "border-radius:6px;",
+  0x400: "border-radius:8px;",
+  0x500: "border-radius:12px;",
+  0x600: "border-radius:16px;",
+  0x700: "border-radius:9999px;",
+};
+
+export const MATRIX_GAP_MAP: Record<number, string> = {
+  0x1000: "gap:0.25rem;",
+  0x2000: "gap:0.5rem;",
+  0x3000: "gap:1rem;",
+  0x4000: "gap:1.5rem;",
+  0x5000: "gap:2rem;",
+};
+
+export const MATRIX_WIDTH_MAP: Record<number, string> = {
+  0x10000: "width:100%;",
+  0x20000: "width:100vw;",
+  0x30000: "width:fit-content;",
+  0x40000: "width:min-content;",
+  0x50000: "width:max-content;",
+};
+
+export const MATRIX_OVERFLOW_MAP: Record<number, string> = {
+  0x100000: "overflow:hidden;",
+  0x200000: "overflow:auto;",
+  0x300000: "overflow:scroll;",
+};
+
+// Theme token maps — CSS custom property to value
+export const NEXUI_THEMES = {
+  void: {
+    "--nx-bg-void":     "#05070C",
+    "--nx-bg-base":     "#0D1117",
+    "--nx-bg-surface":  "#161B22",
+    "--nx-bg-elevated": "#1C2128",
+    "--nx-bg-overlay":  "#21262D",
+    "--nx-border":        "rgba(255,255,255,0.08)",
+    "--nx-border-strong": "rgba(255,255,255,0.16)",
+    "--nx-border-focus":  "rgba(232,144,16,0.60)",
+    "--nx-text":          "#E6EDF3",
+    "--nx-text-2":        "#8B949E",
+    "--nx-text-3":        "#6E7681",
+    "--nx-text-4":        "#484F58",
+    "--nx-text-inv":      "#05070C",
+    "--nx-accent":        "#E89010",
+    "--nx-accent-dim":    "rgba(232,144,16,0.09)",
+    "--nx-accent-border": "rgba(232,144,16,0.22)",
+    "--nx-accent-text":   "#F5B342",
+    "--nx-live":          "#0FD4C6",
+    "--nx-live-dim":      "rgba(15,212,198,0.09)",
+    "--nx-live-border":   "rgba(15,212,198,0.22)",
+    "--nx-success":       "#22C55E",
+    "--nx-success-dim":   "rgba(34,197,94,0.10)",
+    "--nx-error":         "#EF4444",
+    "--nx-error-dim":     "rgba(239,68,68,0.10)",
+    "--nx-warning":       "#EAB308",
+    "--nx-warning-dim":   "rgba(234,179,8,0.10)",
+    "--nx-font-sans":     "'NexuiSans','Inter',system-ui,-apple-system,sans-serif",
+    "--nx-font-mono":     "'NexuiMono','JetBrains Mono','Fira Code',ui-monospace,monospace",
+  },
+  terminal: {
+    "--nx-bg-void":     "#000000",
+    "--nx-bg-base":     "#050505",
+    "--nx-bg-surface":  "#0C0E12",
+    "--nx-bg-elevated": "#111418",
+    "--nx-bg-overlay":  "#161B22",
+    "--nx-border":        "#1E293B",
+    "--nx-border-strong": "#2D3748",
+    "--nx-border-focus":  "rgba(16,185,129,0.60)",
+    "--nx-text":          "#10B981",
+    "--nx-text-2":        "#6EE7B7",
+    "--nx-text-3":        "#34D399",
+    "--nx-text-4":        "#065F46",
+    "--nx-text-inv":      "#000000",
+    "--nx-accent":        "#E89010",
+    "--nx-accent-dim":    "rgba(232,144,16,0.09)",
+    "--nx-accent-border": "rgba(232,144,16,0.22)",
+    "--nx-accent-text":   "#F5B342",
+    "--nx-live":          "#10B981",
+    "--nx-live-dim":      "rgba(16,185,129,0.09)",
+    "--nx-live-border":   "rgba(16,185,129,0.22)",
+    "--nx-success":       "#10B981",
+    "--nx-success-dim":   "rgba(16,185,129,0.10)",
+    "--nx-error":         "#EF4444",
+    "--nx-error-dim":     "rgba(239,68,68,0.10)",
+    "--nx-warning":       "#EAB308",
+    "--nx-warning-dim":   "rgba(234,179,8,0.10)",
+    "--nx-font-sans":     "'NexuiMono','JetBrains Mono',ui-monospace,monospace",
+    "--nx-font-mono":     "'NexuiMono','JetBrains Mono',ui-monospace,monospace",
+  },
+} as const;
+
+export type NexuiTheme = keyof typeof NEXUI_THEMES;

package/src/index.ts

@@ -0,0 +1,78 @@
+// @yugnex/nexui — Main Entry Point v2.0
+
+export * from "./tokens/colors";
+export * from "./tokens/spacing";
+export * from "./tokens/motion";
+export * from "./tokens/shadows";
+export * from "./tokens/type";
+export * from "./core/matrix";
+export * from "./core/compiler";
+export * from "./core/cx";
+export * from "./assets/typography";
+export * from "./assets/geometry";
+
+export { NexPanel }      from "./primitives/panel";
+export { NexStatusRing } from "./primitives/status-ring";
+export { NexTextStream } from "./primitives/text-stream";
+export { NexButton }     from "./primitives/button";
+export { NexBadge }      from "./primitives/badge";
+export { NexInput }      from "./primitives/input";
+export { NexAvatar }     from "./primitives/avatar";
+export { NexProgress }   from "./primitives/progress";
+export { NexSwitch }     from "./primitives/switch";
+export { NexCheckbox }   from "./primitives/checkbox";
+export { NexSkeleton }   from "./primitives/skeleton";
+export { NexSeparator }  from "./primitives/separator";
+export { NexSpinner }    from "./primitives/spinner";
+
+import { nexui_compiler } from "./core/compiler";
+import { NexuiTypographySheet } from "./assets/typography";
+import { NexPanel }      from "./primitives/panel";
+import { NexStatusRing } from "./primitives/status-ring";
+import { NexTextStream } from "./primitives/text-stream";
+import { NexButton }     from "./primitives/button";
+import { NexBadge }      from "./primitives/badge";
+import { NexInput }      from "./primitives/input";
+import { NexAvatar }     from "./primitives/avatar";
+import { NexProgress }   from "./primitives/progress";
+import { NexSwitch }     from "./primitives/switch";
+import { NexCheckbox }   from "./primitives/checkbox";
+import { NexSkeleton }   from "./primitives/skeleton";
+import { NexSeparator }  from "./primitives/separator";
+import { NexSpinner }    from "./primitives/spinner";
+import type { NexuiTheme } from "./core/matrix";
+
+const ELEMENTS: Array<[string, CustomElementConstructor]> = [
+  ["nex-panel",       NexPanel],
+  ["nex-status-ring", NexStatusRing],
+  ["nex-text-stream", NexTextStream],
+  ["nex-button",      NexButton],
+  ["nex-badge",       NexBadge],
+  ["nex-input",       NexInput],
+  ["nex-avatar",      NexAvatar],
+  ["nex-progress",    NexProgress],
+  ["nex-switch",      NexSwitch],
+  ["nex-checkbox",    NexCheckbox],
+  ["nex-skeleton",    NexSkeleton],
+  ["nex-separator",   NexSeparator],
+  ["nex-spinner",     NexSpinner],
+];
+
+export async function initializeNexuiEngine(defaultTheme: NexuiTheme = "void"): Promise<void> {
+  if (typeof window === "undefined") return;
+  if (!document.getElementById("yugnex-nexui-typography")) {
+    const s = document.createElement("style");
+    s.id = "yugnex-nexui-typography";
+    s.textContent = NexuiTypographySheet;
+    document.head.appendChild(s);
+  }
+  nexui_compiler.mountGlobalTheme(defaultTheme);
+  for (const [tag, ctor] of ELEMENTS) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+}
+
+export function setNexuiTheme(theme: NexuiTheme): void {
+  nexui_compiler.switchTheme(theme);
+  window.dispatchEvent(new CustomEvent("nexui:theme-change", { detail: { theme } }));
+}

package/src/primitives/avatar.ts

@@ -0,0 +1,159 @@
+// @yugnex/nexui — NexAvatar Web Component
+// User avatar: image with initials fallback + optional status indicator.
+// Attributes:
+//   src:     image URL
+//   name:    full name — used for initials and alt text
+//   size:    xs | sm | md | lg | xl (default: md)
+//   status:  online | away | busy | offline (optional)
+//   shape:   circle | square (default: circle)
+
+import { nexui_compiler } from "../core/compiler";
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+// Deterministic hue from name string for initials background
+function nameToHue(name: string): number {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+  }
+  return hash % 360;
+}
+
+export class NexAvatar extends HTMLElement {
+  static get observedAttributes() {
+    return ["src", "name", "size", "status", "shape"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const src     = this.getAttribute("src") ?? "";
+    const name    = this.getAttribute("name") ?? "";
+    const size    = this.getAttribute("size") ?? "md";
+    const status  = this.getAttribute("status") ?? "";
+    const shape   = this.getAttribute("shape") ?? "circle";
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const sizeMap: Record<string, { px: number; fs: number; dot: number; }> = {
+      xs: { px: 20, fs: 8,  dot: 5  },
+      sm: { px: 28, fs: 11, dot: 7  },
+      md: { px: 36, fs: 14, dot: 9  },
+      lg: { px: 48, fs: 18, dot: 11 },
+      xl: { px: 64, fs: 24, dot: 13 },
+    };
+    const s = sizeMap[size] ?? sizeMap.md;
+
+    const borderRadius = shape === "square"
+      ? `${Math.round(s.px * 0.2)}px`
+      : "50%";
+
+    const initials = name ? getInitials(name) : "?";
+    const hue      = nameToHue(name || "?");
+    const fallbackBg = `hsl(${hue}, 35%, 22%)`;
+    const fallbackFg = `hsl(${hue}, 70%, 72%)`;
+
+    const statusColor: Record<string, string> = {
+      online:  "#22C55E",
+      away:    "#EAB308",
+      busy:    "#EF4444",
+      offline: "#484F58",
+    };
+
+    const dotColor = statusColor[status] ?? "";
+    const dotBorder = size === "xs" ? "1px" : "2px";
+
+    const imgContent = src
+      ? `<img src="${src}" alt="${name ? `Avatar of ${name}` : "User avatar"}" loading="lazy" />`
+      : `<span class="initials" aria-hidden="true">${initials}</span>`;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-block;
+          position: relative;
+          width: ${s.px}px;
+          height: ${s.px}px;
+          flex-shrink: 0;
+        }
+        .avatar {
+          width: ${s.px}px;
+          height: ${s.px}px;
+          border-radius: ${borderRadius};
+          background: ${fallbackBg};
+          border: 1px solid var(--nx-border, rgba(255,255,255,0.08));
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          user-select: none;
+        }
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+        }
+        .initials {
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-size: ${s.fs}px;
+          font-weight: 600;
+          color: ${fallbackFg};
+          line-height: 1;
+          letter-spacing: 0.02em;
+        }
+        ${status ? `.dot {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          width: ${s.dot}px;
+          height: ${s.dot}px;
+          border-radius: 50%;
+          background: ${dotColor};
+          border: ${dotBorder} solid var(--nx-bg-base, #0D1117);
+        }` : ""}
+      </style>
+      <div class="avatar" role="img" aria-label="${name ? `Avatar of ${name}` : "User avatar"}" part="avatar">
+        ${imgContent}
+      </div>
+      ${status ? `<span class="dot" aria-label="${status}" title="${status}"></span>` : ""}
+    `;
+
+    // Hide initials when image loads successfully
+    if (src) {
+      const img = this.shadowRoot.querySelector<HTMLImageElement>("img");
+      const initialsEl = this.shadowRoot.querySelector<HTMLSpanElement>(".initials");
+      if (img && initialsEl) {
+        img.addEventListener("error", () => {
+          img.style.display = "none";
+          // Create and append initials span if image fails
+          const span = document.createElement("span");
+          span.className = "initials";
+          span.setAttribute("aria-hidden", "true");
+          span.textContent = initials;
+          span.style.cssText = `font-family:var(--nx-font-sans,system-ui,sans-serif);font-size:${s.fs}px;font-weight:600;color:${fallbackFg};line-height:1;letter-spacing:0.02em;`;
+          img.parentElement?.appendChild(span);
+        });
+      }
+    }
+  }
+}

package/src/primitives/badge.ts

@@ -0,0 +1,98 @@
+// @yugnex/nexui — NexBadge Web Component
+// Inline status chip for labels, counts, and state indicators.
+// Attributes:
+//   variant: default | accent | live | success | error | warning | muted
+//   size:    sm | md
+//   dot:     boolean — shows a pulsing presence dot before the text
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexBadge extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "dot"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const variant  = this.getAttribute("variant") ?? "default";
+    const size     = this.getAttribute("size") ?? "md";
+    const showDot  = this.getAttribute("dot") === "true";
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const variantCSS: Record<string, string> = {
+      default: `background:var(--nx-bg-elevated,#1C2128); color:var(--nx-text-2,#8B949E); border:1px solid var(--nx-border,rgba(255,255,255,0.08));`,
+      accent:  `background:var(--nx-accent-dim,rgba(232,144,16,0.09)); color:var(--nx-accent-text,#F5B342); border:1px solid var(--nx-accent-border,rgba(232,144,16,0.22));`,
+      live:    `background:var(--nx-live-dim,rgba(15,212,198,0.09)); color:var(--nx-live,#0FD4C6); border:1px solid var(--nx-live-border,rgba(15,212,198,0.22));`,
+      success: `background:var(--nx-success-dim,rgba(34,197,94,0.10)); color:var(--nx-success,#22C55E); border:1px solid rgba(34,197,94,0.25);`,
+      error:   `background:var(--nx-error-dim,rgba(239,68,68,0.10)); color:var(--nx-error,#EF4444); border:1px solid rgba(239,68,68,0.25);`,
+      warning: `background:var(--nx-warning-dim,rgba(234,179,8,0.10)); color:var(--nx-warning,#EAB308); border:1px solid rgba(234,179,8,0.25);`,
+      muted:   `background:rgba(255,255,255,0.04); color:var(--nx-text-3,#6E7681); border:1px solid transparent;`,
+    };
+
+    const dotColor: Record<string, string> = {
+      default: "var(--nx-text-4,#484F58)",
+      accent:  "var(--nx-accent,#E89010)",
+      live:    "var(--nx-live,#0FD4C6)",
+      success: "var(--nx-success,#22C55E)",
+      error:   "var(--nx-error,#EF4444)",
+      warning: "var(--nx-warning,#EAB308)",
+      muted:   "var(--nx-text-4,#484F58)",
+    };
+
+    const sizeCSS = size === "sm"
+      ? `font-size:10px; padding:2px 6px; border-radius:4px; gap:4px;`
+      : `font-size:11px; padding:3px 8px; border-radius:5px; gap:5px;`;
+
+    const dotSize = size === "sm" ? 5 : 6;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-flex;
+        }
+        .badge {
+          display: inline-flex;
+          align-items: center;
+          font-family: var(--nx-font-mono, ui-monospace, monospace);
+          font-weight: 500;
+          letter-spacing: 0.04em;
+          white-space: nowrap;
+          line-height: 1;
+          ${sizeCSS}
+          ${variantCSS[variant] ?? variantCSS.default}
+        }
+        .dot {
+          width: ${dotSize}px;
+          height: ${dotSize}px;
+          border-radius: 50%;
+          background: ${dotColor[variant] ?? dotColor.default};
+          flex-shrink: 0;
+          animation: ${variant === "live" ? "nx-pulse 2s ease-in-out infinite" : "none"};
+        }
+        @keyframes nx-pulse {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0.35; }
+        }
+      </style>
+      <span class="badge" part="badge">
+        ${showDot ? '<span class="dot" aria-hidden="true"></span>' : ""}
+        <slot></slot>
+      </span>
+    `;
+  }
+}

package/src/primitives/button.ts

@@ -0,0 +1,149 @@
+// @yugnex/nexui — NexButton Web Component
+// Attributes:
+//   variant: primary | secondary | ghost | danger | outline | accent | live
+//   size:    sm | md | lg
+//   loading: boolean
+//   disabled: boolean (native HTML attribute)
+//   icon-only: boolean (square aspect ratio)
+
+import { nexui_compiler } from "../core/compiler";
+
+export class NexButton extends HTMLElement {
+  private btn: HTMLButtonElement | null = null;
+
+  static get observedAttributes() {
+    return ["variant", "size", "loading", "disabled", "icon-only", "type"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupDelegation();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this.setupDelegation();
+  }
+
+  // Forward clicks from the host element to the internal button
+  private setupDelegation() {
+    this.onclick = (e) => {
+      if (this.hasAttribute("disabled") || this.getAttribute("loading") === "true") {
+        e.stopImmediatePropagation();
+        return;
+      }
+    };
+  }
+
+  private render() {
+    if (!this.shadowRoot) return;
+
+    const variant  = this.getAttribute("variant") ?? "primary";
+    const size     = this.getAttribute("size") ?? "md";
+    const loading  = this.getAttribute("loading") === "true";
+    const disabled = this.hasAttribute("disabled") || loading;
+    const iconOnly = this.getAttribute("icon-only") === "true";
+    const type     = this.getAttribute("type") ?? "button";
+    const themeCSS = nexui_compiler.getThemeCSS(nexui_compiler.getActiveTheme(), ":host");
+
+    const sizeStyles: Record<string, string> = {
+      sm: `font-size:11px; padding:${iconOnly ? "5px" : "5px 10px"}; min-height:28px; border-radius:5px; gap:6px;`,
+      md: `font-size:13px; padding:${iconOnly ? "7px" : "7px 14px"}; min-height:34px; border-radius:6px; gap:8px;`,
+      lg: `font-size:14px; padding:${iconOnly ? "9px" : "9px 18px"}; min-height:40px; border-radius:7px; gap:10px;`,
+    };
+
+    const variantStyles: Record<string, string> = {
+      primary:   `background:var(--nx-accent,#E89010); color:#000; border:none;`,
+      secondary: `background:var(--nx-bg-elevated,#1C2128); color:var(--nx-text,#E6EDF3); border:1px solid var(--nx-border-strong,rgba(255,255,255,0.16));`,
+      ghost:     `background:transparent; color:var(--nx-text,#E6EDF3); border:none;`,
+      outline:   `background:transparent; color:var(--nx-text,#E6EDF3); border:1px solid var(--nx-border-strong,rgba(255,255,255,0.16));`,
+      danger:    `background:var(--nx-error,#EF4444); color:#fff; border:none;`,
+      accent:    `background:var(--nx-accent-dim,rgba(232,144,16,0.09)); color:var(--nx-accent-text,#F5B342); border:1px solid var(--nx-accent-border,rgba(232,144,16,0.22));`,
+      live:      `background:var(--nx-live-dim,rgba(15,212,198,0.09)); color:var(--nx-live,#0FD4C6); border:1px solid var(--nx-live-border,rgba(15,212,198,0.22));`,
+    };
+
+    const hoverStyles: Record<string, string> = {
+      primary:   `filter:brightness(1.1);`,
+      secondary: `background:var(--nx-bg-overlay,#21262D);`,
+      ghost:     `background:rgba(255,255,255,0.06);`,
+      outline:   `background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.24);`,
+      danger:    `filter:brightness(1.1);`,
+      accent:    `background:rgba(232,144,16,0.14);`,
+      live:      `background:rgba(15,212,198,0.14);`,
+    };
+
+    const iconSize = size === "sm" ? 12 : size === "lg" ? 16 : 14;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${themeCSS}
+        :host {
+          display: inline-block;
+        }
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--nx-font-sans, system-ui, sans-serif);
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          text-decoration: none;
+          transition: background 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
+          ${sizeStyles[size] ?? sizeStyles.md}
+          ${variantStyles[variant] ?? variantStyles.primary}
+          ${iconOnly ? `aspect-ratio: 1; padding: ${size === "sm" ? "5px" : size === "lg" ? "9px" : "7px"};` : ""}
+        }
+        button:hover:not(:disabled):not(.loading) {
+          ${hoverStyles[variant] ?? ""}
+        }
+        button:active:not(:disabled):not(.loading) {
+          transform: translateY(1px);
+          filter: brightness(0.95);
+        }
+        button:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 2px var(--nx-bg-base, #0D1117), 0 0 0 4px var(--nx-accent, #E89010);
+        }
+        button:disabled, button.loading {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .spinner {
+          width: ${iconSize}px;
+          height: ${iconSize}px;
+          border: 1.5px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: nx-spin 600ms linear infinite;
+          flex-shrink: 0;
+        }
+        @keyframes nx-spin {
+          to { transform: rotate(360deg); }
+        }
+        ::slotted(svg) {
+          width: ${iconSize}px;
+          height: ${iconSize}px;
+          flex-shrink: 0;
+        }
+      </style>
+      <button
+        type="${type}"
+        ${disabled ? "disabled" : ""}
+        ${loading ? 'class="loading"' : ""}
+        part="button"
+      >
+        ${loading ? '<span class="spinner" aria-hidden="true"></span>' : ""}
+        <slot></slot>
+      </button>
+    `;
+    this.btn = this.shadowRoot.querySelector("button");
+  }
+}