@adukiorg/anza 0.2.0

package/src/tokens/registered/colors.css

@@ -0,0 +1,133 @@
+/**
+ * tokens/registered/colors.css
+ *
+ * Houdini @property registrations for animatable semantic color tokens.
+ * This permits smooth, GPU-accelerated theme transition morphs.
+ * Source: doc 26 §5
+ */
+
+@property --color-surface-page {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(97% 0 0);
+}
+
+@property --color-surface-card {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(100% 0 0);
+}
+
+@property --color-surface-elevated {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(100% 0 0);
+}
+
+@property --color-surface-inverse {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(10% 0 0);
+}
+
+@property --color-content-primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(10% 0 0);
+}
+
+@property --color-content-secondary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(38% 0 0);
+}
+
+@property --color-content-disabled {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(64% 0 0);
+}
+
+@property --color-content-inverse {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(97% 0 0);
+}
+
+@property --color-content-link {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(55% 0.22 250);
+}
+
+@property --color-interactive {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(55% 0.22 250);
+}
+
+@property --color-interactive-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(46% 0.20 250);
+}
+
+@property --color-interactive-active {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(38% 0.18 250);
+}
+
+@property --color-interactive-focus {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(55% 0.22 250);
+}
+
+@property --color-interactive-disabled {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(88% 0 0);
+}
+
+@property --color-feedback-success {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(63% 0.19 145);
+}
+
+@property --color-feedback-warning {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(75% 0.18 65);
+}
+
+@property --color-feedback-error {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(58% 0.22 25);
+}
+
+@property --color-feedback-info {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(60% 0.18 230);
+}
+
+@property --color-border-default {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(88% 0 0);
+}
+
+@property --color-border-strong {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(64% 0 0);
+}
+
+@property --color-border-focus {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(55% 0.22 250);
+}

package/src/tokens/registered/dimensions.css

@@ -0,0 +1,31 @@
+/**
+ * tokens/registered/dimensions.css
+ *
+ * Houdini @property registrations for animatable dimension/spacing tokens.
+ * This permits smooth, type-checked transitions on spacing and layout.
+ * Source: doc 26 §5
+ */
+
+@property --space-4 {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --radius-md {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.375rem;
+}
+
+@property --font-size-base {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --duration-normal {
+  syntax: '<time>';
+  inherits: true;
+  initial-value: 200ms;
+}

package/src/tokens/semantic/components.css

@@ -0,0 +1,125 @@
+/**
+ * tokens/semantic/components.css
+ *
+ * Semantic component-level design tokens.
+ * Consolidates recurring component-specific tokens from individual elements
+ * into a shared semantic layer for consistency across the design system.
+ */
+
+:root {
+  /* Form Controls */
+  --input-bg:           var(--color-surface-page);
+  --input-border:       var(--color-border-default);
+  --input-border-focus: var(--color-border-focus);
+  --input-radius:       var(--radius-md);
+  --input-font-size:    var(--font-size-base);
+  --input-padding-y:    var(--space-2);
+  --input-padding-x:    var(--space-3);
+  --input-text-color:   var(--color-content-primary);
+
+  --textarea-bg:           var(--color-surface-page);
+  --textarea-border:       var(--color-border-default);
+  --textarea-border-focus: var(--color-border-focus);
+  --textarea-radius:       var(--radius-md);
+  --textarea-font-size:    var(--font-size-base);
+  --textarea-padding-y:    var(--space-2);
+  --textarea-padding-x:    var(--space-3);
+  --textarea-text-color:   var(--color-content-primary);
+
+  --check-bg:           var(--color-surface-page);
+  --check-bg-checked:   var(--color-interactive);
+  --check-border:       var(--color-border-default);
+  --check-border-focus: var(--color-border-focus);
+  --check-radius:       var(--radius-sm);
+  --check-size:         var(--space-5);
+  --check-color:        var(--color-content-inverse);
+
+  --radio-bg:           var(--color-surface-page);
+  --radio-bg-checked:   var(--color-interactive);
+  --radio-border:       var(--color-border-default);
+  --radio-border-focus: var(--color-border-focus);
+  --radio-radius:       var(--radius-full);
+  --radio-size:         var(--space-5);
+  --radio-color:        var(--color-content-inverse);
+
+  --switch-bg:           var(--color-border-strong);
+  --switch-bg-on:        var(--color-interactive);
+  --switch-thumb-color:  var(--color-content-inverse);
+  --switch-width:        var(--space-10);
+  --switch-height:       var(--space-6);
+  --switch-thumb-size:   calc(var(--switch-height) - var(--space-1));
+
+  --select-bg:           var(--color-surface-page);
+  --select-border:       var(--color-border-default);
+  --select-border-focus: var(--color-border-focus);
+  --select-radius:       var(--radius-md);
+  --select-font-size:    var(--font-size-base);
+  --select-padding-y:    var(--space-2);
+  --select-padding-x:    var(--space-3);
+  --select-text-color:   var(--color-content-primary);
+
+  --upload-bg:           var(--color-surface-page);
+  --upload-border:       var(--color-border-default);
+  --upload-border-focus: var(--color-border-focus);
+  --upload-radius:       var(--radius-lg);
+  --upload-padding:      var(--space-8);
+  --upload-color:        var(--color-content-secondary);
+
+  /* Feedback */
+  --alert-radius: var(--radius-md);
+  --alert-bg:     var(--color-surface-elevated);
+  --alert-color:  var(--color-content-primary);
+  --alert-border: var(--color-border-default);
+
+  --skeleton-bg:     var(--color-interactive-disabled);
+  --skeleton-radius: var(--radius-md);
+  --skeleton-width:  100%;
+  --skeleton-height: var(--space-4);
+
+  /* Data Display */
+  --card-radius: var(--radius-lg);
+
+  --stat-label: var(--font-size-xs);
+  --stat-value: var(--font-size-3xl);
+
+  /* Navigation */
+  --link-color:        var(--color-content-link);
+  --link-color-hover:  var(--color-interactive-hover);
+  --link-color-active: var(--color-interactive-active);
+
+  /* Layout */
+  --stack-gap:  var(--space-4);
+
+  --grid-gap:  var(--space-4);
+  --grid-cols: repeat(auto-fit, minmax(250px, 1fr));
+
+  --surface-bg:     var(--color-surface-page);
+  --surface-border: transparent;
+  --surface-shadow: none;
+  --surface-radius: var(--radius-none);
+
+  /* Overlay */
+  --dialog-radius: var(--radius-lg);
+  --dialog-shadow: var(--shadow-2xl);
+
+  --popover-bg:    var(--color-surface-elevated);
+  --popover-border: var(--color-border-default);
+  --popover-shadow: var(--shadow-xl);
+  --popover-radius: var(--radius-md);
+
+  --tooltip-bg:    var(--color-surface-inverse);
+  --tooltip-color: var(--color-content-inverse);
+  --tooltip-radius: var(--radius-sm);
+
+  --menu-bg:       var(--color-surface-elevated);
+  --menu-border:    var(--color-border-default);
+  --menu-shadow:    var(--shadow-lg);
+  --menu-radius:    var(--radius-md);
+
+  --drawer-shadow: var(--shadow-2xl);
+  --drawer-width:  min(calc(var(--space-32) * 3), 85vw);
+
+  --sheet-radius: var(--radius-lg);
+  --sheet-shadow: var(--shadow-2xl);
+  --sheet-max-width: min(calc(var(--space-32) * 6), 100vw);
+}

package/src/tokens/semantic/contrast.css

@@ -0,0 +1,33 @@
+/**
+ * tokens/semantic/contrast.css
+ *
+ * WCAG AAA compliant high-contrast semantic token overrides.
+ * Enhances readability for visually impaired users.
+ * Source: doc 26 §3, library2.md §Phase 1-B
+ */
+
+[data-theme="high-contrast"] {
+  /* Surfaces */
+  --color-surface-page:      var(--color-neutral-0);
+  --color-surface-card:      var(--color-neutral-0);
+  --color-surface-elevated:  var(--color-neutral-0);
+  --color-surface-inverse:   var(--color-neutral-1000);
+
+  /* Content */
+  --color-content-primary:   var(--color-neutral-1000);
+  --color-content-secondary: var(--color-neutral-900);
+  --color-content-disabled:  var(--color-neutral-700);
+  --color-content-inverse:   var(--color-neutral-0);
+  --color-content-link:      var(--color-brand-900);
+
+  /* Interactive Elements */
+  --color-interactive:          var(--color-brand-900);
+  --color-interactive-hover:    var(--color-neutral-1000);
+  --color-interactive-active:   var(--color-neutral-1000);
+  --color-interactive-disabled: var(--color-neutral-600);
+
+  /* Borders */
+  --color-border-default:  var(--color-neutral-1000);
+  --color-border-strong:   var(--color-neutral-1000);
+  --color-border-focus:    var(--color-brand-900);
+}

package/src/tokens/semantic/dark.css

@@ -0,0 +1,61 @@
+/**
+ * tokens/semantic/dark.css
+ *
+ * Semantic design token overrides for the Dark theme.
+ * Integrates with data-theme attribute and OS media preference (guarded to respect user selection).
+ * Source: doc 26 §3
+ */
+
+[data-theme="dark"] {
+  /* Surfaces */
+  --color-surface-page:      var(--color-neutral-950);
+  --color-surface-card:      var(--color-neutral-900);
+  --color-surface-elevated:  var(--color-neutral-800);
+  --color-surface-inverse:   var(--color-neutral-50);
+
+  /* Content (Text & Icons) */
+  --color-content-primary:   var(--color-neutral-5);
+  --color-content-secondary: var(--color-neutral-400);
+  --color-content-disabled:  var(--color-neutral-600);
+  --color-content-inverse:   var(--color-neutral-900);
+  --color-content-link:      var(--color-brand-300);
+
+  /* Interactive Elements */
+  --color-interactive:          var(--color-brand-400);
+  --color-interactive-hover:    var(--color-brand-300);
+  --color-interactive-active:   var(--color-brand-200);
+  --color-interactive-disabled: var(--color-neutral-700);
+
+  /* Borders */
+  --color-border-default:  var(--color-neutral-800);
+  --color-border-strong:   var(--color-neutral-600);
+  --color-border-focus:    var(--color-brand-400);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Surfaces */
+    --color-surface-page:      var(--color-neutral-950);
+    --color-surface-card:      var(--color-neutral-900);
+    --color-surface-elevated:  var(--color-neutral-800);
+    --color-surface-inverse:   var(--color-neutral-50);
+
+    /* Content (Text & Icons) */
+    --color-content-primary:   var(--color-neutral-5);
+    --color-content-secondary: var(--color-neutral-400);
+    --color-content-disabled:  var(--color-neutral-600);
+    --color-content-inverse:   var(--color-neutral-900);
+    --color-content-link:      var(--color-brand-300);
+
+    /* Interactive Elements */
+    --color-interactive:          var(--color-brand-400);
+    --color-interactive-hover:    var(--color-brand-300);
+    --color-interactive-active:   var(--color-brand-200);
+    --color-interactive-disabled: var(--color-neutral-700);
+
+    /* Borders */
+    --color-border-default:  var(--color-neutral-800);
+    --color-border-strong:   var(--color-neutral-600);
+    --color-border-focus:    var(--color-brand-400);
+  }
+}

package/src/tokens/semantic/light.css

@@ -0,0 +1,64 @@
+/**
+ * tokens/semantic/light.css
+ *
+ * Semantic design token assignments for the default Light theme.
+ * Standardizes semantic mapping to primitives and sets up GPU-accelerated theme transition rules on :root.
+ * Source: doc 26 §3, §6
+ */
+
+:root {
+  /* Surfaces */
+  --color-surface-page:      var(--color-neutral-50);
+  --color-surface-card:      var(--color-neutral-0);
+  --color-surface-elevated:  var(--color-neutral-0);
+  --color-surface-inverse:   var(--color-neutral-900);
+
+  /* Content (Text & Icons) */
+  --color-content-primary:   var(--color-neutral-900);
+  --color-content-secondary: var(--color-neutral-600);
+  --color-content-disabled:  var(--color-neutral-400);
+  --color-content-inverse:   var(--color-neutral-50);
+  --color-content-link:      var(--color-brand-600);
+
+  /* Interactive Elements */
+  --color-interactive:          var(--color-brand-500);
+  --color-interactive-hover:    var(--color-brand-600);
+  --color-interactive-active:   var(--color-brand-700);
+  --color-interactive-focus:    var(--color-brand-500);
+  --color-interactive-disabled: var(--color-neutral-300);
+
+  /* Feedback Semantics */
+  --color-feedback-success: var(--color-success-500);
+  --color-feedback-warning: var(--color-warning-500);
+  --color-feedback-error:   var(--color-error-500);
+  --color-feedback-info:    var(--color-info-500);
+
+  /* Borders */
+  --color-border-default:  var(--color-neutral-200);
+  --color-border-strong:   var(--color-neutral-400);
+  --color-border-focus:    var(--color-brand-500);
+
+  /* Automatic theme morph configuration */
+  transition:
+    --color-surface-page 220ms var(--ease-out),
+    --color-surface-card 220ms var(--ease-out),
+    --color-surface-elevated 220ms var(--ease-out),
+    --color-surface-inverse 220ms var(--ease-out),
+    --color-content-primary 180ms var(--ease-out),
+    --color-content-secondary 180ms var(--ease-out),
+    --color-content-disabled 180ms var(--ease-out),
+    --color-content-inverse 180ms var(--ease-out),
+    --color-content-link 180ms var(--ease-out),
+    --color-interactive 180ms var(--ease-out),
+    --color-interactive-hover 180ms var(--ease-out),
+    --color-interactive-active 180ms var(--ease-out),
+    --color-border-default 180ms var(--ease-out),
+    --color-border-strong 180ms var(--ease-out),
+    --color-border-focus 180ms var(--ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    transition: none !important;
+  }
+}

package/types/core/animations/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * types/core/animations/index.d.ts
+ *
+ * TypeScript declarations for the WAAPI animations and staggers layer.
+ */
+
+export interface StaggerGroup {
+  animations: Animation[];
+  cancel(): void;
+  finish(): void;
+  finished: Promise<Animation[]>;
+}
+
+export function animate(
+  el: HTMLElement,
+  animationInput: string | Keyframe[] | PropertyIndexedKeyframes,
+  options?: KeyframeAnimationOptions & { signal?: AbortSignal }
+): Animation;
+
+export function stagger(
+  elements: HTMLElement[] | NodeListOf<HTMLElement>,
+  animationInput: string | Keyframe[] | PropertyIndexedKeyframes,
+  options?: KeyframeAnimationOptions & { staggerDelay?: number; signal?: AbortSignal }
+): StaggerGroup;
+
+export function scroll(
+  el: HTMLElement,
+  animationInput: string | Keyframe[] | PropertyIndexedKeyframes,
+  options?: any
+): Animation;
+
+export function view(
+  el: HTMLElement,
+  animationInput: string | Keyframe[] | PropertyIndexedKeyframes,
+  options?: any
+): Animation;
+
+export const registry: {
+  register(name: string, keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: KeyframeAnimationOptions): void;
+  get(name: string): { keyframes: Keyframe[] | PropertyIndexedKeyframes; options: KeyframeAnimationOptions } | null;
+};
+
+export const animations: {
+  register: typeof registry.register;
+  animate: typeof animate;
+  stagger: typeof stagger;
+  scroll: typeof scroll;
+  view: typeof view;
+  Timing: any;
+  timing: any;
+  keyframes: any;
+};

package/types/core/api/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * types/core/api/index.d.ts
+ *
+ * TypeScript declarations for the native-first networking layer.
+ */
+
+export class PlatformError extends Error {
+  constructor(message: string, status?: number, code?: string);
+  status?: number;
+  code?: string;
+}
+
+export interface RequestDescriptor {
+  url: string;
+  method: string;
+  headers: Headers;
+  body?: any;
+  signal?: AbortSignal;
+  priority?: 'user-blocking' | 'user-visible' | 'background';
+  timeout?: number;
+  cache?: 'cache-first' | 'network-first' | 'stale-while-revalidate';
+  retries?: number;
+}
+
+export interface RequestOptions {
+  headers?: Record<string, string> | Headers;
+  signal?: AbortSignal;
+  priority?: 'user-blocking' | 'user-visible' | 'background';
+  timeout?: number;
+  cache?: 'cache-first' | 'network-first' | 'stale-while-revalidate';
+  retries?: number;
+}
+
+export const pipeline: {
+  use(fn: (desc: RequestDescriptor, next: (desc: RequestDescriptor) => Promise<Response>) => Promise<Response>): void;
+  run(desc: RequestDescriptor, last: (desc: RequestDescriptor) => Promise<Response>): Promise<Response>;
+};
+
+export function execute(desc: RequestDescriptor): Promise<Response>;
+
+export interface RetryOptions {
+  attempts?: number;
+  delay?: number;
+  backoff?: 'exponential' | 'linear';
+  signal?: AbortSignal;
+}
+
+export function retry<T>(fn: () => Promise<T>, options?: RetryOptions): Promise<T>;
+
+export function createNDJSONTransform(): TransformStream<Uint8Array, any>;
+
+export function stream(
+  url: string,
+  onChunk: (payload: any) => void,
+  options?: RequestOptions
+): Promise<void>;
+
+export const api: {
+  get(url: string, opts?: RequestOptions): Promise<any>;
+  post(url: string, body?: any, opts?: RequestOptions): Promise<any>;
+  put(url: string, body?: any, opts?: RequestOptions): Promise<any>;
+  patch(url: string, body?: any, opts?: RequestOptions): Promise<any>;
+  delete(url: string, opts?: RequestOptions): Promise<any>;
+  stream: typeof stream;
+  upload(url: string, files: FileList | File[], options?: RequestOptions): Promise<any>;
+  pipeline: typeof pipeline;
+  PlatformError: typeof PlatformError;
+};

package/types/core/events/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * types/core/events/index.d.ts
+ *
+ * TypeScript declarations for the native event orchestration layer.
+ */
+
+export class EventBus extends EventTarget {
+  on(type: string, fn: (event: CustomEvent) => void, signal?: AbortSignal): () => void;
+  emit(type: string, detail?: any): void;
+}
+
+export const bus: EventBus;
+
+export function delegate(
+  root: HTMLElement | ShadowRoot,
+  selector: string,
+  type: string,
+  fn: (event: Event, target: HTMLElement) => void,
+  options?: boolean | AddEventListenerOptions
+): () => void;
+
+export function once(
+  target: EventTarget,
+  type: string,
+  options?: boolean | AddEventListenerOptions
+): Promise<Event>;
+
+export function listen(
+  target: EventTarget,
+  type: string,
+  fn: (event: Event) => void,
+  options?: boolean | AddEventListenerOptions
+): () => void;
+
+export const names: {
+  auth: { signedin: string; signedout: string; refreshed: string };
+  connectivity: { online: string; offline: string };
+  preference: { changed: string };
+  sw: { updated: string; message: string };
+};
+
+export const events: {
+  emit(type: string, detail?: any): void;
+  on(type: string, fn: (event: CustomEvent) => void, signal?: AbortSignal): () => void;
+  delegate: typeof delegate;
+  once: typeof once;
+  listen: typeof listen;
+  names: typeof names;
+};
+

package/types/core/offline/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * types/core/offline/index.d.ts
+ *
+ * TypeScript declarations for offline synchronization and background operations.
+ */
+
+import { ReactiveStore } from '../state';
+
+export interface OfflineTask {
+  id: string;
+  task: string;
+  payload: any;
+  timestamp: number;
+  retries: number;
+  maxRetries: number;
+}
+
+export class OfflineQueue {
+  push(taskName: string, payload?: any, options?: { idempotencyKey?: string; maxRetries?: number }): Promise<string>;
+  list(): Promise<OfflineTask[]>;
+  update(task: OfflineTask): Promise<void>;
+  delete(id: string): Promise<void>;
+  clear(): Promise<void>;
+}
+
+export const queue: OfflineQueue;
+
+export function check(force?: boolean): Promise<boolean>;
+export function subscribe(fn: (isOnline: boolean) => void, signal?: AbortSignal): () => void;
+
+export const sync: {
+  register(tag: string): Promise<void>;
+};
+
+export const bridge: {
+  send(task: string, payload?: any): Promise<any>;
+  onMessage(fn: (msg: any) => void): () => void;
+};
+
+export interface OfflineState {
+  online: boolean;
+  status: 'online' | 'offline' | 'unknown';
+  pending: number;
+}
+
+export const state: ReactiveStore<OfflineState>;
+
+export interface ClockStamp {
+  actor: string;
+  clock: number;
+}
+
+export const clock: {
+  actor(): Promise<string>;
+  tick(): Promise<number>;
+  sync(remoteTime: number): Promise<number>;
+  stamp(): Promise<ClockStamp>;
+};
+
+export const offline: {
+  check: typeof check;
+  subscribe: typeof subscribe;
+  queue: OfflineQueue;
+  sync: typeof sync;
+  state: ReactiveStore<OfflineState>;
+  clock: typeof clock;
+  send(task: string, payload?: any): Promise<any>;
+};