@sybilion/uilib 1.0.21 → 1.0.23

package/README.md

@@ -6,7 +6,7 @@ React UI components (Stylus modules, Radix primitives, Recharts).
 
 ## Install from npm (recommended)
 
-Published as **`@sybilion/uilib`** on the public registry. No scope-specific `.npmrc` required.
+Published as `**@sybilion/uilib`\*\* on the public registry. No scope-specific `.npmrc` required.
 
 ```bash
 yarn add @sybilion/uilib
@@ -22,27 +22,9 @@ Equivalent in `package.json`:
 }
 ```
 
-## Install from GitHub (optional)
-
-Point your package manager at the repository (branch or tag as needed). **Prebuilt ESM** under `dist/esm` is committed to the repo, so consumers **do not** need to run `yarn build` inside `uilib` for this path.
-
-```bash
-yarn add uilib@github:Mir-Insight/uilib#main
-```
-
-Equivalent in `package.json`:
-
-```json
-{
-  "dependencies": {
-    "uilib": "github:Mir-Insight/uilib#main"
-  }
-}
-```
-
 ### Bare `uilib` imports + scoped install
 
-When the package is installed as **`@sybilion/uilib`** but you keep imports as `from 'uilib'`, add a bundler alias and matching TypeScript paths:
+When the package is installed as `**@sybilion/uilib**` but you keep imports as `from 'uilib'`, add a bundler alias and matching TypeScript paths:
 
 ```json
 {
@@ -65,21 +47,9 @@ resolve: {
 }
 ```
 
-### Legacy: GitHub Packages (`@Mir-Insight/uilib`)
-
-Older installs used GitHub Packages. CI needed:
-
-```text
-@Mir-Insight:registry=https://npm.pkg.github.com/
-//npm.pkg.github.com/:_authToken=<token with read:packages>
-always-auth=true
-```
-
-Prefer **`@sybilion/uilib`** from **npmjs** for new work.
-
 ### Default: prebuilt (`dist/esm`)
 
-The package [`exports`](./package.json) entry `.` resolves to Rollup output and generated declarations:
+The package `[exports](./package.json)` entry `.` resolves to Rollup output and generated declarations:
 
 ```ts
 import { Button } from '@sybilion/uilib';
@@ -97,21 +67,24 @@ To compile from **TypeScript + Stylus** in your app, use the `./src` export:
 import { Button } from '@sybilion/uilib/src';
 ```
 
-Deep imports use `@sybilion/uilib/src/...` (maps to files under [`src/`](./src)). Internal `#uilib/...` imports resolve through this package’s [`imports`](./package.json) field when bundling source.
+Deep imports use `@sybilion/uilib/src/...` (maps to files under `[src/](./src)`). Internal `#uilib/...` imports resolve through this package’s `[imports](./package.json)` field when bundling source.
+
+### Workspace mini-apps (Sybilion iframe)
+
+See `[docs/workspace-mini-apps.md](./docs/workspace-mini-apps.md)`.
 
 ## Bundling from source (`uilib/src`)
 
-If you use **`uilib/src`** (or deep imports under `uilib/src/`), the host app must **compile** those files like application code:
+If you use `**uilib/src**` (or deep imports under `uilib/src/`), the host app must **compile** those files like application code:
 
 1. **Include the library in the TypeScript/JSX pipeline** — e.g. extend `babel-loader` / `ts-loader` `include` so it matches the installed package (and not only your app `src`):
 
-   ```js
-   include: [paths.src, /node_modules\/@sybilion\/uilib/],
-   ```
+```js
+ include: [paths.src, /node_modules\/@sybilion\/uilib/],
+```
 
 2. **Apply the same Stylus/CSS-module rules** to `.styl` under `node_modules/@sybilion/uilib` as you use for your own imports.
-
-3. **Do not remap `#uilib`** — internal imports use `#uilib/...`, resolved via this package’s `package.json` [`imports`](./package.json). Keep your app’s own alias (for example `@` → app `src`) as usual; it does not conflict with `#uilib`.
+3. **Do not remap `#uilib`** — internal imports use `#uilib/...`, resolved via this package’s `package.json` `[imports](./package.json)`. Keep your app’s own alias (for example `@` → app `src`) as usual; it does not conflict with `#uilib`.
 
 If you only use the **default** entry (`import from '@sybilion/uilib'` or aliased `uilib`), you typically **do not** need Stylus/TS compilation for the library in the consumer Webpack config.
 
@@ -132,10 +105,10 @@ Runtime dependencies of this package (Recharts, Radix, `motion`, `vaul`, `@vimeo
 **npm:** log in (`npm login`), then from repo root:
 
 ```bash
-yarn publish:npm              # @sybilion/uilib
+yarn publish:npm    # @sybilion/uilib
 ```
 
-`publish:npm` runs `yarn build` before `npm publish`.
+runs `yarn build` before `npm publish`.
 
 **GitHub `github:` consumers:** after changing library **source**, regenerate and commit the prebuilt output:
 

package/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><style>.st0{opacity:.3;fill:none;stroke:#fff;stroke-width:3;stroke-miterlimit:10;enable-background:new}.st1{fill:#1d7196}.st2,.st3{opacity:.3;stroke:#fff;stroke-width:3;stroke-miterlimit:10;enable-background:new}.st2{stroke-linejoin:round;fill:none}.st3{fill:#1d7196}</style><path class="st0" d="M20.5 20.7c.2-.2-.1-1.3-.2-1.6 0-.2 0-.3-.1-.4s-.6-.1-.7-.1c-1.9-.5-3.6-1.4-4.8-3.1-.9-1.3-1.3-2.8-1.3-4.3 0-.7.2-1.5.5-2.1.4-.9 1.2-1.5 2.1-2 1.1-.6 2.4-.9 3.7-.9.7 0 1.4 0 2.1.2 1 .3 1.8 1.1 2.3 2 .7 1.4 1.1 2.7 1.3 4.2.1.9.2 2-.1 2.8-.2.5-.5.9-.8 1.3-.3.3-.8.7-.8 1.1 0 .6.1 1.2.2 1.7 0 .3.1.6.1.8 0 .2 0 .2.2.2 1 .1 2.1 0 3.2 0 1.7-.1 3.5-.3 5.2-.3.2 0 .8-.1 1 0s.3.6.4.8c.1.2.2.5.3.7s0 .3-.1.5c-.2.3-.4.5-.6.8-.1.2-.2.4-.4.6s-.4.1-.6.2c-2.1.3-4.3.3-6.4.4h-1.8c.2 1.5.3 3 .4 4.6 0 .4 0 .8.1 1.2 0 .2 0 .4.1.6.1.4.9.5 1.3.5 1.2.1 2.4-.1 3.6.2 1 .2 2.3.1 3.1.7.5.4.8 1.1.6 1.7-.2.7-.7 1.2-1.4 1.3-.5.1-1 0-1.5 0-.7-.1-1.4-.2-2.1-.2-2.7-.2-5.4 0-8.2.1-1.4 0-2.7.2-4 .4-.7.1-1.3.2-2 .2-.5 0-1.2.1-1.7 0-.9-.2-1.9.1-2.4-.9-.3-.7-.2-1.8.6-2.2s1.8-.3 2.7-.4l3-.3c.9-.1 1.9-.2 2.8-.3.5-.1.9-.1 1.4-.2.2 0 .5 0 .6-.1s.1 0 .1-.2c0-.9-.1-1.8-.1-2.7 0-.7-.1-1.4-.1-2.2 0-.3-.1-.6-.1-.9 0-.2 0-.5-.1-.7-.1-.1-.4 0-.5 0h-6.5c-.7 0-1.4 0-2.1-.1-.7 0-1.5 0-2-.5-1.1-1-.3-2.9 1.1-3l9.4-.1zm-.3-11.1c-.5-.2-1.1 0-1.6.1s-.9.3-1.3.5c-.5.3-.6.8-.6 1.4 0 1.3 1 2.7 2.2 3 .6.2 1.2.2 1.8.3.2 0 .2.1.3 0 .3-.2.5-.5.7-.8.1-.1.3-.2.3-.4 0-.1-.1-.4-.1-.5-.1-.4-.1-.8-.2-1.2-.1-.5-.5-1.3-.8-1.8 0 0-.5-.5-.7-.6z"/><path class="st1" d="M20.5 20.7c.2-.2-.1-1.3-.2-1.6 0-.2 0-.3-.1-.4s-.6-.1-.7-.1c-1.9-.5-3.6-1.4-4.8-3.1-.9-1.3-1.3-2.8-1.3-4.3 0-.7.2-1.5.5-2.1.4-.9 1.2-1.5 2.1-2 1.1-.6 2.4-.9 3.7-.9.7 0 1.4 0 2.1.2 1 .3 1.8 1.1 2.3 2 .7 1.4 1.1 2.7 1.3 4.2.1.9.2 2-.1 2.8-.2.5-.5.9-.8 1.3-.3.3-.8.7-.8 1.1 0 .6.1 1.2.2 1.7 0 .3.1.6.1.8 0 .2 0 .2.2.2 1 .1 2.1 0 3.2 0 1.7-.1 3.5-.3 5.2-.3.2 0 .8-.1 1 0s.3.6.4.8c.1.2.2.5.3.7s0 .3-.1.5c-.2.3-.4.5-.6.8-.1.2-.2.4-.4.6s-.4.1-.6.2c-2.1.3-4.3.3-6.4.4h-1.8c.2 1.5.3 3 .4 4.6 0 .4 0 .8.1 1.2 0 .2 0 .4.1.6.1.4.9.5 1.3.5 1.2.1 2.4-.1 3.6.2 1 .2 2.3.1 3.1.7.5.4.8 1.1.6 1.7-.2.7-.7 1.2-1.4 1.3-.5.1-1 0-1.5 0-.7-.1-1.4-.2-2.1-.2-2.7-.2-5.4 0-8.2.1-1.4 0-2.7.2-4 .4-.7.1-1.3.2-2 .2-.5 0-1.2.1-1.7 0-.9-.2-1.9.1-2.4-.9-.3-.7-.2-1.8.6-2.2s1.8-.3 2.7-.4l3-.3c.9-.1 1.9-.2 2.8-.3.5-.1.9-.1 1.4-.2.2 0 .5 0 .6-.1s.1 0 .1-.2c0-.9-.1-1.8-.1-2.7 0-.7-.1-1.4-.1-2.2 0-.3-.1-.6-.1-.9 0-.2 0-.5-.1-.7-.1-.1-.4 0-.5 0h-6.5c-.7 0-1.4 0-2.1-.1-.7 0-1.5 0-2-.5-1.1-1-.3-2.9 1.1-3l9.4-.1zm-.3-11.1c-.5-.2-1.1 0-1.6.1s-.9.3-1.3.5c-.5.3-.6.8-.6 1.4 0 1.3 1 2.7 2.2 3 .6.2 1.2.2 1.8.3.2 0 .2.1.3 0 .3-.2.5-.5.7-.8.1-.1.3-.2.3-.4 0-.1-.1-.4-.1-.5-.1-.4-.1-.8-.2-1.2-.1-.5-.5-1.3-.8-1.8 0 0-.5-.5-.7-.6z"/><path class="st0" d="M6.3 30.1c-.6-.1-.9-.3-1.3-.8s-.4-.9-.2-1.4c.4-.9 1.5-1.2 2.4-1.5 1.9-.6 4-.6 6-.5 1 .1 2 .1 3 .1s1.9.8 1.7 2c-.1.3-.2.5-.4.7-.2.2-.3.3-.6.4-.3.1-.6.2-1 .2-.9.1-1.8.1-2.8.1-1.3 0-2.6 0-3.9.1-.5.1-1.1.2-1.6.4-.3.1-.9.3-1.3.2z"/><path class="st1" d="M6.3 30.1c-.6-.1-.9-.3-1.3-.8s-.4-.9-.2-1.4c.4-.9 1.5-1.2 2.4-1.5 1.9-.6 4-.6 6-.5 1 .1 2 .1 3 .1s1.9.8 1.7 2c-.1.3-.2.5-.4.7-.2.2-.3.3-.6.4-.3.1-.6.2-1 .2-.9.1-1.8.1-2.8.1-1.3 0-2.6 0-3.9.1-.5.1-1.1.2-1.6.4-.3.1-.9.3-1.3.2z"/><path class="st0" d="M26.2 27.3c-.1-.2.6-.8.7-.9.2-.2.4-.4.6-.4.2-.1.5-.1.8-.1.5 0 1.1 0 1.6-.1 1.7-.1 3.5-.4 5.1.2.3.1.5.2.7.3.1.1.3.1.3.3 0 .1-.1.4-.1.6-.2.7-.3 1.4-1 1.8-.3.2-.7.2-1.1.2-.8.1-1.7.1-2.5.1-.9 0-1.7 0-2.6-.1h-1.2c-.1 0-.4.1-.5 0l-.8-1.9z"/><path class="st1" d="M26.2 27.3c-.1-.2.6-.8.7-.9.2-.2.4-.4.6-.4.2-.1.5-.1.8-.1.5 0 1.1 0 1.6-.1 1.7-.1 3.5-.4 5.1.2.3.1.5.2.7.3.1.1.3.1.3.3 0 .1-.1.4-.1.6-.2.7-.3 1.4-1 1.8-.3.2-.7.2-1.1.2-.8.1-1.7.1-2.5.1-.9 0-1.7 0-2.6-.1h-1.2c-.1 0-.4.1-.5 0l-.8-1.9z"/><path class="st2" d="M10.8 15.7c.3.3 1.9 1.9 1.9 2 0 .2-.2.3-.2.4-.2.3-.4.5-.6.8-.2.2-.6.9-1 .7-1.8-.7-3-2.4-4.4-3.8-.7-.7-1.4-1.4-2.2-2-.4-.3-.7-.7-1.1-1-.2-.2-.5-.5-.6-.8-.3-1.1.5-2.3 1.6-2.2.7.1 1.4.7 1.9 1.2 1.7 1.4 3.2 3 4.7 4.7"/><path class="st1" d="M10.8 15.7c.3.3 1.9 1.9 1.9 2 0 .2-.2.3-.2.4-.2.3-.4.5-.6.8-.2.2-.6.9-1 .7-1.8-.7-3-2.4-4.4-3.8-.7-.7-1.4-1.4-2.2-2-.4-.3-.7-.7-1.1-1-.2-.2-.5-.5-.6-.8-.3-1.1.5-2.3 1.6-2.2.7.1 1.4.7 1.9 1.2 1.7 1.4 3.2 3 4.7 4.7"/><g id="XMLID_1_"><path class="st3" d="M28.2 17.2c-.3-.3-.3-.7-.3-1.2.1-.7.4-1.3.8-1.8 1.1-1.6 2.3-3.2 3.5-4.7.2-.3.6-.9 1-1.1.5-.2 1.1-.1 1.5.3.2.2.4.4.5.6.1.2.3.4.4.6.1.3-.4.9-.5 1.1-.5.8-1.1 1.6-1.7 2.4-.7 1-1.4 1.9-2.1 2.9-.3.4-.6.9-1 1.2-.1.1-.9.1-1.7 0l-.4-.3z"/><path class="st1" d="M28.2 17.2c-.3-.3-.3-.7-.3-1.2.1-.7.4-1.3.8-1.8 1.1-1.6 2.3-3.2 3.5-4.7.2-.3.6-.9 1-1.1.5-.2 1.1-.1 1.5.3.2.2.4.4.5.6.1.2.3.4.4.6.1.3-.4.9-.5 1.1-.5.8-1.1 1.6-1.7 2.4-.7 1-1.4 1.9-2.1 2.9-.3.4-.6.9-1 1.2-.1.1-.9.1-1.7 0l-.4-.3z"/></g></svg>

package/assets/fonts/fonts.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'Manrope';
+  src: url('../fonts/Manrope-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('../fonts/Manrope-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('../fonts/Manrope-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'KMR Apparat';
+  src: url('../fonts/Apparat-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'KMR Apparat';
+  src: url('../fonts/Apparat-Heavy.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'KMR Apparat';
+  src: url('../fonts/Apparat-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'KMR Apparat';
+  src: url('../fonts/Apparat-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'KMR Apparat';
+  src: url('../fonts/Apparat-Black.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: block;
+}

package/assets/globals.css

@@ -0,0 +1,456 @@
+@import './fonts/fonts.css';
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: 'Manrope', sans-serif;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-manrope);
+  --font-mono: 'KMR Apparat', monospace;
+  --tracking-tight-custom: -0.01em;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-brand: var(--brand-color);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-sb-cyan-50: var(--sb-cyan-50);
+  --color-sb-cyan-100: var(--sb-cyan-100);
+  --color-sb-cyan-200: var(--sb-cyan-200);
+  --color-sb-cyan-300: var(--sb-cyan-300);
+  --color-sb-cyan-400: var(--sb-cyan-400);
+  --color-sb-cyan-500: var(--sb-cyan-500);
+  --color-sb-cyan-600: var(--sb-cyan-600);
+  --color-sb-cyan-700: var(--sb-cyan-700);
+  --color-sb-cyan-800: var(--sb-cyan-800);
+  --color-sb-cyan-900: var(--sb-cyan-900);
+  --color-sb-purple-50: var(--sb-purple-50);
+  --color-sb-purple-100: var(--sb-purple-100);
+  --color-sb-purple-200: var(--sb-purple-200);
+  --color-sb-purple-300: var(--sb-purple-300);
+  --color-sb-purple-400: var(--sb-purple-400);
+  --color-sb-purple-500: var(--sb-purple-500);
+  --color-sb-purple-600: var(--sb-purple-600);
+  --color-sb-purple-700: var(--sb-purple-700);
+  --color-sb-purple-800: var(--sb-purple-800);
+  --color-sb-purple-900: var(--sb-purple-900);
+  --color-sb-red-50: var(--sb-red-50);
+  --color-sb-red-100: var(--sb-red-100);
+  --color-sb-red-200: var(--sb-red-200);
+  --color-sb-red-300: var(--sb-red-300);
+  --color-sb-red-400: var(--sb-red-400);
+  --color-sb-red-500: var(--sb-red-500);
+  --color-sb-red-600: var(--sb-red-600);
+  --color-sb-red-700: var(--sb-red-700);
+  --color-sb-red-800: var(--sb-red-800);
+  --color-sb-red-900: var(--sb-red-900);
+  --color-sb-green-50: var(--sb-green-50);
+  --color-sb-green-100: var(--sb-green-100);
+  --color-sb-green-200: var(--sb-green-200);
+  --color-sb-green-300: var(--sb-green-300);
+  --color-sb-green-400: var(--sb-green-400);
+  --color-sb-green-500: var(--sb-green-500);
+  --color-sb-green-600: var(--sb-green-600);
+  --color-sb-green-700: var(--sb-green-700);
+  --color-sb-green-800: var(--sb-green-800);
+  --color-sb-green-900: var(--sb-green-900);
+  --color-sb-yellow-50: var(--sb-yellow-50);
+  --color-sb-yellow-100: var(--sb-yellow-100);
+  --color-sb-yellow-200: var(--sb-yellow-200);
+  --color-sb-yellow-300: var(--sb-yellow-300);
+  --color-sb-yellow-400: var(--sb-yellow-400);
+  --color-sb-yellow-500: var(--sb-yellow-500);
+  --color-sb-yellow-600: var(--sb-yellow-600);
+  --color-sb-yellow-700: var(--sb-yellow-700);
+  --color-sb-yellow-800: var(--sb-yellow-800);
+  --color-sb-yellow-900: var(--sb-yellow-900);
+  --stroke-linecap: square;
+  --stroke-linejoin: miter;
+  --stroke-absolute: true;
+  --header-height: 3.5rem;
+}
+
+:root {
+  --sb-cyan-50: oklch(0.964 0.006 204);
+  --sb-cyan-100: oklch(0.933 0.011 204);
+  --sb-cyan-200: oklch(0.76 0.089 204);
+  --sb-cyan-300: oklch(0.7 0.098 204);
+  --sb-cyan-400: oklch(0.625 0.234 204);
+  --sb-cyan-500: oklch(0.518 0.258 204);
+  --sb-cyan-600: oklch(0.421 0.231 204);
+  --sb-cyan-700: oklch(0.388 0.042 204);
+  --sb-cyan-800: oklch(0.338 0.026 204);
+  --sb-cyan-900: oklch(0.23 0.017 204);
+  --sb-purple-50: oklch(0.964 0.021 304);
+  --sb-purple-100: oklch(0.933 0.039 303.4);
+  --sb-purple-200: oklch(0.76 0.148 301.5);
+  --sb-purple-300: oklch(0.719 0.174 300.6);
+  --sb-purple-400: oklch(0.625 0.234 297.8);
+  --sb-purple-500: oklch(0.518 0.258 292.6);
+  --sb-purple-600: oklch(0.421 0.231 289);
+  --sb-purple-700: oklch(0.33 0.179 289.7);
+  --sb-purple-800: oklch(0.238 0.123 292.3);
+  --sb-purple-900: oklch(0.23 0.049 301.1);
+  --sb-red-50: oklch(0.969 0.015 22.4);
+  --sb-red-100: oklch(0.942 0.029 23);
+  --sb-red-200: oklch(0.8 0.114 24.5);
+  --sb-red-300: oklch(0.769 0.137 25);
+  --sb-red-400: oklch(0.7 0.191 27.2);
+  --sb-red-500: oklch(0.606 0.194 28.6);
+  --sb-red-600: oklch(0.539 0.183 28.8);
+  --sb-red-700: oklch(0.427 0.155 29.5);
+  --sb-red-800: oklch(0.311 0.107 29.3);
+  --sb-red-900: oklch(0.232 0.019 24.1);
+  --sb-green-50: oklch(0.981 0.028 158.7);
+  --sb-green-100: oklch(0.949 0.08 157.2);
+  --sb-green-200: oklch(0.909 0.154 154.2);
+  --sb-green-300: oklch(0.859 0.196 151.7);
+  --sb-green-400: oklch(0.823 0.216 149.8);
+  --sb-green-500: oklch(0.748 0.208 148.6);
+  --sb-green-600: oklch(0.641 0.155 151.1);
+  --sb-green-700: oklch(0.482 0.107 152.1);
+  --sb-green-800: oklch(0.365 0.079 152.3);
+  --sb-green-900: oklch(0.254 0.023 157.2);
+  --sb-yellow-50: oklch(0.984 0.014 78.3);
+  --sb-yellow-100: oklch(0.956 0.025 78.9);
+  --sb-yellow-200: oklch(0.927 0.041 76.7);
+  --sb-yellow-300: oklch(0.844 0.1 75.5);
+  --sb-yellow-400: oklch(0.771 0.128 73.6);
+  --sb-yellow-500: oklch(0.691 0.128 71.8);
+  --sb-yellow-600: oklch(0.624 0.109 73.2);
+  --sb-yellow-700: oklch(0.481 0.083 73.3);
+  --sb-yellow-800: oklch(0.356 0.058 73.8);
+  --sb-yellow-900: oklch(0.251 0.016 79.5);
+  --sb-gray-50: oklch(0.98 0 0);
+  --sb-gray-100: oklch(0.949 0 0);
+  --sb-gray-200: oklch(0.909 0 0);
+  --sb-gray-300: oklch(0.859 0 0);
+  --sb-gray-400: oklch(0.823 0 0);
+  --sb-gray-500: oklch(0.748 0 0);
+  --sb-gray-600: oklch(0.641 0 0);
+  --sb-gray-700: oklch(0.482 0 0);
+  --sb-gray-800: oklch(0.365 0 0);
+  --sb-gray-900: oklch(0.254 0 0);
+  --sb-slate-50: oklch(0.9843 0.0011 197.14);
+  --sb-slate-100: oklch(0.9622 0.0035 219.53);
+  --sb-slate-200: oklch(0.8882 0.0101 212.52);
+  --sb-slate-300: oklch(0.8119 0.0139 214.37);
+  --sb-slate-400: oklch(0.7315 0.0168 216.72);
+  --sb-slate-500: oklch(0.6489 0.0179 211.06);
+  --sb-slate-600: oklch(0.5648 0.0184 211.07);
+  --sb-slate-700: oklch(0.4723 0.0152 208.74);
+  --sb-slate-800: oklch(0.3759 0.0107 205.8);
+  --sb-slate-900: oklch(0.2732 0.0061 214.4);
+  --sb-slate-950: oklch(0.1579 0.0017 196.99);
+  --bp-mobile: 384px;
+  --bp-tablet: 768px;
+  --bp-desktop: 1024px;
+  --p-24: 96px;
+  --p-23: 92px;
+  --p-20: 80px;
+  --p-19: 76px;
+  --p-18: 72px;
+  --p-17: 68px;
+  --p-16: 64px;
+  --p-12: 48px;
+  --p-11: 44px;
+  --p-10: 40px;
+  --p-9: 36px;
+  --p-8: 32px;
+  --p-7: 28px;
+  --p-6: 24px;
+  --p-5: 20px;
+  --p-4: 16px;
+  --p-3: 12px;
+  --p-2: 8px;
+  --p-1: 4px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --text-5xl: 48px;
+
+  --spacing-3xs: 2px;
+  --spacing-2xs: 4px;
+  --spacing-xs: 6px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+
+  --font-family-heading: 'KMR Apparat', sans-serif;
+  --font-family-body: 'Manrope', sans-serif;
+
+  /* app variables */
+  --brand-color: var(--sb-purple-400);
+  --brand-color-50: var(--sb-purple-50);
+  --brand-color-100: var(--sb-purple-100);
+  --brand-color-200: var(--sb-purple-200);
+  --brand-color-300: var(--sb-purple-300);
+  --brand-color-400: var(--sb-purple-400);
+  --brand-color-500: var(--sb-purple-500);
+  --brand-color-600: var(--sb-purple-600);
+  --brand-color-700: var(--sb-purple-700);
+  --brand-color-800: var(--sb-purple-800);
+  --brand-color-900: var(--sb-purple-900);
+  --header-height: 94px;
+  --page-x-padding: var(--p-16);
+  --page-y-padding: var(--p-12);
+  --page-color: var(--sb-slate-100);
+  --page-color-alpha-800: var(--sb-slate-100);
+  --background: oklch(1 0 0);
+  --background-alpha-800: oklch(0.99 0 0 / 0.8);
+  --background-alpha-700: oklch(0.99 0 0 / 0.7);
+  --background-alpha-500: oklch(0.99 0 0 / 0.5);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.25 0 0);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.96 0 0);
+  --secondary-800: oklch(0.96 0 0 / 0.8);
+  --secondary-foreground: oklch(0.25 0 0);
+  --muted: oklch(0.965 0 0);
+  --muted-50: oklch(0.98 0 0);
+  --muted-foreground: var(--sb-slate-600);
+  --muted-border: var(--sb-slate-400);
+  --accent: var(--sb-slate-100);
+  --accent-500: oklch(0.96 0 0 / 0.5);
+  --accent-foreground: oklch(0.25 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-100: oklch(0.577 0.245 27.325 / 0.1);
+  --destructive-200: oklch(0.577 0.245 27.325 / 0.2);
+  --destructive-400: oklch(0.577 0.245 27.325 / 0.4);
+  --destructive-600: oklch(0.577 0.245 27.325 / 0.6);
+  --destructive-900: oklch(0.577 0.245 27.325 / 0.9);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.94 0 0);
+  --input-30: oklch(0.94 0 0 / 0.3);
+  --ring: oklch(0.65 0 0);
+  --ring-50: oklch(0.65 0 0 / 0.5);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.2 0 0);
+  --sidebar-primary: oklch(0.25 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: var(--sb-slate-100);
+  --sidebar-accent-foreground: oklch(0.25 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.65 0 0);
+
+  --sb-link-color: var(--brand-color-500);
+  --sb-link-visited-color: var(--brand-color-700);
+  --sb-link-color-hover: var(--brand-color-600);
+}
+
+@media (max-width: var(--bp-mobile)) {
+  :root {
+    --header-height: 84px;
+    --page-x-padding: var(--p-6);
+    --page-y-padding: var(--p-6);
+  }
+}
+
+.dark {
+  --page-color: oklch(0.22 0 0);
+  --page-color-alpha-800: oklch(0.2242 0 0 / 0.8);
+  --background: oklch(0.14 0 0);
+  --background-alpha-800: oklch(0.14 0 0 / 0.95);
+  --background-alpha-700: oklch(0.14 0 0 / 0.7);
+  --background-alpha-500: oklch(0.14 0 0 / 0.5);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.1 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.16 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.9 0 0);
+  --primary-foreground: oklch(0.14 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-800: oklch(0.22 0 0 / 0.8);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.2 0 0);
+  --muted-50: oklch(0.2 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --muted-border: var(--sb-slate-600);
+  --accent: oklch(0.27 0 0);
+  --accent-500: oklch(0.27 0 0 / 0.5);
+  --accent-foreground: oklch(0.95 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-200: oklch(0.704 0.191 22.216 / 0.2);
+  --destructive-400: oklch(0.704 0.191 22.216 / 0.4);
+  --destructive-600: oklch(0.704 0.191 22.216 / 0.6);
+  --destructive-900: oklch(0.704 0.191 22.216 / 0.9);
+  --border: oklch(0.3 0 0 / 0.8);
+  --input: oklch(1 0 0 / 16%);
+  --input-30: oklch(1 0 0 / 0.3);
+  --ring: oklch(0.5 0 0);
+  --ring-50: oklch(0.5 0 0 / 0.5);
+  --sidebar: oklch(0.16 0 0);
+  --sidebar-foreground: oklch(0.9 0 0);
+  --sidebar-primary: oklch(0.9 0 0);
+  --sidebar-primary-foreground: oklch(0.14 0 0);
+  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.3 0 0);
+  --sidebar-ring: oklch(0.5 0 0);
+  --sb-link-color: var(--brand-color-400);
+  --sb-link-visited-color: var(--brand-color-600);
+}
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: 'Manrope', sans-serif;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  html,
+  body {
+    overscroll-behavior-y: none;
+  }
+
+  html {
+    background-color: var(--background);
+  }
+
+  body {
+    min-height: 100vh;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-family-body);
+    font-weight: 400;
+    user-select: none;
+    font-size: var(--text-sm);
+    line-height: 1.6;
+  }
+
+  #app-root {
+    max-height: 100vh;
+    overflow: hidden;
+    min-height: 100vh;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: var(--font-family-heading);
+  }
+
+  h1 {
+    font-weight: 500;
+    font-size: var(--text-3xl);
+    line-height: 1.4;
+    user-select: text;
+  }
+
+  h2 {
+    font-weight: 300;
+    font-size: var(--text-2xl);
+    line-height: 1.4;
+  }
+
+  h3 {
+    font-weight: 500;
+    font-size: var(--text-xl);
+    line-height: 1.4;
+  }
+
+  label {
+    @apply cursor-pointer;
+    font-weight: 500;
+  }
+
+  .font-sans {
+    @apply tracking-tight-custom;
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  button {
+    font-weight: 500;
+  }
+
+  input:focus,
+  textarea:focus {
+    box-shadow: inset 0 0 0 2px var(--brand-color-400);
+    /* border: none !important; */
+  }
+
+  a {
+    color: var(--sb-link-color);
+    cursor: pointer;
+  }
+
+  a:visited {
+    color: var(--sb-link-visited-color);
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  ::selection {
+    background-color: var(--brand-color-200);
+  }
+  .dark ::selection {
+    background-color: var(--brand-color-800);
+  }
+}

package/assets/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="<%= htmlWebpackPlugin.options.lang %>">
+  <head>
+    <base href="<%= htmlWebpackPlugin.options.baseUrl %>" />
+    <title>UILIB</title>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="assets/globals.css" />
+  </head>
+  <body>
+    <div id="app-root"></div>
+    <div id="app-modal"></div>
+  </body>
+</html>

package/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+</svg>