@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/README.md

@@ -1,18 +1,20 @@
 # @spinjs/components
 
-Thirty-seven headless statechart machines and the platform controllers —
+Thirty-eight headless statechart machines and the platform controllers —
 comboboxes, date pickers, carousels, menus, dialogs, and the rest — each with
-copyable `.html` templates you own and restyle through the theme.
+copyable `.html` templates you own and restyle through your brand. The client
+runtime (signals, elements, directives, machines) ships in this package too,
+under `@spinjs/components/runtime`.
 
 ```sh
-npm install @spinjs/components @spinjs/runtime
+npm install @spinjs/components
 ```
 
 ```sh
 npx spin component copy select basic
 ```
 
-The copy lands at `lib/components/select.html`. The Spin plugin compiles it
+The copy lands at `src/lib/components/select.html`. The Spin plugin compiles it
 into a standard custom element (`<app-select>`) with zero framework lock-in;
 `import "spin/components"` registers every project component, and the plugin
 generates `src/spin-components.d.ts` for DOM and JSX typechecking.
@@ -54,9 +56,17 @@ import { spinComponentCtl } from "@spinjs/components/controller";
 
 One subpath per component (`@spinjs/components/select`,
 `@spinjs/components/combobox`, `@spinjs/components/date-picker`, and the other
-thirty-four), plus:
+thirty-five), plus:
 
 - `@spinjs/components/react` — `useSpinComponent`.
 - `@spinjs/components/solid` — `createSpinComponent`.
 - `@spinjs/components/controller` — `spinComponentCtl`.
 - `@spinjs/components/spin-element` — the custom-element base.
+- `@spinjs/components/runtime` — signals, elements, directives, machines.
+- `@spinjs/components/fsm` — the statechart core.
+- `@spinjs/components/props` — prop parsing.
+- `@spinjs/components/load` — the load directive.
+- `@spinjs/components/actions` — gesture and overlay actions.
+- `@spinjs/components/testing` — `parseHTML` and test helpers.
+- `@spinjs/components/compiler` — the `.html` transform.
+- `@spinjs/components/examples` — example sources and machines.

package/dist/angle-slider/angle-slider.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface AngleSliderEvents {
   "VALUE.SET": {
     value: number;
@@ -26,5 +26,4 @@ export type AngleSliderEvent = EventUnion<AngleSliderEvents>;
 export type AngleSliderValueChange = {
   readonly value: number;
   readonly valueAsDegree: string;
-};
-//# sourceMappingURL=angle-slider.events.d.ts.map
+};

package/dist/angle-slider/angle-slider.machine.d.ts

@@ -1,9 +1,8 @@
-import { AngleSliderEvents, AngleSliderValueChange } from "./angle-slider.events.js";
 import { AngleSliderArgs, AngleSliderContext, AngleSliderState, clampAngle, constrainAngle, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree } from "./angle-slider.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
-import { defaultTwin } from "@spinjs/runtime";
+import { AngleSliderEvents, AngleSliderValueChange } from "./angle-slider.events.js";
+import { Machine } from "@spinjs/components/fsm";
+import { defaultTwin } from "@spinjs/components/runtime";
 export declare const MIN_VALUE = 0;
 export declare const MAX_VALUE = 359;
 export declare function angleSlider(args?: AngleSliderArgs, authored?: (name: string) => boolean): Machine<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
-export { AngleSliderArgs, AngleSliderContext, AngleSliderState, type AngleSliderValueChange, clampAngle, constrainAngle, defaultTwin, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree };
-//# sourceMappingURL=angle-slider.machine.d.ts.map
+export { AngleSliderArgs, AngleSliderContext, AngleSliderState, type AngleSliderValueChange, clampAngle, constrainAngle, defaultTwin, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree };

package/dist/angle-slider/angle-slider.machine.js

@@ -1,7 +1,7 @@
 import { clampAngle, constrainAngle, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree } from "./angle-slider.state.js";
 import { arrowDec, arrowInc, setDragOffset, setPointerValue, setValue } from "./angle-slider.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
-import { defaultTwin } from "@spinjs/runtime";
+import { createMachine } from "@spinjs/components/fsm";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/angle-slider/angle-slider.machine.ts
 const MIN_VALUE = 0;
 const MAX_VALUE = 359;

package/dist/angle-slider/angle-slider.presentation.d.ts

@@ -1,7 +1,7 @@
-import { AngleSliderEvents } from "./angle-slider.events.js";
 import { AngleSliderArgs, AngleSliderContext, AngleSliderState } from "./angle-slider.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
-import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+import { AngleSliderEvents } from "./angle-slider.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta, DragPress } from "@spinjs/components/actions";
 /**
  * Angle-slider definition: the DOM contract as data.
  *
@@ -42,12 +42,12 @@ type SlotLike<R> = SlotViewFor<R, AngleSliderContext, AngleSliderEvents, AngleSl
  * thumb. */
 declare const def: {
   name: string;
-  machine: (props: AngleSliderArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
-  commitEvents: ("VALUE.SET" | "DOC.POINTER_UP" | "THUMB.ARROW_DEC" | "THUMB.ARROW_INC" | "THUMB.HOME" | "THUMB.END")[];
+  machine: (props: AngleSliderArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
+  commitEvents: ("VALUE.SET" | "THUMB.ARROW_DEC" | "THUMB.ARROW_INC" | "DOC.POINTER_UP" | "THUMB.HOME" | "THUMB.END")[];
   parts: {
     root: {};
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
         id: string;
         for: string;
         onClick: (event: MouseEvent) => void;
@@ -55,7 +55,7 @@ declare const def: {
     };
     hiddenInput: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
         id: string;
         type: string;
         name: string | undefined;
@@ -63,7 +63,7 @@ declare const def: {
       };
     };
     control: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
         id: string;
         role: string;
         style: {
@@ -102,7 +102,7 @@ declare const def: {
     };
     valueText: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>, arg: unknown) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>, arg: unknown) => {
         id: string;
       };
     };
@@ -189,6 +189,5 @@ declare const def: {
   };
 };
 export type AngleSliderApi = ApiOf<typeof def>;
-export declare const angleSlider: import("@spinjs/runtime").DefinedComponent<AngleSliderApi, AngleSliderArgs>;
-export {};
-//# sourceMappingURL=angle-slider.presentation.d.ts.map
+export declare const angleSlider: import("@spinjs/components/runtime").DefinedComponent<AngleSliderApi, AngleSliderArgs>;
+export {};

package/dist/angle-slider/angle-slider.presentation.js

@@ -1,6 +1,6 @@
-import { displayAngle, isInteractive as isInteractive$1, valueAsDegree } from "./angle-slider.state.js";
 import { angleSlider as angleSlider$1 } from "./angle-slider.machine.js";
-import { ariaLabelledBy, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/runtime";
+import { displayAngle, isInteractive as isInteractive$1, valueAsDegree } from "./angle-slider.state.js";
+import { ariaLabelledBy, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/components/runtime";
 // src/angle-slider/angle-slider.presentation.ts
 const MARKERS = [
 	0,

package/dist/angle-slider/angle-slider.state.d.ts

@@ -34,5 +34,4 @@ export declare function displayAngle(value: number, dir: "ltr" | "rtl"): number;
 export declare function clampAngle(degree: number): number;
 export declare function constrainAngle(degree: number, step: number): number;
 export declare function snapAngle(value: number, step: number): number;
-export declare function valueAsDegree(value: number): string;
-//# sourceMappingURL=angle-slider.state.d.ts.map
+export declare function valueAsDegree(value: number): string;

package/dist/angle-slider/angle-slider.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/angle-slider/angle-slider.state.ts
 const asCount = (raw) => {
 	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;

package/dist/angle-slider/angle-slider.transitions.d.ts

@@ -1,11 +1,10 @@
 import { AngleSliderEvents } from "./angle-slider.events.js";
 import { AngleSliderContext } from "./angle-slider.state.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { AssignFor } from "@spinjs/components/fsm";
 type AngleAssign<K extends keyof AngleSliderEvents = keyof AngleSliderEvents> = AssignFor<AngleSliderContext, AngleSliderEvents, K>;
 export declare const setDragOffset: AngleAssign<"CONTROL.POINTER_DOWN">;
 export declare const setPointerValue: AngleAssign<"CONTROL.POINTER_DOWN" | "DOC.POINTER_MOVE">;
 export declare const setValue: AngleAssign<"VALUE.SET">;
 export declare const arrowDec: AngleAssign<"THUMB.ARROW_DEC">;
 export declare const arrowInc: AngleAssign<"THUMB.ARROW_INC">;
-export {};
-//# sourceMappingURL=angle-slider.transitions.d.ts.map
+export {};

package/dist/angle-slider/examples/basic.html

@@ -7,7 +7,7 @@ const machine = angleSlider({ value: "45", ariaLabel: "Angle" });
 <div class="mx-auto flex w-full max-w-[20rem] items-center justify-center"
   {...machine.getRootProps()}>
   <div
-    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised"
     {...machine.getControlProps()}
   >
     <span
@@ -35,7 +35,7 @@ const machine = angleSlider({ value: "45", ariaLabel: "Angle" });
       {...machine.getValueTextProps()}>
       <span
         class="stat-value tabular-nums">{machine.value}°</span>
-      <span class="text-sm font-medium text-text-muted">degrees</span>
+      <span class="type-caption text-muted">degrees</span>
     </span>
   </div>
   <input {...machine.getHiddenInputProps()} />

package/dist/angle-slider/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/angle-slider/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { angleSlider } from \"../angle-slider.presentation.ts\";\n\nconst machine = angleSlider({ value: \"45\", ariaLabel: \"Angle\" });\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-[20rem] items-center justify-center\"\n  {...machine.getRootProps()}>\n  <div\n    class=\"relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised\"\n    {...machine.getControlProps()}\n  >\n    <span\n      class=\"pointer-events-none absolute inset-y-0 left-1/2 w-[2px]\"\n      {...machine.getThumbProps({ needle: true })}\n    >\n      <span\n        class=\"absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary\"\n        aria-hidden=\"true\"></span>\n    </span>\n    <div class=\"pointer-events-none absolute inset-[1px]\"\n      {...machine.getMarkerGroupProps()}>\n      <template for={machine.getMarkers()} as={row} key={row}>\n        <span\n          class=\"absolute inset-y-0 left-1/2 w-[2px]\"\n          {...machine.getMarkerProps({ value: row, diameter: true })}\n        >\n          <span\n            class={[\"absolute inset-x-0 top-[6%] block h-[11%] rounded-full\", { \"bg-border-strong\": machine.getMarkerState(row) !== \"at-value\", \"bg-primary\": machine.getMarkerState(row) === \"at-value\" }]}\n            aria-hidden=\"true\"></span>\n        </span>\n      </template>\n    </div>\n    <span class=\"flex flex-col items-center\"\n      {...machine.getValueTextProps()}>\n      <span\n        class=\"stat-value tabular-nums\">{machine.value}°</span>\n      <span class=\"type-caption text-muted\">degrees</span>\n    </span>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/angle-slider/examples/knob.html

@@ -27,7 +27,7 @@ const machine = angleSlider({ value: "121", ariaLabel: "Angle" });
       {...machine.getValueTextProps()}>
       <span
         class="stat-value tabular-nums">{machine.value}°</span>
-      <span class="text-sm font-medium text-text-muted">degrees</span>
+      <span class="type-caption text-muted">degrees</span>
     </span>
   </div>
   <input {...machine.getHiddenInputProps()} />

package/dist/angle-slider/examples/knob.html.js

@@ -0,0 +1,5 @@
+// src/angle-slider/examples/knob.html
+var knob_default = "<script lang=\"ts\">\nimport { angleSlider } from \"../angle-slider.presentation.ts\";\n\nconst machine = angleSlider({ value: \"121\", ariaLabel: \"Angle\" });\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-4\"\n  {...machine.getRootProps()}>\n  <div\n    class=\"relative flex h-[15rem] w-[15rem] items-center justify-center\"\n    {...machine.getControlProps()}\n  >\n    <svg class=\"absolute inset-0 h-full w-full -rotate-90\" viewBox=\"0 0 200 200\"\n      aria-hidden=\"true\">\n      <circle cx=\"100\" cy=\"100\" r=\"80\" class=\"fill-none stroke-surface-sunken\"\n        stroke-width=\"20\" />\n      <circle cx=\"100\" cy=\"100\" r=\"80\" class=\"fill-none stroke-primary\"\n        stroke-width=\"20\" stroke-linecap=\"round\"\n        stroke-dasharray={502.65}\n        stroke-dashoffset={502.65 * (1 - machine.value / 360)} />\n    </svg>\n    <span\n      class={[\"absolute h-[1.75rem] w-[1.75rem] -translate-1/2 rounded-full border-2 border-solid border-primary bg-surface\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getThumbProps()}\n    ></span>\n    <span class=\"flex flex-col items-center\"\n      {...machine.getValueTextProps()}>\n      <span\n        class=\"stat-value tabular-nums\">{machine.value}°</span>\n      <span class=\"type-caption text-muted\">degrees</span>\n    </span>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { knob_default as default };
+
+//# sourceMappingURL=knob.html.js.map

package/dist/angle-slider/examples/labeled.html

@@ -6,28 +6,28 @@ const machine = angleSlider({ value: "121" });
 
 <div class="mx-auto flex w-full max-w-[20rem] flex-col items-center justify-center"
   {...machine.getRootProps()}>
-  <label class="mb-2 text-sm font-medium text-text" {...machine.getLabelProps()}>Angle</label>
+  <label class="mb-2" {...machine.getLabelProps()}>Angle</label>
   <div class="relative p-8">
     <div class="pointer-events-none absolute inset-0" aria-hidden="true">
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[50%] top-[5.3%]">0°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[50%] top-[5.3%]">0°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[81.6%] top-[18.4%]">45°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[81.6%] top-[18.4%]">45°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[94.7%] top-[50%]">90°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[94.7%] top-[50%]">90°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[81.6%] top-[81.6%]">135°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[81.6%] top-[81.6%]">135°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[50%] top-[94.7%]">180°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[50%] top-[94.7%]">180°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[18.4%] top-[81.6%]">225°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[18.4%] top-[81.6%]">225°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[5.3%] top-[50%]">270°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[5.3%] top-[50%]">270°</span>
       <span
-        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[18.4%] top-[18.4%]">315°</span>
+        class="absolute -translate-1/2 type-code text-muted left-[18.4%] top-[18.4%]">315°</span>
     </div>
     <div
-      class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+      class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised"
       {...machine.getControlProps()}
     >
       <span
@@ -55,7 +55,7 @@ const machine = angleSlider({ value: "121" });
         {...machine.getValueTextProps()}>
         <span
           class="stat-value tabular-nums">{machine.value}°</span>
-        <span class="text-sm font-medium text-text-muted">degrees</span>
+        <span class="type-caption text-muted">degrees</span>
       </span>
     </div>
   </div>

package/dist/angle-slider/examples/labeled.html.js

@@ -0,0 +1,5 @@
+// src/angle-slider/examples/labeled.html
+var labeled_default = "<script lang=\"ts\">\nimport { angleSlider } from \"../angle-slider.presentation.ts\";\n\nconst machine = angleSlider({ value: \"121\" });\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center justify-center\"\n  {...machine.getRootProps()}>\n  <label class=\"mb-2\" {...machine.getLabelProps()}>Angle</label>\n  <div class=\"relative p-8\">\n    <div class=\"pointer-events-none absolute inset-0\" aria-hidden=\"true\">\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[50%] top-[5.3%]\">0°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[81.6%] top-[18.4%]\">45°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[94.7%] top-[50%]\">90°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[81.6%] top-[81.6%]\">135°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[50%] top-[94.7%]\">180°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[18.4%] top-[81.6%]\">225°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[5.3%] top-[50%]\">270°</span>\n      <span\n        class=\"absolute -translate-1/2 type-code text-muted left-[18.4%] top-[18.4%]\">315°</span>\n    </div>\n    <div\n      class=\"relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised\"\n      {...machine.getControlProps()}\n    >\n      <span\n        class=\"pointer-events-none absolute inset-y-0 left-1/2 w-[2px]\"\n        {...machine.getThumbProps({ needle: true })}\n      >\n        <span\n          class=\"absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary\"\n          aria-hidden=\"true\"></span>\n      </span>\n      <div class=\"pointer-events-none absolute inset-[1px]\"\n        {...machine.getMarkerGroupProps()}>\n        <template for={machine.getMarkers()} as={row} key={row}>\n          <span\n            class=\"absolute inset-y-0 left-1/2 w-[2px]\"\n            {...machine.getMarkerProps({ value: row, diameter: true })}\n          >\n            <span\n              class={[\"absolute inset-x-0 top-[6%] block h-[11%] rounded-full\", { \"bg-border-strong\": machine.getMarkerState(row) === \"over-value\", \"bg-semantic-success\": machine.getMarkerState(row) === \"under-value\", \"bg-primary\": machine.getMarkerState(row) === \"at-value\" }]}\n              aria-hidden=\"true\"></span>\n          </span>\n        </template>\n      </div>\n      <span class=\"flex flex-col items-center\"\n        {...machine.getValueTextProps()}>\n        <span\n          class=\"stat-value tabular-nums\">{machine.value}°</span>\n        <span class=\"type-caption text-muted\">degrees</span>\n      </span>\n    </div>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { labeled_default as default };
+
+//# sourceMappingURL=labeled.html.js.map

package/dist/angle-slider/examples/marks.html

@@ -7,7 +7,7 @@ const machine = angleSlider({ value: "45", step: "10", ariaLabel: "Angle" });
 <div class="mx-auto flex w-full max-w-[20rem] items-center justify-center"
   {...machine.getRootProps()}>
   <div
-    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised"
     {...machine.getControlProps()}
   >
     <span
@@ -35,7 +35,7 @@ const machine = angleSlider({ value: "45", step: "10", ariaLabel: "Angle" });
       {...machine.getValueTextProps()}>
       <span
         class="stat-value tabular-nums">{machine.value}°</span>
-      <span class="text-sm font-medium text-text-muted">degrees</span>
+      <span class="type-caption text-muted">degrees</span>
     </span>
   </div>
   <input {...machine.getHiddenInputProps()} />

package/dist/angle-slider/examples/marks.html.js

@@ -0,0 +1,5 @@
+// src/angle-slider/examples/marks.html
+var marks_default = "<script lang=\"ts\">\nimport { angleSlider } from \"../angle-slider.presentation.ts\";\n\nconst machine = angleSlider({ value: \"45\", step: \"10\", ariaLabel: \"Angle\" });\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-[20rem] items-center justify-center\"\n  {...machine.getRootProps()}>\n  <div\n    class=\"relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border bg-surface-raised\"\n    {...machine.getControlProps()}\n  >\n    <span\n      class=\"pointer-events-none absolute inset-y-0 left-1/2 w-[2px]\"\n      {...machine.getThumbProps({ needle: true })}\n    >\n      <span\n        class=\"absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary\"\n        aria-hidden=\"true\"></span>\n    </span>\n    <div class=\"pointer-events-none absolute inset-[1px]\"\n      {...machine.getMarkerGroupProps()}>\n      <template for={machine.getMarkers()} as={row} key={row}>\n        <span\n          class=\"absolute inset-y-0 left-1/2 w-[2px]\"\n          {...machine.getMarkerProps({ value: row, diameter: true })}\n        >\n          <span\n            class={[\"absolute inset-x-0 top-[6%] block h-[11%] rounded-full\", { \"bg-border-strong\": machine.getMarkerState(row) === \"over-value\", \"bg-semantic-success\": machine.getMarkerState(row) === \"under-value\", \"bg-primary\": machine.getMarkerState(row) === \"at-value\" }]}\n            aria-hidden=\"true\"></span>\n        </span>\n      </template>\n    </div>\n    <span class=\"flex flex-col items-center\"\n      {...machine.getValueTextProps()}>\n      <span\n        class=\"stat-value tabular-nums\">{machine.value}°</span>\n      <span class=\"type-caption text-muted\">degrees</span>\n    </span>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { marks_default as default };
+
+//# sourceMappingURL=marks.html.js.map

package/dist/async-list/async-list.events.d.ts

@@ -1,5 +1,5 @@
 import { SortDescriptor } from "./async-list.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface AsyncListEvents {
   "RELOAD": {};
   "LOAD_MORE": {};
@@ -19,5 +19,4 @@ export interface AsyncListEvents {
   };
   "ABORT": {};
 }
-export type AsyncListEvent = EventUnion<AsyncListEvents>;
-//# sourceMappingURL=async-list.events.d.ts.map
+export type AsyncListEvent = EventUnion<AsyncListEvents>;

package/dist/async-list/async-list.machine.d.ts

@@ -1,5 +1,4 @@
 import { AsyncListArgs, AsyncListContext, AsyncListState } from "./async-list.state.js";
 import { AsyncListEvents } from "./async-list.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function asyncList(args?: AsyncListArgs, authored?: (name: string) => boolean): Machine<AsyncListContext, AsyncListEvents, AsyncListState>;
-//# sourceMappingURL=async-list.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function asyncList(args?: AsyncListArgs, authored?: (name: string) => boolean): Machine<AsyncListContext, AsyncListEvents, AsyncListState>;

package/dist/async-list/async-list.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./async-list.state.js";
 import { clearCursor, clearError, clearItems, hasCursor, hasSortFn, setCursor, setError, setFilterText, setItems, setSortDescriptor } from "./async-list.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/async-list/async-list.machine.ts
 function asyncList(args = {}, authored = () => false) {
 	return createMachine({

package/dist/async-list/async-list.presentation.d.ts

@@ -1,6 +1,6 @@
 import { AsyncListArgs, AsyncListContext, AsyncListState, SortDescriptor } from "./async-list.state.js";
 import { AsyncListEvents } from "./async-list.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Async-list definition: the DOM contract as data.
  *
@@ -49,13 +49,13 @@ type ScopeLike = ViewFor<AsyncListContext, AsyncListEvents, AsyncListState>;
 type SlotLike<R> = SlotViewFor<R, AsyncListContext, AsyncListEvents, AsyncListState>;
 declare const def: {
   name: string;
-  machine: (args: AsyncListArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<AsyncListContext, AsyncListEvents, AsyncListState>;
+  machine: (args: AsyncListArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<AsyncListContext, AsyncListEvents, AsyncListState>;
   start: "idle";
   establish: (raw: Record<string, unknown>) => {
     type: string;
   }[];
   settled: ({ event, before, after, root, send }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: AsyncListContext;
       readonly state: AsyncListState;
@@ -69,7 +69,7 @@ declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
   scalarsOf: (parsed: Record<string, unknown>) => {
     hasSortFn: boolean;
@@ -99,7 +99,7 @@ declare const def: {
       };
     };
     list: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         "data-state": AsyncListState;
         "data-count": number;
         "data-empty": string | undefined;
@@ -107,19 +107,19 @@ declare const def: {
       };
     };
     empty: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         "data-empty": string | undefined;
       };
     };
     error: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         role: string;
         "data-state": string;
       };
     };
     filterInput: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         type: string;
         value: string;
         placeholder: string;
@@ -130,7 +130,7 @@ declare const def: {
     };
     clearFilter: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         type: string;
         "aria-label": string;
         "data-filled": string | undefined;
@@ -147,7 +147,7 @@ declare const def: {
     };
     loadMore: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         type: string;
         "data-state": AsyncListState;
         "data-more": string | undefined;
@@ -157,7 +157,7 @@ declare const def: {
       };
     };
     sentinel: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, AsyncListContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<AsyncListEvents>, AsyncListState>) => {
         "data-state": AsyncListState;
         hidden: boolean;
         "data-more": string | undefined;
@@ -289,6 +289,5 @@ declare const def: {
   };
 };
 export type AsyncListApi = ApiOf<typeof def>;
-export declare const asyncList: import("@spinjs/runtime").DefinedComponent<AsyncListApi, AsyncListArgs>;
-export {};
-//# sourceMappingURL=async-list.presentation.d.ts.map
+export declare const asyncList: import("@spinjs/components/runtime").DefinedComponent<AsyncListApi, AsyncListArgs>;
+export {};

package/dist/async-list/async-list.presentation.js

@@ -1,6 +1,6 @@
-import { isSortDescriptor, itemsOf } from "./async-list.state.js";
 import { asyncList as asyncList$1 } from "./async-list.machine.js";
-import { ariaBusy, ariaHidden, ariaPressed, dataAttr, defineComponent, isRecord } from "@spinjs/runtime";
+import { isSortDescriptor, itemsOf } from "./async-list.state.js";
+import { ariaBusy, ariaHidden, ariaPressed, dataAttr, defineComponent, isRecord } from "@spinjs/components/runtime";
 // src/async-list/async-list.presentation.ts
 /** A host function is not something the scope grammar can type, so it
 * rides the prop channel as a property write: declared, read live,

package/dist/async-list/async-list.state.d.ts

@@ -23,5 +23,4 @@ export interface AsyncListContext {
 }
 export declare const isSortDescriptor: (value: unknown) => value is SortDescriptor;
 export declare function itemsOf(raw: unknown): readonly unknown[];
-export declare function initial(args?: AsyncListArgs, authored?: (name: string) => boolean): AsyncListContext;
-//# sourceMappingURL=async-list.state.d.ts.map
+export declare function initial(args?: AsyncListArgs, authored?: (name: string) => boolean): AsyncListContext;

package/dist/async-list/async-list.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/async-list/async-list.state.ts
 const isSortDescriptor = (value) => {
 	if (typeof value !== "object" || value === null) return false;

package/dist/async-list/async-list.transitions.d.ts

@@ -1,6 +1,6 @@
-import { AsyncListContext } from "./async-list.state.js";
 import { AsyncListEvents } from "./async-list.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AsyncListContext } from "./async-list.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type AsyncListAssign<K extends keyof AsyncListEvents = keyof AsyncListEvents> = AssignFor<AsyncListContext, AsyncListEvents, K>;
 export declare const clearItems: AsyncListAssign;
 export declare const setItems: AsyncListAssign<"SUCCESS">;
@@ -12,5 +12,4 @@ export declare const setSortDescriptor: AsyncListAssign<"SORT">;
 export declare const clearCursor: AsyncListAssign;
 export declare const hasSortFn: GuardFor<AsyncListContext, AsyncListEvents>;
 export declare const hasCursor: GuardFor<AsyncListContext, AsyncListEvents>;
-export {};
-//# sourceMappingURL=async-list.transitions.d.ts.map
+export {};

package/dist/async-list/examples/basic.html

@@ -25,12 +25,12 @@ const machine = asyncList({
         class="secondary s-sm"
         aria-label="Sort ascending"
         {...machine.getSortTriggerProps({ column: "name", direction: "ascending" })}
-      ><span aria-hidden="true">A</span><span class="i-lucide-arrow-right text-xs" aria-hidden="true"></span><span aria-hidden="true">Z</span></button>
+      ><span aria-hidden="true">A</span><span class="i-lucide-arrow-right type-caption" aria-hidden="true"></span><span aria-hidden="true">Z</span></button>
       <button
         class="secondary s-sm"
         aria-label="Sort descending"
         {...machine.getSortTriggerProps({ column: "name", direction: "descending" })}
-      ><span aria-hidden="true">Z</span><span class="i-lucide-arrow-right text-xs" aria-hidden="true"></span><span aria-hidden="true">A</span></button>
+      ><span aria-hidden="true">Z</span><span class="i-lucide-arrow-right type-caption" aria-hidden="true"></span><span aria-hidden="true">A</span></button>
     </div>
     <div class="flex items-center gap-2">
       <input
@@ -50,7 +50,7 @@ const machine = asyncList({
   </div>
 
   <div
-    class="relative max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised shadow-sm transition-shadow duration-fast ease-decelerate"
+    class="relative max-h-60 overflow-y-auto rounded-lg border bg-surface-raised shadow-sm transition-shadow duration-fast ease-decelerate"
     {...machine.getListProps()}
   >
     <div class="relative p-1">
@@ -60,15 +60,15 @@ const machine = asyncList({
       ></div>
       <template for={machine.getRows()} as={row} key={row.value}>
         <div
-          class="flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate"
+          class="flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate"
           {...machine.getItemProps(row)}
         >
           <span class="min-w-0 flex-1 truncate">{row.label}</span>
-          <span class="text-xs text-text-muted tabular-nums">{row.value}</span>
+          <span class="type-caption text-muted tabular-nums">{row.value}</span>
         </div>
       </template>
       <span
-        class={["px-2 py-6 text-center text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "block": machine.empty, "hidden": !machine.empty }]}
+        class={["px-2 py-6 text-center type-body text-muted transition-colors duration-fast ease-decelerate", { "block": machine.empty, "hidden": !machine.empty }]}
         {...machine.getEmptyProps()}>Nothing loaded yet</span>
       <div class="h-[1px]" {...machine.getSentinelProps()}></div>
     </div>
@@ -82,7 +82,7 @@ const machine = asyncList({
   </div>
 
   <div
-    class={["mt-2 rounded-md border border-solid border-border bg-surface px-3 py-2 text-sm text-text transition-colors duration-fast ease-decelerate", { "block": machine.error !== undefined, "hidden": machine.error === undefined }]}
+    class={["mt-2 rounded-md border bg-surface px-3 py-2 type-body transition-colors duration-fast ease-decelerate", { "block": machine.error !== undefined, "hidden": machine.error === undefined }]}
     {...machine.getErrorProps()}
   >Something went wrong.</div>
 </div>

package/dist/async-list/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/async-list/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { asyncList } from \"../async-list.presentation.ts\";\n\nconst machine = asyncList({\n  initialItems: [{ \"value\": \"ada\", \"label\": \"Ada Lovelace\" }, {\n    \"value\": \"grace\",\n    \"label\": \"Grace Hopper\",\n  }, { \"value\": \"margaret\", \"label\": \"Margaret Hamilton\" }],\n  sortFn: ({ items, descriptor }) => {\n    const label = (item) => String(item.label);\n    const sorted = [...items].sort((a, b) =>\n      label(a).localeCompare(label(b))\n    );\n    if (descriptor !== undefined && descriptor.direction === \"descending\") {\n      sorted.reverse();\n    }\n    return { items: sorted };\n  },\n});\n<\/script>\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-2 flex flex-wrap items-center justify-between gap-2\">\n    <div class=\"flex items-center gap-1\">\n      <button\n        class=\"secondary s-sm\"\n        aria-label=\"Sort ascending\"\n        {...machine.getSortTriggerProps({ column: \"name\", direction: \"ascending\" })}\n      ><span aria-hidden=\"true\">A</span><span class=\"i-lucide-arrow-right type-caption\" aria-hidden=\"true\"></span><span aria-hidden=\"true\">Z</span></button>\n      <button\n        class=\"secondary s-sm\"\n        aria-label=\"Sort descending\"\n        {...machine.getSortTriggerProps({ column: \"name\", direction: \"descending\" })}\n      ><span aria-hidden=\"true\">Z</span><span class=\"i-lucide-arrow-right type-caption\" aria-hidden=\"true\"></span><span aria-hidden=\"true\">A</span></button>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <input\n        class=\"w-36 transition-colors duration-fast ease-decelerate\"\n        aria-label=\"Filter\"\n        {...machine.getFilterInputProps()}\n      />\n      <button\n        class={[\"secondary s-sm\", { \"inline-flex\": machine.filterText.length > 0, \"hidden\": machine.filterText.length === 0 }]}\n        {...machine.getClearFilterProps()}\n      >Clear</button>\n      <button\n        class={[\"secondary s-sm\", { \"text-primary\": machine.state === \"loading\" }]}\n        {...machine.getReloadProps()}\n      >Reload</button>\n    </div>\n  </div>\n\n  <div\n    class=\"relative max-h-60 overflow-y-auto rounded-lg border bg-surface-raised shadow-sm transition-shadow duration-fast ease-decelerate\"\n    {...machine.getListProps()}\n  >\n    <div class=\"relative p-1\">\n      <div\n        class={[\"pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 rounded-full bg-primary transition-transform duration-fast ease-decelerate\", { \"scale-x-100\": machine.state === \"loading\" || machine.state === \"sorting\" }]}\n        {...machine.getProgressProps()}\n      ></div>\n      <template for={machine.getRows()} as={row} key={row.value}>\n        <div\n          class=\"flex items-center gap-2 rounded-md px-2 py-1 type-body transition-colors duration-fast ease-decelerate\"\n          {...machine.getItemProps(row)}\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{row.label}</span>\n          <span class=\"type-caption text-muted tabular-nums\">{row.value}</span>\n        </div>\n      </template>\n      <span\n        class={[\"px-2 py-6 text-center type-body text-muted transition-colors duration-fast ease-decelerate\", { \"block\": machine.empty, \"hidden\": !machine.empty }]}\n        {...machine.getEmptyProps()}>Nothing loaded yet</span>\n      <div class=\"h-[1px]\" {...machine.getSentinelProps()}></div>\n    </div>\n  </div>\n\n  <div class=\"mt-2 flex justify-center\">\n    <button\n      class={[\"secondary s-sm\", { \"inline-flex\": machine.hasMore, \"hidden\": !machine.hasMore }]}\n      {...machine.getLoadMoreProps()}\n    >Load more</button>\n  </div>\n\n  <div\n    class={[\"mt-2 rounded-md border bg-surface px-3 py-2 type-body transition-colors duration-fast ease-decelerate\", { \"block\": machine.error !== undefined, \"hidden\": machine.error === undefined }]}\n    {...machine.getErrorProps()}\n  >Something went wrong.</div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/avatar/avatar.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface AvatarEvents {
   "IMG.LOADED": {};
   "IMG.ERROR": {};
@@ -14,5 +14,4 @@ export type AvatarEvent = EventUnion<AvatarEvents>;
 export type AvatarStatus = "loading" | "error" | "loaded";
 export type AvatarStatusChange = {
   readonly status: AvatarStatus;
-};
-//# sourceMappingURL=avatar.events.d.ts.map
+};

package/dist/avatar/avatar.machine.d.ts

@@ -1,5 +1,13 @@
-import { AvatarEvents } from "./avatar.events.js";
+/**
+ * Avatar machine: loading/error/loaded over three states.
+ *
+ * Load and error signals arrive as events from the image node; the
+ * machine owns which face shows.
+ *
+ * Context stays serializable for the scope channel: the src and nothing
+ * else. There is no guard: the last signal wins.
+ */
 import { AvatarArgs, AvatarContext, AvatarState } from "./avatar.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function avatar(args?: AvatarArgs, authored?: (name: string) => boolean): Machine<AvatarContext, AvatarEvents, AvatarState>;
-//# sourceMappingURL=avatar.machine.d.ts.map
+import { AvatarEvents } from "./avatar.events.js";
+import { Machine } from "@spinjs/components/fsm";
+export declare function avatar(args?: AvatarArgs, authored?: (name: string) => boolean): Machine<AvatarContext, AvatarEvents, AvatarState>;