@viax.io/uxm 4.43.0 → 4.43.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## [4.43.2](https://github.com/viax-io/uxm/compare/v4.43.1...v4.43.2) (2026-09-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **data-table,page-header:** scope the tbody rule, lower the body floor ([e61c23e](https://github.com/viax-io/uxm/commit/e61c23ecbb6b8928d98ddd00bd593265eb504d5e))
|
|
7
|
+
* **data-table:** stop stacked rows collapsing to min-content width ([8289024](https://github.com/viax-io/uxm/commit/828902417e3a9c55975ae2e5013e51b8eab24fa0))
|
|
8
|
+
* **page-header:** wrap the actions instead of crushing the title ([9fa690b](https://github.com/viax-io/uxm/commit/9fa690bf2b2c5cc2e28e606cd17406d31fa7e777))
|
|
9
|
+
|
|
10
|
+
## [4.43.1](https://github.com/viax-io/uxm/compare/v4.43.0...v4.43.1) (2026-09-21)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **app-sidebar:** hide the closed mobile drawer, not just translate it ([b397ee0](https://github.com/viax-io/uxm/commit/b397ee088c4431b8e4306fe27cfe371dc88a8bc3))
|
|
16
|
+
* **app-sidebar:** ship the mobile-drawer CSS the markup already assumed ([8f02e21](https://github.com/viax-io/uxm/commit/8f02e21218133e344690115914e03616e4804848))
|
|
17
|
+
|
|
1
18
|
# [4.43.0](https://github.com/viax-io/uxm/compare/v4.42.0...v4.43.0) (2026-09-16)
|
|
2
19
|
|
|
3
20
|
|
package/README.md
CHANGED
|
@@ -104,6 +104,100 @@ import { ButtonPrimary, themeTokens } from '@viax.io/uxm';
|
|
|
104
104
|
| `@viax.io/uxm/studio/generate-css` | `generateOverridesCss` + the CSS sanitizers — turn saved studio overrides and a `BrandConfig` into a stylesheet on the server, without pulling in the workbench UI. |
|
|
105
105
|
| `@viax.io/uxm/studio.css` | Tailwind utilities for the studio shell + token declarations. Does **not** bundle the atom CSS — a studio host imports `ui.css` alongside it. |
|
|
106
106
|
|
|
107
|
+
## CDN usage
|
|
108
|
+
|
|
109
|
+
For pages that can't run npm at all — prototypes, CodePen repros, embeds in someone else's site — every release also publishes a handful of self-contained `<script>`/`<link>`-ready bundles, built by `npm run build:cdn` and uploaded automatically on release.
|
|
110
|
+
|
|
111
|
+
> **If your project has a bundler, this is not what you want.** Use [`npm i @viax.io/uxm`](#install) — the CDN bundles below exist specifically for pages that can't.
|
|
112
|
+
|
|
113
|
+
All files live at `https://uxm.viax.io/<version>/<file>` — versioned and immutable (`Cache-Control: public, max-age=31536000, immutable`). There is no `/latest/`: pin an exact version, and use the same version across every file you load on one page.
|
|
114
|
+
|
|
115
|
+
| File | Format | React | For |
|
|
116
|
+
|---|---|---|---|
|
|
117
|
+
| `uxm.esm.js` | ESM, `react` / `react-dom` / `react/jsx-runtime` **external** | the host page's, via import map | pages that already have React 19 |
|
|
118
|
+
| `uxm.standalone.js` | IIFE, `window.UXM`, React **bundled in** | its own, inside the bundle | pages with **no** React at all |
|
|
119
|
+
| `uxm.css` | flattened `tokens.css` + `ui.css` | — | both |
|
|
120
|
+
| `uxm-generate-css.esm.js` | ESM, no deps | — | only if you need `generateOverridesCss` (the theming applier) |
|
|
121
|
+
| `uxm.esm.d.ts` / `uxm-generate-css.esm.d.ts` | bundled `.d.ts` per JS artifact | needs `@types/react` | editor/type-check support |
|
|
122
|
+
| `cdn-manifest.json` | byte size, gzip size, `sha384` SRI hash per file | — | verify what you fetched |
|
|
123
|
+
|
|
124
|
+
⚠️ **React 19 ships no UMD build.** The classic "two `<script>` tags from a CDN plus our UMD on top" isn't possible — that's why there are two separate formats above instead of one.
|
|
125
|
+
|
|
126
|
+
### ESM — page that already has React 19
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<script type="importmap">
|
|
130
|
+
{
|
|
131
|
+
"imports": {
|
|
132
|
+
"react": "https://esm.sh/react@19",
|
|
133
|
+
"react-dom/client": "https://esm.sh/react-dom@19/client",
|
|
134
|
+
"@viax.io/uxm/ui": "https://uxm.viax.io/4.43.0/uxm.esm.js"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
</script>
|
|
138
|
+
<link rel="stylesheet" href="https://uxm.viax.io/4.43.0/uxm.css" />
|
|
139
|
+
<script type="module">
|
|
140
|
+
import { ButtonPrimary } from '@viax.io/uxm/ui';
|
|
141
|
+
import { createElement } from 'react';
|
|
142
|
+
import { createRoot } from 'react-dom/client';
|
|
143
|
+
|
|
144
|
+
createRoot(document.getElementById('root')).render(createElement(ButtonPrimary, null, 'Hello UXM'));
|
|
145
|
+
</script>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Standalone — page with no React
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<link rel="stylesheet" href="https://uxm.viax.io/4.43.0/uxm.css" />
|
|
152
|
+
<script src="https://uxm.viax.io/4.43.0/uxm.standalone.js"></script>
|
|
153
|
+
<script>
|
|
154
|
+
const { React, createRoot, ButtonPrimary } = window.UXM;
|
|
155
|
+
createRoot(document.getElementById('root')).render(React.createElement(ButtonPrimary, null, 'Hello UXM'));
|
|
156
|
+
</script>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
⚠️ **Never load `uxm.standalone.js` on a page that already has another React instance** — two copies of React break hooks and context. If the page has React, use the ESM build above instead.
|
|
160
|
+
|
|
161
|
+
### Required host baseline
|
|
162
|
+
|
|
163
|
+
A CDN page gets none of the resets a bundler-based app inherits from its own global stylesheet. Add this once, after `uxm.css` — skip it and the app renders in Times New Roman with inputs overflowing their containers. This is the same baseline npm consumers need; see `skills/viax-uxm/references/quick-recipes.md` (recipe 0) for the full version and why each line is load-bearing.
|
|
164
|
+
|
|
165
|
+
```css
|
|
166
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
167
|
+
html, body, #root { height: 100%; }
|
|
168
|
+
:root { --font-sans: var(--font-inter, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); }
|
|
169
|
+
html, body, #root { font-family: var(--brand-font, var(--font-sans)); }
|
|
170
|
+
button, input, select, textarea { font: inherit; }
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Types
|
|
174
|
+
|
|
175
|
+
The `.d.ts` bundles need `@types/react` in your project — they extend React's own prop types (`ButtonHTMLAttributes` and friends), which aren't ours to inline. Fetch one alongside your CDN import and map it in `tsconfig.json`:
|
|
176
|
+
|
|
177
|
+
```sh
|
|
178
|
+
UXM=4.43.0
|
|
179
|
+
curl -fsSL -o types/uxm.esm.d.ts https://uxm.viax.io/$UXM/uxm.esm.d.ts
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
```json
|
|
183
|
+
{ "compilerOptions": { "paths": { "@viax.io/uxm/ui": ["./types/uxm.esm.d.ts"] } } }
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
If your project can take even a dev-only npm dependency, `npm i -D @viax.io/uxm@<version>` is simpler and gives every subpath's types at once — the curl route above exists for projects that can't.
|
|
187
|
+
|
|
188
|
+
### Verifying what you fetched (SRI)
|
|
189
|
+
|
|
190
|
+
`cdn-manifest.json` next to every version's files lists a `sha384` hash per file — pass it as `integrity` on the `<script>` tag:
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<script
|
|
194
|
+
type="module"
|
|
195
|
+
src="https://uxm.viax.io/4.43.0/uxm.esm.js"
|
|
196
|
+
integrity="sha384-X5wmfaVzW+An31gN2SpznF1F6UxTbD4SsCynzec/bElec2EneSTZf2l0O81YHLVt"
|
|
197
|
+
crossorigin="anonymous"
|
|
198
|
+
></script>
|
|
199
|
+
```
|
|
200
|
+
|
|
107
201
|
## Component catalog
|
|
108
202
|
|
|
109
203
|
Every component folder ships a `README.md` documenting props, CSS variables, MODO-configurable design tokens, states/variants, and accessibility. Click through any name for the full reference.
|
package/dist/studio/studio.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:var(--font-inter);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-inter);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-surface-alt:var(--color-surface-alt);--color-card:var(--color-card);--color-text:var(--color-text);--color-text-strong:var(--color-text-strong);--color-text-muted:var(--color-text-muted);--color-text-subtle:var(--color-text-subtle);--color-text-inverse:var(--color-text-inverse);--color-border:var(--color-border);--color-accent-subtle:var(--color-accent-subtle);--color-accent-light:var(--color-accent-light);--color-accent:var(--color-accent);--color-accent-bold:var(--color-accent-bold);--color-highlight-warm:var(--color-highlight-warm);--color-highlight-cool:var(--color-highlight-cool);--color-on-highlight-warm:var(--color-on-highlight-warm);--color-on-highlight-cool:var(--color-on-highlight-cool);--color-category-composite:var(--color-category-composite);--color-category-diagram:var(--color-category-diagram);--color-danger-text:var(--color-danger-text);--color-success-bg:var(--color-success-bg);--color-success-text:var(--color-success-text);--color-success-border:var(--color-success-border);--color-info-bg:var(--color-info-bg);--color-info-text:var(--color-info-text);--color-info-border:var(--color-info-border);--color-warning-bg:var(--color-warning-bg);--color-warning-text:var(--color-warning-text);--color-warning-border:var(--color-warning-border);--color-danger-bg:var(--color-danger-bg);--color-danger-border:var(--color-danger-border);--color-cream:var(--color-surface);--color-warm-gray:var(--color-surface-alt);--color-ink:var(--color-text);--color-green:var(--color-accent);--color-mint:var(--color-accent-light);--color-forest:var(--color-accent-bold);--color-peach:var(--color-highlight-warm);--color-lavender:var(--color-highlight-cool);--color-lime:var(--color-accent-subtle)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[9999\]{z-index:9999}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-5{margin-inline:calc(var(--spacing) * -5)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-3{margin-left:calc(var(--spacing) * -3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.list-item{display:list-item}.table{display:table}.table-column{display:table-column}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.max-h-\[280px\]{max-height:280px}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-full{min-height:100%}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-44{width:calc(var(--spacing) * 44)}.w-\[58px\]{width:58px}.w-\[220px\]{width:220px}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-row-resize{cursor:row-resize}.resize{resize:both}.\[grid-template-columns\:repeat\(auto-fit\,minmax\(220px\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-l-\[4px\]{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-r-\[4px\]{border-top-right-radius:4px;border-bottom-right-radius:4px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-accent-bold\/30{border-color:var(--color-accent-bold)}@supports (color:color-mix(in lab, red, red)){.border-accent-bold\/30{border-color:color-mix(in oklab, var(--color-accent-bold) 30%, transparent)}}.border-border,.border-border\/60{border-color:var(--color-border)}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, var(--color-border) 60%, transparent)}}.border-text\/20{border-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.border-text\/20{border-color:color-mix(in oklab, var(--color-text) 20%, transparent)}}.bg-accent-subtle,.bg-accent-subtle\/40{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/40{background-color:color-mix(in oklab, var(--color-accent-subtle) 40%, transparent)}}.bg-accent-subtle\/50{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/50{background-color:color-mix(in oklab, var(--color-accent-subtle) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-cream,.bg-surface{background-color:var(--color-surface)}.bg-surface-alt{background-color:var(--color-surface-alt)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-contain{object-fit:contain}.p-3{padding:calc(var(--spacing) * 3)}.p-6{padding:calc(var(--spacing) * 6)}.p-12{padding:calc(var(--spacing) * 12)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-1{padding-right:var(--spacing)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-\[66px\]{padding-left:66px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[38px\]{font-size:38px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.06em\]{--tw-tracking:-.06em;letter-spacing:-.06em}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--color-accent)}.text-accent-bold{color:var(--color-accent-bold)}.text-ink,.text-text{color:var(--color-text)}.text-text-muted{color:var(--color-text-muted)}.text-text-strong{color:var(--color-text-strong)}.text-text-subtle{color:var(--color-text-subtle)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.\[file\:line\]{file:line}@media (hover:hover){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-accent) 30%, transparent)}}}.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}}@media (hover:hover){.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:bg-surface-alt:hover{background-color:var(--color-surface-alt)}.hover\:text-text-strong:hover{color:var(--color-text-strong)}}.focus\:border-accent:focus{border-color:var(--color-accent)}@container (min-width:480px){.\@\[480px\]\:inline{display:inline}}@container (min-width:640px){.\@\[640px\]\:block{display:block}}}:root{--color-surface:#f8f7f6;--color-surface-alt:#f2f1f0;--color-card:#fff;--color-text:#1e1e1e;--color-text-strong:#4a4a4a;--color-text-muted:#9ca3af;--color-text-subtle:#cbd5e1;--color-text-inverse:#fff;--color-border:#ebebea;--color-accent-subtle:#e6ffd1;--color-accent-light:#90e9b8;--color-accent:#3ecc87;--color-accent-bold:#1e7150;--color-drop-target:var(--color-accent);--color-highlight-warm:#fcd0a1;--color-highlight-cool:#c3bef7;--color-on-highlight-warm:#7c6b3e;--color-on-highlight-cool:#5b54a0;--color-category-composite:#f472b6;--color-category-diagram:#6366f1;--color-success-bg:#f0fdf4;--color-success-text:#166534;--color-success-border:#bbf7d0;--color-info-bg:#eff6ff;--color-info-text:#1e40af;--color-info-border:#bfdbfe;--color-warning-bg:#fffbeb;--color-warning-text:#92400e;--color-warning-border:#fde68a;--color-danger-bg:#fef2f2;--color-danger-text:#991b1b;--color-danger-border:#fecaca;--color-canvas-dot:#e0e0e0;--color-preview-bg-light:#fff;--color-preview-bg-dark:#232220;--color-preview-border-light:#ebebea;--color-preview-border-dark:#444240;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #0000000f, 0 1px 3px #0000000a;--shadow-lg:0 6px 20px #0000001a;--shadow-xl:0 8px 24px #0000001f;--shadow-2xl:0 24px 48px #0000002e;--shadow-card:0 1px 2px #0000000a, 0 4px 12px #0000000a;--shadow-modal:var(--shadow-2xl);--font-inter:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--color-surface:#232220;--color-surface-alt:#2a2927;--color-card:#1b1a18;--color-text:#f5f5f5;--color-text-strong:#c8c8c8;--color-text-muted:#a3a3a3;--color-text-subtle:#6e6e6e;--color-text-inverse:#1b1a18;--color-border:#444240;--color-accent-subtle:#1a4a2c;--color-accent-light:#3aa36a;--color-accent:#4fd99a;--color-accent-bold:#8ae6b4;--color-highlight-warm:#8a5a2b;--color-highlight-cool:#4d4a7f;--color-on-highlight-warm:#fcd0a1;--color-on-highlight-cool:#c3bef7;--color-category-composite:#f9a8d4;--color-category-diagram:#818cf8;--color-success-bg:#1a3924;--color-success-text:#86efac;--color-success-border:#2f6040;--color-info-bg:#1a2e4c;--color-info-text:#93c5fd;--color-info-border:#31507f;--color-warning-bg:#3a2d1b;--color-warning-text:#fcd34d;--color-warning-border:#5e4d30;--color-danger-bg:#3a2022;--color-danger-text:#fca5a5;--color-danger-border:#5e3034;--color-canvas-dot:#383634;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000059, 0 1px 3px #00000040;--shadow-lg:0 6px 20px #00000073;--shadow-xl:0 8px 24px #00000080;--shadow-2xl:0 24px 48px #0000008c;--shadow-card:0 1px 2px #0000004d, 0 4px 12px #00000040}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:var(--font-inter);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-inter);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-surface-alt:var(--color-surface-alt);--color-card:var(--color-card);--color-text:var(--color-text);--color-text-strong:var(--color-text-strong);--color-text-muted:var(--color-text-muted);--color-text-subtle:var(--color-text-subtle);--color-text-inverse:var(--color-text-inverse);--color-border:var(--color-border);--color-accent-subtle:var(--color-accent-subtle);--color-accent-light:var(--color-accent-light);--color-accent:var(--color-accent);--color-accent-bold:var(--color-accent-bold);--color-highlight-warm:var(--color-highlight-warm);--color-highlight-cool:var(--color-highlight-cool);--color-on-highlight-warm:var(--color-on-highlight-warm);--color-on-highlight-cool:var(--color-on-highlight-cool);--color-category-composite:var(--color-category-composite);--color-category-diagram:var(--color-category-diagram);--color-danger-text:var(--color-danger-text);--color-success-bg:var(--color-success-bg);--color-success-text:var(--color-success-text);--color-success-border:var(--color-success-border);--color-info-bg:var(--color-info-bg);--color-info-text:var(--color-info-text);--color-info-border:var(--color-info-border);--color-warning-bg:var(--color-warning-bg);--color-warning-text:var(--color-warning-text);--color-warning-border:var(--color-warning-border);--color-danger-bg:var(--color-danger-bg);--color-danger-border:var(--color-danger-border);--color-cream:var(--color-surface);--color-warm-gray:var(--color-surface-alt);--color-ink:var(--color-text);--color-green:var(--color-accent);--color-mint:var(--color-accent-light);--color-forest:var(--color-accent-bold);--color-peach:var(--color-highlight-warm);--color-lavender:var(--color-highlight-cool);--color-lime:var(--color-accent-subtle)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[9999\]{z-index:9999}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-5{margin-inline:calc(var(--spacing) * -5)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-3{margin-left:calc(var(--spacing) * -3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.list-item{display:list-item}.table{display:table}.table-column{display:table-column}.table-row-group{display:table-row-group}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.max-h-\[280px\]{max-height:280px}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-full{min-height:100%}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-44{width:calc(var(--spacing) * 44)}.w-\[58px\]{width:58px}.w-\[220px\]{width:220px}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-row-resize{cursor:row-resize}.resize{resize:both}.\[grid-template-columns\:repeat\(auto-fit\,minmax\(220px\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-l-\[4px\]{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-r-\[4px\]{border-top-right-radius:4px;border-bottom-right-radius:4px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-accent-bold\/30{border-color:var(--color-accent-bold)}@supports (color:color-mix(in lab, red, red)){.border-accent-bold\/30{border-color:color-mix(in oklab, var(--color-accent-bold) 30%, transparent)}}.border-border,.border-border\/60{border-color:var(--color-border)}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, var(--color-border) 60%, transparent)}}.border-text\/20{border-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.border-text\/20{border-color:color-mix(in oklab, var(--color-text) 20%, transparent)}}.bg-accent-subtle,.bg-accent-subtle\/40{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/40{background-color:color-mix(in oklab, var(--color-accent-subtle) 40%, transparent)}}.bg-accent-subtle\/50{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/50{background-color:color-mix(in oklab, var(--color-accent-subtle) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-cream,.bg-surface{background-color:var(--color-surface)}.bg-surface-alt{background-color:var(--color-surface-alt)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-contain{object-fit:contain}.p-3{padding:calc(var(--spacing) * 3)}.p-6{padding:calc(var(--spacing) * 6)}.p-12{padding:calc(var(--spacing) * 12)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-1{padding-right:var(--spacing)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-\[66px\]{padding-left:66px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[38px\]{font-size:38px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.06em\]{--tw-tracking:-.06em;letter-spacing:-.06em}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--color-accent)}.text-accent-bold{color:var(--color-accent-bold)}.text-ink,.text-text{color:var(--color-text)}.text-text-muted{color:var(--color-text-muted)}.text-text-strong{color:var(--color-text-strong)}.text-text-subtle{color:var(--color-text-subtle)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.\[file\:line\]{file:line}@media (hover:hover){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-accent) 30%, transparent)}}}.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}}@media (hover:hover){.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:bg-surface-alt:hover{background-color:var(--color-surface-alt)}.hover\:text-text-strong:hover{color:var(--color-text-strong)}}.focus\:border-accent:focus{border-color:var(--color-accent)}@container (min-width:480px){.\@\[480px\]\:inline{display:inline}}@container (min-width:640px){.\@\[640px\]\:block{display:block}}}:root{--color-surface:#f8f7f6;--color-surface-alt:#f2f1f0;--color-card:#fff;--color-text:#1e1e1e;--color-text-strong:#4a4a4a;--color-text-muted:#9ca3af;--color-text-subtle:#cbd5e1;--color-text-inverse:#fff;--color-border:#ebebea;--color-accent-subtle:#e6ffd1;--color-accent-light:#90e9b8;--color-accent:#3ecc87;--color-accent-bold:#1e7150;--color-drop-target:var(--color-accent);--color-highlight-warm:#fcd0a1;--color-highlight-cool:#c3bef7;--color-on-highlight-warm:#7c6b3e;--color-on-highlight-cool:#5b54a0;--color-category-composite:#f472b6;--color-category-diagram:#6366f1;--color-success-bg:#f0fdf4;--color-success-text:#166534;--color-success-border:#bbf7d0;--color-info-bg:#eff6ff;--color-info-text:#1e40af;--color-info-border:#bfdbfe;--color-warning-bg:#fffbeb;--color-warning-text:#92400e;--color-warning-border:#fde68a;--color-danger-bg:#fef2f2;--color-danger-text:#991b1b;--color-danger-border:#fecaca;--color-canvas-dot:#e0e0e0;--color-preview-bg-light:#fff;--color-preview-bg-dark:#232220;--color-preview-border-light:#ebebea;--color-preview-border-dark:#444240;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #0000000f, 0 1px 3px #0000000a;--shadow-lg:0 6px 20px #0000001a;--shadow-xl:0 8px 24px #0000001f;--shadow-2xl:0 24px 48px #0000002e;--shadow-card:0 1px 2px #0000000a, 0 4px 12px #0000000a;--shadow-modal:var(--shadow-2xl);--font-inter:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--color-surface:#232220;--color-surface-alt:#2a2927;--color-card:#1b1a18;--color-text:#f5f5f5;--color-text-strong:#c8c8c8;--color-text-muted:#a3a3a3;--color-text-subtle:#6e6e6e;--color-text-inverse:#1b1a18;--color-border:#444240;--color-accent-subtle:#1a4a2c;--color-accent-light:#3aa36a;--color-accent:#4fd99a;--color-accent-bold:#8ae6b4;--color-highlight-warm:#8a5a2b;--color-highlight-cool:#4d4a7f;--color-on-highlight-warm:#fcd0a1;--color-on-highlight-cool:#c3bef7;--color-category-composite:#f9a8d4;--color-category-diagram:#818cf8;--color-success-bg:#1a3924;--color-success-text:#86efac;--color-success-border:#2f6040;--color-info-bg:#1a2e4c;--color-info-text:#93c5fd;--color-info-border:#31507f;--color-warning-bg:#3a2d1b;--color-warning-text:#fcd34d;--color-warning-border:#5e4d30;--color-danger-bg:#3a2022;--color-danger-text:#fca5a5;--color-danger-border:#5e3034;--color-canvas-dot:#383634;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000059, 0 1px 3px #00000040;--shadow-lg:0 6px 20px #00000073;--shadow-xl:0 8px 24px #00000080;--shadow-2xl:0 24px 48px #0000008c;--shadow-card:0 1px 2px #0000004d, 0 4px 12px #00000040}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
|
@@ -185,4 +185,89 @@
|
|
|
185
185
|
}
|
|
186
186
|
.uxm-app-sidebar__footer--collapsed {
|
|
187
187
|
font-size: inherit;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* ── Mobile drawer ──────────────────────────────────────────────────────────
|
|
191
|
+
The 768px line is `AppTopBar`'s: its `__menu` hamburger is hidden at
|
|
192
|
+
min-width 768px, so below that a hamburger is on screen driving `mobileOpen`.
|
|
193
|
+
`app-sidebar.tsx` has always emitted `--mobile-open` and `__mobile-backdrop`
|
|
194
|
+
for it (and its comment promised "CSS hides both `--mobile-*` chrome at
|
|
195
|
+
min-width: 768px"), but the stylesheet never carried the matching rules — the
|
|
196
|
+
classes rendered and nothing reacted, so the 256px rail stayed in flow and
|
|
197
|
+
pushed the page sideways. These three rules are that missing half.
|
|
198
|
+
|
|
199
|
+
Physical `left` + `translateX`, not the logical pair: nothing in `src/ui`
|
|
200
|
+
handles `[dir]` today, and a logical inset with a physical transform would
|
|
201
|
+
anchor the drawer to the inline-start edge in RTL while still sliding it the
|
|
202
|
+
other way. When the library takes on RTL, both move together.
|
|
203
|
+
──────────────────────────────────────────────────────────────────────────── */
|
|
204
|
+
@media (max-width: 767px) {
|
|
205
|
+
.uxm-app-sidebar {
|
|
206
|
+
/* Out of flow, so the shell's row collapses to the content column and the
|
|
207
|
+
page stops overflowing horizontally. */
|
|
208
|
+
bottom: 0;
|
|
209
|
+
box-shadow: var(--uxm-app-sidebar-drawer-shadow, var(--shadow-lg));
|
|
210
|
+
left: 0;
|
|
211
|
+
position: fixed;
|
|
212
|
+
top: 0;
|
|
213
|
+
/* Closed by default at this width — `--mobile-open` is what slides it in,
|
|
214
|
+
so a consumer that never wires `mobileOpen` gets a hidden drawer rather
|
|
215
|
+
than a rail parked over its content. */
|
|
216
|
+
transform: translateX(-100%);
|
|
217
|
+
/* `width` stays in the transition: the collapse toggle is still reachable
|
|
218
|
+
here. `visibility` is stepped, not eased — delayed by the slide duration
|
|
219
|
+
when closing so the drawer is still painted while it leaves, and
|
|
220
|
+
immediate when opening so it is visible from the first frame. */
|
|
221
|
+
transition: transform 0.2s ease, width 0.2s ease, visibility 0s linear 0.2s;
|
|
222
|
+
/* Translating alone would leave the closed drawer VISIBLE-but-off-screen:
|
|
223
|
+
its nav rows stay keyboard tab stops with no focus indicator anywhere on
|
|
224
|
+
screen, screen readers announce the landmark as present, and its
|
|
225
|
+
box-shadow — zero x-offset, 20px blur, right edge resting exactly on x=0
|
|
226
|
+
— bleeds a grey strip down the left of every page. `hidden` takes it out
|
|
227
|
+
of the tab order and the a11y tree, and stops it painting. */
|
|
228
|
+
visibility: hidden;
|
|
229
|
+
/* Below `--z-dialog` (60) and `--z-toast` (80): a dialog opened from a nav
|
|
230
|
+
row, and any toast, must still cover the drawer. */
|
|
231
|
+
z-index: var(--z-drawer, 40);
|
|
232
|
+
}
|
|
233
|
+
.uxm-app-sidebar--mobile-open {
|
|
234
|
+
transform: translateX(0);
|
|
235
|
+
transition: transform 0.2s ease, width 0.2s ease, visibility 0s;
|
|
236
|
+
visibility: visible;
|
|
237
|
+
}
|
|
238
|
+
.uxm-app-sidebar__mobile-backdrop {
|
|
239
|
+
/* Matches `.uxm-dialog__backdrop` — same scrim knobs, so an app that
|
|
240
|
+
retints one gets the other for free. */
|
|
241
|
+
backdrop-filter: blur(var(--backdrop-blur, 4px));
|
|
242
|
+
-webkit-backdrop-filter: blur(var(--backdrop-blur, 4px));
|
|
243
|
+
background-color: var(--backdrop-color, rgba(0, 0, 0, 0.5));
|
|
244
|
+
border: none;
|
|
245
|
+
bottom: 0;
|
|
246
|
+
cursor: pointer;
|
|
247
|
+
left: 0;
|
|
248
|
+
/* It is a <button>, so the UA padding has to go or it inflates the hit
|
|
249
|
+
area's box beyond the viewport. */
|
|
250
|
+
padding: 0;
|
|
251
|
+
position: fixed;
|
|
252
|
+
right: 0;
|
|
253
|
+
top: 0;
|
|
254
|
+
z-index: calc(var(--z-drawer, 40) - 1);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
/* The backdrop only renders while `mobileOpen` is true, and a consumer holding
|
|
258
|
+
that flag through a resize past the breakpoint would otherwise be left with a
|
|
259
|
+
full-viewport scrim over an in-flow sidebar. */
|
|
260
|
+
@media (min-width: 768px) {
|
|
261
|
+
.uxm-app-sidebar__mobile-backdrop {
|
|
262
|
+
display: none;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
/* A full-height panel flying in from the edge is exactly the motion a reduced-
|
|
266
|
+
motion preference is about; the drawer still opens and closes, it just
|
|
267
|
+
arrives. First such guard in `src/ui` — the pattern to copy when another
|
|
268
|
+
atom needs one. */
|
|
269
|
+
@media (prefers-reduced-motion: reduce) {
|
|
270
|
+
.uxm-app-sidebar {
|
|
271
|
+
transition: none;
|
|
272
|
+
}
|
|
188
273
|
}
|
|
@@ -42,7 +42,22 @@
|
|
|
42
42
|
— hide it rather than reflow it as another card. */
|
|
43
43
|
display: none;
|
|
44
44
|
}
|
|
45
|
+
/* `tbody` is in this list for a reason that is invisible until it is missing.
|
|
46
|
+
It carries no class, so it kept its default `table-row-group` while the
|
|
47
|
+
table around it became a block — and a table-row-group inside a non-table
|
|
48
|
+
parent triggers CSS anonymous-table fixup: the browser wraps it in an
|
|
49
|
+
anonymous `table` box, which is `width: auto` and shrinks to min-content.
|
|
50
|
+
The rows' `width: 100%` then resolved against THAT box, so a stacked card
|
|
51
|
+
rendered at a fraction of its container (measured: 318px table, 81px
|
|
52
|
+
tbody, 81px row). Making the tbody a block removes the anonymous box.
|
|
53
|
+
|
|
54
|
+
Child combinator, not descendant: cells take arbitrary `ReactNode`, and a
|
|
55
|
+
descendant selector reached into any table a consumer nested inside one —
|
|
56
|
+
forcing ITS tbody to block and collapsing their layout to a sliver, with
|
|
57
|
+
nothing in their own CSS to explain it. A tbody is always a direct child
|
|
58
|
+
of its table, so `>` covers this table exactly and stops there. */
|
|
45
59
|
.uxm-data-table__table,
|
|
60
|
+
.uxm-data-table__table > tbody,
|
|
46
61
|
.uxm-data-table__row,
|
|
47
62
|
.uxm-data-table__td {
|
|
48
63
|
display: block;
|
|
@@ -7,6 +7,16 @@
|
|
|
7
7
|
.uxm-page-header {
|
|
8
8
|
align-items: flex-start;
|
|
9
9
|
display: flex;
|
|
10
|
+
/* Actions are `flex-shrink: 0` and the body used to be `min-width: 0`, so a
|
|
11
|
+
row too narrow for both crushed the body to nothing instead of wrapping:
|
|
12
|
+
measured at 343px with ~4 actions, the header rendered 244px tall with the
|
|
13
|
+
body 14px wide and the meta line stacked over 9 rows. Wrapping is what lets
|
|
14
|
+
the actions drop to their own line — but only together with the body's
|
|
15
|
+
width floor below, since a body that may shrink to 0 never forces a wrap.
|
|
16
|
+
Deliberately width-driven rather than a breakpoint: `PageHeader` is just as
|
|
17
|
+
likely to be squeezed inside a docked flexpane at desktop width as on a
|
|
18
|
+
phone, and neither a media nor a container query catches both. */
|
|
19
|
+
flex-wrap: wrap;
|
|
10
20
|
gap: var(--uxm-page-header-gap, 16px);
|
|
11
21
|
padding: var(--uxm-page-header-padding-y, 0px) var(--uxm-page-header-padding-x, 0px);
|
|
12
22
|
/* Icon tile is now <IconTile>; PageHeader's `--uxm-page-header-icon-{bg,color,size}`
|
|
@@ -14,7 +24,21 @@
|
|
|
14
24
|
}
|
|
15
25
|
.uxm-page-header__body {
|
|
16
26
|
flex: 1;
|
|
17
|
-
|
|
27
|
+
/* The floor that turns `flex-wrap` into real behaviour: below this the body
|
|
28
|
+
stops yielding and the actions wrap instead. `min()` keeps it from ever
|
|
29
|
+
exceeding the line — in a container narrower than the floor it degrades
|
|
30
|
+
to 100% rather than overflowing. Was `min-width: 0`, which let the title
|
|
31
|
+
and meta be squeezed to a sliver.
|
|
32
|
+
|
|
33
|
+
10rem, not 16: the wrap is decided against this floor rather than against
|
|
34
|
+
what the title actually needs (`min()` takes lengths, so `max-content`
|
|
35
|
+
cannot go here), so too generous a floor wraps headers that were fine.
|
|
36
|
+
Measured with a short title and two actions, a 16rem floor wrapped at
|
|
37
|
+
460 / 420 / 380px — 88px tall where one 40px row had been legible, the
|
|
38
|
+
title on a single line in every case. 10rem moves that threshold to
|
|
39
|
+
~400px and still gives a long title 160px at 343px, against the 14px it
|
|
40
|
+
got before any floor existed. */
|
|
41
|
+
min-width: min(100%, var(--uxm-page-header-body-min, 10rem));
|
|
18
42
|
}
|
|
19
43
|
.uxm-page-header__title {
|
|
20
44
|
color: var(--uxm-page-header-title-color, var(--color-text));
|
|
@@ -34,4 +58,7 @@
|
|
|
34
58
|
display: inline-flex;
|
|
35
59
|
flex-shrink: 0;
|
|
36
60
|
gap: 8px;
|
|
61
|
+
/* No indent to line the wrapped row up under the body: the icon slot is
|
|
62
|
+
conditional (`{icon && <IconTile …>}`), so a fixed icon-width margin
|
|
63
|
+
would indent the actions of every header that has no icon. */
|
|
37
64
|
}
|