@rnine/nineos 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,94 @@
-# Temporary Holding Version
+# @rnine/nineos
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+NineOS: a design system library for React, built on [`@rnine/core`](../core). Two moods,
+**Clear** (light) and **Cipher** (dark); cut corners; magenta for the one thing that
+matters; a command line that answers with panels; and the NineOS motion layer.
+
+It exports everything `@rnine/core` does, with the same props, in the NineOS look, plus
+its own pieces:
+
+- **The shell**: `CommandLine`, `ChipBar`, `PanelStage` (with the signal swap), `Dock`,
+  `Hud`, `Kbd`, `Hint`.
+- **Its effects in the shared roles**: `TextReveal` decodes from magenta terminal symbols,
+  `Backdrop` is the reactive dot field, `Mark` glitches in cyan and magenta,
+  `swapIn`/`swapOut` are the signal swap, `PageEffects` are Cipher's scanlines and the
+  magenta click sparks.
+- **NineOS only** in `/motion`: `Terminal`, `VelocityStrip`. In SCSS: `glitch-text()`.
+
+```bash
+yarn workspace @rnine/nineos storybook          # Storybook on http://localhost:6006 (NineOS and core stories)
+yarn workspace @rnine/nineos test               # component and conformance tests
+yarn workspace @rnine/nineos build-storybook    # static Storybook in storybook-static/
+```
+
+Changing token JSON needs `yarn workspace @rnine/nineos build` before Storybook picks it up;
+component and mixin edits reload instantly.
+
+## Use it in an app
+
+```bash
+npm install @rnine/nineos react react-dom    # sass too, to use the SCSS API
+```
+
+```tsx
+// entry file, once
+import '@rnine/nineos/fonts.css';    // Chakra Petch, Hanken Grotesk, Share Tech Mono (self-hosted)
+import '@rnine/nineos/styles.css';   // tokens, Clear/Cipher switching, base styles, keyframes, every component
+import { ThemeProvider } from '@rnine/nineos';
+import markSvg from './mark.svg?raw';
+
+createRoot(root).render(
+  <ThemeProvider mark={{ full: markSvg }} mood={{ cookieDomain: 'example.com' }}>
+    <App />
+  </ThemeProvider>,
+);
+```
+
+Auto shows Clear by day (06:00-18:00, the viewer's time) and, at night, Cipher only for a
+dark system setting, until the viewer chooses. Put `moodBootScript()`'s output in an
+inline `<script>` in your `index.html` `<head>` for the right mood on the first paint.
+
+```tsx
+import { Button, CommandLine, Panel, PanelStage } from '@rnine/nineos';
+import { Backdrop, TextReveal, Terminal } from '@rnine/nineos/motion';
+import { tokens } from '@rnine/nineos/tokens';   // tokens as data (docs, charts, canvas effects)
+```
+
+```scss
+// in any SCSS module
+@use "@rnine/nineos/scss" as r9;
+
+.button {
+  @include r9.type(label);
+  @include r9.corner(md);        // NineOS: a cut top-left and bottom-right corner
+  background: r9.$accent;
+  &::after { @include r9.ornament; }
+}
+```
+
+## Moods
+
+The page carries `data-scheme="light"` (Clear) or `data-scheme="dark"` (Cipher), and any
+element can too. With no attribute (no JavaScript), Cipher follows a dark system setting.
+A mood saved by an older version (`clear`, `cipher`) is read as its scheme.
+
+## Files
+
+| Path | What |
+|---|---|
+| `theme.json` | The name, the moods' names (Clear, Cipher) and the Auto rule (night) |
+| `tokens/*.json` | Primitives and scales (DTCG format): color, type, space, corner and shape, motion, layout |
+| `tokens/themes/{light,dark}.json` | Clear's and Cipher's mood roles (bg, fg, accent, signal, ...). Both must define the same roles |
+| `scss/` | The shared SCSS API (from core) plus `glitch-text()`; `base.scss` adds NineOS's keyframes |
+| `src/` | NineOS's components and effects; `index.ts` and `motion.ts` re-export core and replace the role exports |
+| `scripts/build.mjs` | Tokens (checked against core's), `vite build`, then `dist/styles.css` |
+| `test/contrast.test.mjs` | WCAG AA in both moods, and the contract: core's tokens and exports, the keyframes, theme.json |
+
+No logo or favicons: an app brings its own mark (`ThemeProvider mark`).
+
+## Rules
+
+- Components use mood roles (`r9.$accent`), never primitives or hex values.
+- Every component has at least one magenta element (`r9.$accent`). If none is natural, add `@include r9.ornament`.
+- Cyan (`r9.$signal`) is only for live signals: status, data, the cursor's light.
+- Space siblings with `gap`, not margins. Motion goes inside `@include r9.motion-safe`.

package/dist/_variables.scss

@@ -0,0 +1,199 @@
+// NineOS tokens for SCSS. Generated by @rnine/core/build-tokens. Do not edit.
+// Every variable points at a CSS custom property, so the mood switches at
+// runtime (data-scheme="light" | "dark"). Media queries need plain values: use $breakpoints.
+
+// Primitives and scales
+$color-gray-0: var(--r9-color-gray-0);
+$color-gray-10: var(--r9-color-gray-10);
+$color-gray-25: var(--r9-color-gray-25);
+$color-gray-50: var(--r9-color-gray-50);
+$color-gray-100: var(--r9-color-gray-100);
+$color-gray-300: var(--r9-color-gray-300);
+$color-gray-500: var(--r9-color-gray-500);
+$color-gray-600: var(--r9-color-gray-600);
+$color-gray-800: var(--r9-color-gray-800);
+$color-gray-850: var(--r9-color-gray-850);
+$color-gray-900: var(--r9-color-gray-900);
+$color-gray-950: var(--r9-color-gray-950);
+$color-gray-975: var(--r9-color-gray-975);
+$color-accent-300: var(--r9-color-accent-300);
+$color-accent-400: var(--r9-color-accent-400);
+$color-accent-500: var(--r9-color-accent-500);
+$color-accent-600: var(--r9-color-accent-600);
+$color-accent-700: var(--r9-color-accent-700);
+$color-accent-800: var(--r9-color-accent-800);
+$color-signal-300: var(--r9-color-signal-300);
+$color-signal-500: var(--r9-color-signal-500);
+$color-signal-700: var(--r9-color-signal-700);
+$color-green-400: var(--r9-color-green-400);
+$color-green-700: var(--r9-color-green-700);
+$color-amber-400: var(--r9-color-amber-400);
+$color-amber-700: var(--r9-color-amber-700);
+$color-red-400: var(--r9-color-red-400);
+$color-red-700: var(--r9-color-red-700);
+$breakpoint-sm: var(--r9-breakpoint-sm);
+$breakpoint-md: var(--r9-breakpoint-md);
+$breakpoint-lg: var(--r9-breakpoint-lg);
+$container-max: var(--r9-container-max);
+$container-text: var(--r9-container-text);
+$container-gutter: var(--r9-container-gutter);
+$header-height: var(--r9-header-height);
+$z-base: var(--r9-z-base);
+$z-raised: var(--r9-z-raised);
+$z-sticky: var(--r9-z-sticky);
+$z-overlay: var(--r9-z-overlay);
+$z-modal: var(--r9-z-modal);
+$z-toast: var(--r9-z-toast);
+$z-fx: var(--r9-z-fx);
+$duration-instant: var(--r9-duration-instant);
+$duration-fast: var(--r9-duration-fast);
+$duration-base: var(--r9-duration-base);
+$duration-slow: var(--r9-duration-slow);
+$duration-slower: var(--r9-duration-slower);
+$duration-ambient: var(--r9-duration-ambient);
+$easing-out: var(--r9-easing-out);
+$easing-in-out: var(--r9-easing-in-out);
+$easing-linear: var(--r9-easing-linear);
+$corner-sm: var(--r9-corner-sm);
+$corner-md: var(--r9-corner-md);
+$corner-lg: var(--r9-corner-lg);
+$shape-cut: var(--r9-shape-cut);
+$shape-round: var(--r9-shape-round);
+$radius-none: var(--r9-radius-none);
+$radius-xs: var(--r9-radius-xs);
+$radius-full: var(--r9-radius-full);
+$border-hair: var(--r9-border-hair);
+$border-strong: var(--r9-border-strong);
+$space-0: var(--r9-space-0);
+$space-1: var(--r9-space-1);
+$space-2: var(--r9-space-2);
+$space-3: var(--r9-space-3);
+$space-4: var(--r9-space-4);
+$space-5: var(--r9-space-5);
+$space-6: var(--r9-space-6);
+$space-8: var(--r9-space-8);
+$space-10: var(--r9-space-10);
+$space-12: var(--r9-space-12);
+$space-16: var(--r9-space-16);
+$space-20: var(--r9-space-20);
+$space-24: var(--r9-space-24);
+$font-display: var(--r9-font-display);
+$font-body: var(--r9-font-body);
+$font-mono: var(--r9-font-mono);
+$font-size-xs: var(--r9-font-size-xs);
+$font-size-sm: var(--r9-font-size-sm);
+$font-size-base: var(--r9-font-size-base);
+$font-size-md: var(--r9-font-size-md);
+$font-size-lg: var(--r9-font-size-lg);
+$font-size-xl: var(--r9-font-size-xl);
+$font-size-2xl: var(--r9-font-size-2xl);
+$font-size-3xl: var(--r9-font-size-3xl);
+$font-size-4xl: var(--r9-font-size-4xl);
+$font-size-5xl: var(--r9-font-size-5xl);
+$font-weight-regular: var(--r9-font-weight-regular);
+$font-weight-medium: var(--r9-font-weight-medium);
+$font-weight-semibold: var(--r9-font-weight-semibold);
+$font-weight-bold: var(--r9-font-weight-bold);
+$leading-tight: var(--r9-leading-tight);
+$leading-snug: var(--r9-leading-snug);
+$leading-normal: var(--r9-leading-normal);
+$tracking-tight: var(--r9-tracking-tight);
+$tracking-normal: var(--r9-tracking-normal);
+$tracking-wide: var(--r9-tracking-wide);
+$tracking-wider: var(--r9-tracking-wider);
+$tracking-mark: var(--r9-tracking-mark);
+
+// Mood roles
+$bg: var(--r9-bg);
+$surface: var(--r9-surface);
+$surface-raised: var(--r9-surface-raised);
+$glass: var(--r9-glass);
+$fg: var(--r9-fg);
+$fg-muted: var(--r9-fg-muted);
+$fg-subtle: var(--r9-fg-subtle);
+$line: var(--r9-line);
+$line-strong: var(--r9-line-strong);
+$accent: var(--r9-accent);
+$accent-hover: var(--r9-accent-hover);
+$accent-text: var(--r9-accent-text);
+$on-accent: var(--r9-on-accent);
+$accent-soft: var(--r9-accent-soft);
+$signal: var(--r9-signal);
+$signal-text: var(--r9-signal-text);
+$inverse-bg: var(--r9-inverse-bg);
+$inverse-fg: var(--r9-inverse-fg);
+$success: var(--r9-success);
+$warning: var(--r9-warning);
+$danger: var(--r9-danger);
+$dot: var(--r9-dot);
+$scan: var(--r9-scan);
+$sheen: var(--r9-sheen);
+$selection: var(--r9-selection);
+
+$space: (
+  "0": var(--r9-space-0),
+  "1": var(--r9-space-1),
+  "2": var(--r9-space-2),
+  "3": var(--r9-space-3),
+  "4": var(--r9-space-4),
+  "5": var(--r9-space-5),
+  "6": var(--r9-space-6),
+  "8": var(--r9-space-8),
+  "10": var(--r9-space-10),
+  "12": var(--r9-space-12),
+  "16": var(--r9-space-16),
+  "20": var(--r9-space-20),
+  "24": var(--r9-space-24),
+);
+
+$corner: (
+  "sm": var(--r9-corner-sm),
+  "md": var(--r9-corner-md),
+  "lg": var(--r9-corner-lg),
+);
+
+$durations: (
+  "instant": var(--r9-duration-instant),
+  "fast": var(--r9-duration-fast),
+  "base": var(--r9-duration-base),
+  "slow": var(--r9-duration-slow),
+  "slower": var(--r9-duration-slower),
+  "ambient": var(--r9-duration-ambient),
+);
+
+$easings: (
+  "out": var(--r9-easing-out),
+  "in-out": var(--r9-easing-in-out),
+  "linear": var(--r9-easing-linear),
+);
+
+$z-index: (
+  "base": var(--r9-z-base),
+  "raised": var(--r9-z-raised),
+  "sticky": var(--r9-z-sticky),
+  "overlay": var(--r9-z-overlay),
+  "modal": var(--r9-z-modal),
+  "toast": var(--r9-z-toast),
+  "fx": var(--r9-z-fx),
+);
+
+$breakpoints: (
+  "sm": 640px,
+  "md": 900px,
+  "lg": 1200px,
+);
+
+$type-roles: (
+  "display": ("font-family": var(--r9-type-display-font-family), "font-weight": var(--r9-type-display-font-weight), "font-size": var(--r9-type-display-font-size), "line-height": var(--r9-type-display-line-height), "letter-spacing": var(--r9-type-display-letter-spacing)),
+  "h1": ("font-family": var(--r9-type-h1-font-family), "font-weight": var(--r9-type-h1-font-weight), "font-size": var(--r9-type-h1-font-size), "line-height": var(--r9-type-h1-line-height), "letter-spacing": var(--r9-type-h1-letter-spacing)),
+  "h2": ("font-family": var(--r9-type-h2-font-family), "font-weight": var(--r9-type-h2-font-weight), "font-size": var(--r9-type-h2-font-size), "line-height": var(--r9-type-h2-line-height), "letter-spacing": var(--r9-type-h2-letter-spacing)),
+  "h3": ("font-family": var(--r9-type-h3-font-family), "font-weight": var(--r9-type-h3-font-weight), "font-size": var(--r9-type-h3-font-size), "line-height": var(--r9-type-h3-line-height), "letter-spacing": var(--r9-type-h3-letter-spacing)),
+  "h4": ("font-family": var(--r9-type-h4-font-family), "font-weight": var(--r9-type-h4-font-weight), "font-size": var(--r9-type-h4-font-size), "line-height": var(--r9-type-h4-line-height), "letter-spacing": var(--r9-type-h4-letter-spacing)),
+  "body-lg": ("font-family": var(--r9-type-body-lg-font-family), "font-weight": var(--r9-type-body-lg-font-weight), "font-size": var(--r9-type-body-lg-font-size), "line-height": var(--r9-type-body-lg-line-height), "letter-spacing": var(--r9-type-body-lg-letter-spacing)),
+  "body": ("font-family": var(--r9-type-body-font-family), "font-weight": var(--r9-type-body-font-weight), "font-size": var(--r9-type-body-font-size), "line-height": var(--r9-type-body-line-height), "letter-spacing": var(--r9-type-body-letter-spacing)),
+  "body-sm": ("font-family": var(--r9-type-body-sm-font-family), "font-weight": var(--r9-type-body-sm-font-weight), "font-size": var(--r9-type-body-sm-font-size), "line-height": var(--r9-type-body-sm-line-height), "letter-spacing": var(--r9-type-body-sm-letter-spacing)),
+  "label": ("font-family": var(--r9-type-label-font-family), "font-weight": var(--r9-type-label-font-weight), "font-size": var(--r9-type-label-font-size), "line-height": var(--r9-type-label-line-height), "letter-spacing": var(--r9-type-label-letter-spacing)),
+  "code": ("font-family": var(--r9-type-code-font-family), "font-weight": var(--r9-type-code-font-weight), "font-size": var(--r9-type-code-font-size), "line-height": var(--r9-type-code-line-height), "letter-spacing": var(--r9-type-code-letter-spacing)),
+  "caption": ("font-family": var(--r9-type-caption-font-family), "font-weight": var(--r9-type-caption-font-weight), "font-size": var(--r9-type-caption-font-size), "line-height": var(--r9-type-caption-line-height), "letter-spacing": var(--r9-type-caption-letter-spacing)),
+  "wordmark": ("font-family": var(--r9-type-wordmark-font-family), "font-weight": var(--r9-type-wordmark-font-weight), "font-size": var(--r9-type-wordmark-font-size), "line-height": var(--r9-type-wordmark-line-height), "letter-spacing": var(--r9-type-wordmark-letter-spacing)),
+);

package/dist/components/Chrome/Chrome.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+type DockProps = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode; /** Accessible name of the region. */
+    label?: string;
+};
+/**
+ * The bar pinned to the bottom of the screen (thumb reach on phones): holds
+ * the CommandLine, or menu chips in Menu mode. Glass over the dot field.
+ * Publishes its height as --r9-dock-h on <html>, so pages can pad for it.
+ */
+export declare function Dock({ children, label, className, ...rest }: DockProps): import("react").JSX.Element;
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type HudProps = HTMLAttributes<HTMLDivElement> & {
+    corner: Corner;
+    children: ReactNode;
+};
+/**
+ * A corner slot for the always-there essentials (monogram, clock, switches).
+ * NineOS apps use corner HUDs instead of a navbar.
+ */
+export declare function Hud({ corner, children, className, ...rest }: HudProps): import("react").JSX.Element;
+/** A keyboard key, e.g. <Kbd>Ctrl K</Kbd>. */
+export declare function Kbd({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Chrome/Chrome.js

@@ -0,0 +1,45 @@
+import e from "./Chrome.module.js";
+import { cx as t } from "@rnine/core/kit";
+import { useEffect as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Chrome/Chrome.tsx
+function a({ children: a, label: o = "Command dock", className: s, ...c }) {
+	let l = r(null);
+	return n(() => {
+		let e = l.current;
+		if (!e) return;
+		let t = document.documentElement, n = () => t.style.setProperty("--r9-dock-h", `${e.offsetHeight}px`);
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(e), () => {
+			r.disconnect(), t.style.removeProperty("--r9-dock-h");
+		};
+	}, []), /* @__PURE__ */ i("div", {
+		...c,
+		ref: l,
+		role: "region",
+		"aria-label": o,
+		className: t(e.dock, s),
+		children: /* @__PURE__ */ i("div", {
+			className: e.dockInner,
+			children: a
+		})
+	});
+}
+function o({ corner: n, children: r, className: a, ...o }) {
+	return /* @__PURE__ */ i("div", {
+		...o,
+		className: t(e.hud, e[n.replace("-", "")], a),
+		children: r
+	});
+}
+function s({ children: n, className: r }) {
+	return /* @__PURE__ */ i("kbd", {
+		className: t(e.kbd, r),
+		children: n
+	});
+}
+//#endregion
+export { a as Dock, o as Hud, s as Kbd };
+
+//# sourceMappingURL=Chrome.js.map

package/dist/components/Chrome/Chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chrome.js","names":[],"sources":["../../../src/components/Chrome/Chrome.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '@rnine/core/kit';\nimport styles from './Chrome.module.scss';\n\ntype DockProps = HTMLAttributes<HTMLDivElement> & { children: ReactNode; /** Accessible name of the region. */ label?: string };\n\n/**\n * The bar pinned to the bottom of the screen (thumb reach on phones): holds\n * the CommandLine, or menu chips in Menu mode. Glass over the dot field.\n * Publishes its height as --r9-dock-h on <html>, so pages can pad for it.\n */\nexport function Dock({ children, label = 'Command dock', className, ...rest }: DockProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const root = document.documentElement;\n    const update = () => root.style.setProperty('--r9-dock-h', `${el.offsetHeight}px`);\n    update();\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      root.style.removeProperty('--r9-dock-h');\n    };\n  }, []);\n  return (\n    <div {...rest} ref={ref} role=\"region\" aria-label={label} className={cx(styles.dock, className)}>\n      <div className={styles.dockInner}>{children}</div>\n    </div>\n  );\n}\n\ntype Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\ntype HudProps = HTMLAttributes<HTMLDivElement> & { corner: Corner; children: ReactNode };\n\n/**\n * A corner slot for the always-there essentials (monogram, clock, switches).\n * NineOS apps use corner HUDs instead of a navbar.\n */\nexport function Hud({ corner, children, className, ...rest }: HudProps) {\n  return (\n    <div {...rest} className={cx(styles.hud, styles[corner.replace('-', '')], className)}>\n      {children}\n    </div>\n  );\n}\n\n/** A keyboard key, e.g. <Kbd>Ctrl K</Kbd>. */\nexport function Kbd({ children, className }: { children: ReactNode; className?: string }) {\n  return <kbd className={cx(styles.kbd, className)}>{children}</kbd>;\n}\n"],"mappings":";;;;;AAWA,SAAgB,EAAK,EAAE,aAAU,WAAQ,gBAAgB,cAAW,GAAG,KAAmB;CACxF,IAAM,IAAM,EAAuB,IAAI;CAcvC,OAbA,QAAgB;EACd,IAAM,IAAK,EAAI;EACf,IAAI,CAAC,GAAI;EACT,IAAM,IAAO,SAAS,iBAChB,UAAe,EAAK,MAAM,YAAY,eAAe,GAAG,EAAG,aAAa,GAAG;EACjF,EAAO;EACP,IAAM,IAAK,IAAI,eAAe,CAAM;EAEpC,OADA,EAAG,QAAQ,CAAE,SACA;GAEX,AADA,EAAG,WAAW,GACd,EAAK,MAAM,eAAe,aAAa;EACzC;CACF,GAAG,CAAC,CAAC,GAEH,kBAAC,OAAD;EAAK,GAAI;EAAW;EAAK,MAAK;EAAS,cAAY;EAAO,WAAW,EAAG,EAAO,MAAM,CAAS;YAC5F,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAY;EAAc,CAAA;CAC9C,CAAA;AAET;AASA,SAAgB,EAAI,EAAE,WAAQ,aAAU,cAAW,GAAG,KAAkB;CACtE,OACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAG,EAAO,KAAK,EAAO,EAAO,QAAQ,KAAK,EAAE,IAAI,CAAS;EAChF;CACE,CAAA;AAET;AAGA,SAAgB,EAAI,EAAE,aAAU,gBAA0D;CACxF,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,KAAK,CAAS;EAAI;CAAc,CAAA;AACnE"}

package/dist/components/Chrome/Chrome.module.js

@@ -0,0 +1,14 @@
+var e = {
+	dock: "r9-Chrome-module_dock_laf9m",
+	dockInner: "r9-Chrome-module_dockInner_4aQte",
+	hud: "r9-Chrome-module_hud_pprK9",
+	topleft: "r9-Chrome-module_topleft_b36X-",
+	topright: "r9-Chrome-module_topright_PpRWm",
+	bottomleft: "r9-Chrome-module_bottomleft_13I-i",
+	bottomright: "r9-Chrome-module_bottomright_FhlYK",
+	kbd: "r9-Chrome-module_kbd_823sZ"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Chrome.module.js.map

package/dist/components/Chrome/Chrome.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chrome.module.js","names":[],"sources":["../../../src/components/Chrome/Chrome.module.scss"],"sourcesContent":["@use \"@rnine/nineos/scss\" as r9;\n\n.dock {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: r9.$z-sticky;\n  @include r9.gutter;\n  padding-top: r9.$space-3;\n  padding-bottom: calc(#{r9.$space-3} + env(safe-area-inset-bottom, 0px));\n  @include r9.glass(12px);\n  border-top: r9.$border-hair solid r9.$line;\n}\n\n.dockInner {\n  @include r9.container(940px);\n  display: flex;\n  flex-direction: column;\n  gap: r9.$space-2;\n}\n\n.hud {\n  position: fixed;\n  z-index: r9.$z-overlay;\n  display: flex;\n  align-items: center;\n  gap: r9.$space-3;\n}\n\n.topleft { top: calc(14px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }\n.topright { top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }\n.bottomleft { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }\n.bottomright { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }\n\n.kbd {\n  display: inline-block;\n  padding: 1px 6px;\n  @include r9.type(caption);\n  color: r9.$fg-muted;\n  white-space: nowrap;\n  @include r9.hairline(r9.$line-strong);\n}\n"],"mappings":""}

package/dist/components/CommandLine/ChipBar.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type ChipItem = {
+    key: string;
+    label: ReactNode; /** e.g. "/" before command names, drawn in magenta */
+    prefix?: string;
+};
+type Props = {
+    items: ChipItem[];
+    onSelect: (key: string) => void;
+    /** Accessible name of the group. */
+    label: string;
+    onPointerDown?: () => void;
+    className?: string;
+};
+/**
+ * A row of tap targets (commands, menu entries) that scrolls sideways when it
+ * runs out of room. Magenta element: the prefix, and the hover edge.
+ */
+export declare function ChipBar({ items, onSelect, label, onPointerDown, className }: Props): import("react").JSX.Element;
+export {};

package/dist/components/CommandLine/ChipBar.js

@@ -0,0 +1,25 @@
+import e from "./ChipBar.module.js";
+import { cx as t } from "@rnine/core/kit";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/CommandLine/ChipBar.tsx
+function i({ items: i, onSelect: a, label: o, onPointerDown: s, className: c }) {
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		"aria-label": o,
+		className: t(e.bar, c),
+		onPointerDown: s,
+		children: i.map((t) => /* @__PURE__ */ r("button", {
+			type: "button",
+			className: e.chip,
+			onClick: () => a(t.key),
+			children: [t.prefix && /* @__PURE__ */ n("span", {
+				className: e.prefix,
+				children: t.prefix
+			}), t.label]
+		}, t.key))
+	});
+}
+//#endregion
+export { i as ChipBar };
+
+//# sourceMappingURL=ChipBar.js.map

package/dist/components/CommandLine/ChipBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipBar.js","names":[],"sources":["../../../src/components/CommandLine/ChipBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cx } from '@rnine/core/kit';\nimport styles from './ChipBar.module.scss';\n\nexport type ChipItem = { key: string; label: ReactNode; /** e.g. \"/\" before command names, drawn in magenta */ prefix?: string };\n\ntype Props = {\n  items: ChipItem[];\n  onSelect: (key: string) => void;\n  /** Accessible name of the group. */\n  label: string;\n  onPointerDown?: () => void;\n  className?: string;\n};\n\n/**\n * A row of tap targets (commands, menu entries) that scrolls sideways when it\n * runs out of room. Magenta element: the prefix, and the hover edge.\n */\nexport function ChipBar({ items, onSelect, label, onPointerDown, className }: Props) {\n  return (\n    <div role=\"group\" aria-label={label} className={cx(styles.bar, className)} onPointerDown={onPointerDown}>\n      {items.map((item) => (\n        <button key={item.key} type=\"button\" className={styles.chip} onClick={() => onSelect(item.key)}>\n          {item.prefix && <span className={styles.prefix}>{item.prefix}</span>}\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAmBA,SAAgB,EAAQ,EAAE,UAAO,aAAU,UAAO,kBAAe,gBAAoB;CACnF,OACE,kBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAW,EAAG,EAAO,KAAK,CAAS;EAAkB;YACvF,EAAM,KAAK,MACV,kBAAC,UAAD;GAAuB,MAAK;GAAS,WAAW,EAAO;GAAM,eAAe,EAAS,EAAK,GAAG;aAA7F,CACG,EAAK,UAAU,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAS,EAAK;GAAa,CAAA,GAClE,EAAK,KACA;KAHK,EAAK,GAGV,CACT;CACE,CAAA;AAET"}

package/dist/components/CommandLine/ChipBar.module.js

@@ -0,0 +1,9 @@
+var e = {
+	bar: "r9-ChipBar-module_bar_92cr1",
+	chip: "r9-ChipBar-module_chip_UQIxe",
+	prefix: "r9-ChipBar-module_prefix_-WFJm"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ChipBar.module.js.map

package/dist/components/CommandLine/ChipBar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipBar.module.js","names":[],"sources":["../../../src/components/CommandLine/ChipBar.module.scss"],"sourcesContent":["@use \"@rnine/nineos/scss\" as r9;\n\n.bar {\n  display: flex;\n  gap: r9.$space-2;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n\n  &::-webkit-scrollbar { display: none; }\n}\n\n.chip {\n  flex: none;\n  min-height: 36px;\n  padding: r9.$space-2 r9.$space-3;\n  border: 0;\n  cursor: pointer;\n  @include r9.type(code);\n  font-size: r9.$font-size-sm;\n  color: r9.$fg;\n  background: r9.$surface;\n  @include r9.hairline;\n  transition: box-shadow r9.$duration-fast, color r9.$duration-fast;\n\n  &:hover { @include r9.hairline(r9.$accent); color: r9.$accent-text; }\n  &:focus-visible { @include r9.focus-ring(2px); }\n}\n\n.prefix { color: r9.$accent-text; }\n"],"mappings":""}

package/dist/components/CommandLine/CommandLine.d.ts

@@ -0,0 +1,38 @@
+import { type Ref } from 'react';
+export type CommandSpec = {
+    /** e.g. "/projects" */
+    name: string;
+    description: string;
+    /** Completions for an argument, e.g. project slugs for "/open". */
+    args?: {
+        value: string;
+        description?: string;
+    }[];
+};
+type Props = {
+    commands: CommandSpec[];
+    /** Runs a command line exactly as typed or picked, e.g. "/open harbor". */
+    onRun: (input: string) => void;
+    /** Commands shown as tap-to-run chips above the line (phones never have to type). */
+    chips?: string[];
+    prompt?: string;
+    placeholder?: string;
+    /** Accessible name of the input. */
+    label?: string;
+    /** Ctrl/Cmd+K, or "/" outside a text field, focuses the line. Default true. */
+    shortcut?: boolean;
+    /** Called once, the first time someone focuses, types or taps a chip (e.g. for onboarding hints). */
+    onEngage?: () => void;
+    /** Escape on an empty line (e.g. close the open panel). */
+    onEscapeEmpty?: () => void;
+    runLabel?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+/**
+ * The NineOS command line: a prompt with autocomplete, history (↑) and
+ * tap-to-run chips. Magenta element: the prompt, caret, focus edge and Run.
+ * Always pair it with a way to use the app without typing (Menu mode).
+ */
+export declare function CommandLine({ commands, onRun, chips, prompt, placeholder, label, shortcut, onEngage, onEscapeEmpty, runLabel, className, ref, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/CommandLine/CommandLine.js

@@ -0,0 +1,121 @@
+import { ChipBar as e } from "./ChipBar.js";
+import t from "./CommandLine.module.js";
+import { cx as n } from "@rnine/core/kit";
+import { useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/CommandLine/CommandLine.tsx
+function u(e, t) {
+	let n = t.trim().toLowerCase();
+	if (!n) return [];
+	n.startsWith("/") || (n = `/${n}`);
+	let r = [];
+	for (let t of e) t.args?.length ? t.args.forEach((e) => r.push({
+		value: `${t.name} ${e.value}`,
+		description: e.description ?? t.description
+	})) : r.push({
+		value: t.name,
+		description: t.description
+	});
+	return r.filter((e) => e.value.startsWith(n)).slice(0, 8);
+}
+function d({ commands: d, onRun: f, chips: p, prompt: m = ">", placeholder: h = "type /help, or tap a command", label: g = "Command", shortcut: _ = !0, onEngage: v, onEscapeEmpty: y, runLabel: b = "Run", className: x, ref: S }) {
+	let C = i(), w = o(null), [T, E] = s(""), [D, O] = s(-1), [k, A] = s(!0), j = o([]), M = o(-1), N = o(!1), P = a(() => k ? u(d, T) : [], [
+		d,
+		T,
+		k
+	]), F = P.length > 0, I = () => {
+		N.current || (N.current = !0, v?.());
+	}, L = (e) => {
+		let t = e.trim();
+		t && (j.current[0] !== t && j.current.unshift(t), M.current = -1, E(""), O(-1), f(t));
+	};
+	return r(() => {
+		if (!_) return;
+		let e = (e) => {
+			let t = document.activeElement, n = t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || t?.isContentEditable;
+			(e.key === "k" && (e.ctrlKey || e.metaKey) || e.key === "/" && !n) && (e.preventDefault(), w.current?.focus(), e.key === "/" && E("/"));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [_]), /* @__PURE__ */ l("div", {
+		ref: S,
+		className: n(t.root, x),
+		children: [
+			F && /* @__PURE__ */ c("ul", {
+				className: t.list,
+				role: "listbox",
+				id: `${C}-list`,
+				"aria-label": "Matching commands",
+				children: P.map((e, n) => /* @__PURE__ */ l("li", {
+					id: `${C}-opt-${n}`,
+					role: "option",
+					"aria-selected": n === D,
+					className: t.option,
+					onMouseDown: (t) => {
+						t.preventDefault(), L(e.value);
+					},
+					children: [/* @__PURE__ */ c("code", { children: e.value }), /* @__PURE__ */ c("span", { children: e.description })]
+				}, e.value))
+			}),
+			p && p.length > 0 && /* @__PURE__ */ c(e, {
+				label: "Quick commands",
+				onPointerDown: I,
+				onSelect: (e) => {
+					I(), L(e);
+				},
+				items: p.map((e) => ({
+					key: e,
+					prefix: e.startsWith("/") ? "/" : void 0,
+					label: e.replace(/^\//, "")
+				}))
+			}),
+			/* @__PURE__ */ l("form", {
+				className: t.prompt,
+				onSubmit: (e) => {
+					e.preventDefault(), L(D >= 0 && P[D] ? P[D].value : T), w.current?.blur();
+				},
+				autoComplete: "off",
+				children: [
+					/* @__PURE__ */ c("label", {
+						htmlFor: `${C}-input`,
+						className: t.label,
+						children: m
+					}),
+					/* @__PURE__ */ c("input", {
+						ref: w,
+						id: `${C}-input`,
+						className: t.input,
+						type: "text",
+						value: T,
+						placeholder: h,
+						"aria-label": g,
+						role: "combobox",
+						"aria-expanded": F,
+						"aria-controls": `${C}-list`,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": D >= 0 ? `${C}-opt-${D}` : void 0,
+						enterKeyHint: "go",
+						spellCheck: !1,
+						autoCapitalize: "off",
+						onFocus: I,
+						onBlur: () => A(!1),
+						onChange: (e) => {
+							E(e.target.value), O(-1), A(!0);
+						},
+						onKeyDown: (e) => {
+							I(), e.key === "ArrowDown" && F ? (e.preventDefault(), O((e) => (e + 1) % P.length)) : e.key === "ArrowUp" && F ? (e.preventDefault(), O((e) => (e - 1 + P.length) % P.length)) : e.key === "ArrowUp" && !T && j.current.length ? (e.preventDefault(), M.current = Math.min(j.current.length - 1, M.current + 1), E(j.current[M.current])) : e.key === "Tab" && F ? (e.preventDefault(), E(P[Math.max(0, D)].value), O(-1)) : e.key === "Escape" && (T ? (E(""), O(-1)) : y?.());
+						}
+					}),
+					/* @__PURE__ */ c("button", {
+						type: "submit",
+						className: t.run,
+						children: b
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { d as CommandLine };
+
+//# sourceMappingURL=CommandLine.js.map

package/dist/components/CommandLine/CommandLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandLine.js","names":[],"sources":["../../../src/components/CommandLine/CommandLine.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState, type FormEvent, type KeyboardEvent, type Ref } from 'react';\nimport { cx } from '@rnine/core/kit';\nimport { ChipBar } from './ChipBar';\nimport styles from './CommandLine.module.scss';\n\nexport type CommandSpec = {\n  /** e.g. \"/projects\" */\n  name: string;\n  description: string;\n  /** Completions for an argument, e.g. project slugs for \"/open\". */\n  args?: { value: string; description?: string }[];\n};\n\ntype Props = {\n  commands: CommandSpec[];\n  /** Runs a command line exactly as typed or picked, e.g. \"/open harbor\". */\n  onRun: (input: string) => void;\n  /** Commands shown as tap-to-run chips above the line (phones never have to type). */\n  chips?: string[];\n  prompt?: string;\n  placeholder?: string;\n  /** Accessible name of the input. */\n  label?: string;\n  /** Ctrl/Cmd+K, or \"/\" outside a text field, focuses the line. Default true. */\n  shortcut?: boolean;\n  /** Called once, the first time someone focuses, types or taps a chip (e.g. for onboarding hints). */\n  onEngage?: () => void;\n  /** Escape on an empty line (e.g. close the open panel). */\n  onEscapeEmpty?: () => void;\n  runLabel?: string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n};\n\ntype Suggestion = { value: string; description: string };\n\n/** All completions for what has been typed so far (commands, then their arguments). */\nfunction suggest(commands: CommandSpec[], input: string): Suggestion[] {\n  let q = input.trim().toLowerCase();\n  if (!q) return [];\n  if (!q.startsWith('/')) q = `/${q}`;\n  const all: Suggestion[] = [];\n  for (const c of commands) {\n    if (c.args?.length) c.args.forEach((a) => all.push({ value: `${c.name} ${a.value}`, description: a.description ?? c.description }));\n    else all.push({ value: c.name, description: c.description });\n  }\n  return all.filter((s) => s.value.startsWith(q)).slice(0, 8);\n}\n\n/**\n * The NineOS command line: a prompt with autocomplete, history (↑) and\n * tap-to-run chips. Magenta element: the prompt, caret, focus edge and Run.\n * Always pair it with a way to use the app without typing (Menu mode).\n */\nexport function CommandLine({\n  commands,\n  onRun,\n  chips,\n  prompt = '>',\n  placeholder = 'type /help, or tap a command',\n  label = 'Command',\n  shortcut = true,\n  onEngage,\n  onEscapeEmpty,\n  runLabel = 'Run',\n  className,\n  ref,\n}: Props) {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState('');\n  const [active, setActive] = useState(-1);\n  const [open, setOpen] = useState(true);\n  const history = useRef<string[]>([]);\n  const historyIndex = useRef(-1);\n  const engaged = useRef(false);\n\n  const options = useMemo(() => (open ? suggest(commands, value) : []), [commands, value, open]);\n  const expanded = options.length > 0;\n\n  const engage = () => {\n    if (engaged.current) return;\n    engaged.current = true;\n    onEngage?.();\n  };\n\n  const run = (line: string) => {\n    const text = line.trim();\n    if (!text) return;\n    if (history.current[0] !== text) history.current.unshift(text);\n    historyIndex.current = -1;\n    setValue('');\n    setActive(-1);\n    onRun(text);\n  };\n\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    run(active >= 0 && options[active] ? options[active].value : value);\n    inputRef.current?.blur();\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    engage();\n    if (e.key === 'ArrowDown' && expanded) {\n      e.preventDefault();\n      setActive((a) => (a + 1) % options.length);\n    } else if (e.key === 'ArrowUp' && expanded) {\n      e.preventDefault();\n      setActive((a) => (a - 1 + options.length) % options.length);\n    } else if (e.key === 'ArrowUp' && !value && history.current.length) {\n      e.preventDefault();\n      historyIndex.current = Math.min(history.current.length - 1, historyIndex.current + 1);\n      setValue(history.current[historyIndex.current]);\n    } else if (e.key === 'Tab' && expanded) {\n      e.preventDefault();\n      setValue(options[Math.max(0, active)].value);\n      setActive(-1);\n    } else if (e.key === 'Escape') {\n      if (value) {\n        setValue('');\n        setActive(-1);\n      } else onEscapeEmpty?.();\n    }\n  };\n\n  // Ctrl/Cmd+K anywhere, or \"/\" when not typing, jumps to the line\n  useEffect(() => {\n    if (!shortcut) return;\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      const el = document.activeElement;\n      const typing = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || (el as HTMLElement | null)?.isContentEditable;\n      if ((e.key === 'k' && (e.ctrlKey || e.metaKey)) || (e.key === '/' && !typing)) {\n        e.preventDefault();\n        inputRef.current?.focus();\n        if (e.key === '/') setValue('/');\n      }\n    };\n    document.addEventListener('keydown', onKey);\n    return () => document.removeEventListener('keydown', onKey);\n  }, [shortcut]);\n\n  return (\n    <div ref={ref} className={cx(styles.root, className)}>\n      {expanded && (\n        <ul className={styles.list} role=\"listbox\" id={`${id}-list`} aria-label=\"Matching commands\">\n          {options.map((o, i) => (\n            <li\n              key={o.value}\n              id={`${id}-opt-${i}`}\n              role=\"option\"\n              aria-selected={i === active}\n              className={styles.option}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                run(o.value);\n              }}\n            >\n              <code>{o.value}</code>\n              <span>{o.description}</span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {chips && chips.length > 0 && (\n        <ChipBar\n          label=\"Quick commands\"\n          onPointerDown={engage}\n          onSelect={(key) => {\n            // Keyboard and pointer alike: picking a chip is using the command line\n            engage();\n            run(key);\n          }}\n          items={chips.map((c) => ({ key: c, prefix: c.startsWith('/') ? '/' : undefined, label: c.replace(/^\\//, '') }))}\n        />\n      )}\n      <form className={styles.prompt} onSubmit={onSubmit} autoComplete=\"off\">\n        <label htmlFor={`${id}-input`} className={styles.label}>\n          {prompt}\n        </label>\n        <input\n          ref={inputRef}\n          id={`${id}-input`}\n          className={styles.input}\n          type=\"text\"\n          value={value}\n          placeholder={placeholder}\n          aria-label={label}\n          role=\"combobox\"\n          aria-expanded={expanded}\n          aria-controls={`${id}-list`}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={active >= 0 ? `${id}-opt-${active}` : undefined}\n          enterKeyHint=\"go\"\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          onFocus={engage}\n          onBlur={() => setOpen(false)}\n          onChange={(e) => {\n            setValue(e.target.value);\n            setActive(-1);\n            setOpen(true);\n          }}\n          onKeyDown={onKeyDown}\n        />\n        <button type=\"submit\" className={styles.run}>\n          {runLabel}\n        </button>\n      </form>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqCA,SAAS,EAAQ,GAAyB,GAA6B;CACrE,IAAI,IAAI,EAAM,KAAK,EAAE,YAAY;CACjC,IAAI,CAAC,GAAG,OAAO,CAAC;CAChB,AAAK,EAAE,WAAW,GAAG,MAAG,IAAI,IAAI;CAChC,IAAM,IAAoB,CAAC;CAC3B,KAAK,IAAM,KAAK,GACd,AAAI,EAAE,MAAM,SAAQ,EAAE,KAAK,SAAS,MAAM,EAAI,KAAK;EAAE,OAAO,GAAG,EAAE,KAAK,GAAG,EAAE;EAAS,aAAa,EAAE,eAAe,EAAE;CAAY,CAAC,CAAC,IAC7H,EAAI,KAAK;EAAE,OAAO,EAAE;EAAM,aAAa,EAAE;CAAY,CAAC;CAE7D,OAAO,EAAI,QAAQ,MAAM,EAAE,MAAM,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC;AAC5D;AAOA,SAAgB,EAAY,EAC1B,aACA,UACA,UACA,YAAS,KACT,iBAAc,gCACd,WAAQ,WACR,cAAW,IACX,aACA,kBACA,cAAW,OACX,cACA,UACQ;CACR,IAAM,IAAK,EAAM,GACX,IAAW,EAAyB,IAAI,GACxC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAQ,KAAa,EAAS,EAAE,GACjC,CAAC,GAAM,KAAW,EAAS,EAAI,GAC/B,IAAU,EAAiB,CAAC,CAAC,GAC7B,IAAe,EAAO,EAAE,GACxB,IAAU,EAAO,EAAK,GAEtB,IAAU,QAAe,IAAO,EAAQ,GAAU,CAAK,IAAI,CAAC,GAAI;EAAC;EAAU;EAAO;CAAI,CAAC,GACvF,IAAW,EAAQ,SAAS,GAE5B,UAAe;EACf,EAAQ,YACZ,EAAQ,UAAU,IAClB,IAAW;CACb,GAEM,KAAO,MAAiB;EAC5B,IAAM,IAAO,EAAK,KAAK;EAClB,MACD,EAAQ,QAAQ,OAAO,KAAM,EAAQ,QAAQ,QAAQ,CAAI,GAC7D,EAAa,UAAU,IACvB,EAAS,EAAE,GACX,EAAU,EAAE,GACZ,EAAM,CAAI;CACZ;CAgDA,OAfA,QAAgB;EACd,IAAI,CAAC,GAAU;EACf,IAAM,KAAS,MAAgC;GAC7C,IAAM,IAAK,SAAS,eACd,IAAS,aAAc,oBAAoB,aAAc,uBAAuB,aAAc,qBAAsB,GAA2B;GACrJ,CAAK,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,YAAc,EAAE,QAAQ,OAAO,CAAC,OACpE,EAAE,eAAe,GACjB,EAAS,SAAS,MAAM,GACpB,EAAE,QAAQ,OAAK,EAAS,GAAG;EAEnC;EAEA,OADA,SAAS,iBAAiB,WAAW,CAAK,SAC7B,SAAS,oBAAoB,WAAW,CAAK;CAC5D,GAAG,CAAC,CAAQ,CAAC,GAGX,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,EAAO,MAAM,CAAS;YAAnD;GACG,KACC,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAM,MAAK;IAAU,IAAI,GAAG,EAAG;IAAQ,cAAW;cACrE,EAAQ,KAAK,GAAG,MACf,kBAAC,MAAD;KAEE,IAAI,GAAG,EAAG,OAAO;KACjB,MAAK;KACL,iBAAe,MAAM;KACrB,WAAW,EAAO;KAClB,cAAc,MAAM;MAElB,AADA,EAAE,eAAe,GACjB,EAAI,EAAE,KAAK;KACb;eATF,CAWE,kBAAC,QAAD,EAAA,UAAO,EAAE,MAAY,CAAA,GACrB,kBAAC,QAAD,EAAA,UAAO,EAAE,YAAkB,CAAA,CACzB;OAZG,EAAE,KAYL,CACL;GACC,CAAA;GAEL,KAAS,EAAM,SAAS,KACvB,kBAAC,GAAD;IACE,OAAM;IACN,eAAe;IACf,WAAW,MAAQ;KAGjB,AADA,EAAO,GACP,EAAI,CAAG;IACT;IACA,OAAO,EAAM,KAAK,OAAO;KAAE,KAAK;KAAG,QAAQ,EAAE,WAAW,GAAG,IAAI,MAAM,KAAA;KAAW,OAAO,EAAE,QAAQ,OAAO,EAAE;IAAE,EAAE;GAC/G,CAAA;GAEH,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAkB,WAhF5B,MAAiB;KAGjC,AAFA,EAAE,eAAe,GACjB,EAAI,KAAU,KAAK,EAAQ,KAAU,EAAQ,GAAQ,QAAQ,CAAK,GAClE,EAAS,SAAS,KAAK;IACzB;IA4EwD,cAAa;cAAjE;KACE,kBAAC,SAAD;MAAO,SAAS,GAAG,EAAG;MAAS,WAAW,EAAO;gBAC9C;KACI,CAAA;KACP,kBAAC,SAAD;MACE,KAAK;MACL,IAAI,GAAG,EAAG;MACV,WAAW,EAAO;MAClB,MAAK;MACE;MACM;MACb,cAAY;MACZ,MAAK;MACL,iBAAe;MACf,iBAAe,GAAG,EAAG;MACrB,qBAAkB;MAClB,yBAAuB,KAAU,IAAI,GAAG,EAAG,OAAO,MAAW,KAAA;MAC7D,cAAa;MACb,YAAY;MACZ,gBAAe;MACf,SAAS;MACT,cAAc,EAAQ,EAAK;MAC3B,WAAW,MAAM;OAGf,AAFA,EAAS,EAAE,OAAO,KAAK,GACvB,EAAU,EAAE,GACZ,EAAQ,EAAI;MACd;MACW,YArGA,MAAuC;OAExD,AADA,EAAO,GACH,EAAE,QAAQ,eAAe,KAC3B,EAAE,eAAe,GACjB,GAAW,OAAO,IAAI,KAAK,EAAQ,MAAM,KAChC,EAAE,QAAQ,aAAa,KAChC,EAAE,eAAe,GACjB,GAAW,OAAO,IAAI,IAAI,EAAQ,UAAU,EAAQ,MAAM,KACjD,EAAE,QAAQ,aAAa,CAAC,KAAS,EAAQ,QAAQ,UAC1D,EAAE,eAAe,GACjB,EAAa,UAAU,KAAK,IAAI,EAAQ,QAAQ,SAAS,GAAG,EAAa,UAAU,CAAC,GACpF,EAAS,EAAQ,QAAQ,EAAa,QAAQ,KACrC,EAAE,QAAQ,SAAS,KAC5B,EAAE,eAAe,GACjB,EAAS,EAAQ,KAAK,IAAI,GAAG,CAAM,GAAG,KAAK,GAC3C,EAAU,EAAE,KACH,EAAE,QAAQ,aACf,KACF,EAAS,EAAE,GACX,EAAU,EAAE,KACP,IAAgB;MAE3B;KAgFO,CAAA;KACD,kBAAC,UAAD;MAAQ,MAAK;MAAS,WAAW,EAAO;gBACrC;KACK,CAAA;IACJ;;EACH;;AAET"}