@axle-lang/ui 0.1.0

package/dist/utils/cn.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Merge class names: clsx for conditionals, tailwind-merge to resolve
+ * conflicting Tailwind utilities (the later one wins).
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/icons.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Icon path data (24x24 viewBox, stroke-based).
+ * Use with <Icon name="search" /> — see Icon.svelte.
+ * Each entry is an array of `d` attributes for <path>.
+ */
+export declare const icons: {
+    search: string[];
+    theme: string[];
+    git: string[];
+    arrow: string[];
+    copy: string[];
+    check: string[];
+    info: string[];
+    edit: string[];
+    package: string[];
+    prev: string[];
+    next: string[];
+    noGc: string[];
+    shield: string[];
+    alert: string[];
+    cpu: string[];
+    timer: string[];
+    stack: string[];
+};
+/** A valid icon name (key of the `icons` map). */
+export type IconName = keyof typeof icons;

package/dist/utils/icons.js

@@ -0,0 +1,55 @@
+/**
+ * Icon path data (24x24 viewBox, stroke-based).
+ * Use with <Icon name="search" /> — see Icon.svelte.
+ * Each entry is an array of `d` attributes for <path>.
+ */
+export const icons = {
+    search: ['M11 11m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0', 'M21 21l-4.3 -4.3'],
+    theme: ['M12 3a6 6 0 0 0 9 9a9 9 0 1 1 -9 -9'],
+    git: [
+        'M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12 12 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5'
+    ],
+    arrow: ['M5 12h14', 'M13 6l6 6l-6 6'],
+    copy: [
+        'M9 9m0 2a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2z',
+        'M5 15H4a2 2 0 0 1 -2 -2V4a2 2 0 0 1 2 -2h9a2 2 0 0 1 2 2v1'
+    ],
+    check: ['M5 12l5 5l10 -11'],
+    info: ['M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', 'M12 9h.01', 'M11 12h1v4h1'],
+    edit: ['M4 20h4l10.5 -10.5a2.1 2.1 0 0 0 -3 -3l-10.5 10.5v3z', 'M13.5 6.5l3 3'],
+    package: ['M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9z', 'M12 12l8 -4.5', 'M12 12v9', 'M12 12l-8 -4.5'],
+    prev: ['M15 6l-6 6l6 6'],
+    next: ['M9 6l6 6l-6 6'],
+    // feature icons
+    noGc: [
+        'M4 7h16',
+        'M10 11v6',
+        'M14 11v6',
+        'M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12',
+        'M9 7V4a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3'
+    ],
+    shield: ['M12 3l8 4v5c0 4.4 -3 7.4 -8 9c-5 -1.6 -8 -4.6 -8 -9v-5z', 'M9 12l2 2l4 -4'],
+    alert: [
+        'M12 9v4',
+        'M12 17h.01',
+        'M10.3 4.3l-8 14a2 2 0 0 0 1.7 3h16a2 2 0 0 0 1.7 -3l-8 -14a2 2 0 0 0 -3.4 0z'
+    ],
+    cpu: [
+        'M9 3v2',
+        'M15 3v2',
+        'M9 19v2',
+        'M15 19v2',
+        'M3 9h2',
+        'M3 15h2',
+        'M19 9h2',
+        'M19 15h2',
+        'M6 6h12v12h-12z',
+        'M10 10h4v4h-4z'
+    ],
+    timer: ['M12 8v4l3 2', 'M3.05 11a9 9 0 1 1 .5 4', 'M3 4v5h5'],
+    stack: [
+        'M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0',
+        'M4 6v6a8 3 0 0 0 16 0v-6',
+        'M4 12v6a8 3 0 0 0 16 0v-6'
+    ]
+};

package/dist/utils/tokenizer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Lightweight multi-language syntax tokenizer.
+ * Emits HTML with .t-kw / .t-ty / .t-fn / .t-str / .t-num / .t-com / .t-p
+ * spans, coloured by the design-system tokens in app.css.
+ *
+ * `highlight(src, lang)` covers Axle plus the C / C++ / Rust / Go / Java
+ * comparison snippets (general mode: line + block comments and
+ * double/back/single-quoted strings) and a shell mode (sh / bash) with
+ * hash comments and $vars.
+ */
+/** Returns an HTML string. Use with {@html ...} inside a <code> element. */
+export declare function highlight(src: string, lang?: string): string;

package/dist/utils/tokenizer.js

@@ -0,0 +1,181 @@
+/**
+ * Lightweight multi-language syntax tokenizer.
+ * Emits HTML with .t-kw / .t-ty / .t-fn / .t-str / .t-num / .t-com / .t-p
+ * spans, coloured by the design-system tokens in app.css.
+ *
+ * `highlight(src, lang)` covers Axle plus the C / C++ / Rust / Go / Java
+ * comparison snippets (general mode: line + block comments and
+ * double/back/single-quoted strings) and a shell mode (sh / bash) with
+ * hash comments and $vars.
+ */
+const KEYWORDS = new Set([
+    'class',
+    'fn',
+    'let',
+    'return',
+    'new',
+    'this',
+    'constructor',
+    'for',
+    'of',
+    'in',
+    'if',
+    'else',
+    'while',
+    'do',
+    'defer',
+    'throw',
+    'throws',
+    'try',
+    'catch',
+    'use',
+    'spawn',
+    'await',
+    'true',
+    'false',
+    'extern',
+    'import',
+    'pub',
+    'mut',
+    'match',
+    'as',
+    'null',
+    'break',
+    'continue',
+    'native',
+    'static',
+    'unsafe',
+    'shared',
+    'synchronized',
+    'const',
+    'struct',
+    'enum',
+    'func',
+    'package',
+    'var',
+    'nil',
+    'public',
+    'private',
+    'protected',
+    'final',
+    'finally',
+    'interface',
+    'implements',
+    'readonly',
+    'async',
+    'int',
+    'long',
+    'short',
+    'double',
+    'float',
+    'unsigned',
+    'signed',
+    // Rust
+    'impl',
+    'trait',
+    'where',
+    'dyn',
+    'move',
+    'ref',
+    'mod',
+    'crate',
+    'Self',
+    // shell control words
+    'then',
+    'fi',
+    'elif',
+    'done',
+    'esac',
+    'case',
+    'function',
+    'export',
+    'local'
+]);
+const PRIMITIVES = new Set([
+    'i8',
+    'i16',
+    'i32',
+    'i64',
+    'u8',
+    'u16',
+    'u32',
+    'u64',
+    'f32',
+    'f64',
+    'bool',
+    'string',
+    'void',
+    'char',
+    'isize',
+    'usize',
+    'boolean',
+    'str'
+]);
+const GENERAL_RE = /(\/\*[\s\S]*?\*\/|\/\/[^\n]*)|("(?:\\.|[^"\\])*"|`(?:\\.|[^`\\])*`|'(?:\\.|[^'\\])*')|(\b\d[\d_]*(?:\.\d+)?)|([A-Za-z_]\w*)|(\s+)|([\s\S])/g;
+const SHELL_RE = /(#[^\n]*)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\$\w+|\$\{[^}]*\})|(\b\d[\d_]*(?:\.\d+)?)|([A-Za-z_]\w*)|(\s+)|([\s\S])/g;
+function esc(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+const isShell = (lang) => ['sh', 'bash', 'shell', 'console', 'zsh'].includes((lang || '').toLowerCase());
+/** Returns an HTML string. Use with {@html ...} inside a <code> element. */
+export function highlight(src, lang) {
+    const sh = isShell(lang);
+    const re = sh ? SHELL_RE : GENERAL_RE;
+    re.lastIndex = 0;
+    const tokens = [];
+    let m;
+    while ((m = re.exec(src))) {
+        if (m[1] != null)
+            tokens.push(['com', m[1]]);
+        else if (m[2] != null)
+            tokens.push(['str', m[2]]);
+        else if (sh && m[3] != null)
+            tokens.push(['var', m[3]]);
+        else if (m[sh ? 4 : 3] != null)
+            tokens.push(['num', m[sh ? 4 : 3]]);
+        else if (m[sh ? 5 : 4] != null)
+            tokens.push(['id', m[sh ? 5 : 4]]);
+        else if (m[sh ? 6 : 5] != null)
+            tokens.push(['ws', m[sh ? 6 : 5]]);
+        else
+            tokens.push(['p', m[sh ? 7 : 6]]);
+    }
+    let out = '';
+    for (let i = 0; i < tokens.length; i++) {
+        const [type, value] = tokens[i];
+        if (type === 'ws') {
+            out += esc(value);
+            continue;
+        }
+        if (type === 'id') {
+            let cls = 't-id';
+            if (KEYWORDS.has(value))
+                cls = 't-kw';
+            else if (PRIMITIVES.has(value))
+                cls = 't-ty';
+            else if (/^[A-Z]/.test(value))
+                cls = 't-ty';
+            else {
+                let j = i + 1;
+                while (j < tokens.length && tokens[j][0] === 'ws')
+                    j++;
+                if (j < tokens.length && tokens[j][1].charAt(0) === '(')
+                    cls = 't-fn';
+            }
+            out += cls === 't-id' ? esc(value) : `<span class="${cls}">${esc(value)}</span>`;
+        }
+        else {
+            const cls = type === 'com'
+                ? 't-com'
+                : type === 'str'
+                    ? 't-str'
+                    : type === 'num'
+                        ? 't-num'
+                        : type === 'var'
+                            ? 't-fn'
+                            : 't-p';
+            out += `<span class="${cls}">${esc(value)}</span>`;
+        }
+    }
+    return out;
+}

package/dist/utils/types.d.ts

@@ -0,0 +1,50 @@
+/** A documented parameter (axle_doc `@param`). */
+export interface DocParam {
+    name: string;
+    desc: string;
+}
+/** A documented throw (axle_doc `@throws`). */
+export interface DocThrow {
+    type: string;
+    desc: string;
+}
+/** A documented declaration — function, method, or constructor. */
+export interface DocMethod {
+    name: string;
+    ret: string;
+    sig: string;
+    desc: string;
+    params?: DocParam[];
+    returns?: string;
+    throws?: DocThrow[];
+}
+/** One measured metric column of the benchmark table. */
+export interface Metric {
+    key: string;
+    label: string;
+    unit: string;
+    group: string;
+}
+/** One language / opt-level row of results (metric key → value). */
+export interface BenchResult {
+    lang: string;
+    opt: string;
+    [metric: string]: string | number;
+}
+/** One benchmarked program, with its per-language sources. */
+export interface BenchProgram {
+    name: string;
+    blurb?: string;
+    results: BenchResult[];
+    sources: Record<string, string>;
+}
+/** A category grouping several programs. */
+export interface BenchCategory {
+    name: string;
+    programs: BenchProgram[];
+}
+/** The full benchmark dataset consumed by `BenchExplorer`. */
+export interface BenchData {
+    metrics: Metric[];
+    categories: BenchCategory[];
+}

package/dist/utils/types.js

@@ -0,0 +1,4 @@
+// Shared, public data shapes for the content the consuming apps inject
+// into the components. The library renders these; the apps (and their
+// generators) produce them. Re-exported from the package barrel.
+export {};

package/dist/utils/variants.d.ts

@@ -0,0 +1,20 @@
+/** Segmented pill button — metric / language / source tabs. */
+export declare const tab: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    active?: boolean | null | undefined;
+    tone?: "surface" | "canvas" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Bordered segmented control — the comparison-panel task tabs. */
+export declare const segmented: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Primary / secondary action button (link or <button>). */
+export declare const button: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Docs sidebar nav item. */
+export declare const navItem: (props?: ({
+    active?: boolean | null | undefined;
+    indent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/utils/variants.js

@@ -0,0 +1,50 @@
+import { cva } from 'class-variance-authority';
+// Variant definitions for the recurring interactive controls, so call
+// sites pass props (active/size/tone) instead of hand-writing ternary
+// class strings.
+/** Segmented pill button — metric / language / source tabs. */
+export const tab = cva('flex items-center rounded-md font-medium cursor-pointer transition-colors', {
+    variants: {
+        size: { sm: 'h-7 px-2.5 text-[12px]', md: 'h-8 px-3 text-[12.5px]' },
+        active: { true: 'bg-accent text-white', false: 'text-muted hover:text-fg' },
+        // hover background depends on the surface the tab sits on
+        tone: { surface: '', canvas: '' }
+    },
+    compoundVariants: [
+        { active: false, tone: 'surface', class: 'hover:bg-surface' },
+        { active: false, tone: 'canvas', class: 'hover:bg-canvas' }
+    ],
+    defaultVariants: { size: 'md', active: false, tone: 'surface' }
+});
+/** Bordered segmented control — the comparison-panel task tabs. */
+export const segmented = cva('flex items-center h-8 px-3 rounded-lg border text-[12.5px] font-medium cursor-pointer transition-colors', {
+    variants: {
+        active: {
+            true: 'bg-accent text-white border-accent',
+            false: 'bg-canvas text-muted border-line hover:text-fg hover:border-faint'
+        }
+    },
+    defaultVariants: { active: false }
+});
+/** Primary / secondary action button (link or <button>). */
+export const button = cva('inline-flex items-center gap-1.5 font-medium cursor-pointer transition-colors rounded-lg', {
+    variants: {
+        variant: {
+            primary: 'bg-accent text-white hover:opacity-90',
+            secondary: 'bg-canvas text-fg border border-line hover:bg-surface'
+        },
+        size: { sm: 'h-9 px-4 text-[13px]', md: 'h-11 px-5 text-[14px]' }
+    },
+    defaultVariants: { variant: 'primary', size: 'md' }
+});
+/** Docs sidebar nav item. */
+export const navItem = cva('block rounded-md px-3 py-1.5 text-[13px] transition-colors', {
+    variants: {
+        active: {
+            true: 'bg-accent-soft text-accent font-medium',
+            false: 'text-muted hover:text-fg hover:bg-surface'
+        },
+        indent: { true: 'pl-7', false: '' }
+    },
+    defaultVariants: { active: false, indent: false }
+});

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@axle-lang/ui",
+  "version": "0.1.0",
+  "description": "Axle design system — content-agnostic Svelte 5 + Tailwind v4 components, routing helpers, and the i18n chrome catalog shared by the Axle landing and docs sites.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/axle-lang/axle-docs-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./app.css": "./dist/app.css",
+    "./tokenizer": {
+      "types": "./dist/utils/tokenizer.d.ts",
+      "svelte": "./dist/utils/tokenizer.js",
+      "default": "./dist/utils/tokenizer.js"
+    }
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2",
+    "svelte": "^5",
+    "svelte-i18n": "^4"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.2",
+    "publint": "^0.3.2",
+    "svelte": "^5.56.1",
+    "svelte-check": "^4.1.0",
+    "svelte-i18n": "^4.0.1",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.7.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^8.0.16"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "sync": "svelte-kit sync",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  }
+}