@odyn-app/api 0.0.0-stage → 0.1.0

package/dist/ui/orb/orb-types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * S1–S5 are the family's five general looks. S6–S9 are the stacked-PR waits,
+ * drawn frame by frame on the same grid: S6 moving work (rising chevrons),
+ * S7 sending to GitHub (chevrons right), S8 fetching from it (chevrons left),
+ * S9 waiting on someone else (climb).
+ */
+export type LatticeFrameVariant = 'S6' | 'S7' | 'S8' | 'S9';
+export type LatticeVariant = 'S1' | 'S2' | 'S3' | 'S4' | 'S5' | LatticeFrameVariant;
+export type LensVariant = 'B1' | 'B2' | 'B3' | 'B4' | 'B5';
+export type RingVariant = 'C1' | 'C2' | 'C3' | 'C4' | 'C5';
+export type HelixVariant = 'G1' | 'G2' | 'G3' | 'G4' | 'G5';
+export type MorphVariant = 'M1' | 'M2' | 'M3' | 'M4' | 'M5';
+export type OrbVariant = LatticeVariant | LensVariant | RingVariant | HelixVariant | MorphVariant;
+export declare const LATTICE_VARIANTS: readonly LatticeVariant[];
+export declare const RING_VARIANTS: readonly RingVariant[];
+export declare const HELIX_VARIANTS: readonly HelixVariant[];
+export declare const MORPH_VARIANTS: readonly MorphVariant[];
+/** The activity each variant was drawn to read as — used for the orb's label. */
+export declare const ORB_TASKS: Record<OrbVariant, string>;
+export declare function isLattice(variant: OrbVariant): variant is LatticeVariant;
+export declare function isRing(variant: OrbVariant): variant is RingVariant;
+export declare function isHelix(variant: OrbVariant): variant is HelixVariant;
+export declare function isMorph(variant: OrbVariant): variant is MorphVariant;

package/dist/ui/orb/orb-types.js

@@ -0,0 +1,48 @@
+export const LATTICE_VARIANTS = ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9'];
+export const RING_VARIANTS = ['C1', 'C2', 'C3', 'C4', 'C5'];
+export const HELIX_VARIANTS = ['G1', 'G2', 'G3', 'G4', 'G5'];
+export const MORPH_VARIANTS = ['M1', 'M2', 'M3', 'M4', 'M5'];
+/** The activity each variant was drawn to read as — used for the orb's label. */
+export const ORB_TASKS = {
+    S1: 'Thinking',
+    S2: 'Processing',
+    S3: 'Working',
+    S4: 'Searching',
+    S5: 'Finalizing',
+    S6: 'Restacking',
+    S7: 'Sending',
+    S8: 'Fetching',
+    S9: 'Waiting',
+    B1: 'Thinking',
+    B2: 'Searching',
+    B3: 'Generating',
+    B4: 'Solving',
+    B5: 'Routing',
+    C1: 'Loading',
+    C2: 'Listening',
+    C3: 'Streaming',
+    C4: 'Analyzing',
+    C5: 'Compiling',
+    G1: 'Processing',
+    G2: 'Sequencing',
+    G3: 'Uploading',
+    G4: 'Syncing',
+    G5: 'Idling',
+    M1: 'Shaping',
+    M2: 'Expanding',
+    M3: 'Unfolding',
+    M4: 'Transforming',
+    M5: 'Dispersing',
+};
+export function isLattice(variant) {
+    return LATTICE_VARIANTS.includes(variant);
+}
+export function isRing(variant) {
+    return RING_VARIANTS.includes(variant);
+}
+export function isHelix(variant) {
+    return HELIX_VARIANTS.includes(variant);
+}
+export function isMorph(variant) {
+    return MORPH_VARIANTS.includes(variant);
+}

package/dist/ui/orb/orb.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactElement } from 'react';
+import { type OrbVariant } from './orb-types';
+export interface OrbProps {
+    readonly variant?: OrbVariant;
+    /** Rendered edge length in px. The 28px geometry scales to fit. */
+    readonly size?: number;
+    /** Accessible label. Omit and the variant's own activity word is used. */
+    readonly label?: string;
+    /** Hide from assistive technology when a visible label already says this. */
+    readonly decorative?: boolean;
+    /** Hold the orb on its opening frame — the row keeps its shape while idle. */
+    readonly paused?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare function Orb({ variant, size, label, decorative, paused, className, style, }: OrbProps): ReactElement;
+export type { OrbVariant } from './orb-types';

package/dist/ui/orb/orb.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import baseStyles from './orb-base.module.css';
+import helixStyles from './orb-helix.module.css';
+import latticeStyles from './orb-lattice.module.css';
+import lensStyles from './orb-lens.module.css';
+import lensPrimaryStyles from './orb-lens-primary.module.css';
+import lensSecondaryStyles from './orb-lens-secondary.module.css';
+import morphStyles from './orb-morph.module.css';
+import ringStyles from './orb-ring.module.css';
+import { globeDots } from './orb-helix-geometry';
+import { latticeCells } from './orb-lattice-geometry';
+import { morphDots } from './orb-morph-geometry';
+import { ringDots } from './orb-ring-geometry';
+import { isHelix, isLattice, isMorph, isRing, ORB_TASKS, } from './orb-types';
+const STAGE = 28;
+const DEFAULT_SIZE = 14;
+const PRIMARY_LENS_VARIANTS = ['B1', 'B2', 'B3'];
+function lensVariantClass(variant) {
+    return PRIMARY_LENS_VARIANTS.includes(variant)
+        ? lensPrimaryStyles.variants
+        : lensSecondaryStyles.variants;
+}
+export function Orb({ variant = 'S1', size = DEFAULT_SIZE, label, decorative = false, paused = false, className, style, }) {
+    const text = label ?? `${ORB_TASKS[variant]}…`;
+    return (_jsx("span", { className: className ? `${baseStyles.root} ${className}` : baseStyles.root, "data-orb-paused": paused ? '' : undefined, style: style, children: _jsx("span", { className: baseStyles.glyph, role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : text, "aria-hidden": decorative ? true : undefined, style: { width: size, height: size, '--orb-k': size / STAGE }, children: isLattice(variant) ? (_jsx("span", { className: latticeStyles.lattice, "data-variant": variant, children: latticeCells(variant).map((cell) => (_jsx("span", { className: latticeStyles.cell, "data-still": cell.still ? '' : undefined, "data-mid": cell.mid ? '' : undefined, style: {
+                        left: cell.left,
+                        top: cell.top,
+                        animationDelay: `${cell.delay}ms`,
+                        '--orb-ax': `${cell.ax}px`,
+                        '--orb-ay': `${cell.ay}px`,
+                        '--orb-bx': `${cell.bx}px`,
+                        '--orb-by': `${cell.by}px`,
+                        ...cell.frames,
+                    } }, cell.key))) })) : isRing(variant) ? (_jsx("span", { className: ringStyles.ring, "data-variant": variant, children: ringDots(variant).map((dot) => (_jsx("span", { className: ringStyles.ringDot, style: {
+                        '--orb-rx': `${dot.rx}px`,
+                        '--orb-ry': `${dot.ry}px`,
+                        animationDelay: `${dot.delay}ms`,
+                    } }, dot.key))) })) : isHelix(variant) ? (_jsx("span", { className: helixStyles.helix, "data-variant": variant, children: globeDots(variant).map((dot) => (_jsx("span", { className: helixStyles.helixDot, style: dot.style }, dot.key))) })) : isMorph(variant) ? (_jsx("span", { className: morphStyles.morph, "data-variant": variant, children: morphDots(variant).map((dot) => (_jsx("span", { className: morphStyles.morphDot, style: dot.style }, dot.key))) })) : (_jsxs("span", { className: `${lensStyles.lens} ${lensVariantClass(variant)}`, "data-variant": variant, children: [_jsx("span", { className: lensStyles.shape, "data-orb-shape": "a" }), _jsx("span", { className: lensStyles.shape, "data-orb-shape": "b" }), _jsx("span", { className: lensStyles.shape, "data-orb-shape": "c" }), variant === 'B1' && (_jsx("span", { className: lensStyles.shape, "data-orb-shape": "d" }))] })) }) }));
+}

package/dist/ui/setting-row.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface SettingRowProps {
+    readonly title: string;
+    readonly description: ReactNode;
+    readonly disabled?: boolean;
+    readonly children: ReactNode;
+}
+/** One line of a settings page: a title and description on the left, a control on the right. */
+export declare function SettingRow({ title, description, disabled, children }: SettingRowProps): ReactElement;

package/dist/ui/setting-row.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn';
+/** One line of a settings page: a title and description on the left, a control on the right. */
+export function SettingRow({ title, description, disabled = false, children }) {
+    return (_jsxs("div", { "data-slot": "setting-row", className: cn(
+        // A faint line above any row that directly follows another row, so rows
+        // are split up without a line at the top or bottom of a group.
+        'flex items-start justify-between gap-8 border-border/50 py-3 [[data-slot=setting-row]+&]:border-t', disabled && 'pointer-events-none opacity-40'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "mt-0.5 max-w-[75%] text-pretty text-xs text-muted-foreground", children: description })] }), _jsx("div", { className: "shrink-0", children: children })] }));
+}

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps, ReactElement } from 'react';
+/** A shimmering grey block that holds a space while something loads. */
+export declare function Skeleton({ className, ...props }: ComponentProps<'div'>): ReactElement;

package/dist/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './cn';
+/** A shimmering grey block that holds a space while something loads. */
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn('animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]', className), "data-slot": "skeleton", ...props }));
+}

package/dist/ui/theme.css

@@ -0,0 +1,232 @@
+/*
+ * The Odyn look for extension pages: colours, fonts and basic page styles, in
+ * light and dark. Import it once at the top of your page's stylesheet:
+ *
+ *   @import "@odyn-app/api/theme.css";
+ *
+ * Dark mode follows a `dark` class on <html>, which your page sets from the
+ * theme Odyn hands over (see `connectSurface`).
+ */
+@import "tailwindcss";
+/* The kit's own components live next to this file; tell Tailwind to read them. */
+@source "./";
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-sans: 'Inter Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-heading: 'Inter Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+@theme inline {
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --animate-caret-blink: 1s ease-out infinite caret-blink;
+  --font-heading: var(--font-heading);
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar: var(--sidebar);
+  --color-code-highlight: var(--code-highlight);
+  --code-foreground: var(--code-foreground);
+  --color-code: var(--code);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-ring: var(--ring);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-input: var(--input);
+  --color-foreground: var(--foreground);
+  --color-destructive: var(--destructive);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-background: var(--background);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: calc(1.125 / 0.8125);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  @keyframes skeleton {
+  to {
+    background-position: -200% 0;
+    }
+  }
+  @keyframes caret-blink {
+  0%, 70%, to {
+    opacity: 1;
+    }
+  20%, 50% {
+    opacity: 0;
+    }
+  }
+}
+
+:root {
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+  --accent: --alpha(var(--color-black) / 4%);
+  --accent-foreground: var(--color-neutral-800);
+  --background: var(--color-white);
+  --border: --alpha(var(--color-black) / 8%);
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-800);
+  --destructive: var(--color-red-500);
+  --foreground: var(--color-neutral-800);
+  --input: --alpha(var(--color-black) / 10%);
+  --muted: --alpha(var(--color-black) / 4%);
+  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-800);
+  --primary: var(--color-neutral-800);
+  --primary-foreground: var(--color-neutral-50);
+  --ring: var(--color-neutral-400);
+  --secondary: --alpha(var(--color-black) / 4%);
+  --secondary-foreground: var(--color-neutral-800);
+  --chart-1: var(--color-orange-600);
+  --chart-2: var(--color-teal-600);
+  --chart-3: var(--color-cyan-900);
+  --chart-4: var(--color-amber-400);
+  --chart-5: var(--color-amber-500);
+  --code: var(--color-neutral-50);
+  --code-foreground: var(--foreground);
+  --code-highlight: --alpha(var(--color-black) / 4%);
+  --radius: 0.625rem;
+  /* Same surface as the page: the default themes read as one window with a
+     divider in it rather than two panels of slightly different greys. The
+     named themes below keep their own tinted sidebar. */
+  --sidebar: var(--background);
+  --sidebar-accent: --alpha(var(--color-black) / 4%);
+  --sidebar-accent-foreground: var(--color-neutral-800);
+  --sidebar-border: --alpha(var(--color-black) / 6%);
+  --sidebar-foreground: color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar));
+  --sidebar-primary: var(--color-neutral-800);
+  --sidebar-primary-foreground: var(--color-neutral-50);
+  --sidebar-ring: var(--color-neutral-400);
+}
+
+.dark {
+  --destructive-foreground: var(--color-red-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+  --accent: --alpha(var(--color-white) / 4%);
+  --accent-foreground: var(--color-neutral-100);
+  --background: color-mix(in srgb, var(--color-neutral-950) 82%, var(--color-white));
+  --border: --alpha(var(--color-white) / 6%);
+  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  --card-foreground: var(--color-neutral-100);
+  --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
+  --foreground: var(--color-neutral-100);
+  --input: --alpha(var(--color-white) / 8%);
+  --muted: --alpha(var(--color-white) / 4%);
+  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
+  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  --popover-foreground: var(--color-neutral-100);
+  --primary: var(--color-neutral-100);
+  --primary-foreground: var(--color-neutral-800);
+  --ring: var(--color-neutral-500);
+  --secondary: --alpha(var(--color-white) / 4%);
+  --secondary-foreground: var(--color-neutral-100);
+  --chart-1: var(--color-blue-700);
+  --chart-2: var(--color-emerald-500);
+  --chart-3: var(--color-amber-500);
+  --chart-4: var(--color-purple-500);
+  --chart-5: var(--color-rose-500);
+  --code: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  --code-foreground: var(--foreground);
+  --code-highlight: --alpha(var(--color-white) / 4%);
+  /* See the light default above — one surface, not two. */
+  --sidebar: var(--background);
+  --sidebar-accent: --alpha(var(--color-white) / 4%);
+  --sidebar-accent-foreground: var(--color-neutral-100);
+  --sidebar-border: --alpha(var(--color-white) / 5%);
+  --sidebar-foreground: color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar));
+  --sidebar-primary: var(--color-neutral-100);
+  --sidebar-primary-foreground: var(--color-neutral-800);
+  --sidebar-ring: var(--color-neutral-400);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-foreground/50;
+  }
+  /* Neutralise Tailwind ring utilities (--tw-ring-shadow / --tw-ring-offset-shadow)
+     so focusable elements don't render the default ring. We still draw a
+     visible outline for keyboard users via :focus-visible below. */
+  *,
+  *::before,
+  *::after {
+    --tw-ring-shadow: 0 0 #0000 !important;
+    --tw-ring-offset-shadow: 0 0 #0000 !important;
+    --tw-ring-color: transparent !important;
+    --tw-ring-offset-width: 0px !important;
+    --tw-ring-offset-color: transparent !important;
+  }
+  /* Suppress focus outlines for mouse/touch focus only.
+     Preserve a visible ring for keyboard navigation (WCAG 2.4.7). */
+  *:focus:not(:focus-visible),
+  *:focus-within:not(:focus-visible) {
+    outline: none !important;
+  }
+  *:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  button, [role="button"] {
+    @apply cursor-pointer select-none;
+  }
+  [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"] {
+    @apply cursor-pointer;
+  }
+  body {
+    @apply bg-background text-foreground overflow-hidden;
+  }
+  *::-webkit-scrollbar {
+    display: none;
+  }
+  * {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--font-mono);
+  }
+  html {
+    @apply font-sans font-mono bg-background;
+  }
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@odyn-app/api",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The public building kit for Odyn extensions.",
+  "license": "MIT",
+  "homepage": "https://github.com/New-Genre/odyn-extensions",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/New-Genre/odyn-extensions.git"
+  },
+  "keywords": [
+    "odyn",
+    "extension"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/ui/index.js"
+    },
+    "./theme.css": "./dist/ui/theme.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "node scripts/build.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "tailwindcss": ">=4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "react": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3"
+  }
+}