@n3rd-ai/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,881 @@
+import { ToastProvider } from './chunk-MZO6ECNX.js';
+export { ToastProvider, useToast } from './chunk-MZO6ECNX.js';
+import { getBorderChars } from './chunk-CBVIEAN7.js';
+export { BORDER_CHARS, getBorderChars } from './chunk-CBVIEAN7.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import localFont from 'next/font/local';
+
+// src/components/layout/Box.module.css
+var Box_default = {};
+var PADDING_MAP = {
+  none: "0",
+  sm: "var(--n3rd-space-2)",
+  md: "var(--n3rd-space-4)",
+  lg: "var(--n3rd-space-6)"
+};
+function Box({
+  children,
+  border = "single",
+  title,
+  accent,
+  padding = "md",
+  className,
+  style
+}) {
+  const chars = getBorderChars(border);
+  const accentColor = accent ? `var(--n3rd-accent-${accent})` : "var(--n3rd-border-default)";
+  if (!chars) {
+    return /* @__PURE__ */ jsx("div", { className, style: { padding: PADDING_MAP[padding], ...style }, children });
+  }
+  const boxStyle = {
+    ...style,
+    "--box-border-color": accentColor,
+    "--box-padding": PADDING_MAP[padding]
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${Box_default.box} ${className ?? ""}`, style: boxStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: Box_default.borderTop, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderChar, children: chars.topLeft }),
+      title && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: Box_default.borderChar, children: chars.horizontal }),
+        /* @__PURE__ */ jsx("span", { className: Box_default.title, children: ` ${title} ` })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderLine, children: chars.horizontal }),
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderChar, children: chars.topRight })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: Box_default.content, children: [
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderSide, "aria-hidden": "true", children: chars.vertical }),
+      /* @__PURE__ */ jsx("div", { className: Box_default.inner, children }),
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderSide, "aria-hidden": "true", children: chars.vertical })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: Box_default.borderBottom, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderChar, children: chars.bottomLeft }),
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderLine, children: chars.horizontal }),
+      /* @__PURE__ */ jsx("span", { className: Box_default.borderChar, children: chars.bottomRight })
+    ] })
+  ] });
+}
+var GAP_MAP = {
+  none: "0",
+  sm: "var(--n3rd-space-2)",
+  md: "var(--n3rd-space-4)",
+  lg: "var(--n3rd-space-6)",
+  xl: "var(--n3rd-space-8)"
+};
+function Stack({ children, gap = "md", align = "stretch", className, style }) {
+  const stackStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: GAP_MAP[gap],
+    alignItems: align,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: stackStyle, children });
+}
+var GAP_MAP2 = {
+  none: "0",
+  sm: "var(--n3rd-space-2)",
+  md: "var(--n3rd-space-4)",
+  lg: "var(--n3rd-space-6)",
+  xl: "var(--n3rd-space-8)"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function Row({
+  children,
+  gap = "md",
+  align = "center",
+  justify = "start",
+  wrap = false,
+  className,
+  style
+}) {
+  const rowStyle = {
+    display: "flex",
+    flexDirection: "row",
+    gap: GAP_MAP2[gap],
+    alignItems: align,
+    justifyContent: JUSTIFY_MAP[justify],
+    flexWrap: wrap ? "wrap" : "nowrap",
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: rowStyle, children });
+}
+var GAP_MAP3 = {
+  none: "0",
+  sm: "var(--n3rd-space-2)",
+  md: "var(--n3rd-space-4)",
+  lg: "var(--n3rd-space-6)",
+  xl: "var(--n3rd-space-8)"
+};
+function Grid({ children, columns = 3, gap = "md", className, style }) {
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns,
+    gap: GAP_MAP3[gap],
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: gridStyle, children });
+}
+var CHARS = {
+  single: "\u2500",
+  double: "\u2550",
+  dashed: "\u254C"
+};
+function Divider({ variant = "single", label, className, style }) {
+  const char = CHARS[variant];
+  const dividerStyle = {
+    display: "flex",
+    alignItems: "center",
+    color: "var(--n3rd-border-default)",
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-base)",
+    margin: "var(--n3rd-space-4) 0",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    ...style
+  };
+  const lineStyle = {
+    flex: 1,
+    overflow: "hidden"
+  };
+  if (label) {
+    return /* @__PURE__ */ jsxs("div", { className, style: dividerStyle, role: "separator", children: [
+      /* @__PURE__ */ jsx("span", { style: lineStyle, children: char.repeat(200) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            padding: "0 var(--n3rd-space-2)",
+            color: "var(--n3rd-text-secondary)",
+            flexShrink: 0
+          },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: lineStyle, children: char.repeat(200) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: dividerStyle, role: "separator", children: /* @__PURE__ */ jsx("span", { style: lineStyle, children: char.repeat(200) }) });
+}
+function Page({ children, maxWidth = "1200px", className, style }) {
+  const pageStyle = {
+    maxWidth,
+    margin: "0 auto",
+    padding: "var(--n3rd-space-6) var(--n3rd-space-4)",
+    minHeight: "100vh",
+    ...style
+  };
+  return /* @__PURE__ */ jsx("main", { className, style: pageStyle, children });
+}
+var SIZE_MAP = {
+  xs: "var(--n3rd-text-xs)",
+  sm: "var(--n3rd-text-sm)",
+  base: "var(--n3rd-text-base)",
+  lg: "var(--n3rd-text-lg)",
+  xl: "var(--n3rd-text-xl)",
+  "2xl": "var(--n3rd-text-2xl)"
+};
+var COLOR_MAP = {
+  primary: "var(--n3rd-text-primary)",
+  secondary: "var(--n3rd-text-secondary)",
+  tertiary: "var(--n3rd-text-tertiary)",
+  accent: "var(--n3rd-accent-primary)",
+  success: "var(--n3rd-accent-success)",
+  warning: "var(--n3rd-accent-warning)",
+  danger: "var(--n3rd-accent-danger)",
+  info: "var(--n3rd-accent-info)"
+};
+function Text({
+  children,
+  size = "base",
+  color = "primary",
+  bold = false,
+  prefix,
+  gradient = false,
+  as: Tag = "span",
+  className,
+  style
+}) {
+  const textStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: SIZE_MAP[size],
+    fontWeight: bold ? 700 : 400,
+    lineHeight: "var(--n3rd-line-height)",
+    color: gradient ? "transparent" : COLOR_MAP[color],
+    ...gradient && {
+      background: "var(--n3rd-gradient)",
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(Tag, { className, style: textStyle, children: [
+    prefix && /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-text-secondary)", marginRight: "var(--n3rd-space-1)" }, children: prefix }),
+    children
+  ] });
+}
+var SIZE_MAP2 = {
+  1: "var(--n3rd-text-2xl)",
+  2: "var(--n3rd-text-xl)",
+  3: "var(--n3rd-text-lg)",
+  4: "var(--n3rd-text-base)",
+  5: "var(--n3rd-text-sm)",
+  6: "var(--n3rd-text-xs)"
+};
+var PREFIX_MAP = {
+  1: "#",
+  2: "##",
+  3: "###",
+  4: "####",
+  5: "#####",
+  6: "######"
+};
+function Heading({
+  children,
+  level = 2,
+  prefix = true,
+  gradient = false,
+  className,
+  style
+}) {
+  const Tag = `h${level}`;
+  const headingStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: SIZE_MAP2[level],
+    fontWeight: 700,
+    lineHeight: "var(--n3rd-line-height)",
+    color: gradient ? "transparent" : "var(--n3rd-text-primary)",
+    ...gradient && {
+      background: "var(--n3rd-gradient)",
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    },
+    margin: 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(Tag, { className, style: headingStyle, children: [
+    prefix && /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-text-tertiary)", marginRight: "var(--n3rd-space-2)" }, children: PREFIX_MAP[level] }),
+    children
+  ] });
+}
+var VARIANT_MAP = {
+  default: "var(--n3rd-accent-primary)",
+  success: "var(--n3rd-accent-success)",
+  warning: "var(--n3rd-accent-warning)",
+  danger: "var(--n3rd-accent-danger)",
+  info: "var(--n3rd-accent-info)"
+};
+function Badge({ children, variant = "default", className, style }) {
+  const badgeStyle = {
+    display: "inline-block",
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-xs)",
+    fontWeight: 700,
+    color: VARIANT_MAP[variant],
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("span", { className, style: badgeStyle, children: [
+    "[",
+    children,
+    "]"
+  ] });
+}
+function Metric({ value, label, suffix, prefix, accent, className, style }) {
+  const containerStyle = {
+    fontFamily: "var(--n3rd-font)",
+    textAlign: "center",
+    ...style
+  };
+  const valueStyle = {
+    fontSize: "var(--n3rd-text-2xl)",
+    fontWeight: 700,
+    color: accent ? `var(--n3rd-accent-${accent})` : "var(--n3rd-text-primary)",
+    lineHeight: 1.2
+  };
+  const labelStyle = {
+    fontSize: "var(--n3rd-text-sm)",
+    color: "var(--n3rd-text-secondary)",
+    marginTop: "var(--n3rd-space-1)"
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
+      prefix,
+      value,
+      suffix
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: labelStyle, children: label })
+  ] });
+}
+function getCellText(cell) {
+  return typeof cell === "string" ? cell : cell.text;
+}
+function getCellAccent(cell) {
+  return typeof cell === "string" ? void 0 : cell.accent;
+}
+function Table({ columns, rows, border = "single", className, style }) {
+  const chars = getBorderChars(border);
+  const tableStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-sm)",
+    color: "var(--n3rd-border-default)",
+    width: "100%",
+    whiteSpace: "pre",
+    ...style
+  };
+  if (!chars) {
+    return /* @__PURE__ */ jsxs("table", { className, style: { ...tableStyle, color: "var(--n3rd-text-primary)" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          style: {
+            textAlign: "left",
+            padding: "var(--n3rd-space-2)",
+            color: "var(--n3rd-text-secondary)"
+          },
+          children: col
+        },
+        col
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          style: {
+            padding: "var(--n3rd-space-2)",
+            color: getCellAccent(cell) ? `var(--n3rd-accent-${getCellAccent(cell)})` : "var(--n3rd-text-primary)"
+          },
+          children: getCellText(cell)
+        },
+        j
+      )) }, i)) })
+    ] });
+  }
+  const colWidths = columns.map((col, i) => {
+    let max = col.length;
+    for (const row of rows) {
+      if (row[i]) {
+        max = Math.max(max, getCellText(row[i]).length);
+      }
+    }
+    return max + 2;
+  });
+  const pad = (text, width) => ` ${text}${" ".repeat(Math.max(0, width - text.length - 1))}`;
+  const line = (left, mid, right, fill) => left + colWidths.map((w) => fill.repeat(w)).join(mid) + right;
+  const headerRow = chars.vertical + columns.map((col, i) => pad(col, colWidths[i])).join(chars.vertical) + chars.vertical;
+  return /* @__PURE__ */ jsxs("div", { className, style: tableStyle, children: [
+    /* @__PURE__ */ jsx("div", { children: line(chars.topLeft, chars.teeTop, chars.topRight, chars.horizontal) }),
+    /* @__PURE__ */ jsx("div", { style: { color: "var(--n3rd-text-secondary)" }, children: headerRow }),
+    /* @__PURE__ */ jsx("div", { children: line(chars.teeLeft, chars.cross, chars.teeRight, chars.horizontal) }),
+    rows.map((row, i) => /* @__PURE__ */ jsxs("div", { children: [
+      chars.vertical,
+      row.map((cell, j) => {
+        const text = getCellText(cell);
+        const accent = getCellAccent(cell);
+        const content = pad(text, colWidths[j]);
+        return /* @__PURE__ */ jsxs("span", { children: [
+          accent ? /* @__PURE__ */ jsx("span", { style: { color: `var(--n3rd-accent-${accent})` }, children: content }) : /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-text-primary)" }, children: content }),
+          j < row.length - 1 ? chars.vertical : ""
+        ] }, j);
+      }),
+      chars.vertical
+    ] }, i)),
+    /* @__PURE__ */ jsx("div", { children: line(chars.bottomLeft, chars.teeBottom, chars.bottomRight, chars.horizontal) })
+  ] });
+}
+function Code({
+  children,
+  title,
+  prompt,
+  showLineNumbers = false,
+  border = "single",
+  className,
+  style
+}) {
+  const lines = children.split("\n");
+  const codeStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-sm)",
+    lineHeight: "var(--n3rd-line-height)",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Box, { border, title, padding: "sm", className, children: /* @__PURE__ */ jsx("pre", { style: codeStyle, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { children: [
+    showLineNumbers && /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          color: "var(--n3rd-text-tertiary)",
+          marginRight: "var(--n3rd-space-3)",
+          userSelect: "none"
+        },
+        children: String(i + 1).padStart(3)
+      }
+    ),
+    prompt && i === 0 && /* @__PURE__ */ jsxs("span", { style: { color: "var(--n3rd-accent-primary)" }, children: [
+      prompt,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-text-primary)" }, children: line })
+  ] }, i)) }) });
+}
+function List({ items, bullet = ">", className, style }) {
+  const listStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-base)",
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("ul", { className, style: listStyle, children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      style: {
+        display: "flex",
+        gap: "var(--n3rd-space-2)",
+        marginBottom: "var(--n3rd-space-1)"
+      },
+      children: [
+        bullet !== "none" && /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-accent-primary)", flexShrink: 0 }, children: bullet === "numbered" ? `${i + 1}.` : bullet }),
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--n3rd-text-primary)" }, children: item })
+      ]
+    },
+    i
+  )) });
+}
+function Logo({ text, gradient = false, accent, className, style }) {
+  const gradientValue = typeof gradient === "string" ? gradient : "var(--n3rd-gradient)";
+  const logoStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-2xl)",
+    fontWeight: 700,
+    whiteSpace: "pre",
+    lineHeight: 1.1,
+    color: gradient ? "transparent" : accent ? `var(--n3rd-accent-${accent})` : "var(--n3rd-text-primary)",
+    ...gradient && {
+      background: gradientValue,
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: logoStyle, "aria-label": text, role: "img", children: text });
+}
+function StatusLine({ left, center, right, className, style }) {
+  const lineStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "var(--n3rd-space-1) var(--n3rd-space-3)",
+    backgroundColor: "var(--n3rd-bg-secondary)",
+    borderTop: "1px solid var(--n3rd-border-muted)",
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-xs)",
+    color: "var(--n3rd-text-secondary)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: lineStyle, role: "status", children: [
+    /* @__PURE__ */ jsx("div", { children: left }),
+    /* @__PURE__ */ jsx("div", { children: center }),
+    /* @__PURE__ */ jsx("div", { children: right })
+  ] });
+}
+
+// src/components/display/Footer.module.css
+var Footer_default = {};
+function Footer({
+  tagline = "where we're going, we don't need images",
+  links = [],
+  branding = "built with n3rd.ai",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs("footer", { className: `${Footer_default.footer} ${className ?? ""}`, style, children: [
+    branding && /* @__PURE__ */ jsxs("div", { className: Footer_default.branding, children: [
+      "\u2500\u2500 ",
+      branding,
+      " \u2500\u2500"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: Footer_default.starfield, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: Footer_default.starRow, children: "\xB7  \u2726    \xB7          \xB7          \xB7    \u2726  \xB7" }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.starRow, children: "    \xB7      \u2726     \xB7    \xB7      \xB7           \xB7" }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.starRow, children: "\u2726            \xB7          \xB7  \u2726         \xB7  \xB7" }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.starRow, children: "    \xB7    \xB7         \u2726       \xB7        \u2726" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: Footer_default.sunset, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "30%", background: "#7c3aed" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "45%", background: "#a855f7" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunGap }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "55%", background: "#c084fc" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "62%", background: "#ec4899" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunGap }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "70%", background: "#f472b6" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "78%", background: "#fb7185" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunGap, style: { height: "3px" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "85%", background: "#fda4af" } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.sunLine, style: { width: "92%", background: "#fecdd3" } })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: Footer_default.horizon, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: Footer_default.horizonBright }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.reflection }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.reflectionDashed }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.reflection, style: { opacity: 0.4 } }),
+      /* @__PURE__ */ jsx("div", { className: Footer_default.reflectionDashed, style: { opacity: 0.2 } })
+    ] }),
+    tagline && /* @__PURE__ */ jsx("div", { className: Footer_default.tagline, children: tagline.toUpperCase() }),
+    links.length > 0 && /* @__PURE__ */ jsx("nav", { className: Footer_default.links, children: links.map((link, i) => /* @__PURE__ */ jsxs("span", { children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { className: Footer_default.sep, children: " \u2502 " }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          className: Footer_default.link,
+          children: [
+            link.label,
+            link.external ? " \u2197" : ""
+          ]
+        }
+      )
+    ] }, link.label)) })
+  ] });
+}
+
+// src/components/input/Button.module.css
+var Button_default = {};
+var SPINNER_FRAMES = "\u280B\u2819\u2839\u2838\u283C\u2834\u2826\u2827\u2807\u280F";
+function Button({
+  children,
+  variant = "primary",
+  href,
+  external,
+  loading = false,
+  disabled = false,
+  onClick,
+  className,
+  style,
+  type = "button"
+}) {
+  const classes = [
+    Button_default.button,
+    Button_default[variant],
+    loading ? Button_default.loading : "",
+    disabled ? Button_default.disabled : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant !== "ghost" && "[ ",
+    loading && /* @__PURE__ */ jsx("span", { className: Button_default.spinner, "aria-hidden": "true", children: SPINNER_FRAMES[0] }),
+    loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      "..."
+    ] }) : children,
+    external && " \u2197",
+    variant !== "ghost" && " ]"
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        className: classes,
+        style,
+        onClick,
+        ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      className: classes,
+      style,
+      onClick,
+      disabled: disabled || loading,
+      children: content
+    }
+  );
+}
+var CURSOR_CHARS = {
+  block: "\u2588",
+  line: "\u258E",
+  underscore: "\u2581"
+};
+function Cursor({ style = "block", className }) {
+  const cursorStyle = {
+    display: "inline-block",
+    animation: "n3rd-cursor-blink var(--n3rd-cursor-blink) step-end infinite",
+    color: "var(--n3rd-text-primary)"
+  };
+  return /* @__PURE__ */ jsx("span", { className, style: cursorStyle, "aria-hidden": "true", children: CURSOR_CHARS[style] });
+}
+
+// src/components/input/Input.module.css
+var Input_default = {};
+function Input({
+  label,
+  placeholder,
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  prefix = ">",
+  cursor = "block",
+  type = "text",
+  disabled = false,
+  className,
+  style,
+  name,
+  id
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  const value = controlledValue ?? internalValue;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (controlledValue === void 0) setInternalValue(val);
+    onChange?.(val);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && onSubmit) {
+      onSubmit(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${Input_default.wrapper} ${className ?? ""}`, style, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: Input_default.label, htmlFor: id, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${Input_default.field} ${focused ? Input_default.focused : ""} ${disabled ? Input_default.disabled : ""}`,
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: Input_default.prefix, children: prefix }),
+          /* @__PURE__ */ jsxs("div", { className: Input_default.inputWrap, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id,
+                name,
+                type,
+                value,
+                placeholder,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
+                disabled,
+                className: Input_default.input
+              }
+            ),
+            focused && !disabled && /* @__PURE__ */ jsx(Cursor, { style: cursor })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var ICONS = {
+  success: "[\u2713]",
+  warning: "[!]",
+  error: "[\u2717]",
+  info: "[i]"
+};
+var COLORS = {
+  success: "var(--n3rd-accent-success)",
+  warning: "var(--n3rd-accent-warning)",
+  error: "var(--n3rd-accent-danger)",
+  info: "var(--n3rd-accent-info)"
+};
+function Alert({ children, variant = "info", className, style }) {
+  const alertStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "var(--n3rd-space-2)",
+    padding: "var(--n3rd-space-3)",
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-sm)",
+    backgroundColor: "var(--n3rd-bg-secondary)",
+    borderLeft: `2px solid ${COLORS[variant]}`,
+    color: "var(--n3rd-text-primary)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: alertStyle, role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { style: { color: COLORS[variant], flexShrink: 0 }, children: ICONS[variant] }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  width = 20,
+  showLabel = true,
+  accent,
+  className,
+  style
+}) {
+  const percent = Math.min(100, Math.max(0, value / max * 100));
+  const filled = Math.round(percent / 100 * width);
+  const empty = width - filled;
+  const bar = "\u2588".repeat(filled) + "\u2591".repeat(empty);
+  const progressStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-sm)",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "var(--n3rd-space-2)",
+    color: accent ? `var(--n3rd-accent-${accent})` : "var(--n3rd-accent-primary)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: progressStyle,
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemax": max,
+      children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "[",
+          bar,
+          "]"
+        ] }),
+        showLabel && /* @__PURE__ */ jsxs("span", { style: { color: "var(--n3rd-text-secondary)" }, children: [
+          Math.round(percent),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function Skeleton({ width = 30, lines = 1, className, style }) {
+  const skeletonStyle = {
+    fontFamily: "var(--n3rd-font)",
+    fontSize: "var(--n3rd-text-base)",
+    color: "var(--n3rd-text-tertiary)",
+    lineHeight: "var(--n3rd-line-height)",
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: skeletonStyle, "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx("div", { children: "\u2591".repeat(i === lines - 1 ? Math.ceil(width * 0.6) : width) }, i)) });
+}
+
+// src/components/nav/Nav.module.css
+var Nav_default = {};
+function Nav({ items, className, style }) {
+  return /* @__PURE__ */ jsx("nav", { className: `${Nav_default.nav} ${className ?? ""}`, style, children: /* @__PURE__ */ jsx("div", { className: Nav_default.items, children: items.map((item) => /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: item.href,
+      className: `${Nav_default.item} ${item.active ? Nav_default.active : ""}`,
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: [
+        item.active && /* @__PURE__ */ jsx("span", { className: Nav_default.indicator, children: "> " }),
+        "[ ",
+        item.label,
+        item.external ? " \u2197" : "",
+        " ]"
+      ]
+    },
+    item.label
+  )) }) });
+}
+function Typewriter({
+  text,
+  speed = 50,
+  delay = 0,
+  cursor = "block",
+  onComplete,
+  className
+}) {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+  const hasRun = useRef(false);
+  useEffect(() => {
+    if (hasRun.current) return;
+    hasRun.current = true;
+    let index = 0;
+    const timeout = setTimeout(() => {
+      const interval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayed(text.slice(0, index + 1));
+          index++;
+        } else {
+          clearInterval(interval);
+          setDone(true);
+          onComplete?.();
+        }
+      }, speed);
+      return () => clearInterval(interval);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [text, speed, delay, onComplete]);
+  return /* @__PURE__ */ jsxs("span", { className, children: [
+    displayed,
+    !done && cursor !== false && /* @__PURE__ */ jsx(Cursor, { style: cursor })
+  ] });
+}
+function Scanline({ opacity = 0.03 }) {
+  const style = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: 9999,
+    background: `repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 1px,
+      rgba(0, 0, 0, ${opacity}) 1px,
+      rgba(0, 0, 0, ${opacity}) 2px
+    )`
+  };
+  return /* @__PURE__ */ jsx("div", { style, "aria-hidden": "true" });
+}
+function N3rdProvider({
+  children,
+  scanlines = false,
+  toastDuration = 4e3
+}) {
+  return /* @__PURE__ */ jsxs(ToastProvider, { duration: toastDuration, children: [
+    children,
+    scanlines && /* @__PURE__ */ jsx(Scanline, {})
+  ] });
+}
+var jetbrainsMono = localFont({
+  src: [
+    {
+      path: "../fonts/JetBrainsMono-Regular.woff2",
+      weight: "400",
+      style: "normal"
+    },
+    {
+      path: "../fonts/JetBrainsMono-Bold.woff2",
+      weight: "700",
+      style: "normal"
+    }
+  ],
+  variable: "--n3rd-font",
+  display: "swap",
+  fallback: ["Fira Code", "Cascadia Code", "SF Mono", "Consolas", "Courier New", "monospace"]
+});
+var N3rdFonts = jetbrainsMono;
+
+export { Alert, Badge, Box, Button, Code, Cursor, Divider, Footer, Grid, Heading, Input, List, Logo, Metric, N3rdFonts, N3rdProvider, Nav, Page, Progress, Row, Scanline, Skeleton, Stack, StatusLine, Table, Text, Typewriter, jetbrainsMono };