@stacksjs/components 0.2.571 → 0.2.573

package/dist/ui/radio/Radio.d.ts

@@ -0,0 +1,51 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const checked: ReturnType<typeof $bool>;
+export declare const disabled: ReturnType<typeof $bool>;
+export declare const size: unknown;
+export declare const label: unknown;
+export declare const description: unknown;
+export declare const error: ReturnType<typeof $bool>;
+export declare const required: ReturnType<typeof $bool>;
+export declare const value: unknown;
+export declare const name: unknown;
+export declare const className: unknown;
+/*
+ * The two halves of the validity state, exported so the CLIENT can swap them
+ * (stacksjs/stx#2047). Toggled per class rather than as a whole string,
+ * because a reactive class string MERGES with the static one and the element
+ * would carry both rings at once.
+ */
+export declare const stateInvalidClasses: 'border-danger-line text-danger focus:ring-danger-focus';
+export declare const radioClasses: unknown;
+export declare const labelClasses: unknown;
+export declare const descriptionClasses: unknown;
+/*
+ * Ids unique to this instance.
+ *
+ * These were derived from the LABEL or hardcoded outright, so two of these on
+ * one page -- an ordinary form -- emitted the same id twice. `<label for>`
+ * then activated the FIRST field from every label, and `aria-describedby`
+ * pointed every field's description at the first one's helper text. A label
+ * containing a space also produced an invalid id, `input-First name`, which
+ * getElementById and querySelector cannot address at all.
+ *
+ * `$uid` is unique per instance and stable across renders, which is what an id
+ * has to be (utils.ts explains why a render that changes its own bytes is
+ * uncacheable). The `id` prop overrides it, for a caller that needs to point
+ * its own `for` or `aria-describedby` at this control.
+ */
+export declare const inputId: unknown;
+export declare const descriptionId: string;
+/*
+ * `autocomplete` and `form`, alongside the `name` this already had
+ * (stacksjs/stx#2043). `autocomplete` is how the browser and a password
+ * manager identify a field; `form` lets a control live outside the <form>
+ * element it belongs to. Emitted only when given.
+ */
+export declare const autocomplete: unknown;
+export declare const form: unknown;
+// Reactive prop binding — parent can drive `checked` via signals. See #1704.
+declare const isChecked: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ checked?: unknown, disabled?: unknown, size?: string, label?: string, description?: string, error?: unknown, required?: unknown, value?: string, name?: string, className?: string, id?: string, autocomplete?: unknown, autoComplete?: string, form?: string }> & { readonly __stxExposed?: { isChecked: typeof isChecked } }
+export default __dtsx_component__;

package/dist/ui/radio/index.d.ts

@@ -11,4 +11,4 @@ export declare interface RadioProps {
   name?: string
   className?: string
 }
-export { default as Radio } from './Radio.stx';
+export { default as Radio } from './Radio';

package/dist/ui/radio-group/RadioGroup.d.ts

@@ -0,0 +1,47 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare function selectValue(v: unknown): void;
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const value: unknown;
+export declare const valueJson: unknown;
+export declare const className: unknown;
+export declare const as: unknown;
+/*
+ * Prop-array mode, alongside the slot API (stacksjs/stx#1930).
+ *
+ * `<RadioGroup :options="[{ label: 'A', value: 'a' }]" />` used to emit a
+ * hydration shell and nothing else: the labels reached the page only inside
+ * `data-stx-props`, so the choices were invisible without JavaScript and to a
+ * crawler. Every comparable component here — Tabs, Accordion, Select, Navigator,
+ * Breadcrumb — server-renders its content from a prop array, so this was the
+ * odd one out rather than a deliberate choice.
+ *
+ * The options are rendered here rather than delegated to <RadioGroupOption>
+ * because a loop variable cannot cross a component boundary as a `:` binding.
+ * Interpolating it would stringify the value — `1` and `"1"` would stop being
+ * distinguishable — and the group compares values by identity. Emitting the
+ * option markup directly keeps `data-option-value` exact JSON, which is what
+ * `syncOptionStates` already reads.
+ */
+export declare const options: unknown;
+export declare const hasPropOptions: boolean;
+declare const optionBaseClasses: 'relative flex cursor-pointer rounded-panel px-5 py-4 shadow-md focus:outline-none transition-all bg-panel text-fg focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-panel';
+export declare const optionClasses: unknown;
+export declare const optionDisabledClasses: string;
+export declare const groupClasses: unknown;
+export declare const radioGroupInstanceId: unknown;
+/*
+ * JSON built on the server and emitted raw, rather than a 'null' sentinel
+ * through an ordinary interpolation.
+ *
+ * A `value === undefined ? 'null' : value` ternary was meant to put the bare
+ * token null into the script. An interpolation QUOTES a string, so what it
+ * emitted was the four-character string "null" -- truthy, in the one place a
+ * value is meant to be absent. JSON.stringify produces the correct literal for
+ * every type, null included, and raw interpolation passes it through unquoted.
+ * Calendar and DateRangePicker already avoid this sentinel and say why
+ * (stacksjs/stx#1981).
+ */
+declare const initialValue: {};
+declare const selected: ReturnType<typeof state>;
+declare type __DtsxStxComponentType = DefineComponent<{ value?: unknown, className?: string, as?: string, options?: unknown }> & { readonly __stxExposed?: { selected: typeof selected, selectValue: typeof selectValue } }
+export default __dtsx_component__;

package/dist/ui/radio-group/RadioGroupDescription.d.ts

@@ -0,0 +1,6 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const className: unknown;
+export declare const as: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ className?: string, as?: string }>;
+export default __dtsx_component__;

package/dist/ui/radio-group/RadioGroupLabel.d.ts

@@ -0,0 +1,6 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const className: unknown;
+export declare const as: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ className?: string, as?: string }>;
+export default __dtsx_component__;

package/dist/ui/radio-group/RadioGroupOption.d.ts

@@ -0,0 +1,10 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const value: unknown;
+export declare const disabled: ReturnType<typeof $bool>;
+export declare const className: unknown;
+export declare const as: unknown;
+export declare const optionClasses: unknown;
+export declare const valueJson: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ value?: unknown, disabled?: unknown, className?: string, as?: string }>;
+export default __dtsx_component__;

package/dist/ui/radio-group/index.d.ts

@@ -20,7 +20,7 @@ export declare interface RadioGroupDescriptionProps {
   className?: string
   as?: string
 }
-export { default as RadioGroup } from './RadioGroup.stx';
-export { default as RadioGroupDescription } from './RadioGroupDescription.stx';
-export { default as RadioGroupLabel } from './RadioGroupLabel.stx';
-export { default as RadioGroupOption } from './RadioGroupOption.stx';
+export { default as RadioGroup } from './RadioGroup';
+export { default as RadioGroupDescription } from './RadioGroupDescription';
+export { default as RadioGroupLabel } from './RadioGroupLabel';
+export { default as RadioGroupOption } from './RadioGroupOption';

package/dist/ui/select/Select.d.ts

@@ -0,0 +1,93 @@
+import type { DefineComponent } from '@stacksjs/stx';
+/*
+ * Two-way, like TextInput (stacksjs/stx#2059): `v-model:value="group"` keeps
+ * the page's signal in step, so a call site no longer pairs `:value` with an
+ * `@change` that writes it back. `change` is still emitted for the callers
+ * that listen for it.
+ */
+declare function normaliseOptions(list: unknown): never[] | ReturnType<unknown.map>;
+declare const __dtsx_component__: __DtsxStxComponentType;
+/*
+ * `??`, not `||`: a select whose chosen option is the id 0 is ordinary, and
+ * `||` served it as nothing selected.
+ */
+export declare const value: unknown;
+export declare const options: ReturnType<typeof normaliseOptions>;
+/*
+ * `??`: `placeholder=""` means no placeholder option at all, which a select
+ * whose options are its children usually wants. Unset keeps the default.
+ */
+export declare const placeholder: unknown;
+export declare const disabled: ReturnType<typeof $bool>;
+export declare const size: unknown;
+export declare const error: ReturnType<typeof $bool>;
+export declare const label: unknown;
+export declare const helperText: unknown;
+export declare const required: ReturnType<typeof $bool>;
+export declare const className: unknown;
+/*
+ * Padding decides the height here too, with no `h-*` to override it: an app
+ * passing its own `py-1.5` got the padding it asked for and the height it did
+ * not, and `className` cannot beat `h-10` at equal specificity
+ * (stacksjs/stx#1993).
+ *
+ * `lg` also needed a padding step adjusted - py-3 around a 1.75rem line-height
+ * is 3.25rem of content inside a declared 3rem box - so py-2.5 lands on the
+ * 3rem it always claimed. sm and md were already exact.
+ */
+/*
+ * md -- the size nearly every form uses -- reads the density roles, so an
+ * app sets its own field size with --stx-control-px, --stx-control-py,
+ * --stx-control-text and --stx-control-leading instead of a className
+ * that ties with py-2 on specificity. The fallbacks are px-4 / py-2 /
+ * text-base, so nothing moves by default (stacksjs/stx#1993).
+ */
+/*
+ * The two halves of the validity state, exported so the CLIENT can swap them
+ * (stacksjs/stx#2047). Toggled per class rather than as a whole string,
+ * because a reactive class string MERGES with the static one and the element
+ * would carry both rings at once.
+ */
+export declare const stateInvalidClasses: 'ring-danger-line text-danger-fg placeholder-danger focus:ring-danger-focus';
+export declare const stateValidClasses: 'ring-line-strong text-fg placeholder-fg-soft focus:ring-accent';
+export declare const selectClasses: unknown;
+export declare const labelClasses: unknown;
+export declare const helperClasses: unknown;
+/*
+ * Ids unique to this instance.
+ *
+ * These were derived from the LABEL or hardcoded outright, so two of these on
+ * one page -- an ordinary form -- emitted the same id twice. `<label for>`
+ * then activated the FIRST field from every label, and `aria-describedby`
+ * pointed every field's description at the first one's helper text. A label
+ * containing a space also produced an invalid id, `input-First name`, which
+ * getElementById and querySelector cannot address at all.
+ *
+ * `$uid` is unique per instance and stable across renders, which is what an id
+ * has to be (utils.ts explains why a render that changes its own bytes is
+ * uncacheable). The `id` prop overrides it, for a caller that needs to point
+ * its own `for` or `aria-describedby` at this control.
+ */
+export declare const selectId: unknown;
+export declare const helperId: string;
+/*
+ * The attributes that make this a form control (stacksjs/stx#2043).
+ *
+ * A control with no `name` is not a form control in the HTML sense: it is left
+ * out of FormData, out of form.elements.namedItem(), and out of an ordinary
+ * non-JS POST. A form built from these components submitted nothing for every
+ * field, silently -- which is how six apps read their forms.
+ *
+ * `autocomplete` is separate and just as load-bearing: it is how the browser
+ * and a password manager identify a field, so a password input without
+ * `autocomplete="current-password"` is never offered for autofill and is not
+ * recognised as part of a sign-in form at all.
+ *
+ * Emitted only when given, so a control that passes none of them renders
+ * exactly the markup it did before.
+ */
+export declare const name: unknown;
+export declare const autocomplete: unknown;
+export declare const form: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ value?: string, options?: unknown, placeholder?: string, disabled?: unknown, size?: string, error?: unknown, label?: string, helperText?: string, required?: unknown, className?: string, id?: string, name?: string, autocomplete?: unknown, autoComplete?: string, form?: string }> & { readonly __stxExposed?: { value: unknown, options: unknown } }
+export default __dtsx_component__;

package/dist/ui/select/index.d.ts

@@ -16,4 +16,4 @@ export declare interface SelectProps {
   required?: boolean
   className?: string
 }
-export { default as Select } from './Select.stx';
+export { default as Select } from './Select';

package/dist/ui/sidebar/Sidebar.d.ts

@@ -0,0 +1,70 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare function syncRouteSelection(url: unknown): void;
+declare const __dtsx_component__: __DtsxStxComponentType;
+// Data: [{ id, label, collapsible?, collapsed?, items: [{ id, label, icon,
+// iconColor, image, href, count, active?, disabled?, expanded?, children? }] }]
+export declare const sections: unknown;
+// Arc-style spaces: [{ id, label, icon, tint, pinned, sections, action, clear }].
+// Passing them turns the sidebar into a swipeable stack of scenes instead of
+// one list. `theme` then defaults to `arc`, because spaces are that theme's
+// idea — a macOS source list has no equivalent.
+export declare const spaces: unknown;
+export declare const hasSpaces: boolean;
+export declare const activeSpace: unknown;
+export declare const showSpaceSwitcher: unknown;
+export declare const showSpaceAdd: ReturnType<typeof $bool>;
+export declare const spaceAddLabel: unknown;
+export declare const spacePersistKey: unknown;
+// `theme` is the new name; `variant` is accepted for backwards compatibility.
+export declare const theme: unknown;
+export declare const width: unknown;
+export declare const position: unknown;
+export declare const placement: unknown;
+export declare const bordered: ReturnType<typeof $bool>;
+// Collapsing. macOS sidebars hide entirely (toolbar button / drag); legacy
+// themes may collapse to a compact rail instead.
+export declare const collapsed: ReturnType<typeof $bool>;
+export declare const collapsible: unknown;
+export declare const collapseMode: unknown;
+export declare const minWidth: unknown;
+export declare const persistKey: unknown;
+export declare const shellSelector: unknown;
+export declare const widthVar: unknown;
+export declare const collapsedClass: unknown;
+export declare const className: unknown;
+// Mirror the OS light/dark preference onto the root element's `dark` class.
+// A native sidebar follows the system appearance, and Css's `dark:`
+// variants are class-based, so something has to write that class — but it is
+// the document's business, not a navigation pane's. Left on by default so a
+// sidebar dropped into a page with no theme controller still behaves; turn it
+// off in any app that owns its own light/dark switch.
+export declare const followSystemAppearance: unknown;
+// Unique id so the client controller can find this pane even with several
+// sidebars on the page.
+export declare const sidebarUid: unknown;
+declare const themeStyle: ReturnType<typeof resolveSidebarTheme>;
+export declare const selectionModel: unknown;
+export declare const hasShimmerRim: boolean;
+export declare const tintClasses: unknown;
+export declare const scrollAreaClasses: unknown;
+declare const borderClasses: unknown;
+/** @defaultValue `{ sticky: 'sticky top-0 h-screen', static: 'relative h-full' }` */
+declare const placementClasses: {
+  fixed: string;
+  /** @defaultValue 'sticky top-0 h-screen' */
+  sticky: string;
+  /** @defaultValue 'relative h-full' */
+  static: string
+};
+export declare const paneClasses: unknown;
+declare const normalizedSpaces: unknown;
+declare const initialSpace: unknown;
+export declare const paneStyle: unknown;
+// Normalized ahead of the loop so template bindings stay simple accessors.
+export declare const sectionList: ReturnType<typeof sections.map>;
+// State classes the client controller swaps on rows. Kept as data attributes
+// so all behavior lives in one place (the controller below) and themes stay
+// pure data.
+export declare const activeClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ sections?: unknown[], spaces?: unknown[], space?: unknown, activeSpace?: string, showSpaceSwitcher?: unknown, showSpaceAdd?: unknown, spaceAddLabel?: string, spacePersistKey?: string, theme?: unknown, variant?: unknown, width?: unknown, position?: string, placement?: string, bordered?: unknown, collapsed?: unknown, collapsible?: unknown, collapseMode?: unknown, minWidth?: unknown, persistKey?: string, shellSelector?: string, widthVar?: string, collapsedClass?: string, className?: string, followSystemAppearance?: unknown, id?: unknown }> & { readonly __stxExposed?: { collapsed: typeof collapsed, toggle: unknown, syncRouteSelection: typeof syncRouteSelection } }
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarFooter.d.ts

@@ -0,0 +1,21 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+// The bottom strip of a macOS sidebar — e.g. the account row in Music
+// ("Chris Breuer" with an avatar) or custom actions.
+export declare const theme: unknown;
+export declare const avatar: unknown;
+export declare const name: unknown;
+export declare const detail: unknown;
+export declare const actions: unknown;
+export declare const isMacos: boolean;
+export declare const profileClasses: unknown;
+export declare const actionClasses: unknown;
+// Arc keeps the footer to a quiet strip of ghost icons, tuned to the warm
+// panel rather than the macOS neutral.
+export declare const isArc: boolean;
+// Like the rest of the Arc chrome, these take their color from the panel so
+// they follow a space's ink instead of staying a fixed dark on top of it.
+export declare const arcActionClasses: unknown;
+export declare const arcProfileClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ theme?: unknown, variant?: string, avatar?: string, name?: string, detail?: string, actions?: unknown[] }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarHeader.d.ts

@@ -0,0 +1,114 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+// The window-chrome strip at the top of a macOS sidebar: traffic lights on
+// the left, floating "Liquid Glass" toolbar buttons on the right, and the
+// whole strip acts as a window drag region inside a Craft window.
+export declare const theme: unknown;
+export declare const actions: unknown;
+export declare const subtitle: unknown;
+export declare const logo: unknown;
+export declare const showSearch: ReturnType<typeof $bool>;
+export declare const searchPlaceholder: unknown;
+export declare const isMacos: boolean;
+// Traffic lights: 13px circles, 7px apart, inset ~21px — measured on
+// macOS Tahoe. Colors are Apple's exact stoplight values.
+export declare const trafficLightClasses: 'h-[13px] w-[13px] rounded-full shadow-[inset_0_0_1px_rgba(0,0,0,0.2)]';
+// Floating toolbar button: a 34px glass circle that brightens on hover.
+export declare const toolbarButtonClasses: unknown;
+// Arc's header is quieter than macOS'. No floating glass buttons — just a
+// recessed search field and flat ghost icons, sized to sit on the panel
+// without competing with the row cards below it.
+export declare const isArc: boolean;
+// Window chrome. A macOS sidebar owns the top-left corner, so it is on by
+// default there. Arc's sidebar can go either way — a browser window puts the
+// lights and the back/forward controls in the sidebar, while an app that only
+// borrows the look wants a bare strip — so on this theme it is opt-in.
+//
+// `windowControls` says WHO DRAWS THEM, which `showWindowControls` could not
+// express:
+//
+//   'auto'    the default: replicas in a browser, the platform's own inside a
+//             Craft window, decided by the host rather than by the author.
+//   'draw'    replicas, always. For a web page imitating macOS — a marketing
+//             shot, a screenshot — that must look the same everywhere.
+//   'native'  the OS already drew them; reserve the room and keep out of it.
+//   'none'    no controls, no room.
+//
+// The distinction is not cosmetic. Inside a real window the platform draws its
+// own controls whatever this component does, so replicas there put SIX circles
+// in the corner — three live ones from the window server and three that only
+// look like buttons. That was the old default's doing: the same markup renders
+// on a docs page, where mock lights are the whole point, and in an app, where
+// they are a bug, and a fixed choice cannot be right in both.
+//
+// So the host decides. Craft publishes, before the document is parsed:
+//
+//   --craft-window-controls-replicas   the `display` a replica should take —
+//                                      `none` where it drew real buttons
+//   --craft-window-controls-width      the room they need inside the page: the
+//                                      far edge of the real buttons, measured
+//                                      on the window, and 0 whenever they are
+//                                      not over the page — a titlebar of their
+//                                      own, a native sidebar under them,
+//                                      fullscreen
+//
+// Both are read as fallbacks, so a browser — where neither is set — draws the
+// replicas and reserves nothing, and no JavaScript is involved either way.
+// `--stx-native-controls-width` stays the manual override for a host that
+// publishes nothing: it is the room to leave AFTER this header's own left
+// padding.
+declare const controlsProp: unknown;
+export declare const windowControls: unknown;
+export declare const autoWindowControls: boolean;
+export declare const showWindowControls: boolean;
+export declare const reserveWindowControls: boolean;
+export declare const showNavigation: ReturnType<typeof $bool>;
+// A replica yields to the real thing — but only when it was the default that
+// put it there. An author who asked for 'draw' gets replicas everywhere.
+export declare const replicaStyle: unknown;
+export declare const macosControlsReserve: string;
+export declare const arcControlsReserve: string;
+// No top padding when the platform's controls overlay this row — see the row
+// itself for why 14pt is the number that matters. Expressed as arithmetic
+// rather than a branch because only the host knows: a window that keeps its
+// buttons in a titlebar publishes a width of 0 and keeps the padding.
+export declare const arcChromePadding: string;
+// A titled Arc header with window controls puts the two on one row, the way
+// Arc and Dia do. A logo needs the wider second row to sit in, so its presence
+// keeps the old two-row shape.
+export declare const titleInChrome: unknown;
+/**
+ * Back / forward / reload, as in Arc's URL strip. Flat and ghosted, not glass.
+ * @defaultValue `[ { id: 'back', icon: 'i-f7-arrow-left', label: 'Back' }, { id: 'forward', icon: 'i-f7-arrow-right', label: 'Forward' }, { id: 'reload', icon: 'i-f7-arrow-clockwise', label: 'Reload' }, ]`
+ */
+export declare const navButtons: ({
+  /** @defaultValue 'back' */
+  id: string;
+  /** @defaultValue 'i-f7-arrow-left' */
+  icon: string;
+  /** @defaultValue 'Back' */
+  label: string
+} | {
+  /** @defaultValue 'forward' */
+  id: string;
+  /** @defaultValue 'i-f7-arrow-right' */
+  icon: string;
+  /** @defaultValue 'Forward' */
+  label: string
+} | {
+  /** @defaultValue 'reload' */
+  id: string;
+  /** @defaultValue 'i-f7-arrow-clockwise' */
+  icon: string;
+  /** @defaultValue 'Reload' */
+  label: string
+})[];
+// Arc's chrome takes its color from the panel rather than declaring its own.
+// On a plain warm panel that resolves to the theme's ink; inside a space it
+// follows `--stx-space-ink` and crossfades along with the panel on every
+// swipe. A hardcoded `text-[#2c2a28]` would stay dark over a saturated space
+// and would not move when the space changed.
+export declare const arcSearchClasses: unknown;
+export declare const arcActionClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ theme?: unknown, variant?: string, actions?: unknown[], title?: string, subtitle?: string, logo?: string, showSearch?: unknown, searchPlaceholder?: string, windowControls?: string, showWindowControls?: unknown, showNavigation?: unknown }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarItem.d.ts

@@ -0,0 +1,37 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const id: unknown;
+export declare const label: unknown;
+export declare const icon: unknown;
+export declare const iconColor: unknown;
+export declare const image: unknown;
+export declare const href: unknown;
+export declare const count: unknown;
+export declare const active: ReturnType<typeof $bool>;
+export declare const disabled: ReturnType<typeof $bool>;
+export declare const expandable: ReturnType<typeof $bool>;
+export declare const expanded: unknown;
+export declare const depth: unknown;
+export declare const parents: unknown;
+export declare const theme: unknown;
+declare const themeStyle: unknown;
+export declare const rowClasses: unknown;
+export declare const disclosureClasses: unknown;
+export declare const chevronClasses: unknown;
+export declare const iconSlotClasses: unknown;
+export declare const iconClasses: string;
+export declare const imageClasses: unknown;
+export declare const labelClasses: unknown;
+export declare const countClasses: unknown;
+// Nested rows are indented; the icon tint accepts macOS system color names
+// ("blue", "yellow", …) or any CSS color.
+export declare const indentStyle: boolean;
+// The tint is published as a custom property rather than `color:` directly.
+// An inline `color` would outrank any stylesheet rule, so a selected row
+// could never turn its icon white the way AppKit does, and toggling
+// selection on the client could not restore the original tint afterwards.
+declare const tint: ReturnType<typeof resolveIconColor>;
+export declare const iconStyle: unknown;
+export declare const isLink: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ id?: string, label?: string, icon?: string, iconColor?: string, image?: string, href?: string, count?: unknown, badge?: string, active?: unknown, disabled?: unknown, expandable?: unknown, expanded?: unknown, depth?: number, parents?: string, theme?: unknown, variant?: string }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarPinned.d.ts

@@ -0,0 +1,27 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+// Arc's favorites grid — the block of square tiles above a space's rows.
+//
+// These are deliberately NOT sidebar rows. They carry no `data-sidebar-item`,
+// so the Sidebar controller's selection, arrow-key navigation and disclosure
+// logic skip them entirely: a pinned tile is a shortcut, not a place in the
+// list. Their own click handler emits `pinnedClick` and that is the whole
+// contract.
+export declare const items: unknown;
+export declare const columns: unknown;
+// A tile separates itself from the panel by moving AWAY from it, which is not
+// the same as being lighter.
+//
+// Measured against Dia at 2x: on a pale panel its tiles sit about 9 units
+// DARKER than the surface behind them, and on a dark panel about 23 units
+// lighter. A white overlay does the right thing in dark appearance and the
+// wrong one in light, where it lifted the tile off a surface it is meant to be
+// recessed into. Each appearance now overlays the colour that increases the
+// separation, plus a hairline, which is what gives the well its edge.
+//
+// Height is 41px rather than 46: Dia's tiles measure 50pt wide by 41pt tall,
+// so they are slightly landscape, and 46 made them read as too square against
+// the row rhythm underneath.
+export declare const tileClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ items?: unknown[], columns?: number }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarSection.d.ts

@@ -0,0 +1,35 @@
+import type { DefineComponent } from '@stacksjs/stx';
+// Components can't render themselves recursively, so the item tree is
+// flattened into ready-to-render rows here. Each row remembers its depth
+// and ancestor ids — the Sidebar controller uses those to collapse whole
+// subtrees.
+declare function flatten(list: unknown, depth?: number, parents?: unknown[]): ReturnType<unknown.flatMap>;
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const id: unknown;
+export declare const label: unknown;
+export declare const items: unknown;
+export declare const collapsible: unknown;
+export declare const collapsed: ReturnType<typeof $bool>;
+export declare const theme: unknown;
+declare const themeStyle: ReturnType<typeof resolveSidebarTheme>;
+export declare const headerClasses: unknown;
+export declare const chevronClasses: unknown;
+export declare const groupClasses: unknown;
+// Precomputed rather than written as `{{ collapsed ? 'false' : 'true' }}` in
+// the attribute itself.
+//
+// That inline form is served VERBATIM when this component is rendered inside a
+// `<Sidebar>` — the marker reaches the browser unexpanded, so `data-expanded`
+// carries a template string the controller cannot read and `aria-expanded`
+// carries a value that is not `true` or `false`, which is an invalid ARIA
+// state rather than a cosmetic problem. Rendering `<SidebarSection>` directly
+// expands it correctly, and `{{ id }}` on the very same element expands in
+// both cases, so the fault is in how a nested component's attributes are
+// re-parsed, not in the expression.
+//
+// A bare identifier survives that path intact, and the component already
+// precomputes everything else it interpolates.
+export declare const expandedAttr: unknown;
+export declare const rows: ReturnType<typeof flatten>;
+declare type __DtsxStxComponentType = DefineComponent<{ id?: string, label?: string, items?: unknown[], collapsible?: unknown, collapsed?: unknown, theme?: unknown, variant?: string }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarSpace.d.ts

@@ -0,0 +1,44 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+// One scene of a swipeable sidebar: a pinned grid, a title, the rows, and the
+// space's own actions. Everything below the title is the ordinary Sidebar
+// machinery — `<SidebarSection>` flattens the item tree and `<SidebarItem>`
+// renders the rows — so a space inherits disclosure, counts, icon tints,
+// route selection and keyboard navigation for free.
+export declare const id: unknown;
+export declare const label: unknown;
+export declare const icon: unknown;
+export declare const pinned: unknown;
+export declare const sections: unknown;
+export declare const action: unknown;
+export declare const clear: unknown;
+export declare const theme: unknown;
+export declare const active: ReturnType<typeof $bool>;
+// Render the shell without its contents.
+//
+// Every space's rows are rendered on the server even though the Arc design
+// shows one at a time, and that cost is linear in the number of spaces: a host
+// with fourteen projects pays for fourteen panels on every page load to display
+// one. `deferred` keeps the panel — the track's geometry, the tab role and the
+// swipe all depend on it existing — and drops what is inside it.
+//
+// The space still announces itself as a tabpanel, so the switcher and keyboard
+// navigation are unchanged; `data-space-deferred` tells the controller this one
+// has nothing yet, and `spaceChange` is where a host fills it or navigates.
+export declare const deferred: ReturnType<typeof $bool>;
+// Whether to draw `label` as a title above the rows. An app that names the
+// space somewhere else — an Arc header with a title puts it beside the traffic
+// lights, the way Dia does — turns this off rather than saying it twice.
+// `label` is still needed: it is the panel's accessible name and the
+// switcher's tooltip.
+export declare const showTitle: unknown;
+declare const themeStyle: ReturnType<typeof resolveSidebarTheme>;
+export declare const scrollAreaClasses: unknown;
+// The title takes the space's accent, which is how Arc signals which space you
+// are looking at even before the panel color registers.
+export declare const titleClasses: unknown;
+// Actions read as quieter than rows: no card on hover, just a wash.
+export declare const actionClasses: unknown;
+export declare const clearClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ id?: string, label?: string, icon?: string, pinned?: unknown[], sections?: unknown[], action?: unknown, clear?: unknown, theme?: string, active?: unknown, deferred?: unknown, showTitle?: unknown }>;
+export default __dtsx_component__;

package/dist/ui/sidebar/SidebarSpaceSwitcher.d.ts

@@ -0,0 +1,30 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+// `cache` is a promise that what this renders is a function of its props and
+// slots alone, and it is kept: everything below reads $props (plus $uid, which
+// the cache keys on, so two instances never share an entry), and nothing here
+// reads the clock, the request or the route. Adding a server-side read of
+// anything else means dropping `cache` again.
+// The indicator along the bottom of an Arc-style sidebar: one dot per space,
+// plus an optional trailing "+".
+//
+// Dots rather than one icon per space, which is what Dia does and what this
+// used to get wrong. An icon rail costs ~28px of width each, so it fits about
+// eight spaces in a 280px sidebar and then overflows — and with every space
+// showing the same default folder glyph, thirteen of them read as a broken
+// progress bar rather than as a switcher. A dot is 6px, says only "which of
+// how many", and leaves the identifying work to the space title and the tint,
+// which is where it belongs.
+//
+// The buttons are markup only. `<SidebarSpaces>` owns the single click handler
+// and flips `data-space-current`, so the rail never holds its own copy of
+// which space is active — there is exactly one source of truth.
+export declare const spaces: unknown;
+export declare const active: unknown;
+export declare const showAdd: ReturnType<typeof $bool>;
+export declare const addLabel: unknown;
+// A single space has nothing to indicate. Dia hides the row entirely rather
+// than showing one lonely dot, and so does this — unless "+" needs a home.
+export declare const showDots: boolean;
+declare type __DtsxStxComponentType = DefineComponent<{ spaces?: unknown[], active?: unknown, showAdd?: unknown, addLabel?: string }>;
+export default __dtsx_component__;