@volter/world-ui 0.1.0

package/client/portal.tsx

@@ -0,0 +1,102 @@
+// A HOSTED ACCOUNT PORTAL — the hosted flow a billing vendor gives an application's customer to manage what
+// they pay for (docs/contributing/architecture.md, "Screens"): the merchant and the way back, then sections of
+// what the customer holds (a plan, a payment method, their details, past invoices), each item with the moves
+// the vendor offers on it. Rendered on the server; every move is a form that posts and comes back to the page,
+// with no script. A pack gives the words, the items and their moves; its skin gives the look. The same layout is a
+// vendor's settings page a person works in (an API keys page): its forms make new items from fields the person fills.
+import type { PaymentField } from './payment.tsx';
+/** A move on an item: a form that posts, or with `method: 'get'` a button that opens another page (a link a person follows). */
+export type PortalAction = { label: string; action: string; fields?: Record<string, string>; tone?: 'danger' | 'primary'; method?: 'get' | 'post' };
+export type PortalItem = { title: string; detail?: string; note?: string; badge?: string; actions?: PortalAction[] };
+export type PortalSection = { heading: string; items: PortalItem[]; empty?: string };
+/** A form that makes something new from fields the person fills, named the vendor's way. */
+export type PortalForm = { heading: string; action: string; fields: PaymentField[]; submit: { label: string } };
+
+export type PortalProps = {
+  merchant: string;
+  back?: { href: string; label: string };
+  /** a line at the top after a move ("Your plan will be canceled on May 1") */
+  notice?: string;
+  sections: PortalSection[];
+  forms?: PortalForm[];
+};
+
+export function Portal(props: PortalProps) {
+  return (
+    <div className="portal">
+      <aside className="portal-side">
+        <div className="portal-merchant">{props.merchant}</div>
+        {props.back ? <a className="portal-back" href={props.back.href}>{props.back.label}</a> : null}
+      </aside>
+      <main className="portal-main">
+        {props.notice ? <p className="portal-notice" role="status">{props.notice}</p> : null}
+        {props.sections.map((s) => (
+          <section key={s.heading} className="portal-section">
+            <h2>{s.heading}</h2>
+            {s.items.length === 0 && s.empty ? <p className="portal-empty">{s.empty}</p> : null}
+            <ul>
+              {s.items.map((item, i) => (
+                <li key={`${item.title}:${i}`} className="portal-item">
+                  <div className="portal-item-text">
+                    <strong>{item.title}</strong>
+                    {item.badge ? <span className="portal-badge">{item.badge}</span> : null}
+                    {item.detail ? <span className="portal-detail">{item.detail}</span> : null}
+                    {item.note ? <span className="portal-note">{item.note}</span> : null}
+                  </div>
+                  <div className="portal-actions">
+                    {(item.actions ?? []).map((a) => (
+                      <form key={a.label} method={a.method ?? 'post'} action={a.action}>
+                        {Object.entries(a.fields ?? {}).map(([k, v]) => <input key={k} type="hidden" name={k} value={v} />)}
+                        <button type="submit" className={`portal-button${a.tone ? ` portal-${a.tone}` : ''}`}>{a.label}</button>
+                      </form>
+                    ))}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+        {(props.forms ?? []).map((f) => (
+          <section key={f.heading} className="portal-section">
+            <h2>{f.heading}</h2>
+            <form method="post" action={f.action} className="portal-form">
+              {f.fields.map((field) => (
+                <label key={field.id} className="portal-field" htmlFor={field.id}>
+                  <span>{field.label}</span>
+                  {field.options
+                    ? <select id={field.id} name={field.id} defaultValue={field.value}>{field.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}</select>
+                    : <input id={field.id} name={field.id} type={field.type ?? 'text'} placeholder={field.placeholder} defaultValue={field.value} />}
+                </label>
+              ))}
+              <button type="submit" className="portal-button portal-primary">{f.submit.label}</button>
+            </form>
+          </section>
+        ))}
+      </main>
+    </div>
+  );
+}
+
+/** The portal's layout; a pack's skin sets the colours and type over it. */
+export const PORTAL_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.portal { display: grid; grid-template-columns: 1fr 2fr; min-height: 100vh; }
+@media (max-width: 800px) { .portal { grid-template-columns: 1fr; } }
+.portal-side { padding: 48px; }
+.portal-merchant { font-weight: 600; font-size: 18px; margin-bottom: 16px; }
+.portal-back { text-decoration: none; }
+.portal-main { padding: 48px; max-width: 640px; }
+.portal-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 24px; }
+.portal-section { margin-bottom: 32px; }
+.portal-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid; }
+.portal-section ul { list-style: none; padding: 0; margin: 0; }
+.portal-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
+.portal-item-text { display: flex; flex-direction: column; }
+.portal-badge { align-self: flex-start; font-size: 12px; padding: 0 6px; border-radius: 4px; margin: 2px 0; }
+.portal-detail, .portal-note { font-size: 13px; }
+.portal-actions { display: flex; gap: 8px; align-items: flex-start; }
+.portal-button { padding: 6px 12px; border-radius: 6px; border: 1px solid; font: inherit; cursor: pointer; background: transparent; }
+.portal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.portal-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+.portal-field input, .portal-field select { padding: 8px 10px; border: 1px solid; border-radius: 6px; font: inherit; }
+`;

package/client/sign-in.tsx

@@ -0,0 +1,90 @@
+// A SIGN-IN PAGE — the door every vendor with pages puts before them (docs/contributing/architecture.md, "Who is on a
+// screen"): a person names their account and gives their password, and the vendor's session cookie names them to every
+// page after. The page is a plain form rendered on the server, so submitting it posts and the vendor's redirect follows
+// with no script. A pack gives the vendor's words, its field names and where the form posts, and its skin the look; the
+// controls carry the vendor's labels so a test that finds them by label finds them.
+export type SignInProps = {
+  /** the page's heading, the vendor's words ("Sign in to GitHub") */
+  heading: string;
+  /** where the form posts, and the hidden fields the vendor's form carries (where to return to) */
+  action: string;
+  fields: Record<string, string>;
+  /** the account field and the password field: their names, labels and (the account's) prefilled value */
+  account: { name: string; label: string; value?: string };
+  password: { name: string; label: string };
+  submit: string;
+  /** the vendor's message for a refused attempt ("Incorrect username or password.") */
+  error?: string;
+};
+
+export function SignIn(props: SignInProps) {
+  return (
+    <main className="sign-in">
+      <div className="sign-in-mark" aria-hidden="true" />
+      <h1 className="sign-in-heading">{props.heading}</h1>
+      {props.error ? <div className="sign-in-error" role="alert">{props.error}</div> : null}
+      <form method="post" action={props.action} className="sign-in-box">
+        {Object.entries(props.fields).map(([name, value]) => <input key={name} type="hidden" name={name} value={value} />)}
+        <label htmlFor={props.account.name}>{props.account.label}</label>
+        <input id={props.account.name} name={props.account.name} type="text" autoComplete="username" defaultValue={props.account.value ?? ''} />
+        <label htmlFor={props.password.name}>{props.password.label}</label>
+        <input id={props.password.name} name={props.password.name} type="password" autoComplete="current-password" />
+        <button type="submit" className="sign-in-submit">{props.submit}</button>
+      </form>
+    </main>
+  );
+}
+
+/** A sign-in's second step, for a person who has two-factor authentication: after the right password the vendor asks
+ *  for the code their authenticator shows, on a page of its own. It lays out as the sign-in does (SIGN_IN_CSS). */
+export type SignInCodeProps = {
+  /** the page's heading and the line under it, the vendor's words */
+  heading: string;
+  hint: string;
+  action: string;
+  fields: Record<string, string>;
+  /** the code field: its name and label */
+  code: { name: string; label: string };
+  submit: string;
+  /** the vendor's message for a refused code */
+  error?: string;
+};
+
+export function SignInCode(props: SignInCodeProps) {
+  return (
+    <main className="sign-in">
+      <div className="sign-in-mark" aria-hidden="true" />
+      <h1 className="sign-in-heading">{props.heading}</h1>
+      {props.error ? <div className="sign-in-error" role="alert">{props.error}</div> : null}
+      <form method="post" action={props.action} className="sign-in-box">
+        {Object.entries(props.fields).map(([name, value]) => <input key={name} type="hidden" name={name} value={value} />)}
+        <label htmlFor={props.code.name}>{props.code.label}</label>
+        <input id={props.code.name} name={props.code.name} type="text" inputMode="numeric" autoComplete="one-time-code" />
+        <p className="sign-in-hint">{props.hint}</p>
+        <button type="submit" className="sign-in-submit">{props.submit}</button>
+      </form>
+    </main>
+  );
+}
+
+/** The sign-in page's layout; a pack's skin sets the colours and type over it. */
+export const SIGN_IN_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.sign-in { max-width: 340px; margin: 0 auto; padding: 32px 16px; }
+.sign-in-mark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; }
+.sign-in-heading { text-align: center; font-weight: 300; font-size: 24px; margin: 0 0 16px; }
+.sign-in-error { border: 1px solid; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
+.sign-in-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid; border-radius: 6px; padding: 16px; }
+.sign-in-box input[type=text], .sign-in-box input[type=password] { font: inherit; padding: 5px 12px; border: 1px solid; border-radius: 6px; margin-bottom: 8px; }
+.sign-in-hint { margin: 0 0 8px; font-size: 12px; }
+.sign-in-submit { font: inherit; font-weight: 500; padding: 6px 16px; border-radius: 6px; border: 1px solid; cursor: pointer; }
+`;
+
+/** The value of the cookie `name` the request carries, as a browser sends it back. */
+export function cookieOf(request: Request, name: string): string | undefined {
+  for (const part of (request.headers.get('cookie') ?? '').split(';')) {
+    const at = part.indexOf('=');
+    if (at > 0 && part.slice(0, at).trim() === name) return decodeURIComponent(part.slice(at + 1).trim());
+  }
+  return undefined;
+}

package/dist/client/brand/fonts/LICENSES.txt

@@ -0,0 +1,191 @@
+Geist and Geist Mono
+
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+
+Instrument Serif
+
+Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/client/brand/tokens.css

@@ -0,0 +1,212 @@
+/* Volter brand tokens. Source: @volter-ai/brand (tokens/volter-tokens.mjs). Products read the
+   semantic roles (--volter-surface-*, --volter-text-*, --volter-status-*, ...); --volter-color-* are primitives. */
+@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
+@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
+@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
+:root {
+  --volter-color-ink: #16252c;
+  --volter-color-paper: #f7f6f1;
+  --volter-color-surface: #fbfaf7;
+  --volter-color-stone: #eeede7;
+  --volter-color-rule: #d9dad3;
+  --volter-color-muted: #5d6970;
+  --volter-color-faint: #a3aaa9;
+  --volter-color-lime: #e4f09c;
+  --volter-color-lime-strong: #d8eb6a;
+  --volter-color-lilac: #dcd5e9;
+  --volter-color-lilac-strong: #c9bce3;
+  --volter-color-stone-strong: #dedbd2;
+  --volter-color-orange: #ff6a1f;
+  --volter-color-live: #5f9a2e;
+  --volter-color-live-soft: #eef4c4;
+  --volter-color-healthy: #3f7a55;
+  --volter-color-healthy-soft: #e8f0e6;
+  --volter-color-attention: #c7641a;
+  --volter-color-attention-soft: #fbede0;
+  --volter-color-danger: #d24a1f;
+  --volter-color-danger-soft: #fbebe4;
+  --volter-color-black: #000000;
+  --volter-color-white: #ffffff;
+  --volter-color-night: #0f1a1f;
+  --volter-color-ink-raised: #1d2d34;
+  --volter-color-ink-glow: #22343c;
+  --volter-color-stone-light: #f2f1eb;
+  --volter-color-stone-deep: #efeee8;
+  --volter-color-stone-inset: #e7e6df;
+  --volter-color-stone-disabled: #dad9d1;
+  --volter-color-rule-soft: #e9e8e1;
+  --volter-color-rule-strong: #c4c5bc;
+  --volter-color-track: #b3b6ae;
+  --volter-color-subdued: #66727a;
+  --volter-color-dim: #808b8f;
+  --volter-color-disabled: #8a918f;
+  --volter-color-paper-dim: #f3f2ec;
+  --volter-color-ink-muted: #a9b0ad;
+  --volter-color-slate: #4f6574;
+  --volter-color-slate-soft: #e9edef;
+  --volter-color-live-line: #d7e8a6;
+  --volter-color-live-text: #3f6b17;
+  --volter-color-healthy-text: #2f5f40;
+  --volter-color-attention-line: #f1d6bd;
+  --volter-color-attention-text: #8a3f0c;
+  --volter-color-danger-line: #f2cfc0;
+  --volter-color-danger-text: #9c3310;
+  --volter-color-violet: #6a5a92;
+  --volter-color-violet-soft: #ebe6f3;
+  --volter-color-violet-text: #4f4275;
+  --volter-color-violet-line: #d9d1ea;
+  --volter-color-ansi-blue: #3b5f8a;
+  --volter-color-ansi-cyan: #2f7a74;
+  --volter-color-ansi-bright-green: #6a9a3a;
+  --volter-color-ansi-bright-yellow: #c98a12;
+  --volter-color-ansi-bright-blue: #4f78a8;
+  --volter-color-ansi-bright-magenta: #8a78c0;
+  --volter-color-ansi-bright-cyan: #3f948d;
+  --volter-color-ansi-bright-white: #b8bab5;
+  --volter-font-ui: "Geist", "Segoe UI", system-ui, sans-serif;
+  --volter-font-data: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --volter-font-display: "Instrument Serif", Georgia, serif;
+  --volter-font-size-xs: 11px;
+  --volter-font-size-sm: 12.5px;
+  --volter-font-size-md: 14px;
+  --volter-font-size-lg: 16px;
+  --volter-font-size-xl: 20px;
+  --volter-font-size-2xl: 24px;
+  --volter-font-size-3xl: 32px;
+  --volter-font-size-display: 48px;
+  --volter-space-1: 4px;
+  --volter-space-2: 8px;
+  --volter-space-3: 12px;
+  --volter-space-4: 16px;
+  --volter-space-5: 20px;
+  --volter-space-6: 24px;
+  --volter-space-8: 32px;
+  --volter-space-12: 48px;
+  --volter-space-16: 64px;
+  --volter-radius-control: 3px;
+  --volter-radius-panel: 4px;
+  --volter-measure-code: 7ch;
+  --volter-measure-short: 16ch;
+  --volter-measure-name: 28ch;
+  --volter-measure-line: 44ch;
+  --volter-measure-prose: 64ch;
+  --volter-line-hairline: 1px solid #d9dad3;
+  --volter-line-strong: 1px solid #16252c;
+  --volter-motion-fast: 120ms;
+  --volter-motion-medium: 240ms;
+  --volter-shadow-dialog: 0 2px 6px rgba(27, 30, 28, 0.06), 0 12px 32px rgba(27, 30, 28, 0.1);
+  --volter-shadow-floating: 0 12px 32px rgba(21, 23, 22, 0.14), 0 2px 8px rgba(21, 23, 22, 0.08);
+  --volter-shadow-player: 0 2px 8px rgba(27, 30, 28, 0.08), 0 18px 44px rgba(27, 30, 28, 0.14);
+  --volter-shadow-resting: none;
+  --volter-surface-page: light-dark(#f7f6f1, #0f1a1f);
+  --volter-surface-raised: light-dark(#fbfaf7, #16252c);
+  --volter-surface-subtle: light-dark(#f2f1eb, #1d2d34);
+  --volter-surface-sunken: light-dark(#efeee8, #0b141a);
+  --volter-surface-inset: light-dark(#e7e6df, #22343c);
+  --volter-surface-disabled: light-dark(#dad9d1, #2a3a42);
+  --volter-surface-overlay: light-dark(rgba(251, 250, 247, 0.97), rgba(22, 37, 44, 0.97));
+  --volter-surface-inverse: light-dark(#16252c, #f7f6f1);
+  --volter-surface-media: light-dark(#0f1a1f, #070d10);
+  --volter-surface-inverse-raised: light-dark(#1d2d34, #fbfaf7);
+  --volter-surface-inverse-glow: light-dark(#22343c, #ffffff);
+  --volter-border-default: light-dark(#d9dad3, #2c3d45);
+  --volter-border-subtle: light-dark(#e9e8e1, #223239);
+  --volter-border-strong: light-dark(#c4c5bc, #3d5059);
+  --volter-border-emphasis: light-dark(#16252c, #f3f2ec);
+  --volter-text-primary: light-dark(#16252c, #f3f2ec);
+  --volter-text-muted: light-dark(#5d6970, #a9b0ad);
+  --volter-text-tertiary: light-dark(#66727a, #8b979b);
+  --volter-text-faint: light-dark(#a3aaa9, #6c7a80);
+  --volter-text-disabled: light-dark(#8a918f, #56646a);
+  --volter-text-inverse: light-dark(#f3f2ec, #16252c);
+  --volter-text-inverse-muted: light-dark(#a9b0ad, #5d6970);
+  --volter-text-on-strong: light-dark(#ffffff, #16252c);
+  --volter-text-on-bright-muted: rgba(22, 37, 44, 0.78);
+  --volter-text-on-bright-dim: rgba(22, 37, 44, 0.6);
+  --volter-action-default: light-dark(#16252c, #e4f09c);
+  --volter-action-hover: light-dark(#000000, #d8eb6a);
+  --volter-action-soft: light-dark(#eef4c4, rgba(228, 240, 156, 0.14));
+  --volter-action-text: light-dark(#16252c, #e4f09c);
+  --volter-selection-default: light-dark(#16252c, #e4f09c);
+  --volter-selection-soft: light-dark(#eef4c4, rgba(228, 240, 156, 0.14));
+  --volter-selection-text: light-dark(#16252c, #f3f2ec);
+  --volter-selection-object: #ff6a1f;
+  --volter-selection-wash: light-dark(rgba(216, 235, 106, 0.55), rgba(216, 235, 106, 0.3));
+  --volter-status-live-base: light-dark(#5f9a2e, #9bcf62);
+  --volter-status-live-soft: light-dark(#eef4c4, rgba(155, 207, 98, 0.14));
+  --volter-status-live-line: light-dark(#d7e8a6, rgba(155, 207, 98, 0.35));
+  --volter-status-live-text: light-dark(#3f6b17, #b8e08a);
+  --volter-status-live-ring: light-dark(rgba(95, 154, 46, 0.18), rgba(155, 207, 98, 0.22));
+  --volter-status-live-wash: light-dark(rgba(228, 240, 156, 0.45), rgba(228, 240, 156, 0.16));
+  --volter-status-healthy-base: light-dark(#3f7a55, #6fbf8e);
+  --volter-status-healthy-soft: light-dark(#e8f0e6, rgba(111, 191, 142, 0.14));
+  --volter-status-healthy-text: light-dark(#2f5f40, #93d3aa);
+  --volter-status-success-base: light-dark(#6a5a92, #aa98d8);
+  --volter-status-success-soft: light-dark(#ebe6f3, rgba(170, 152, 216, 0.16));
+  --volter-status-success-line: light-dark(#d9d1ea, rgba(170, 152, 216, 0.38));
+  --volter-status-success-text: light-dark(#4f4275, #c4b7e6);
+  --volter-status-attention-base: light-dark(#c7641a, #ec9a52);
+  --volter-status-attention-soft: light-dark(#fbede0, rgba(236, 154, 82, 0.14));
+  --volter-status-attention-line: light-dark(#f1d6bd, rgba(236, 154, 82, 0.35));
+  --volter-status-attention-text: light-dark(#8a3f0c, #f3b87f);
+  --volter-status-danger-base: light-dark(#d24a1f, #f07650);
+  --volter-status-danger-soft: light-dark(#fbebe4, rgba(240, 118, 80, 0.14));
+  --volter-status-danger-line: light-dark(#f2cfc0, rgba(240, 118, 80, 0.38));
+  --volter-status-danger-text: light-dark(#9c3310, #f59a7d);
+  --volter-status-danger-faint: light-dark(rgba(210, 74, 31, 0.08), rgba(240, 118, 80, 0.08));
+  --volter-status-recording-base: light-dark(#d24a1f, #f07650);
+  --volter-status-recording-text: #ffffff;
+  --volter-data-base: light-dark(#4f6574, #8fa6b4);
+  --volter-data-soft: light-dark(#e9edef, rgba(143, 166, 180, 0.14));
+  --volter-data-violet: light-dark(#6a5a92, #aa98d8);
+  --volter-data-green: light-dark(#3f7a55, #6fbf8e);
+  --volter-data-amber: light-dark(#c7641a, #ec9a52);
+  --volter-data-blue: light-dark(#3b5f8a, #7ea6d8);
+  --volter-overlay-hover: light-dark(rgba(22, 37, 44, 0.05), rgba(243, 242, 236, 0.06));
+  --volter-overlay-active: light-dark(rgba(22, 37, 44, 0.09), rgba(243, 242, 236, 0.1));
+  --volter-overlay-emboss: light-dark(rgba(22, 37, 44, 0.06), rgba(243, 242, 236, 0.06));
+  --volter-overlay-scrim: light-dark(rgba(22, 37, 44, 0.38), rgba(0, 0, 0, 0.55));
+  --volter-overlay-control: light-dark(rgba(22, 37, 44, 0.8), rgba(15, 26, 31, 0.8));
+  --volter-control-track: light-dark(#b3b6ae, #3d5059);
+  --volter-code-text: light-dark(#16252c, #f3f2ec);
+  --volter-code-comment: light-dark(#66727a, #8b979b);
+  --volter-code-keyword: light-dark(#d24a1f, #f59a7d);
+  --volter-code-variable: light-dark(#6a5a92, #c4b7e6);
+  --volter-code-string: light-dark(#3f7a55, #93d3aa);
+  --volter-code-constant: light-dark(#6a5a92, #c4b7e6);
+  --volter-code-function: light-dark(#16252c, #f3f2ec);
+  --volter-code-type: light-dark(#16252c, #f3f2ec);
+  --volter-code-tag: light-dark(#d24a1f, #f59a7d);
+  --volter-code-attribute: light-dark(#6a5a92, #c4b7e6);
+  --volter-code-punctuation: light-dark(#5d6970, #a9b0ad);
+  --volter-code-inline: light-dark(#6a5a92, #c4b7e6);
+  --volter-code-invalid: light-dark(#d24a1f, #f07650);
+  --volter-axis-x: light-dark(#d24a1f, #f07650);
+  --volter-axis-y: light-dark(#5f9a2e, #9bcf62);
+  --volter-axis-z: light-dark(#3b5f8a, #7ea6d8);
+  --volter-axis-grid: light-dark(#c4c5bc, #3d5059);
+  --volter-scene-dynamic: light-dark(#6a5a92, #aa98d8);
+  --volter-scene-dynamic-soft: light-dark(#dcd5e9, rgba(220, 213, 233, 0.3));
+  --volter-scene-instance: light-dark(#5f9a2e, #9bcf62);
+  --volter-terminal-black: light-dark(#16252c, #2c3d45);
+  --volter-terminal-red: light-dark(#d24a1f, #f07650);
+  --volter-terminal-green: light-dark(#3f7a55, #6fbf8e);
+  --volter-terminal-yellow: light-dark(#c7641a, #ec9a52);
+  --volter-terminal-blue: light-dark(#3b5f8a, #7ea6d8);
+  --volter-terminal-magenta: light-dark(#6a5a92, #aa98d8);
+  --volter-terminal-cyan: light-dark(#2f7a74, #6cc1b8);
+  --volter-terminal-white: light-dark(#808b8f, #f3f2ec);
+  --volter-terminal-bright-black: light-dark(#5d6970, #a9b0ad);
+  --volter-terminal-bright-red: light-dark(#ff6a1f, #ff8a5c);
+  --volter-terminal-bright-green: light-dark(#6a9a3a, #9bcf62);
+  --volter-terminal-bright-yellow: light-dark(#c98a12, #f3c26b);
+  --volter-terminal-bright-blue: light-dark(#4f78a8, #9ec0ea);
+  --volter-terminal-bright-magenta: light-dark(#8a78c0, #c4b7e6);
+  --volter-terminal-bright-cyan: light-dark(#3f948d, #8ad6cd);
+  --volter-terminal-bright-white: light-dark(#b8bab5, #ffffff);
+  --volter-accent-lime: #e4f09c;
+  --volter-accent-lime-strong: #d8eb6a;
+  --volter-accent-lilac: #dcd5e9;
+  --volter-accent-orange: #ff6a1f;
+}