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

package/dist/toggle-group/toggle-group.presentation.js

@@ -1,6 +1,6 @@
-import { isInteractive as isInteractive$1, isPressed } from "./toggle-group.state.js";
 import { toggleGroup as toggleGroup$1 } from "./toggle-group.machine.js";
-import { ariaPressed, defineComponent, focuser, isComposing, optionRow } from "@spinjs/runtime";
+import { isInteractive as isInteractive$1, isPressed } from "./toggle-group.state.js";
+import { ariaPressed, defineComponent, focuser, isComposing, optionRow } from "@spinjs/components/runtime";
 // src/toggle-group/toggle-group.presentation.ts
 /** The view reflex: a roving move hands DOM focus to the focused item. */
 const focusItem = (scopeId, value) => {

package/dist/toggle-group/toggle-group.state.d.ts

@@ -41,5 +41,4 @@ export interface ToggleGroupArgs {
 export declare const parseValues: (raw: unknown) => string[] | null;
 export declare function initial(args: ToggleGroupArgs, authored: (name: string) => boolean): ToggleGroupContext;
 export declare function isInteractive(ctx: ToggleGroupContext): boolean;
-export declare function isPressed(ctx: ToggleGroupContext, value: string): boolean;
-//# sourceMappingURL=toggle-group.state.d.ts.map
+export declare function isPressed(ctx: ToggleGroupContext, value: string): boolean;

package/dist/toggle-group/toggle-group.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/toggle-group/toggle-group.state.ts
 const parseItems = (raw) => {
 	try {

package/dist/toggle-group/toggle-group.transitions.d.ts

@@ -1,10 +1,9 @@
-import { ToggleGroupContext } from "./toggle-group.state.js";
 import { ToggleGroupEvents } from "./toggle-group.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { ToggleGroupContext } from "./toggle-group.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type ToggleGroupAssign<K extends keyof ToggleGroupEvents = keyof ToggleGroupEvents> = AssignFor<ToggleGroupContext, ToggleGroupEvents, K>;
 export declare const clearClickFocus: () => Partial<ToggleGroupContext>;
 export declare const setTabbingBackward: () => Partial<ToggleGroupContext>;
 export declare const setFocusedId: ToggleGroupAssign<"TOGGLE.FOCUS">;
 export declare const setValue: ToggleGroupAssign<"VALUE.SET">;
-export {};
-//# sourceMappingURL=toggle-group.transitions.d.ts.map
+export {};

package/dist/tooltip/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"secondary s-sm\">Hover me</button>\n\n<tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n  A plain hint on a short clock.\n</tooltip>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/tooltip/examples/metrics.html

@@ -6,25 +6,25 @@ const ctl = tooltip();
 
 <button {...ctl.getTriggerProps()}
   class="secondary s-sm inline-flex items-center gap-2">
-  <span class="i-lucide-bar-chart-3 text-sm" aria-hidden="true"></span>
+  <span class="i-lucide-bar-chart-3 type-code" aria-hidden="true"></span>
   Analytics
 </button>
 
 <tooltip {...ctl.getContentProps()}
   class="fixed m-0 max-w-[16rem]">
-  <div class="stack-xs">
-    <div class="text-xs font-medium text-text-muted">Today</div>
+  <div class="flex flex-col gap-1">
+    <div class="type-caption-emphasized text-muted">Today</div>
     <div class="flex items-center justify-between gap-4">
-      <span class="text-xs">Sales</span>
-      <span class="text-xs font-semibold">$2.8k</span>
+      <span class="type-caption">Sales</span>
+      <span class="type-caption-emphasized">$2.8k</span>
     </div>
     <div class="flex items-center justify-between gap-4">
-      <span class="text-xs">Revenue</span>
-      <span class="text-xs font-semibold">$4.3k</span>
+      <span class="type-caption">Revenue</span>
+      <span class="type-caption-emphasized">$4.3k</span>
     </div>
     <div class="flex items-center justify-between gap-4">
-      <span class="text-xs">Costs</span>
-      <span class="text-xs font-semibold">$1.6k</span>
+      <span class="type-caption">Costs</span>
+      <span class="type-caption-emphasized">$1.6k</span>
     </div>
   </div>
 </tooltip>

package/dist/tooltip/examples/metrics.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/metrics.html
+var metrics_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"secondary s-sm inline-flex items-center gap-2\">\n  <span class=\"i-lucide-bar-chart-3 type-code\" aria-hidden=\"true\"></span>\n  Analytics\n</button>\n\n<tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n  <div class=\"flex flex-col gap-1\">\n    <div class=\"type-caption-emphasized text-muted\">Today</div>\n    <div class=\"flex items-center justify-between gap-4\">\n      <span class=\"type-caption\">Sales</span>\n      <span class=\"type-caption-emphasized\">$2.8k</span>\n    </div>\n    <div class=\"flex items-center justify-between gap-4\">\n      <span class=\"type-caption\">Revenue</span>\n      <span class=\"type-caption-emphasized\">$4.3k</span>\n    </div>\n    <div class=\"flex items-center justify-between gap-4\">\n      <span class=\"type-caption\">Costs</span>\n      <span class=\"type-caption-emphasized\">$1.6k</span>\n    </div>\n  </div>\n</tooltip>\n";
+export { metrics_default as default };
+
+//# sourceMappingURL=metrics.html.js.map

package/dist/tooltip/examples/positioning.html

@@ -4,9 +4,9 @@ import { tooltip } from "../tooltip.controller-def.js";
 const ctl = tooltip();
 </script>
 
-<div class="w-full stack-lg p-6">
-  <div class="stack-sm">
-    <strong class="text-sm text-text">Select Position</strong>
+<div class="w-full flex flex-col gap-8 p-6">
+  <div class="flex flex-col gap-2">
+    <strong>Select Position</strong>
     <div class="flex flex-wrap gap-2" data-positions>
       <button class="secondary s-sm" data-placement-choice="top">Top</button>
       <button class="secondary s-sm" data-placement-choice="bottom">Bottom</button>
@@ -16,7 +16,7 @@ const ctl = tooltip();
   </div>
   <div class="flex items-center justify-center py-12">
     <span {...ctl.getTriggerProps()}
-      class="bare cursor-pointer rounded-md border border-solid border-border bg-surface-raised px-3 py-1 text-sm text-text transition-colors hover:bg-surface">Hover for bottom placement</span>
+      class="bare cursor-pointer rounded-md border bg-surface-raised px-3 py-1 type-body transition-colors hover:bg-surface">Hover for bottom placement</span>
 
     <tooltip {...ctl.getContentProps()}
   class="fixed m-0 max-w-[16rem]">

package/dist/tooltip/examples/positioning.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/positioning.html
+var positioning_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<div class=\"w-full flex flex-col gap-8 p-6\">\n  <div class=\"flex flex-col gap-2\">\n    <strong>Select Position</strong>\n    <div class=\"flex flex-wrap gap-2\" data-positions>\n      <button class=\"secondary s-sm\" data-placement-choice=\"top\">Top</button>\n      <button class=\"secondary s-sm\" data-placement-choice=\"bottom\">Bottom</button>\n      <button class=\"secondary s-sm\" data-placement-choice=\"left\">Left</button>\n      <button class=\"secondary s-sm\" data-placement-choice=\"right\">Right</button>\n    </div>\n  </div>\n  <div class=\"flex items-center justify-center py-12\">\n    <span {...ctl.getTriggerProps()}\n      class=\"bare cursor-pointer rounded-md border bg-surface-raised px-3 py-1 type-body transition-colors hover:bg-surface\">Hover for bottom placement</span>\n\n    <tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n      bottom\n    </tooltip>\n  </div>\n</div>\n";
+export { positioning_default as default };
+
+//# sourceMappingURL=positioning.html.js.map

package/dist/tooltip/examples/status.html

@@ -6,28 +6,28 @@ const ctl = tooltip();
 
 <button {...ctl.getTriggerProps()}
   class="secondary s-sm inline-flex items-center gap-2">
-  <span class="i-lucide-activity text-sm" aria-hidden="true"></span>
+  <span class="i-lucide-activity type-code" aria-hidden="true"></span>
   System Status
 </button>
 
 <tooltip {...ctl.getContentProps()}
   class="fixed m-0 max-w-[16rem]">
-  <div class="stack-xs">
+  <div class="flex flex-col gap-1">
     <div>
-      <div class="text-xs text-text-muted">Status</div>
-      <div class="text-xs font-semibold">Operational</div>
+      <div class="type-caption text-muted">Status</div>
+      <div class="type-caption-emphasized">Operational</div>
     </div>
     <div>
-      <div class="text-xs text-text-muted">Uptime</div>
-      <div class="text-xs font-semibold">99.9%</div>
+      <div class="type-caption text-muted">Uptime</div>
+      <div class="type-caption-emphasized">99.9%</div>
     </div>
     <div>
-      <div class="text-xs text-text-muted">Deploy</div>
-      <div class="text-xs font-semibold">2h ago</div>
+      <div class="type-caption text-muted">Deploy</div>
+      <div class="type-caption-emphasized">2h ago</div>
     </div>
     <div>
-      <div class="text-xs text-text-muted">Response</div>
-      <div class="text-xs font-semibold">145ms</div>
+      <div class="type-caption text-muted">Response</div>
+      <div class="type-caption-emphasized">145ms</div>
     </div>
   </div>
 </tooltip>

package/dist/tooltip/examples/status.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/status.html
+var status_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"secondary s-sm inline-flex items-center gap-2\">\n  <span class=\"i-lucide-activity type-code\" aria-hidden=\"true\"></span>\n  System Status\n</button>\n\n<tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n  <div class=\"flex flex-col gap-1\">\n    <div>\n      <div class=\"type-caption text-muted\">Status</div>\n      <div class=\"type-caption-emphasized\">Operational</div>\n    </div>\n    <div>\n      <div class=\"type-caption text-muted\">Uptime</div>\n      <div class=\"type-caption-emphasized\">99.9%</div>\n    </div>\n    <div>\n      <div class=\"type-caption text-muted\">Deploy</div>\n      <div class=\"type-caption-emphasized\">2h ago</div>\n    </div>\n    <div>\n      <div class=\"type-caption text-muted\">Response</div>\n      <div class=\"type-caption-emphasized\">145ms</div>\n    </div>\n  </div>\n</tooltip>\n";
+export { status_default as default };
+
+//# sourceMappingURL=status.html.js.map

package/dist/tooltip/examples/video.html

@@ -5,17 +5,17 @@ const ctl = tooltip();
 </script>
 
 <button {...ctl.getTriggerProps()}
-  class="bare relative grid h-36 w-64 place-items-center overflow-hidden rounded-lg border-border bg-surface-sunken">
-  <span class="i-lucide-play icon-lg text-text" aria-hidden="true"></span>
+  class="bare relative grid h-36 w-64 place-items-center overflow-hidden rounded-lg border bg-surface-sunken">
+  <span class="i-lucide-play icon-lg" aria-hidden="true"></span>
 </button>
 
 <tooltip {...ctl.getContentProps()}
   class="fixed m-0 max-w-[16rem]">
-  <div class="stack-xs">
-    <p class="text-xs font-medium text-text">Product Demo</p>
+  <div class="flex flex-col gap-1">
+    <p>Product Demo</p>
     <p
-      class="text-xs text-text-muted">Learn platform features in this walkthrough.</p>
-    <div class="flex items-center gap-2 text-xs text-text-muted">
+      class="text-muted">Learn platform features in this walkthrough.</p>
+    <div class="flex items-center gap-2 type-caption text-muted">
       <span>4:32</span><span>•</span><span>720p</span><span>•</span><span>2.1M</span>
     </div>
   </div>

package/dist/tooltip/examples/video.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/video.html
+var video_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"bare relative grid h-36 w-64 place-items-center overflow-hidden rounded-lg border bg-surface-sunken\">\n  <span class=\"i-lucide-play icon-lg\" aria-hidden=\"true\"></span>\n</button>\n\n<tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n  <div class=\"flex flex-col gap-1\">\n    <p>Product Demo</p>\n    <p\n      class=\"text-muted\">Learn platform features in this walkthrough.</p>\n    <div class=\"flex items-center gap-2 type-caption text-muted\">\n      <span>4:32</span><span>•</span><span>720p</span><span>•</span><span>2.1M</span>\n    </div>\n  </div>\n</tooltip>\n";
+export { video_default as default };
+
+//# sourceMappingURL=video.html.js.map

package/dist/tooltip/examples/with-arrow.html

@@ -9,6 +9,6 @@ const ctl = tooltip();
 
 <tooltip {...ctl.getContentProps()}
   class="fixed m-0 max-w-[16rem]">
-  <span aria-hidden="true" class="absolute -top-1 left-1/2 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t border-solid border-border bg-surface-raised"></span>
+  <span aria-hidden="true" class="absolute -top-1 left-1/2 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t bg-surface-raised"></span>
   A hint with a pointing arrow.
 </tooltip>

package/dist/tooltip/examples/with-arrow.html.js

@@ -0,0 +1,5 @@
+// src/tooltip/examples/with-arrow.html
+var with_arrow_default = "<script lang=\"ts\">\nimport { tooltip } from \"../tooltip.controller-def.ts\";\n\nconst ctl = tooltip();\n<\/script>\n\n<button {...ctl.getTriggerProps()}\n  class=\"secondary s-sm\">Hover me</button>\n\n<tooltip {...ctl.getContentProps()}\n  class=\"fixed m-0 max-w-[16rem]\">\n  <span aria-hidden=\"true\" class=\"absolute -top-1 left-1/2 h-2 w-2 rotate-45 border-b-0 border-r-0 border-l border-t bg-surface-raised\"></span>\n  A hint with a pointing arrow.\n</tooltip>\n";
+export { with_arrow_default as default };
+
+//# sourceMappingURL=with-arrow.html.js.map

package/dist/tooltip/tooltip.controller-def.d.ts

@@ -1,5 +1,4 @@
-import { ControllerDef } from "@spinjs/runtime";
-import { AnchorPlacement } from "@spinjs/runtime/actions";
+import { AnchorPlacement } from "@spinjs/components/actions";
 /**
  * Tooltip on the platform: the browser owns open/closed, the top layer,
  * light-dismiss, and Escape. There is no machine here — `attach` wires the
@@ -36,7 +35,6 @@ export interface TooltipApi {
   setPlacement(next: AnchorPlacement): void;
 }
 export declare function attachTooltip(el: Element): TooltipApi;
-export declare const tooltip: ControllerDef & {
+export declare const tooltip: import("@spinjs/components/runtime").ControllerDef & {
   attach(el: Element): TooltipApi;
-} & (() => TooltipApi);
-//# sourceMappingURL=tooltip.controller-def.d.ts.map
+} & (() => TooltipApi);

package/dist/tooltip/tooltip.controller-def.js

@@ -1,4 +1,4 @@
-import { defineController, signal } from "@spinjs/runtime";
+import { defineController, signal } from "@spinjs/components/runtime";
 // src/tooltip/tooltip.controller-def.ts
 const tooltipManifest = {
 	parts: [],

package/dist/tour/examples/basic.html

@@ -29,17 +29,17 @@ const machine = tour({
     {...machine.getSpotlightProps()}></div>
 
   <div
-    class={["fixed z-modal w-[min(20rem,90vw)] rounded-lg border border-solid border-border bg-surface-raised p-3 shadow-lg transition-opacity duration-fast ease-decelerate", { "pointer-events-none invisible opacity-0": !machine.active }]}
+    class={["fixed z-modal w-[min(20rem,90vw)] rounded-lg border bg-surface-raised p-3 shadow-lg transition-opacity duration-fast ease-decelerate", { "pointer-events-none invisible opacity-0": !machine.active }]}
     {...machine.getPositionerProps()}>
     <div class="flex flex-col gap-2" {...machine.getContentProps()}>
       <template for={machine.getTextRows()} as={row} key={row.key}>
         <div class="flex items-center justify-between gap-2">
-          <span class="text-sm font-medium text-text"
+          <span class="type-label"
             {...machine.getTitleProps()}>{row.title}</span>
-          <span class="text-xs text-text-muted tabular-nums"
+          <span class="type-caption text-muted tabular-nums"
             {...machine.getProgressTextProps()}>{row.progress}</span>
         </div>
-        <p class="text-xs text-text-muted"
+        <p class="text-muted"
           {...machine.getDescriptionProps()}>{row.description}</p>
       </template>
       <div class="flex items-center justify-between gap-2">
@@ -58,7 +58,7 @@ const machine = tour({
           <button
             class="ghost icon s-sm"
             {...machine.getDismissTriggerProps()}>
-            <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+            <span class="i-lucide-x type-caption" aria-hidden="true"></span>
           </button>
         </div>
       </div>

package/dist/tour/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/tour/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { tour } from \"../tour.presentation.ts\";\n\nconst machine = tour({\n  label: \"Tour\",\n  steps:\n    '[{\"id\":\"welcome\",\"target\":\"#tour-basic-target\",\"title\":\"Welcome\",\"description\":\"This button starts nothing, but the spotlight finds it.\"},{\"id\":\"confirm\",\"target\":\"#tour-basic-confirm\",\"title\":\"Confirm\",\"description\":\"The spotlight follows to the next target.\"},{\"id\":\"done\",\"title\":\"Done\",\"description\":\"No target — the card stands alone.\"}]',\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-4\">\n  <button id=\"tour-basic-target\"\n    class=\"secondary s-sm\">Feature button</button>\n  <button id=\"tour-basic-confirm\"\n    class=\"secondary s-sm\">Confirm button</button>\n  <button\n    class=\"s-sm\"\n    {...machine.getStartTriggerProps()}>Start tour</button>\n</div>\n<div class=\"contents\" {...machine.getRootProps()}>\n  <div\n    show={machine.active}\n    class=\"pointer-events-none fixed inset-0 z-modal bg-surface-sunken opacity-70 transition-opacity duration-fast ease-decelerate\"\n    {...machine.getBackdropProps()}></div>\n\n  <div\n    show={machine.active}\n    class=\"pointer-events-none fixed z-modal rounded-lg ring-2 ring-primary transition-all duration-fast ease-decelerate\"\n    {...machine.getSpotlightProps()}></div>\n\n  <div\n    class={[\"fixed z-modal w-[min(20rem,90vw)] rounded-lg border bg-surface-raised p-3 shadow-lg transition-opacity duration-fast ease-decelerate\", { \"pointer-events-none invisible opacity-0\": !machine.active }]}\n    {...machine.getPositionerProps()}>\n    <div class=\"flex flex-col gap-2\" {...machine.getContentProps()}>\n      <template for={machine.getTextRows()} as={row} key={row.key}>\n        <div class=\"flex items-center justify-between gap-2\">\n          <span class=\"type-label\"\n            {...machine.getTitleProps()}>{row.title}</span>\n          <span class=\"type-caption text-muted tabular-nums\"\n            {...machine.getProgressTextProps()}>{row.progress}</span>\n        </div>\n        <p class=\"text-muted\"\n          {...machine.getDescriptionProps()}>{row.description}</p>\n      </template>\n      <div class=\"flex items-center justify-between gap-2\">\n        <div class=\"flex items-center gap-1\">\n          <button\n            class=\"ghost s-sm\"\n            {...machine.getPrevTriggerProps()}>Back</button>\n          <button\n            class=\"s-sm\"\n            {...machine.getNextTriggerProps()}>Next</button>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <button\n            class=\"ghost s-sm\"\n            {...machine.getSkipTriggerProps()}>Skip</button>\n          <button\n            class=\"ghost icon s-sm\"\n            {...machine.getDismissTriggerProps()}>\n            <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/tour/tour.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface TourEvents {
   "START": {};
   "STEP.SET": {
@@ -28,5 +28,4 @@ export type TourStepChange = {
 export type TourDismissChange = {
   readonly reason: "complete" | "dismiss" | "skip" | "not-found";
   readonly step: number;
-};
-//# sourceMappingURL=tour.events.d.ts.map
+};

package/dist/tour/tour.machine.d.ts

@@ -1,5 +1,9 @@
+/**
+ * Tour machine: the inactive and running modes, and the three phases a
+ * running step passes through — a step resolves its target, scrolls it
+ * into view, then shows its spotlight.
+ */
 import { TourArgs, TourContext, TourState } from "./tour.state.js";
 import { TourEvents } from "./tour.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function tour(args?: TourArgs, authored?: (name: string) => boolean): Machine<TourContext, TourEvents, TourState>;
-//# sourceMappingURL=tour.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function tour(args?: TourArgs, authored?: (name: string) => boolean): Machine<TourContext, TourEvents, TourState>;

package/dist/tour/tour.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./tour.state.js";
 import { bail, hasNext, hasPrev, hasSteps, nextStep, prevStep, setSpotlight, setStep, startTour, validStep } from "./tour.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/tour/tour.machine.ts
 /**
 * Tour machine: the inactive and running modes, and the three phases a

package/dist/tour/tour.presentation.d.ts

@@ -1,6 +1,6 @@
 import { TourArgs, TourContext, TourState, TourStepRecord } from "./tour.state.js";
 import { TourDismissChange, TourEvents, TourStepChange } from "./tour.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 /**
  * Tour definition: the DOM contract as data. The machine owns the modes
  * (inactive/resolving/scrolling/active) and the step index; this file maps
@@ -9,10 +9,10 @@ import { ApiOf, ViewFor } from "@spinjs/runtime";
 type ScopeLike = ViewFor<TourContext, TourEvents, TourState>;
 export declare const def: {
   name: string;
-  machine: (args: TourArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TourContext, TourEvents, TourState>;
+  machine: (args: TourArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<TourContext, TourEvents, TourState>;
   start: "inactive";
   settled: ({ event, after, props, send }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: TourContext;
       readonly state: TourState;
@@ -26,7 +26,7 @@ export 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;
   parts: {
     root: {
@@ -255,6 +255,5 @@ export declare const def: {
   };
 };
 export type TourApi = ApiOf<typeof def>;
-export declare const tour: import("@spinjs/runtime").DefinedComponent<TourApi, TourArgs>;
-export type { TourArgs, TourDismissChange, TourState, TourStepChange, TourStepRecord };
-//# sourceMappingURL=tour.presentation.d.ts.map
+export declare const tour: import("@spinjs/components/runtime").DefinedComponent<TourApi, TourArgs>;
+export type { TourArgs, TourDismissChange, TourState, TourStepChange, TourStepRecord };

package/dist/tour/tour.presentation.js

@@ -1,5 +1,5 @@
 import { tour as tour$1 } from "./tour.machine.js";
-import { ariaHidden, defineComponent } from "@spinjs/runtime";
+import { ariaHidden, defineComponent } from "@spinjs/components/runtime";
 // src/tour/tour.presentation.ts
 const runningState = (state) => state === "resolving" || state === "scrolling" || state === "active";
 /** The lookup's budget: two seconds, then the target counts as missing. */

package/dist/tour/tour.state.d.ts

@@ -39,5 +39,4 @@ export declare function stepsOf(raw: unknown): TourStepRecord[];
 /** The machine's context from its arguments. */
 export declare function initial(args: TourArgs, authored?: (name: string) => boolean): Pick<TourContext, "steps" | "step" | "previousStep" | "spotlight" | "disabled" | "spotlightPadding" | "label">;
 export declare function stepOf(raw: unknown, count: number): number;
-export declare const bailStep: (ctx: TourContext) => Partial<TourContext>;
-//# sourceMappingURL=tour.state.d.ts.map
+export declare const bailStep: (ctx: TourContext) => Partial<TourContext>;

package/dist/tour/tour.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin, isRecord } from "@spinjs/runtime";
+import { defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/tour/tour.state.ts
 const parseJsonList = (raw) => {
 	if (typeof raw !== "string" || raw.length === 0) return [];

package/dist/tour/tour.transitions.d.ts

@@ -1,6 +1,6 @@
-import { TourContext } from "./tour.state.js";
 import { TourEvents } from "./tour.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { TourContext } from "./tour.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type TourAssign<K extends keyof TourEvents = keyof TourEvents> = AssignFor<TourContext, TourEvents, K>;
 export declare const setSpotlight: TourAssign<"SPOTLIGHT.SET">;
 export declare const setStep: TourAssign<"STEP.SET">;
@@ -12,5 +12,4 @@ export declare const hasSteps: GuardFor<TourContext, TourEvents>;
 export declare const validStep: GuardFor<TourContext, TourEvents>;
 export declare const hasNext: GuardFor<TourContext, TourEvents>;
 export declare const hasPrev: GuardFor<TourContext, TourEvents>;
-export {};
-//# sourceMappingURL=tour.transitions.d.ts.map
+export {};

package/dist/tree-view/examples/basic.html

@@ -3,42 +3,42 @@ import { treeView } from "../tree-view.presentation.js";
 
 const machine = treeView({
   nodes:
-    '[{"value": "packages", "label": "packages", "children": [{"value": "packages/components", "label": "components", "children": [{"value": "packages/combobox", "label": "combobox"}, {"value": "packages/select", "label": "select"}]}, {"value": "packages/runtime", "label": "runtime"}]}, {"value": "packages/preset", "label": "preset"}, {"value": "readme", "label": "README.md"}]',
+    '[{"value": "packages", "label": "packages", "children": [{"value": "packages/components", "label": "components", "children": [{"value": "packages/combobox", "label": "combobox"}, {"value": "packages/select", "label": "select"}]}, {"value": "packages/theme", "label": "theme"}]}, {"value": "packages/preset", "label": "preset"}, {"value": "readme", "label": "README.md"}]',
   expandedValue: ["packages", "packages/components"],
 });
 </script>
 <div class="mx-auto w-full max-w-sm" {...machine.getRootProps()}>
-  <span class="mb-4 block text-md font-semibold text-text"
+  <span class="mb-4 block type-caption-emphasized"
     {...machine.getLabelProps()}>Project Files</span>
   <div
-    class="stack-xs rounded-lg border border-solid border-border bg-surface-raised p-3"
+    class="flex flex-col gap-1 rounded-lg border bg-surface-raised p-3"
     {...machine.getTreeProps()}>
     <template for={machine.getVisibleRows()} as={row} key={row.node.value}>
       <div class="relative" {...machine.getItemProps(row)}>
         <span class="pointer-events-none absolute inset-y-0 w-[1px] bg-border"
           aria-hidden="true" {...machine.getRailProps(row)}></span>
         <button
-          class={["bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left text-sm font-medium transition-colors duration-fast ease-standard hover:bg-surface", { "bg-surface-sunken": machine.getItemState(row).selected, "bg-transparent": !machine.getItemState(row).selected }]}
+          class={["bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left transition-colors duration-fast ease-standard hover:bg-surface", { "bg-surface-sunken": machine.getItemState(row).selected, "bg-transparent": !machine.getItemState(row).selected }]}
           {...machine.getBranchControlProps(row)}
         >
           <span
-            class={["h-4 w-4 shrink-0 items-center justify-center text-text-muted transition-transform duration-fast ease-standard", { "inline-flex": machine.isBranch(row), "hidden": !machine.isBranch(row), "rotate-90": machine.getItemState(row).expanded }]}
+            class={["h-4 w-4 shrink-0 items-center justify-center text-muted transition-transform duration-fast ease-standard", { "inline-flex": machine.isBranch(row), "hidden": !machine.isBranch(row), "rotate-90": machine.getItemState(row).expanded }]}
             {...machine.getBranchIndicatorProps(row)}>
-            <span class="i-lucide-chevron-right text-xs"
+            <span class="i-lucide-chevron-right type-caption"
               aria-hidden="true"></span>
           </span>
           <span
             show={machine.isBranch(row) && !machine.getItemState(row).expanded}
-            class="i-lucide-folder shrink-0 text-sm text-primary"
+            class="i-lucide-folder shrink-0 text-primary"
             aria-hidden="true" {...machine.getItemIconProps(row)}></span>
           <span
             show={machine.isBranch(row) && machine.getItemState(row).expanded}
-            class="i-lucide-folder-open shrink-0 text-sm text-primary"
+            class="i-lucide-folder-open shrink-0 text-primary"
             aria-hidden="true" {...machine.getItemIconProps(row)}></span>
           <span show={!machine.isBranch(row)}
-            class="i-lucide-file shrink-0 text-sm text-text-muted" aria-hidden="true"
+            class="i-lucide-file shrink-0 text-muted" aria-hidden="true"
             {...machine.getItemIconProps(row)}></span>
-          <span class="min-w-0 flex-1 truncate"
+          <span class="min-w-0 flex-1 truncate type-body"
             {...machine.getBranchTextProps(row)}>{row.node.label}</span>
         </button>
       </div>

package/dist/tree-view/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/tree-view/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { treeView } from \"../tree-view.presentation.ts\";\n\nconst machine = treeView({\n  nodes:\n    '[{\"value\": \"packages\", \"label\": \"packages\", \"children\": [{\"value\": \"packages/components\", \"label\": \"components\", \"children\": [{\"value\": \"packages/combobox\", \"label\": \"combobox\"}, {\"value\": \"packages/select\", \"label\": \"select\"}]}, {\"value\": \"packages/theme\", \"label\": \"theme\"}]}, {\"value\": \"packages/preset\", \"label\": \"preset\"}, {\"value\": \"readme\", \"label\": \"README.md\"}]',\n  expandedValue: [\"packages\", \"packages/components\"],\n});\n<\/script>\n<div class=\"mx-auto w-full max-w-sm\" {...machine.getRootProps()}>\n  <span class=\"mb-4 block type-caption-emphasized\"\n    {...machine.getLabelProps()}>Project Files</span>\n  <div\n    class=\"flex flex-col gap-1 rounded-lg border bg-surface-raised p-3\"\n    {...machine.getTreeProps()}>\n    <template for={machine.getVisibleRows()} as={row} key={row.node.value}>\n      <div class=\"relative\" {...machine.getItemProps(row)}>\n        <span class=\"pointer-events-none absolute inset-y-0 w-[1px] bg-border\"\n          aria-hidden=\"true\" {...machine.getRailProps(row)}></span>\n        <button\n          class={[\"bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left transition-colors duration-fast ease-standard hover:bg-surface\", { \"bg-surface-sunken\": machine.getItemState(row).selected, \"bg-transparent\": !machine.getItemState(row).selected }]}\n          {...machine.getBranchControlProps(row)}\n        >\n          <span\n            class={[\"h-4 w-4 shrink-0 items-center justify-center text-muted transition-transform duration-fast ease-standard\", { \"inline-flex\": machine.isBranch(row), \"hidden\": !machine.isBranch(row), \"rotate-90\": machine.getItemState(row).expanded }]}\n            {...machine.getBranchIndicatorProps(row)}>\n            <span class=\"i-lucide-chevron-right type-caption\"\n              aria-hidden=\"true\"></span>\n          </span>\n          <span\n            show={machine.isBranch(row) && !machine.getItemState(row).expanded}\n            class=\"i-lucide-folder shrink-0 text-primary\"\n            aria-hidden=\"true\" {...machine.getItemIconProps(row)}></span>\n          <span\n            show={machine.isBranch(row) && machine.getItemState(row).expanded}\n            class=\"i-lucide-folder-open shrink-0 text-primary\"\n            aria-hidden=\"true\" {...machine.getItemIconProps(row)}></span>\n          <span show={!machine.isBranch(row)}\n            class=\"i-lucide-file shrink-0 text-muted\" aria-hidden=\"true\"\n            {...machine.getItemIconProps(row)}></span>\n          <span class=\"min-w-0 flex-1 truncate type-body\"\n            {...machine.getBranchTextProps(row)}>{row.node.label}</span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/tree-view/examples/loading.html

@@ -16,40 +16,40 @@ const machine = treeView({
     tree.loadChildren = async (value) => fetchChildren(value);
 -->
 <div class="mx-auto w-full max-w-sm" {...machine.getRootProps()}>
-  <span class="mb-4 block text-md font-semibold text-text"
+  <span class="mb-4 block type-caption-emphasized"
     {...machine.getLabelProps()}>Project Files</span>
   <div
-    class="stack-xs rounded-lg border border-solid border-border bg-surface-raised p-3"
+    class="flex flex-col gap-1 rounded-lg border bg-surface-raised p-3"
     {...machine.getTreeProps()}>
     <template for={machine.getVisibleRows()} as={row} key={row.node.value}>
       <div class="relative" {...machine.getItemProps(row)}>
         <span class="pointer-events-none absolute inset-y-0 w-[1px] bg-border"
           aria-hidden="true" {...machine.getRailProps(row)}></span>
         <button
-          class={["bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left text-sm font-medium transition-colors duration-fast ease-standard hover:bg-surface", { "bg-surface-sunken": machine.getItemState(row).selected, "bg-transparent": !machine.getItemState(row).selected }]}
+          class={["bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left transition-colors duration-fast ease-standard hover:bg-surface", { "bg-surface-sunken": machine.getItemState(row).selected, "bg-transparent": !machine.getItemState(row).selected }]}
           {...machine.getBranchControlProps(row)}
         >
           <span
-            class={["h-4 w-4 shrink-0 items-center justify-center text-text-muted transition-transform duration-fast ease-standard", { "inline-flex": machine.isBranch(row), "hidden": !machine.isBranch(row), "rotate-90": machine.getItemState(row).expanded }]}
+            class={["h-4 w-4 shrink-0 items-center justify-center text-muted transition-transform duration-fast ease-standard", { "inline-flex": machine.isBranch(row), "hidden": !machine.isBranch(row), "rotate-90": machine.getItemState(row).expanded }]}
             {...machine.getBranchIndicatorProps(row)}>
-            <span class="i-lucide-chevron-right text-xs"
+            <span class="i-lucide-chevron-right type-caption"
               aria-hidden="true"></span>
           </span>
           <span
             show={machine.isBranch(row) && !machine.getItemState(row).expanded}
-            class="i-lucide-folder shrink-0 text-sm text-primary"
+            class="i-lucide-folder shrink-0 text-primary"
             aria-hidden="true" {...machine.getItemIconProps(row)}></span>
           <span
             show={machine.isBranch(row) && machine.getItemState(row).expanded}
-            class="i-lucide-folder-open shrink-0 text-sm text-primary"
+            class="i-lucide-folder-open shrink-0 text-primary"
             aria-hidden="true" {...machine.getItemIconProps(row)}></span>
           <span show={!machine.isBranch(row)}
-            class="i-lucide-file shrink-0 text-sm text-text-muted" aria-hidden="true"
+            class="i-lucide-file shrink-0 text-muted" aria-hidden="true"
             {...machine.getItemIconProps(row)}></span>
-          <span class="min-w-0 flex-1 truncate"
+          <span class="min-w-0 flex-1 truncate type-body"
             {...machine.getBranchTextProps(row)}>{row.node.label}</span>
-          <span class="ms-auto shrink-0 text-text-muted"
-            {...machine.getLoadingProps(row)}><span class="i-lucide-loader-circle animate-spin text-sm" aria-hidden="true"></span></span>
+          <span class="ms-auto shrink-0 text-muted"
+            {...machine.getLoadingProps(row)}><span class="i-lucide-loader-circle animate-spin" aria-hidden="true"></span></span>
         </button>
       </div>
     </template>

package/dist/tree-view/examples/loading.html.js

@@ -0,0 +1,5 @@
+// src/tree-view/examples/loading.html
+var loading_default = "<script lang=\"ts\">\nimport { treeView } from \"../tree-view.presentation.ts\";\n\nconst machine = treeView({\n  nodes:\n    '[{\"value\": \"packages\", \"label\": \"packages\"}, {\"value\": \"packages/preset\", \"label\": \"preset\", \"children\": []}, {\"value\": \"readme\", \"label\": \"README.md\", \"children\": []}]',\n  expandedValue: [],\n  loadChildren: \"\",\n});\n<\/script>\n<!-- Lazy roots declare no children: expanding one calls the host's\n  `loadChildren(value)` property (a function returning nodes) and shows\n  the loading marker until LOAD_DONE. In this page the loader below is\n  wired by the viewer; in your own code set the property yourself:\n\n    tree.loadChildren = async (value) => fetchChildren(value);\n-->\n<div class=\"mx-auto w-full max-w-sm\" {...machine.getRootProps()}>\n  <span class=\"mb-4 block type-caption-emphasized\"\n    {...machine.getLabelProps()}>Project Files</span>\n  <div\n    class=\"flex flex-col gap-1 rounded-lg border bg-surface-raised p-3\"\n    {...machine.getTreeProps()}>\n    <template for={machine.getVisibleRows()} as={row} key={row.node.value}>\n      <div class=\"relative\" {...machine.getItemProps(row)}>\n        <span class=\"pointer-events-none absolute inset-y-0 w-[1px] bg-border\"\n          aria-hidden=\"true\" {...machine.getRailProps(row)}></span>\n        <button\n          class={[\"bare relative flex min-h-0 items-center gap-2 rounded-lg border-0 px-3 py-2 text-left transition-colors duration-fast ease-standard hover:bg-surface\", { \"bg-surface-sunken\": machine.getItemState(row).selected, \"bg-transparent\": !machine.getItemState(row).selected }]}\n          {...machine.getBranchControlProps(row)}\n        >\n          <span\n            class={[\"h-4 w-4 shrink-0 items-center justify-center text-muted transition-transform duration-fast ease-standard\", { \"inline-flex\": machine.isBranch(row), \"hidden\": !machine.isBranch(row), \"rotate-90\": machine.getItemState(row).expanded }]}\n            {...machine.getBranchIndicatorProps(row)}>\n            <span class=\"i-lucide-chevron-right type-caption\"\n              aria-hidden=\"true\"></span>\n          </span>\n          <span\n            show={machine.isBranch(row) && !machine.getItemState(row).expanded}\n            class=\"i-lucide-folder shrink-0 text-primary\"\n            aria-hidden=\"true\" {...machine.getItemIconProps(row)}></span>\n          <span\n            show={machine.isBranch(row) && machine.getItemState(row).expanded}\n            class=\"i-lucide-folder-open shrink-0 text-primary\"\n            aria-hidden=\"true\" {...machine.getItemIconProps(row)}></span>\n          <span show={!machine.isBranch(row)}\n            class=\"i-lucide-file shrink-0 text-muted\" aria-hidden=\"true\"\n            {...machine.getItemIconProps(row)}></span>\n          <span class=\"min-w-0 flex-1 truncate type-body\"\n            {...machine.getBranchTextProps(row)}>{row.node.label}</span>\n          <span class=\"ms-auto shrink-0 text-muted\"\n            {...machine.getLoadingProps(row)}><span class=\"i-lucide-loader-circle animate-spin\" aria-hidden=\"true\"></span></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { loading_default as default };
+
+//# sourceMappingURL=loading.html.js.map

package/dist/tree-view/tree-view.events.d.ts

@@ -1,5 +1,5 @@
 import { TreeNodeShape } from "./tree-view.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface TreeEvents {
   "EXPANDED.SET": {
     value?: string[];
@@ -63,5 +63,4 @@ export interface TreeEvents {
     children?: readonly TreeNodeShape[];
   };
 }
-export type TreeEvent = EventUnion<TreeEvents>;
-//# sourceMappingURL=tree-view.events.d.ts.map
+export type TreeEvent = EventUnion<TreeEvents>;

package/dist/tree-view/tree-view.machine.d.ts

@@ -1,6 +1,5 @@
 import { TreeArgs, TreeContext, TreeState, nodesOf } from "./tree-view.state.js";
 import { TreeEvents } from "./tree-view.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function treeView(args?: TreeArgs, authored?: (name: string) => boolean): Machine<TreeContext, TreeEvents, TreeState>;
-export { nodesOf };
-//# sourceMappingURL=tree-view.machine.d.ts.map
+export { nodesOf };

package/dist/tree-view/tree-view.machine.js

@@ -1,6 +1,6 @@
 import { initial, nodesOf } from "./tree-view.state.js";
 import { branchCollapse, branchExpand, checkedClear, checkedSet, checkedToggle, expandOnClickGuard, expandedClear, expandedSet, extendSelectionToNode, isMultiToggle, isRangeExtend, loadDone, loadStart, nodeDeselect, nodeFocus, nodeRename, renameCancel, renameSubmit, selectNode, selectedClear, selectedSet, toggleBranch, toggleNodeSelection } from "./tree-view.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/tree-view/tree-view.machine.ts
 function treeView(args = {}, authored = () => true) {
 	return createMachine({