staffa 0.1.0

package/dist/components/textline.d.ts

@@ -0,0 +1,38 @@
+import type { Bindable } from "../core.js";
+import { type FieldOptions } from "./field.js";
+/**
+ * The `<input>` types {@link textline} supports. Deliberately excludes types
+ * that need their own widget (`checkbox`, `radio`, `color`, `range`, `file`,
+ * `button`, ...) — use the dedicated components for those.
+ */
+export type TextlineType = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week";
+/** Options for {@link textline}. */
+export interface TextlineOptions extends FieldOptions {
+    /** Input type. Defaults to `"text"`. */
+    type?: TextlineType;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Two-way binding target (e.g. `A.ref($user, "name")`). */
+    bind?: Bindable<string | number>;
+    /** Static initial value (use {@link TextlineOptions.bind | bind} for reactivity). */
+    value?: string | number;
+    /** Autocomplete hint passed to the native `autocomplete` attribute. */
+    autocomplete?: string;
+    /** Fired on every `input` event with the native event. */
+    input?: (event: Event) => void;
+    /** Fired on `change` (commit) with the native event. */
+    change?: (event: Event) => void;
+}
+/**
+ * A single-line text input — covering text, passwords, numbers, email, dates and
+ * the other line-oriented `<input>` types.
+ *
+ * Renders inside the standard {@link drawField} chrome (label, control,
+ * help/error), so it aligns cleanly inside a {@link form}.
+ *
+ * @example
+ * ```ts
+ * S.textline({ label: "Email", type: "email", required: true, bind: A.ref($user, "email") });
+ * ```
+ */
+export declare function textline(opts?: TextlineOptions): void;

package/dist/components/textline.js

@@ -0,0 +1,32 @@
+import A from "aberdeen";
+import { applyControlAttrs, drawField } from "./field.js";
+/**
+ * A single-line text input — covering text, passwords, numbers, email, dates and
+ * the other line-oriented `<input>` types.
+ *
+ * Renders inside the standard {@link drawField} chrome (label, control,
+ * help/error), so it aligns cleanly inside a {@link form}.
+ *
+ * @example
+ * ```ts
+ * S.textline({ label: "Email", type: "email", required: true, bind: A.ref($user, "email") });
+ * ```
+ */
+export function textline(opts = {}) {
+    drawField(opts, (id, isInvalid) => {
+        A("input.S_input", opts.control, () => {
+            A("type=", opts.type ?? "text");
+            if (opts.placeholder != null)
+                A("placeholder=", opts.placeholder);
+            if (opts.autocomplete != null)
+                A("autocomplete=", opts.autocomplete);
+            if (opts.value != null && !opts.bind)
+                A("value=", opts.value);
+            if (opts.input)
+                A("input=", opts.input);
+            if (opts.change)
+                A("change=", opts.change);
+            applyControlAttrs(opts, id, isInvalid, opts.bind);
+        });
+    });
+}

package/dist/core.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Shared building blocks for the Skye component library.
+ *
+ * Every component in Skye is "just an Aberdeen draw function": a plain function
+ * that takes a single, strongly typed options object and emits DOM through
+ * Aberdeen's {@link A} function. This module defines the option-type hierarchy
+ * that all components build on, plus a couple of tiny helpers.
+ */
+/**
+ * An Aberdeen attribute/style/class string, e.g. `"display:flex gap:$3 .my-class"`.
+ *
+ * These strings are passed straight through to {@link A} as positional
+ * arguments, so they accept the full Aberdeen shorthand syntax: CSS shortcuts
+ * (`p`, `mt`, `bg`, `r`, ...), spacing variables (`$1`..`$12`), CSS custom
+ * properties (`$sPrimary`), classes (`.foo`) and attributes (`aria-label=Hi`).
+ *
+ * Note: because Aberdeen interprets a leading bare word as an element name, write
+ * `display:flex` rather than just `flex`.
+ */
+export type Styling = string;
+/** A reactive "value box", such as the result of `A.proxy(x)` or `A.ref(obj, key)`. */
+export type Bindable<T> = {
+    value: T;
+};
+/** A content function. It runs inside the relevant element's reactive scope. */
+export type Content = () => void;
+/**
+ * Something that renders a small piece of content: either a plain string (drawn
+ * as a text node) or a draw function (for icons, badges, custom markup, ...).
+ */
+export type Slot = string | Content;
+/**
+ * Options shared by *every* Skye component.
+ *
+ * The {@link BaseOptions.root | root} string is applied to the outermost element
+ * of the widget, letting callers tweak layout, spacing or add classes without
+ * forking the component.
+ */
+export interface BaseOptions {
+    /**
+     * Aberdeen attr/style string applied to the widget's root element.
+     *
+     * It is passed as a positional argument to {@link A}, so a *change* to it on a
+     * proxied options object re-runs the caller's scope (recreating the widget).
+     * That's fine for `root` — it rarely changes at runtime.
+     */
+    root?: Styling;
+}
+/**
+ * Options for components that wrap a single block of caller-provided content.
+ *
+ * Such components render an *inner* element (the one that actually holds the
+ * children) which is given sensible default padding and `gap` in CSS. Override
+ * those via {@link ContentOptions.inner | inner}, whose declarations win because
+ * they're applied as inline styles.
+ */
+export interface ContentOptions extends BaseOptions {
+    /** Draws the children of this component. */
+    content?: Content;
+    /**
+     * Aberdeen attr/style string applied to the inner (content-holding) element.
+     * Add `display:flex` here if you want the children laid out as a flex
+     * row/column.
+     */
+    inner?: Styling;
+}
+/** Generates a process-unique id, used to wire `<label for>` to its control. */
+export declare function uniqueId(prefix?: string): string;
+/**
+ * Draw a {@link Slot} into the current element: call it if it's a function,
+ * otherwise emit it as a text node.
+ */
+export declare function drawSlot(slot: Slot | undefined): void;

package/dist/core.js

@@ -0,0 +1,18 @@
+import A from "aberdeen";
+let idCounter = 0;
+/** Generates a process-unique id, used to wire `<label for>` to its control. */
+export function uniqueId(prefix = "s") {
+    return `${prefix}-${++idCounter}`;
+}
+/**
+ * Draw a {@link Slot} into the current element: call it if it's a function,
+ * otherwise emit it as a text node.
+ */
+export function drawSlot(slot) {
+    if (slot == null)
+        return;
+    if (typeof slot === "function")
+        slot();
+    else
+        A("#", slot);
+}

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Skye — a small, opinionated component library for the
+ * {@link https://aberdeenjs.org | Aberdeen} reactive UI library.
+ *
+ * Import the default `S` object and call its component functions:
+ *
+ * ```ts
+ * import S from "skye";
+ *
+ * S.main({
+ *   title: "Hello",
+ *   maxWidth: "48rem",
+ *   content: () => {
+ *     S.box({ header: "Login", content: () => {
+ *       S.form({
+ *         content: () => {
+ *           S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
+ *           S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
+ *         },
+ *         actions: () => S.button({ text: "Sign in", type: "submit" }),
+ *       });
+ *     }});
+ *   },
+ * });
+ * ```
+ *
+ * Every component takes a single typed options object (see each function's
+ * docs). The options object — or parts of it — may be an Aberdeen proxy, in
+ * which case the component re-renders the affected parts in place when you
+ * mutate it. See `AGENTS.md` for the design philosophy.
+ */
+import { setDarkMode, getDarkMode } from "./theme.js";
+import { autocomplete } from "./components/autocomplete.js";
+import { box } from "./components/box.js";
+import { button } from "./components/button.js";
+import { buttonGroup } from "./components/buttonGroup.js";
+import { checkbox } from "./components/checkbox.js";
+import { form } from "./components/form.js";
+import { main } from "./components/main.js";
+import { dialog, alert, confirm, prompt } from "./components/dialog.js";
+import { select } from "./components/select.js";
+import { tabs } from "./components/tabs.js";
+import { textarea } from "./components/textarea.js";
+import { textline } from "./components/textline.js";
+/** The Skye component namespace. */
+export declare const S: {
+    main: typeof main;
+    box: typeof box;
+    dialog: typeof dialog;
+    alert: typeof alert;
+    confirm: typeof confirm;
+    prompt: typeof prompt;
+    form: typeof form;
+    textline: typeof textline;
+    textarea: typeof textarea;
+    checkbox: typeof checkbox;
+    tabs: typeof tabs;
+    button: typeof button;
+    buttonGroup: typeof buttonGroup;
+    autocomplete: typeof autocomplete;
+    select: typeof select;
+    darkTheme: import("./theme.js").Theme;
+    lightTheme: import("./theme.js").Theme;
+    setDarkMode: typeof setDarkMode;
+    getDarkMode: typeof getDarkMode;
+};
+export default S;
+export { type Theme, darkTheme, lightTheme, setDarkMode, getDarkMode } from "./theme.js";
+export type { BaseOptions, ContentOptions, Bindable, Content, Slot, Styling, } from "./core.js";
+export { drawSlot, uniqueId } from "./core.js";
+export type { FieldOptions } from "./components/field.js";
+export type { MainOptions } from "./components/main.js";
+export type { BoxOptions } from "./components/box.js";
+export type { FormOptions } from "./components/form.js";
+export type { TextlineOptions, TextlineType } from "./components/textline.js";
+export type { TextareaOptions } from "./components/textarea.js";
+export type { CheckboxOptions } from "./components/checkbox.js";
+export type { Tab, TabsOptions } from "./components/tabs.js";
+export type { ButtonOptions, ButtonVariant, ButtonColor } from "./components/button.js";
+export type { ButtonGroupOptions } from "./components/buttonGroup.js";
+export type { AutocompleteOptions, AutocompleteOptionInput } from "./components/autocomplete.js";
+export type { SelectOptions, SelectOptionInput } from "./components/select.js";
+export type { DialogOptions } from "./components/dialog.js";

package/dist/index.js

@@ -0,0 +1,72 @@
+/**
+ * Skye — a small, opinionated component library for the
+ * {@link https://aberdeenjs.org | Aberdeen} reactive UI library.
+ *
+ * Import the default `S` object and call its component functions:
+ *
+ * ```ts
+ * import S from "skye";
+ *
+ * S.main({
+ *   title: "Hello",
+ *   maxWidth: "48rem",
+ *   content: () => {
+ *     S.box({ header: "Login", content: () => {
+ *       S.form({
+ *         content: () => {
+ *           S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
+ *           S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
+ *         },
+ *         actions: () => S.button({ text: "Sign in", type: "submit" }),
+ *       });
+ *     }});
+ *   },
+ * });
+ * ```
+ *
+ * Every component takes a single typed options object (see each function's
+ * docs). The options object — or parts of it — may be an Aberdeen proxy, in
+ * which case the component re-renders the affected parts in place when you
+ * mutate it. See `AGENTS.md` for the design philosophy.
+ */
+// Importing the theme module installs spacing vars, the reactive theme and the
+// base stylesheet. Customise by mutating S.darkTheme / S.lightTheme.
+import { darkTheme, lightTheme, setDarkMode, getDarkMode } from "./theme.js";
+import { autocomplete } from "./components/autocomplete.js";
+import { box } from "./components/box.js";
+import { button } from "./components/button.js";
+import { buttonGroup } from "./components/buttonGroup.js";
+import { checkbox } from "./components/checkbox.js";
+import { form } from "./components/form.js";
+import { main } from "./components/main.js";
+import { dialog, alert, confirm, prompt } from "./components/dialog.js";
+import { select } from "./components/select.js";
+import { tabs } from "./components/tabs.js";
+import { textarea } from "./components/textarea.js";
+import { textline } from "./components/textline.js";
+/** The Skye component namespace. */
+export const S = {
+    main,
+    box,
+    dialog,
+    alert,
+    confirm,
+    prompt,
+    form,
+    textline,
+    textarea,
+    checkbox,
+    tabs,
+    button,
+    buttonGroup,
+    autocomplete,
+    select,
+    darkTheme,
+    lightTheme,
+    setDarkMode,
+    getDarkMode,
+};
+export default S;
+// Re-export theming and shared types for advanced use.
+export { darkTheme, lightTheme, setDarkMode, getDarkMode } from "./theme.js";
+export { drawSlot, uniqueId } from "./core.js";

package/dist/skye.esm.js

@@ -0,0 +1 @@
+import w from"aberdeen";var P=w.proxy({sBg:"#0e1015",sSurface:"#181b22",sSurfaceHi:"#222632",sFg:"#e8eaf0",sFgMuted:"#a6acba",sFgFaint:"#6b7280",sBorder:"#2c313c",sBorderStrong:"#3c4352",sPrimary:"#8b7bff",sPrimaryHover:"#a99dff",sPrimaryFg:"#0c0a1a",sDanger:"#ff6b6b",sSuccess:"#46d39a",sWarning:"#fbbf24",sFocus:"rgba(139, 123, 255, 0.45)",sRadius:"10px",sRadiusLg:"16px",sShadow:"0 8px 30px rgba(0, 0, 0, 0.45)"}),D=w.proxy({sBg:"#f3f4f8",sSurface:"#ffffff",sSurfaceHi:"#eceef4",sFg:"#1b1e27",sFgMuted:"#5b6273",sFgFaint:"#9aa1b2",sBorder:"#e2e5ee",sBorderStrong:"#c7ccda",sPrimary:"#6c5ce7",sPrimaryHover:"#5847d4",sPrimaryFg:"#ffffff",sDanger:"#e23b3b",sSuccess:"#1f9d6b",sWarning:"#d97706",sFocus:"rgba(108, 92, 231, 0.35)",sRadius:"10px",sRadiusLg:"16px",sShadow:"0 6px 24px rgba(20, 24, 40, 0.12)"}),R="skye:darkMode",V=w.proxy({value:ae()});function ae(){try{let e=localStorage.getItem(R);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function j(e){V.value=e;try{e===void 0?localStorage.removeItem(R):localStorage.setItem(R,e?"dark":"light")}catch{}}function z(e=!1){let t=V.value;return t===void 0&&!e?w.darkMode():t}w.setSpacingCssVars();w(()=>{w.merge(w.cssVars,z()?P:D)});w.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 bg:$sBg fg:$sFg line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased",a:"fg:$sPrimary text-decoration:underline text-underline-offset:2px","a:hover":"fg:$sPrimaryHover","input, button, textarea, select":"font:inherit color:inherit","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"bg:$sSurfaceHi padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"bg:$sSurface p:$3 r:$sRadius overflow:auto","pre code":"bg:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $sBorder; margin: $3 0;","::placeholder":"fg:$sFgFaint opacity:1",":focus-visible":"outline: 2px solid $sFocus; outline-offset:2px"});import o from"aberdeen";import le from"aberdeen";var se=0;function O(e="s"){return`${e}-${++se}`}function c(e){e!=null&&(typeof e=="function"?e():le("#",e))}import b from"aberdeen";b.insertGlobalCss({".S_field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$sFg user-select:none"},".S_req":"fg:$sDanger margin-left:2px",".S_help":"font-size:0.82em fg:$sFgMuted",".S_error":"font-size:0.82em fg:$sDanger",".S_input":{"&":"w:100% bg:$sSurface fg:$sFg border: 1px solid $sBorder; r:$sRadius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color:$sBorderStrong","&:focus-visible":"border-color:$sPrimary box-shadow: 0 0 0 3px $sFocus; outline:none","&:disabled":"opacity:0.6 cursor:not-allowed","&[aria-invalid=true]":"border-color:$sDanger"}});function C(e,t){let n=e.id??O("field"),i=()=>!!e.error;b("div.S_field",e.root,()=>{b(()=>{e.label!=null&&b(`label for=${n}`,()=>{c(e.label),e.required&&b("span.S_req aria-hidden=true #*")})}),t(n,i),b(()=>{e.help!=null&&!e.error&&b("div.S_help",()=>c(e.help))}),b(()=>{e.error&&b("div.S_error role=alert #",e.error)})})}function I(e,t,n,i){b(`id=${t}`),e.name&&b(`name=${e.name}`),b(()=>{e.disabled&&b("disabled=true")}),b(()=>{e.required&&b("aria-required=true")}),b(()=>b("aria-invalid=",n()?"true":"false")),i&&b("bind=",i)}o.insertGlobalCss({".S_ac":{"&":"position:relative","> .S_control":"display:flex flex-wrap:wrap align-items:center gap:$1 bg:$sSurface fg:$sFg border: 1px solid $sBorder; r:$sRadius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .S_control:hover":"border-color:$sBorderStrong","> .S_control:focus-within":"border-color:$sPrimary box-shadow: 0 0 0 3px $sFocus;","&[aria-invalid=true] > .S_control":"border-color:$sDanger",".S_chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em bg:$sSurfaceHi border: 1px solid $sBorder; r:$sRadius padding: 0.1em 0.2em 0.1em 0.5em;",".S_chip > button":"cursor:pointer border:0 background:transparent fg:$sFgMuted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".S_chip > button:hover":"fg:$sFg background:$sBorder",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .S_menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0 bg:$sSurface border: 1px solid $sBorder; r:$sRadius box-shadow:$sShadow",".S_option":"padding: 0.45em 0.6em; r:6px cursor:pointer",".S_option[aria-selected=true]":"background:$sSurfaceHi",".S_add":"fg:$sPrimary font-style:italic",".S_empty":"padding: 0.45em 0.6em; fg:$sFgMuted"}});function de(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function W(e){let t=O("ac-menu"),n=o.proxy({query:"",open:!1,active:0}),i=()=>(typeof e.options=="function"?e.options():e.options).map(de),r=()=>{let l=e.bind?.value;return l==null||l===""?[]:Array.isArray(l)?l:[l]},s=l=>i().find(h=>h.value===l)?.label??l;if(!e.multi){let l=e.bind?o.peek(e.bind,"value"):void 0;typeof l=="string"&&l&&(n.query=o.peek(()=>s(l)))}let a=()=>{let l=new Set(r()),h=i();e.multi&&(h=h.filter(g=>!l.has(g.value)));let m=n.query.trim().toLowerCase();return m&&(h=h.filter(g=>g.label.toLowerCase().includes(m))),h},d=(l,h)=>{if(e.multi){let m=Array.isArray(e.bind?.value)?[...e.bind.value]:[];m.includes(l)||m.push(l),e.bind&&(e.bind.value=m),n.query=""}else e.bind&&(e.bind.value=l),n.query=s(l),n.open=!1;n.active=0,h?.focus()},x=l=>{if(!e.bind)return;let h=e.bind.value??[];e.bind.value=h.filter(m=>m!==l)};C(e,(l,h)=>{o("div.S_ac",e.control,()=>{o(()=>o("aria-invalid=",h()?"true":"false"));let m;o("div.S_control",()=>{o("click=",()=>m?.focus()),o(()=>{if(e.multi)for(let g of r())o("span.S_chip",()=>{o("span #",o.peek(()=>s(g))),o("button type=button aria-label=",`Remove ${g}`,()=>{o("#\xD7"),o("click=",y=>{y.stopPropagation(),x(g),m?.focus()})})})}),m=o("input type=text role=combobox autocomplete=off",()=>{o(`id=${l} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&o("placeholder=",e.placeholder),e.disabled&&o("disabled=true"),e.required&&o("aria-required=true"),o("bind=",o.ref(n,"query")),o(()=>o("aria-expanded=",n.open?"true":"false")),o(()=>{let y=a()[n.active];o("aria-activedescendant=",n.open&&y?`${t}-opt-${n.active}`:"")}),o("input=",()=>{n.open=!0,n.active=0}),o("focus=",()=>{n.open=!0}),o("blur=",()=>{setTimeout(()=>L(),150)}),o("keydown=",g=>B(g,m))})}),o(()=>{if(!n.open)return;let g=a(),y=n.query.trim(),K=e.allowCustom!==!1&&y!==""&&!g.some(E=>E.label.toLowerCase()===y.toLowerCase());o("ul.S_menu role=listbox",`id=${t}`,()=>{g.forEach((E,G)=>{o("li.S_option role=option",`id=${t}-opt-${G}`,()=>{o(()=>o("aria-selected=",n.active===G?"true":"false")),o("#",E.label),o("mousedown=",ie=>ie.preventDefault()),o("click=",()=>d(E.value,m)),o("mousemove=",()=>{n.active=G})})}),K&&o("li.S_option.S_add role=option",()=>{o("#",`Add "${y}"`),o("mousedown=",E=>E.preventDefault()),o("click=",()=>d(y,m))}),g.length===0&&!K&&o("li.S_empty #No matches")})}),o(()=>{if(e.name)if(e.multi)for(let g of r())o("input type=hidden",()=>{o("name=",e.name),o("value=",g)});else o("input type=hidden",()=>{o("name=",e.name),o("value=",r()[0]??"")})})})});function B(l,h){let m=a(),g=m.length-1;if(l.key==="ArrowDown")l.preventDefault(),n.open=!0,n.active=Math.min(g,n.active+1);else if(l.key==="ArrowUp")l.preventDefault(),n.active=Math.max(0,n.active-1);else if(l.key==="Enter"){l.preventDefault();let y=m[n.active];y?d(y.value,h):e.allowCustom!==!1&&n.query.trim()?d(n.query.trim(),h):n.open&&(n.open=!1)}else if(l.key==="Escape")n.open=!1,e.multi||(n.query=s(r()[0]??""));else if(l.key==="Backspace"&&e.multi&&n.query===""){let y=r();y.length&&x(y[y.length-1])}}function L(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?d(n.query.trim()):n.query=s(r()[0]??"")}}import F from"aberdeen";F.insertGlobalCss({".S_box":{"&":"display:flex flex-direction:column bg:$sSurface border: 1px solid $sBorder; r:$sRadius overflow:hidden","> header":"display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-top: 1px solid $sBorder;","> div":"p:$3 gap:$3"}});function U(e={}){let t=typeof e=="function"?{content:e}:e;F("section.S_box",t.root,()=>{F(()=>{t.header!=null&&F("header",t.headerInner,()=>c(t.header))}),F("div",t.inner,()=>{t.content&&t.content()}),F(()=>{t.footer!=null&&F("footer",t.footerInner,()=>c(t.footer))})})}import k from"aberdeen";k.insertGlobalCss({".S_btn":{"&":"--c:$sPrimary --cfg:$sPrimaryFg display:inline-flex align-items:center justify-content:center gap:$2 font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none border: 1px solid transparent; r:$sRadius padding: 0.5em 1em; transition: background 0.15s, border-color 0.15s, filter 0.15s, box-shadow 0.15s;","&:focus-visible":"outline:none box-shadow: 0 0 0 3px $sFocus;","&:disabled, &[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)","&.S_neutral":"--c:$sBorderStrong --cfg:$sFg","&.S_danger":"--c:$sDanger --cfg:#fff","&.S_success":"--c:$sSuccess --cfg:#08110d","&.S_filled":"background:$c color:$cfg border-color:$c","&.S_filled:hover":"filter:brightness(1.1)","&.S_tonal":"color:$c background: color-mix(in srgb, $c 20%, transparent); border-color: color-mix(in srgb, $c 30%, transparent);","&.S_tonal:hover":"background: color-mix(in srgb, $c 30%, transparent);","&.S_outlined":"color:$c background:transparent border-color: color-mix(in srgb, $c 55%, $sBorder);","&.S_outlined:hover":"background: color-mix(in srgb, $c 12%, transparent);","&.S_sm":"padding: 0.32em 0.7em; font-size:0.85em","&.S_lg":"padding: 0.66em 1.3em; font-size:1.1em"}});function $(e={}){let t=typeof e=="string"?{text:e}:typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button",i=t.variant??"filled",r=t.color??"primary",s=t.size==="sm"||t.size==="lg"?`.S_${t.size}`:"",a=r==="primary"||r==="neutral"||r==="danger"||r==="success",d=a?`.S_${r}`:"",x=k(`${n}.S_btn.S_${i}${d}${s}`,t.root,t.inner,()=>{t.href!=null?(k(`href=${t.href} role=button`),t.disabled&&k("aria-disabled=true")):(k("type=",t.type??"button"),t.disabled&&k("disabled=true")),t.ariaLabel&&k("aria-label=",t.ariaLabel),t.click&&k("click=",t.click),c(t.icon),t.content?t.content():t.text!=null&&k("#",t.text)});!a&&x instanceof HTMLElement&&x.style.setProperty("--c",r.startsWith("$")?`var(--${r.slice(1)})`:r)}import Y from"aberdeen";Y.insertGlobalCss({".S_bgroup":{"&":"display:inline-flex align-items:stretch","&.S_spaced":"gap:$2 flex-wrap:wrap","&.S_vertical":"flex-direction:column","&.S_attached":"gap:0","&.S_attached:not(.S_vertical) > .S_btn:not(:first-child)":"margin-left:-1px","&.S_attached:not(.S_vertical) > .S_btn:not(:first-child):not(:last-child)":"r:0","&.S_attached:not(.S_vertical) > .S_btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.S_attached:not(.S_vertical) > .S_btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.S_attached.S_vertical > .S_btn:not(:first-child)":"margin-top:-1px","&.S_attached.S_vertical > .S_btn:not(:first-child):not(:last-child)":"r:0","&.S_attached.S_vertical > .S_btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.S_attached.S_vertical > .S_btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.S_attached > .S_btn:hover, &.S_attached > .S_btn:focus-visible":"z-index:1"}});function M(e={}){let n=`.S_${e.layout??"attached"}${e.vertical?".S_vertical":""}`;Y(`div.S_bgroup${n} role=group`,e.root,e.inner,()=>{if(e.buttons)for(let i of e.buttons)$(i);e.content&&e.content()})}import p from"aberdeen";p.insertGlobalCss({".S_check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.6",input:"width:1.15em height:1.15em accent-color:$sPrimary cursor:inherit m:0"}});function N(e={}){let t=e.id??O("check");p("div.S_check",e.root,()=>{p(`label for=${t}`,()=>{p("input type=checkbox",e.control,()=>{p(`id=${t}`),e.name&&p(`name=${e.name}`),e.checked&&!e.bind&&p("checked=true"),e.change&&p("change=",e.change),p(()=>{e.disabled&&p("disabled=true")}),p(()=>{e.required&&p("aria-required=true")}),e.bind&&p("bind=",e.bind)}),p(()=>{e.label!=null&&c(e.label),e.required&&p("span.S_req aria-hidden=true #*")})}),p(()=>{e.help!=null&&!e.error&&p("div.S_help",()=>c(e.help))}),p(()=>{e.error&&p("div.S_error role=alert #",e.error)})})}import T from"aberdeen";T.insertGlobalCss({".S_form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .S_wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1"}});function J(e={}){let t=typeof e=="function"?{content:e}:e;T("form.S_form",t.root,t.inner,()=>{T(()=>{T(".grid=",t.layout==="grid")}),T("submit=",n=>{if(n.preventDefault(),t.submit){let i=new FormData(n.target),r={};for(let s of new Set(i.keys())){let a=i.getAll(s);r[s]=a.length===1?a[0]:a}t.submit(r,n)}}),t.content&&t.content(),T(()=>{t.actions&&T("footer",t.actionsInner,()=>t.actions?.())})})}import f from"aberdeen";f.insertGlobalCss({".S_main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh bg:$sBg fg:$sFg","> header":"display:flex align-items:center gap:$3 padding: $2 $3; bg:$sSurfaceHi border-bottom: 1px solid $sBorder; position:sticky top:0 z-index:10","> header .S_icon":"display:flex align-items:center font-size:1.4em","> header .S_titles":"display:flex flex-direction:column min-width:0 flex:1","> header .S_title":"font-weight:700 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .S_subtitle":"fg:$sFgMuted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .S_menu":"display:flex align-items:center gap:$2","> main":"flex:1 overflow-y:auto display:flex flex-direction:column","> main > .S_content":"width:100% flex:1","> main > .S_content.S_framed":"margin: $3 auto; bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow p:$4","> main > .S_content.S_plain":"p:$3","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-top: 1px solid $sBorder; fg:$sFgMuted"}});function Q(e={}){f("div.S_main",e.root,()=>{f(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null)&&f("header",e.topbarInner,()=>{f(()=>{e.icon!=null&&f("div.S_icon",()=>c(e.icon))}),f("div.S_titles",()=>{f(()=>{e.title!=null&&f("div.S_title",()=>c(e.title))}),f(()=>{e.subtitle!=null&&f("div.S_subtitle",()=>c(e.subtitle))})}),f(()=>{e.menu&&f("div.S_menu",()=>e.menu?.())})})}),f("main",()=>{f("div.S_content",e.inner,()=>{f(()=>{let t=e.maxWidth;t!=null?f(".S_framed max-width:",t):f(".S_plain")}),e.content&&e.content()})}),f(()=>{e.footer!=null&&f("footer",()=>c(e.footer))})})}import u from"aberdeen";import A from"aberdeen";function H(e={}){C(e,(t,n)=>{A("input.S_input",e.control,()=>{A("type=",e.type??"text"),e.placeholder!=null&&A("placeholder=",e.placeholder),e.autocomplete!=null&&A("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&A("value=",e.value),e.input&&A("input=",e.input),e.change&&A("change=",e.change),I(e,t,n,e.bind)})})}u.insertGlobalCss({".S_backdrop":{"&":"position:fixed inset:0 z-index:200; background: rgba(0,0,0,0.55); transition: opacity 0.2s ease;","&:not(:has(~ .S_backdrop))":"display:block","&:not(:has(~ .S_backdrop)) + .S_dialog":"display:flex flex-direction:column","&.hidden":"opacity:0 pointer-events:none"},".S_dialog":{"&":"position:fixed z-index:201 top:50% left:50% transform:translate(-50%,-50%) min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow overflow:hidden transition: opacity 0.2s ease, transform 0.2s ease;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-top: 1px solid $sBorder; flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px));","&.hidden *":"pointer-events:none"}});function q(e){return new Promise(t=>{let n=u.proxy(!1),i=()=>{n.value=!0},r=!1,s=()=>{r||(r=!0,e.onClose?.(),t())};u.mount(document.body,()=>{if(u.peek(n,"value"),n.value)return;let a=d=>{d.key==="Escape"&&e.allowCancel!==!1&&i()};document.addEventListener("keydown",a),u.clean(()=>{document.removeEventListener("keydown",a),s()}),u("div.S_backdrop create=hidden destroy=hidden",()=>{u("click=",()=>{e.allowCancel!==!1&&i()})}),u("div.S_dialog create=hidden destroy=hidden",e.root,()=>{u(()=>{e.header!=null&&u("header",e.headerInner,()=>c(e.header))}),u("div",e.inner,()=>{e.content&&e.content(i)}),u(()=>{e.footer!=null&&u("footer",e.footerInner,()=>c(e.footer))})})})})}function X(e,t={}){return q({header:"Alert",allowCancel:!0,content:n=>{u("p",()=>{u("#",e)}),M({layout:"spaced",root:"align-self:flex-end",content:()=>{$({text:"OK",click:n})}})},...t})}function Z(e,t={}){return new Promise(n=>{let i=!1;q({header:"Confirm",allowCancel:!0,content:r=>{u("p",()=>{u("#",e)}),M({layout:"spaced",root:"align-self:flex-end",content:()=>{$({text:"Cancel",variant:"outlined",color:"neutral",click:r}),$({text:"OK",click:()=>{i=!0,r()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function ee(e,t="",n={}){return new Promise(i=>{let r=null;q({header:"Input",allowCancel:!0,content:s=>{u("p",()=>{u("#",e)});let a=u.proxy({value:t});u("form display:contents",()=>{u("submit=",d=>{d.preventDefault(),r=a.value,s()}),H({bind:u.ref(a,"value")}),M({layout:"spaced",root:"align-self:flex-end",content:()=>{$({text:"Cancel",variant:"outlined",color:"neutral",type:"button",click:s}),$({text:"OK",type:"submit"})}})})},...n,onClose:()=>{i(r),n.onClose?.()}})})}import v from"aberdeen";v.insertGlobalCss({".S_select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$sFgMuted font-size:0.85em"}});function te(e){C(e,(t,n)=>{v("div.S_select_wrap",e.control,()=>{v("select.S_input",()=>{I(e,t,n),v("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),v(()=>{let i=typeof e.options=="function"?e.options():e.options,r=e.bind?.value??"";e.placeholder!=null&&v("option",()=>{v("value= disabled=true hidden=true"),r||v("selected=true"),v("#",e.placeholder)});for(let s of i){let a=typeof s=="string"?{value:s,label:s}:{value:s.value,label:s.label??s.value};v("option",()=>{v("value=",a.value),a.value===r&&v("selected=true"),v("#",a.label)})}})})})})}import S from"aberdeen";S.insertGlobalCss({".S_tabs":{"&":"display:flex flex-direction:column gap:$3",".S_tablist":"display:flex gap:$1 align-items:stretch",".S_tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 fg:$sFgMuted font-weight:600 padding: 0.6em 0.9em; transition: color 0.15s, background 0.15s, border-color 0.15s;",".S_tab:hover:not(:disabled)":"fg:$sFg",".S_tab:disabled":"opacity:0.5 cursor:not-allowed",".S_tab:focus-visible":"outline:none box-shadow: 0 0 0 3px $sFocus; r:$sRadius","&.S_underline .S_tablist":"border-bottom: 1px solid $sBorder;","&.S_underline .S_tab":"border-bottom: 2px solid transparent; margin-bottom:-1px","&.S_underline .S_tab[aria-selected=true]":"fg:$sFg border-bottom-color:$sPrimary","&.S_pills .S_tab":"r:$sRadius","&.S_pills .S_tab[aria-selected=true]":"fg:$sPrimaryFg background:$sPrimary",".S_tabpanel":"display:block"}});function ne(e){let t=e.variant??"underline",n=O("tabs"),i=(a,d)=>a.id??String(d),r=e.bind??S.proxy(i(e.tabs[0]??{label:""},0)),s=(a,d)=>{a.disabled||(r.value=i(a,d))};S(`div.S_tabs.S_${t}`,e.root,()=>{S("div.S_tablist role=tablist",()=>{e.tabs.forEach((a,d)=>{let x=i(a,d);S("button.S_tab type=button role=tab",()=>{S(`id=${n}-tab-${x} aria-controls=${n}-panel-${x}`),S(()=>{let B=r.value===x;S("aria-selected=",B?"true":"false"),S("tabindex=",B?"0":"-1")}),a.disabled&&S("disabled=true"),S("click=",()=>s(a,d)),S("keydown=",B=>ce(B,e.tabs,d,s)),c(a.icon),c(a.label)})})}),S("div.S_tabpanel role=tabpanel",e.inner,()=>{S(()=>{let a=r.value,d=e.tabs.findIndex((B,L)=>i(B,L)===a),x=e.tabs[d]??e.tabs[0];x&&(S(`id=${n}-panel-${i(x,d)} aria-labelledby=${n}-tab-${i(x,d)}`),x.content?.())})})})}function ce(e,t,n,i){let r=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")r=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")r=(n-1+t.length)%t.length;else if(e.key==="Home")r=0;else if(e.key==="End")r=t.length-1;else return;e.preventDefault();let s=r>=n?1:-1;for(let a=0;a<t.length;a++){let d=t[r];if(d&&!d.disabled){i(d,r),e.currentTarget?.parentElement?.children[r]?.focus();return}r=(r+s+t.length)%t.length}}import _ from"aberdeen";_.insertGlobalCss({"textarea.S_input":"resize:vertical min-height:3em line-height:1.45","textarea.S_input.S_autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function re(e={}){let t=e.autoGrow!==!1;C(e,(n,i)=>{let r=_("textarea.S_input",e.control,()=>{t?(_(".S_autoGrow"),_("input=",s=>{oe(s.currentTarget),e.input&&e.input(s)})):(_("rows=",e.rows??4),_("resize:",e.resize??"vertical"),e.input&&_("input=",e.input)),e.placeholder!=null&&_("placeholder=",e.placeholder),e.value!=null&&!e.bind&&_("value=",e.value),e.change&&_("change=",e.change),I(e,n,i,e.bind)});t&&requestAnimationFrame(()=>oe(r))})}function oe(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}var ue={main:Q,box:U,dialog:q,alert:X,confirm:Z,prompt:ee,form:J,textline:H,textarea:re,checkbox:N,tabs:ne,button:$,buttonGroup:M,autocomplete:W,select:te,darkTheme:P,lightTheme:D,setDarkMode:j,getDarkMode:z},ht=ue;export{ue as S,P as darkTheme,ht as default,c as drawSlot,z as getDarkMode,D as lightTheme,j as setDarkMode,O as uniqueId};

package/dist/theme.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Theming and global base styles for Skye.
+ *
+ * Skye is themed entirely through CSS custom properties (via Aberdeen's
+ * {@link A.cssVars}). Components reference these with `var(--sPrimary)` etc., so
+ * changing a single variable restyles the whole app — at runtime, reactively.
+ *
+ * Unlike typical Aberdeen apps (which use component-local `insertCss`), Skye uses
+ * **global** CSS (`insertGlobalCss`) with class names prefixed `S_`. This is a
+ * deliberate trade-off: it lets application authors override any Skye style from
+ * their own stylesheet without fighting scoped class names.
+ */
+/**
+ * The set of CSS custom properties Skye understands. All are plain CSS color /
+ * length strings. Override any subset by mutating {@link darkTheme} /
+ * {@link lightTheme}.
+ */
+export interface Theme {
+    /** Page background — the darkest surface. */
+    sBg: string;
+    /** Default surface for cards, inputs, menus. */
+    sSurface: string;
+    /** Raised surface for headers, footers, chips, hover states. */
+    sSurfaceHi: string;
+    /** Primary foreground / text color. */
+    sFg: string;
+    /** Muted text (help text, subtitles). */
+    sFgMuted: string;
+    /** Faint text (placeholders, disabled). */
+    sFgFaint: string;
+    /** Default border color. */
+    sBorder: string;
+    /** Stronger border / neutral control color. */
+    sBorderStrong: string;
+    /** Brand / accent color. */
+    sPrimary: string;
+    /** Brand color, hover/brighter. */
+    sPrimaryHover: string;
+    /** Text drawn on top of {@link Theme.sPrimary}. */
+    sPrimaryFg: string;
+    /** Destructive / error color. */
+    sDanger: string;
+    /** Positive / success color. */
+    sSuccess: string;
+    /** Caution color. */
+    sWarning: string;
+    /** Focus-ring color (usually a translucent primary). */
+    sFocus: string;
+    /** Default corner radius. */
+    sRadius: string;
+    /** Larger corner radius (e.g. the {@link import("./components/main").main} sheet). */
+    sRadiusLg: string;
+    /** Elevation shadow for menus, dialogs, the framed content sheet. */
+    sShadow: string;
+}
+/**
+ * The default dark Skye theme: modern and intentionally a little vivid so it
+ * stands out of the box.
+ *
+ * This is a live Aberdeen proxy — mutate it (e.g. `darkTheme.sPrimary = "..."`)
+ * and, while dark mode is active, the change flows straight into the CSS
+ * variables. Use this to retheme dark and {@link lightTheme} independently.
+ */
+export declare const darkTheme: Theme;
+/**
+ * The light Skye theme — the same lavender brand, retuned for a bright,
+ * modern surface: white cards on a soft grey page, a deeper primary so it
+ * reads well on light backgrounds, and a softer elevation shadow.
+ *
+ * Like {@link darkTheme}, a live proxy: mutate it to retheme light mode.
+ */
+export declare const lightTheme: Theme;
+/**
+ * Force dark mode (`true`), light mode (`false`), or follow the OS preference
+ * (`undefined`). Takes effect immediately and is persisted to localStorage, so
+ * the choice survives reloads.
+ */
+export declare function setDarkMode(value: boolean | undefined): void;
+/**
+ * Whether dark mode is currently active. Reactive — read it inside a scope to
+ * re-run on changes.
+ *
+ * @param allowAuto - When `true`, returns `undefined` (rather than resolving to
+ *   a boolean) if the user is following the OS preference, so a dark/light/auto
+ *   control can tell the three states apart.
+ */
+export declare function getDarkMode(allowAuto?: boolean): boolean | undefined;

package/dist/theme.js

@@ -0,0 +1,135 @@
+import A from "aberdeen";
+/**
+ * The default dark Skye theme: modern and intentionally a little vivid so it
+ * stands out of the box.
+ *
+ * This is a live Aberdeen proxy — mutate it (e.g. `darkTheme.sPrimary = "..."`)
+ * and, while dark mode is active, the change flows straight into the CSS
+ * variables. Use this to retheme dark and {@link lightTheme} independently.
+ */
+export const darkTheme = A.proxy({
+    sBg: "#0e1015",
+    sSurface: "#181b22",
+    sSurfaceHi: "#222632",
+    sFg: "#e8eaf0",
+    sFgMuted: "#a6acba",
+    sFgFaint: "#6b7280",
+    sBorder: "#2c313c",
+    sBorderStrong: "#3c4352",
+    sPrimary: "#8b7bff",
+    sPrimaryHover: "#a99dff",
+    sPrimaryFg: "#0c0a1a",
+    sDanger: "#ff6b6b",
+    sSuccess: "#46d39a",
+    sWarning: "#fbbf24",
+    sFocus: "rgba(139, 123, 255, 0.45)",
+    sRadius: "10px",
+    sRadiusLg: "16px",
+    sShadow: "0 8px 30px rgba(0, 0, 0, 0.45)",
+});
+/**
+ * The light Skye theme — the same lavender brand, retuned for a bright,
+ * modern surface: white cards on a soft grey page, a deeper primary so it
+ * reads well on light backgrounds, and a softer elevation shadow.
+ *
+ * Like {@link darkTheme}, a live proxy: mutate it to retheme light mode.
+ */
+export const lightTheme = A.proxy({
+    sBg: "#f3f4f8",
+    sSurface: "#ffffff",
+    sSurfaceHi: "#eceef4",
+    sFg: "#1b1e27",
+    sFgMuted: "#5b6273",
+    sFgFaint: "#9aa1b2",
+    sBorder: "#e2e5ee",
+    sBorderStrong: "#c7ccda",
+    sPrimary: "#6c5ce7",
+    sPrimaryHover: "#5847d4",
+    sPrimaryFg: "#ffffff",
+    sDanger: "#e23b3b",
+    sSuccess: "#1f9d6b",
+    sWarning: "#d97706",
+    sFocus: "rgba(108, 92, 231, 0.35)",
+    sRadius: "10px",
+    sRadiusLg: "16px",
+    sShadow: "0 6px 24px rgba(20, 24, 40, 0.12)",
+});
+const STORAGE_KEY = "skye:darkMode";
+/**
+ * The explicit dark-mode choice — `true` (force dark), `false` (force light) or
+ * `undefined` (follow the OS via {@link A.darkMode}). A reactive proxy, seeded
+ * from localStorage so the persisted preference applies on the first paint.
+ */
+const $override = A.proxy({ value: readStoredOverride() });
+/** Read the persisted dark-mode override from localStorage (defensively). */
+function readStoredOverride() {
+    try {
+        const v = localStorage.getItem(STORAGE_KEY);
+        if (v === "dark")
+            return true;
+        if (v === "light")
+            return false;
+    }
+    catch {
+        // localStorage may be unavailable (SSR, privacy mode) — ignore.
+    }
+    return undefined;
+}
+/**
+ * Force dark mode (`true`), light mode (`false`), or follow the OS preference
+ * (`undefined`). Takes effect immediately and is persisted to localStorage, so
+ * the choice survives reloads.
+ */
+export function setDarkMode(value) {
+    $override.value = value;
+    try {
+        if (value === undefined)
+            localStorage.removeItem(STORAGE_KEY);
+        else
+            localStorage.setItem(STORAGE_KEY, value ? "dark" : "light");
+    }
+    catch {
+        // Persistence is best-effort; ignore storage failures.
+    }
+}
+/**
+ * Whether dark mode is currently active. Reactive — read it inside a scope to
+ * re-run on changes.
+ *
+ * @param allowAuto - When `true`, returns `undefined` (rather than resolving to
+ *   a boolean) if the user is following the OS preference, so a dark/light/auto
+ *   control can tell the three states apart.
+ */
+export function getDarkMode(allowAuto = false) {
+    const v = $override.value;
+    return v === undefined && !allowAuto ? A.darkMode() : v;
+}
+// Set up everything as this module loads. Spacing scale first ($1 = 0.25rem,
+// $2 = 0.5rem, $3 = 1rem, ...), then reactively merge the active theme into the
+// CSS variables. This scope runs synchronously now — before the first paint —
+// so the correct colors are in place immediately (no flash), and A.merge
+// subscribes to the theme it reads, so toggling the mode or mutating
+// darkTheme / lightTheme re-applies automatically.
+A.setSpacingCssVars();
+A(() => {
+    A.merge(A.cssVars, getDarkMode() ? darkTheme : lightTheme);
+});
+// A deliberately light reset. It sets box-sizing and sensible colors/fonts, but
+// does NOT strip margins from headings/paragraphs/lists, so rendered rich
+// content (e.g. markdown-to-HTML) keeps reasonable default rhythm.
+A.insertGlobalCss({
+    "*, *::before, *::after": "box-sizing:border-box",
+    html: "text-size-adjust:100%",
+    body: "m:0 bg:$sBg fg:$sFg line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased",
+    a: "fg:$sPrimary text-decoration:underline text-underline-offset:2px",
+    "a:hover": "fg:$sPrimaryHover",
+    "input, button, textarea, select": "font:inherit color:inherit",
+    "code, kbd, samp, pre": "font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",
+    code: "bg:$sSurfaceHi padding: 0.12em 0.34em; r:4px font-size:0.9em",
+    pre: "bg:$sSurface p:$3 r:$sRadius overflow:auto",
+    "pre code": "bg:transparent p:0",
+    "img, svg, video, canvas": "max-width:100% h:auto",
+    hr: "border:0 border-top: 1px solid $sBorder; margin: $3 0;",
+    "::placeholder": "fg:$sFgFaint opacity:1",
+    ":focus-visible": "outline: 2px solid $sFocus; outline-offset:2px",
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "staffa",
+  "version": "0.1.0",
+  "description": "An opinionated component library for the Aberdeen reactive UI library.",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./all.js": "./dist/staffa.esm.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc && tsc -p demo && esbuild src/index.ts --bundle --external:aberdeen --minify --format=esm --outfile=dist/staffa.esm.js",
+    "typecheck": "tsc --noEmit && tsc -p demo --noEmit",
+    "smoke": "tsc && node smoke.mjs"
+  },
+  "peerDependencies": {
+    "aberdeen": "^1.15.0"
+  },
+  "devDependencies": {
+    "aberdeen": "^1.15.0",
+    "esbuild": "^0.28.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.9.3"
+  }
+}