@n3rd-ai/ui 0.1.0

package/dist/theme/theme/fonts.ts

@@ -0,0 +1,21 @@
+import localFont from 'next/font/local'
+
+export const 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'],
+})
+
+export const N3rdFonts = jetbrainsMono

package/dist/theme/theme/presets/classic.css

@@ -0,0 +1,23 @@
+@import '../tokens.css';
+@import '../reset.css';
+
+:root {
+  --n3rd-accent-violet: #22c55e;
+  --n3rd-accent-purple: #22c55e;
+  --n3rd-accent-lavender: #4ade80;
+  --n3rd-accent-pink: #ef4444;
+  --n3rd-accent-rose: #f87171;
+  --n3rd-accent-cyan: #22c55e;
+  --n3rd-accent-aqua: #4ade80;
+
+  --n3rd-accent-primary: #22c55e;
+  --n3rd-accent-success: #4ade80;
+  --n3rd-accent-warning: #eab308;
+  --n3rd-accent-danger: #ef4444;
+  --n3rd-accent-info: #22c55e;
+
+  --n3rd-border-focus: #22c55e;
+
+  --n3rd-gradient: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
+  --n3rd-gradient-full: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
+}

package/dist/theme/theme/presets/paper.css

@@ -0,0 +1,21 @@
+@import '../tokens.css';
+@import '../reset.css';
+
+:root {
+  --n3rd-bg-primary: #fafafa;
+  --n3rd-bg-secondary: #f0f0f0;
+  --n3rd-bg-tertiary: #e5e5e5;
+
+  --n3rd-text-primary: #1a1a1a;
+  --n3rd-text-secondary: #666666;
+  --n3rd-text-tertiary: #999999;
+
+  --n3rd-border-default: #cccccc;
+  --n3rd-border-focus: #7c3aed;
+  --n3rd-border-muted: #dddddd;
+}
+
+::selection {
+  background: var(--n3rd-accent-purple);
+  color: #ffffff;
+}

package/dist/theme/theme/presets/retro.css

@@ -0,0 +1,23 @@
+@import '../tokens.css';
+@import '../reset.css';
+
+:root {
+  --n3rd-accent-violet: #d97706;
+  --n3rd-accent-purple: #f59e0b;
+  --n3rd-accent-lavender: #fbbf24;
+  --n3rd-accent-pink: #ef4444;
+  --n3rd-accent-rose: #f87171;
+  --n3rd-accent-cyan: #f59e0b;
+  --n3rd-accent-aqua: #fbbf24;
+
+  --n3rd-accent-primary: #f59e0b;
+  --n3rd-accent-success: #fbbf24;
+  --n3rd-accent-warning: #f97316;
+  --n3rd-accent-danger: #ef4444;
+  --n3rd-accent-info: #f59e0b;
+
+  --n3rd-border-focus: #f59e0b;
+
+  --n3rd-gradient: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
+  --n3rd-gradient-full: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
+}

package/dist/theme/theme/presets/unicorn.css

@@ -0,0 +1,5 @@
+@import '../tokens.css';
+@import '../reset.css';
+
+/* Unicorn theme — default. Violet -> pink -> cyan on black. */
+/* All values are inherited from tokens.css — no overrides needed. */

package/dist/theme/theme/reset.css

@@ -0,0 +1,86 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--n3rd-font);
+  font-size: var(--n3rd-text-base);
+  line-height: var(--n3rd-line-height);
+  color: var(--n3rd-text-primary);
+  background-color: var(--n3rd-bg-primary);
+  min-height: 100vh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--n3rd-font);
+  font-weight: 700;
+}
+
+a {
+  color: var(--n3rd-accent-cyan);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  font-family: var(--n3rd-font);
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: var(--n3rd-font);
+  font-size: var(--n3rd-text-base);
+  color: var(--n3rd-text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+code,
+pre {
+  font-family: var(--n3rd-font);
+}
+
+::selection {
+  background: var(--n3rd-accent-purple);
+  color: var(--n3rd-bg-primary);
+}
+
+:focus-visible {
+  outline: 1px solid var(--n3rd-border-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/theme/theme/tokens.css

@@ -0,0 +1,61 @@
+:root {
+  /* typography */
+  --n3rd-font:
+    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Consolas', 'Courier New', monospace;
+  --n3rd-text-xs: 0.6875rem;
+  --n3rd-text-sm: 0.8125rem;
+  --n3rd-text-base: 0.875rem;
+  --n3rd-text-lg: 1rem;
+  --n3rd-text-xl: 1.25rem;
+  --n3rd-text-2xl: 1.5rem;
+  --n3rd-line-height: 1.6;
+
+  /* spacing */
+  --n3rd-space-1: 0.25rem;
+  --n3rd-space-2: 0.5rem;
+  --n3rd-space-3: 0.75rem;
+  --n3rd-space-4: 1rem;
+  --n3rd-space-6: 1.5rem;
+  --n3rd-space-8: 2rem;
+  --n3rd-space-12: 3rem;
+
+  /* surfaces */
+  --n3rd-bg-primary: #0a0a0a;
+  --n3rd-bg-secondary: #111111;
+  --n3rd-bg-tertiary: #1a1a1a;
+
+  /* text */
+  --n3rd-text-primary: #e0e0e0;
+  --n3rd-text-secondary: #888888;
+  --n3rd-text-tertiary: #555555;
+
+  /* borders */
+  --n3rd-border-default: #333333;
+  --n3rd-border-focus: #a855f7;
+  --n3rd-border-muted: #222222;
+
+  /* unicorn accent spectrum */
+  --n3rd-accent-violet: #7c3aed;
+  --n3rd-accent-purple: #a855f7;
+  --n3rd-accent-lavender: #c084fc;
+  --n3rd-accent-pink: #ec4899;
+  --n3rd-accent-rose: #f472b6;
+  --n3rd-accent-cyan: #06b6d4;
+  --n3rd-accent-aqua: #22d3ee;
+
+  /* semantic */
+  --n3rd-accent-primary: #a855f7;
+  --n3rd-accent-success: #22d3ee;
+  --n3rd-accent-warning: #f472b6;
+  --n3rd-accent-danger: #ec4899;
+  --n3rd-accent-info: #06b6d4;
+
+  /* gradients */
+  --n3rd-gradient: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899);
+  --n3rd-gradient-full: linear-gradient(90deg, #7c3aed, #ec4899, #06b6d4);
+
+  /* animation durations */
+  --n3rd-cursor-blink: 530ms;
+  --n3rd-typewriter-speed: 50ms;
+  --n3rd-fade-duration: 200ms;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,15 @@
+import { B as BorderStyle } from '../ascii-border-DpKIQMLP.js';
+
+interface BoxOptions {
+    border?: BorderStyle;
+    title?: string;
+    padding?: number;
+}
+declare function drawBox(content: string, options?: BoxOptions): string;
+
+interface FormatTableOptions {
+    border?: BorderStyle;
+}
+declare function formatTable(columns: string[], rows: string[][], options?: FormatTableOptions): string;
+
+export { type BoxOptions, type FormatTableOptions, drawBox, formatTable };

package/dist/utils/index.js

@@ -0,0 +1,59 @@
+import { getBorderChars } from '../chunk-CBVIEAN7.js';
+
+// src/utils/box.ts
+function drawBox(content, options = {}) {
+  const { border = "single", title, padding = 1 } = options;
+  const chars = getBorderChars(border);
+  if (!chars) return content;
+  const lines = content.split("\n");
+  const maxLen = Math.max(...lines.map((l) => l.length), title ? title.length + 2 : 0);
+  const innerWidth = maxLen + padding * 2;
+  const pad = " ".repeat(padding);
+  const emptyLine = chars.vertical + " ".repeat(innerWidth) + chars.vertical;
+  let top;
+  if (title) {
+    const titleStr = ` ${title} `;
+    const remaining = innerWidth - titleStr.length - 1;
+    top = chars.topLeft + chars.horizontal + titleStr + chars.horizontal.repeat(remaining) + chars.topRight;
+  } else {
+    top = chars.topLeft + chars.horizontal.repeat(innerWidth) + chars.topRight;
+  }
+  const bottom = chars.bottomLeft + chars.horizontal.repeat(innerWidth) + chars.bottomRight;
+  const body = lines.map((line) => {
+    const padded = pad + line + " ".repeat(maxLen - line.length) + pad;
+    return chars.vertical + padded + chars.vertical;
+  });
+  const paddingLines = Array(padding).fill(emptyLine);
+  return [top, ...paddingLines, ...body, ...paddingLines, bottom].join("\n");
+}
+
+// src/utils/table.ts
+function formatTable(columns, rows, options = {}) {
+  const { border = "single" } = options;
+  const chars = getBorderChars(border);
+  if (!chars) {
+    return [columns.join("	"), ...rows.map((r) => r.join("	"))].join("\n");
+  }
+  const colWidths = columns.map((col, i) => {
+    let max = col.length;
+    for (const row of rows) {
+      if (row[i]) max = Math.max(max, 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 header = chars.vertical + columns.map((col, i) => pad(col, colWidths[i])).join(chars.vertical) + chars.vertical;
+  const dataRows = rows.map(
+    (row) => chars.vertical + row.map((cell, i) => pad(cell, colWidths[i])).join(chars.vertical) + chars.vertical
+  );
+  return [
+    line(chars.topLeft, chars.teeTop, chars.topRight, chars.horizontal),
+    header,
+    line(chars.teeLeft, chars.cross, chars.teeRight, chars.horizontal),
+    ...dataRows,
+    line(chars.bottomLeft, chars.teeBottom, chars.bottomRight, chars.horizontal)
+  ].join("\n");
+}
+
+export { drawBox, formatTable };

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@n3rd-ai/ui",
+  "version": "0.1.0",
+  "description": "Terminal-first UI framework for Next.js. ASCII everything. Zero images. Pure text.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
+    "./theme/unicorn.css": "./dist/theme/presets/unicorn.css",
+    "./theme/classic.css": "./dist/theme/presets/classic.css",
+    "./theme/retro.css": "./dist/theme/presets/retro.css",
+    "./theme/paper.css": "./dist/theme/presets/paper.css",
+    "./theme/tokens.css": "./dist/theme/tokens.css",
+    "./theme/reset.css": "./dist/theme/reset.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:ci": "vitest run --coverage",
+    "test:watch": "vitest",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "terminal",
+    "ascii",
+    "ui",
+    "nextjs",
+    "react",
+    "components",
+    "monospace",
+    "tui",
+    "mcp"
+  ],
+  "author": "Superstellar LLC",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SuperstellarLLC/n3rd-ai-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/SuperstellarLLC/n3rd-ai-ui/issues"
+  },
+  "homepage": "https://n3rd.ai",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.0",
+    "@commitlint/config-conventional": "^19.0.0",
+    "@eslint/js": "^9.0.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "husky": "^9.0.0",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.0",
+    "next": "^15.0.0",
+    "prettier": "^3.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^11.0.0",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^1.6.0"
+  }
+}