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

package/dist/timer/timer.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./timer.state.js";
 import { isComplete, resetTime, restartChanged, setCurrentMs, tick } from "./timer.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/timer/timer.machine.ts
 function timer(args = {}, authored = () => false) {
 	return createMachine({

package/dist/timer/timer.presentation.d.ts

@@ -1,6 +1,6 @@
 import { Time, TimePart, TimerArgs, TimerContext, TimerState } from "./timer.state.js";
 import { TimerEvents } from "./timer.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 /**
  * Timer definition: the DOM contract as data.
  *
@@ -40,7 +40,7 @@ type ScopeLike = ViewFor<TimerContext, TimerEvents, TimerState>;
 type SlotLike<R> = SlotViewFor<R, TimerContext, TimerEvents, TimerState>;
 export declare const def: {
   name: string;
-  machine: (props: TimerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TimerContext, TimerEvents, TimerState>;
+  machine: (props: TimerArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<TimerContext, TimerEvents, TimerState>;
   start: (raw: Record<string, unknown>) => "idle" | "running";
   mounted: ({ root }: {
     readonly props: Record<string, unknown>;
@@ -50,7 +50,7 @@ export declare const def: {
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
   }) => void;
   settled: ({ root }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: TimerContext;
       readonly state: TimerState;
@@ -64,7 +64,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: {
@@ -78,7 +78,7 @@ export declare const def: {
       };
     };
     area: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, TimerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<TimerEvents>, TimerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, TimerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<TimerEvents>, TimerState>) => {
         id: string;
         role: string;
         "data-state": TimerState;
@@ -243,6 +243,5 @@ export declare const def: {
   };
 };
 export type TimerApi = ApiOf<typeof def>;
-export declare const timer: import("@spinjs/runtime").DefinedComponent<TimerApi, TimerArgs>;
-export {};
-//# sourceMappingURL=timer.presentation.d.ts.map
+export declare const timer: import("@spinjs/components/runtime").DefinedComponent<TimerApi, TimerArgs>;
+export {};

package/dist/timer/timer.presentation.js

@@ -1,6 +1,6 @@
 import { formatTime, msToTime } from "./timer.state.js";
 import { timer as timer$1 } from "./timer.machine.js";
-import { ariaHidden, defineComponent, isRecord, liveRegion } from "@spinjs/runtime";
+import { ariaHidden, defineComponent, isRecord, liveRegion } from "@spinjs/components/runtime";
 // src/timer/timer.presentation.ts
 const timeOf = (context) => msToTime(context.currentMs);
 /** A countdown runs from full to empty, a stopwatch from empty to full. A

package/dist/timer/timer.state.d.ts

@@ -25,5 +25,4 @@ export declare function validateTimer(startMs: number | undefined, targetMs: num
 export declare function initial(args: TimerArgs, authored: (name: string) => boolean): TimerContext;
 export declare function msToTime(ms: number): Time;
 export declare function formatTime(time: Time): Time<string>;
-export declare const effectiveTarget: (ctx: TimerContext) => number | null;
-//# sourceMappingURL=timer.state.d.ts.map
+export declare const effectiveTarget: (ctx: TimerContext) => number | null;

package/dist/timer/timer.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/timer/timer.state.ts
 function parseMs(raw) {
 	if (typeof raw === "number") return Number.isFinite(raw) ? raw : void 0;

package/dist/timer/timer.transitions.d.ts

@@ -1,11 +1,10 @@
 import { TimerContext } from "./timer.state.js";
 import { TimerEvents } from "./timer.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type TimerAssign<K extends keyof TimerEvents = keyof TimerEvents> = AssignFor<TimerContext, TimerEvents, K>;
 export declare const resetTime: TimerAssign<"RESTART" | "RESET">;
 export declare const restartChanged: GuardFor<TimerContext, TimerEvents, "RESTART">;
 export declare const setCurrentMs: TimerAssign<"CURRENT_MS.SET">;
 export declare const isComplete: GuardFor<TimerContext, TimerEvents>;
 export declare const tick: TimerAssign<"TICK">;
-export {};
-//# sourceMappingURL=timer.transitions.d.ts.map
+export {};

package/dist/toast/examples/action.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
       <button
        class="secondary s-sm mt-2"

package/dist/toast/examples/action.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/action.html
+var action_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Update ready\"\n  data-description=\"Restart to apply.\" data-type=\"info\" data-duration=\"8000\"\n  data-action=\"Restart\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n      <button\n       class=\"secondary s-sm mt-2\"\n       {...machine.getActionTriggerProps(row)}>{row.action}</button>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { action_default as default };
+
+//# sourceMappingURL=action.html.js.map

package/dist/toast/examples/basic.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

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

@@ -0,0 +1,5 @@
+// src/toast/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Saved\"\n  data-description=\"Your changes are live.\" data-type=\"success\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/toast/examples/bottomcenter.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/bottomcenter.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/bottomcenter.html
+var bottomcenter_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Bottom center\"\n  data-description=\"Toast from bottom center.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { bottomcenter_default as default };
+
+//# sourceMappingURL=bottomcenter.html.js.map

package/dist/toast/examples/bottomleft.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/bottomleft.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/bottomleft.html
+var bottomleft_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom-start\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Bottom left\"\n  data-description=\"Toast from bottom left.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-0 mr-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { bottomleft_default as default };
+
+//# sourceMappingURL=bottomleft.html.js.map

package/dist/toast/examples/bottomright.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/bottomright.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/bottomright.html
+var bottomright_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom-end\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Bottom right\"\n  data-description=\"Toast from bottom right.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-0 ml-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { bottomright_default as default };
+
+//# sourceMappingURL=bottomright.html.js.map

package/dist/toast/examples/duration.html

@@ -19,11 +19,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/duration.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/duration.html
+var duration_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Slow news\" data-description=\"Stays a while.\"\n  data-type=\"info\" data-duration=\"15000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { duration_default as default };
+
+//# sourceMappingURL=duration.html.js.map

package/dist/toast/examples/promise.html

@@ -17,16 +17,16 @@ const machine = toast({
    {...machine.getToastProps(row)}
   >
    <div
-    class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg transition-colors duration-fast ease-decelerate">
+    class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg transition-colors duration-fast ease-decelerate">
     <span
      aria-hidden="true"
      data-type={row.type}
-     class="mt-1 shrink-0 text-sm text-text-muted transition-colors duration-fast ease-decelerate"
-    ><span class="i-lucide-circle text-[0.4rem]" aria-hidden="true"></span></span>
+     class="mt-1 shrink-0 text-muted transition-colors duration-fast ease-decelerate"
+    ><span class="i-lucide-circle type-caption" aria-hidden="true"></span></span>
     <div class="min-w-0 flex-1">
-     <div class="text-sm font-medium text-text"
+     <div class="type-label"
       {...machine.getTitleProps(row)}>{row.title}</div>
-     <div class="text-sm text-text-muted"
+     <div class="type-body text-muted"
       {...machine.getDescriptionProps(row)}>{row.description}</div>
      <button
       class="secondary s-sm mt-2"
@@ -36,7 +36,7 @@ const machine = toast({
     <button
      class="ghost icon s-sm"
      {...machine.getCloseTriggerProps(row)}
-    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
    </div>
   </div>
  </template>

package/dist/toast/examples/promise.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/promise.html
+var promise_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" class=\"secondary s-sm\">Run toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n <template for={machine.getToasts()} as={row} key={row.id}>\n  <div\n   class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n   {...machine.getToastProps(row)}\n  >\n   <div\n    class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg transition-colors duration-fast ease-decelerate\">\n    <span\n     aria-hidden=\"true\"\n     data-type={row.type}\n     class=\"mt-1 shrink-0 text-muted transition-colors duration-fast ease-decelerate\"\n    ><span class=\"i-lucide-circle type-caption\" aria-hidden=\"true\"></span></span>\n    <div class=\"min-w-0 flex-1\">\n     <div class=\"type-label\"\n      {...machine.getTitleProps(row)}>{row.title}</div>\n     <div class=\"type-body text-muted\"\n      {...machine.getDescriptionProps(row)}>{row.description}</div>\n     <button\n      class=\"secondary s-sm mt-2\"\n      {...machine.getActionTriggerProps(row)}\n     >{row.action}</button>\n    </div>\n    <button\n     class=\"ghost icon s-sm\"\n     {...machine.getCloseTriggerProps(row)}\n    ><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n   </div>\n  </div>\n </template>\n </div>\n</div>\n";
+export { promise_default as default };
+
+//# sourceMappingURL=promise.html.js.map

package/dist/toast/examples/topcenter.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/topcenter.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/topcenter.html
+var topcenter_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"top\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Top center\"\n  data-description=\"Toast from top center.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute top-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { topcenter_default as default };
+
+//# sourceMappingURL=topcenter.html.js.map

package/dist/toast/examples/topleft.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/topleft.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/topleft.html
+var topleft_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"top-start\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Top left\"\n  data-description=\"Toast from top left.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute top-0 inset-x-0 mr-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { topleft_default as default };
+
+//# sourceMappingURL=topleft.html.js.map

package/dist/toast/examples/topright.html

@@ -20,11 +20,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/topright.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/topright.html
+var topright_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"top-end\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3\">\n <button data-fire=\"\" data-title=\"Top right\"\n  data-description=\"Toast from top right.\" data-type=\"info\"\n  data-duration=\"5000\" data-action=\"\"\n  class=\"s-sm\">Show toast</button>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute top-0 inset-x-0 ml-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { topright_default as default };
+
+//# sourceMappingURL=topright.html.js.map

package/dist/toast/examples/types.html

@@ -30,11 +30,11 @@ const machine = toast({
     {...machine.getToastProps(row)}
    >
     <div
-     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     class="flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg">
      <div class="min-w-0 flex-1">
-      <div class="text-sm font-medium text-text"
+      <div class="type-label"
        {...machine.getTitleProps(row)}>{row.title}</div>
-      <div class="text-sm text-text-muted"
+      <div class="type-body text-muted"
        {...machine.getDescriptionProps(row)}>{row.description}</div>
      </div>
      <button

package/dist/toast/examples/types.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/types.html
+var types_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<div class=\"mx-auto flex w-full max-w-[20rem] flex-col items-center gap-2\">\n <div class=\"flex flex-wrap justify-center gap-2\">\n  <button data-fire=\"\" data-title=\"Done\" data-description=\"It worked.\"\n   data-type=\"success\" data-duration=\"5000\" data-action=\"\"\n   class=\"secondary s-sm\">Success</button>\n  <button data-fire=\"\" data-title=\"Careful\" data-description=\"Check this.\"\n   data-type=\"warning\" data-duration=\"5000\" data-action=\"\"\n   class=\"secondary s-sm\">Warning</button>\n  <button data-fire=\"\" data-title=\"Failed\" data-description=\"Try again.\"\n   data-type=\"error\" data-duration=\"5000\" data-action=\"\"\n   class=\"secondary s-sm\">Error</button>\n  <button data-fire=\"\" data-title=\"FYI\" data-description=\"Heads up.\"\n   data-type=\"info\" data-duration=\"5000\" data-action=\"\"\n   class=\"secondary s-sm\">Info</button>\n </div>\n <div\n  class=\"pointer-events-none fixed z-toast flex w-full flex-col\"\n  {...machine.getGroupProps()}\n >\n  <template for={machine.getToasts()} as={row} key={row.id}>\n   <div\n    class=\"pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate\"\n    {...machine.getToastProps(row)}\n   >\n    <div\n     class=\"flex items-start gap-3 rounded-lg border bg-surface-raised p-4 shadow-lg\">\n     <div class=\"min-w-0 flex-1\">\n      <div class=\"type-label\"\n       {...machine.getTitleProps(row)}>{row.title}</div>\n      <div class=\"type-body text-muted\"\n       {...machine.getDescriptionProps(row)}>{row.description}</div>\n     </div>\n     <button\n      class=\"ghost icon s-sm\"\n      {...machine.getCloseTriggerProps(row)}>X</button>\n    </div>\n   </div>\n  </template>\n </div>\n</div>\n";
+export { types_default as default };
+
+//# sourceMappingURL=types.html.js.map

package/dist/toast/examples/updatable.html.js

@@ -0,0 +1,5 @@
+// src/toast/examples/updatable.html
+var updatable_default = "<script lang=\"ts\">\nimport { toast } from \"../toast.presentation.ts\";\n\nconst machine = toast({\n placement: \"bottom\",\n});\n<\/script>\n<include file=\"./promise.html\" />\n";
+export { updatable_default as default };
+
+//# sourceMappingURL=updatable.html.js.map

package/dist/toast/toast.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export type ToastType = "info" | "success" | "warning" | "error" | "loading";
 export interface ToastEvents {
   "TOAST.CREATE": {
@@ -56,5 +56,4 @@ export interface ToastEvents {
   "PAGE.IDLE": {};
   "PAGE.ACTIVE": {};
 }
-export type ToastEvent = EventUnion<ToastEvents>;
-//# sourceMappingURL=toast.events.d.ts.map
+export type ToastEvent = EventUnion<ToastEvents>;

package/dist/toast/toast.machine.d.ts

@@ -1,6 +1,6 @@
-import { ToastEvent, ToastEvents } from "./toast.events.js";
+/** Toast machine: the queue, each toast's lifecycle, and the stacking mode. */
 import { ToastArgs, ToastContext, ToastEntry, ToastState, ToastStatus } from "./toast.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { ToastEvent, ToastEvents } from "./toast.events.js";
+import { Machine } from "@spinjs/components/fsm";
 export declare function toast(args?: ToastArgs, authored?: (name: string) => boolean): Machine<ToastContext, ToastEvents, ToastState>;
-export type { ToastArgs, ToastContext, ToastEntry, ToastEvent, ToastEvents, ToastStatus };
-//# sourceMappingURL=toast.machine.d.ts.map
+export type { ToastArgs, ToastContext, ToastEntry, ToastEvent, ToastEvents, ToastStatus };

package/dist/toast/toast.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./toast.state.js";
 import { createToast, dismissAll, dismissToast, enterFocus, enterPointer, heightSet, leaveFocus, leavePointer, pauseToasts, removeToast, resumeToasts, shouldCollapse, toastMounted, toastPause, toastResume, updateToast } from "./toast.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/toast/toast.machine.ts
 /** Toast machine: the queue, each toast's lifecycle, and the stacking mode. */
 const QUEUE_EVENTS = {

package/dist/toast/toast.presentation.d.ts

@@ -1,6 +1,6 @@
-import { ToastEvents, ToastType } from "./toast.events.js";
 import { ToastArgs, ToastContext, ToastEntry, ToastState, ToastStatus } from "./toast.state.js";
-import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+import { ToastEvents, ToastType } from "./toast.events.js";
+import { ApiOf, SlotViewFor } from "@spinjs/components/runtime";
 /**
  * Toast definition: the DOM contract as data. The queue is one context, so
  * the whole contract is one api: `getGroupProps` for the region,
@@ -40,7 +40,7 @@ type SlotLike<R> = SlotViewFor<R, ToastContext, ToastEvents, ToastState>;
 type Ctx = ToastContext;
 declare const def: {
   name: string;
-  machine: (props: ToastArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ToastContext, ToastEvents, ToastState>;
+  machine: (props: ToastArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<ToastContext, ToastEvents, ToastState>;
   establish: (props: Record<string, unknown>) => {
     type: string;
   }[];
@@ -279,6 +279,5 @@ declare const def: {
   };
 };
 export type ToastApi = ApiOf<typeof def>;
-export declare const toast: import("@spinjs/runtime").DefinedComponent<ToastApi, ToastArgs>;
-export {};
-//# sourceMappingURL=toast.presentation.d.ts.map
+export declare const toast: import("@spinjs/components/runtime").DefinedComponent<ToastApi, ToastArgs>;
+export {};

package/dist/toast/toast.presentation.js

@@ -1,5 +1,5 @@
 import { toast as toast$1 } from "./toast.machine.js";
-import { ariaDescribedBy, ariaLabelledBy, dataAttr, defineComponent, liveRegion } from "@spinjs/runtime";
+import { ariaDescribedBy, ariaLabelledBy, dataAttr, defineComponent, liveRegion } from "@spinjs/components/runtime";
 // src/toast/toast.presentation.ts
 const isToastType = (raw) => raw === "info" || raw === "success" || raw === "warning" || raw === "error" || raw === "loading";
 /** The toast's own record test: it accepts an array, which the

package/dist/toast/toast.state.d.ts

@@ -61,5 +61,4 @@ export declare const amend: (toasts: readonly ToastEntry[], id: string, make: (e
 export declare const resumeEntry: (entry: ToastEntry) => ToastEntry;
 declare const asCountMachine: (raw: unknown, fallback: number) => number;
 export declare function initial(args: ToastArgs, authored: (name: string) => boolean): ToastContext;
-export { type ToastEvent, type ToastEvents, type ToastType, asCountMachine };
-//# sourceMappingURL=toast.state.d.ts.map
+export { type ToastEvent, type ToastEvents, type ToastType, asCountMachine };

package/dist/toast/toast.state.js

@@ -1,11 +1,11 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/toast/toast.state.ts
 const DURATIONS = {
 	info: 5e3,
 	error: 5e3,
 	success: 2e3,
 	warning: 5e3,
-	loading: Infinity
+	loading: 1e400
 };
 const PRIORITIES = {
 	error: [1, 2],
@@ -16,7 +16,7 @@ const PRIORITIES = {
 };
 const durationFor = (type, authored) => authored > 0 && type !== "loading" ? authored : DURATIONS[type];
 const priorityFor = (type, authored, hasAction) => authored > 0 ? authored : PRIORITIES[type][hasAction ? 0 : 1];
-const forever = (entry) => entry.type === "loading" || entry.remaining === Infinity;
+const forever = (entry) => entry.type === "loading" || entry.remaining === 1e400;
 const projectedCount = (ctx, e) => {
 	if (e.type === "TOAST.CREATE") return ctx.toasts.length + 1;
 	if (e.type === "TOAST.REMOVE" || e.type === "TIMER.REMOVED") return ctx.toasts.length - 1;

package/dist/toast/toast.transitions.d.ts

@@ -1,6 +1,6 @@
-import { ToastEvents } from "./toast.events.js";
 import { ToastContext } from "./toast.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { ToastEvents } from "./toast.events.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type ToastAssign<K extends keyof ToastEvents = keyof ToastEvents> = AssignFor<ToastContext, ToastEvents, K>;
 export declare const createToast: ToastAssign<"TOAST.CREATE">;
 export declare const updateToast: ToastAssign<"TOAST.CREATE" | "TOAST.UPDATE">;
@@ -20,5 +20,4 @@ export declare const toastPause: ToastAssign<"TOAST.PAUSE">;
 export declare const toastResume: ToastAssign<"TOAST.RESUME">;
 export declare const pageIdle: () => Partial<ToastContext>;
 export declare const pageActive: () => Partial<ToastContext>;
-export {};
-//# sourceMappingURL=toast.transitions.d.ts.map
+export {};

package/dist/toc/examples/basic.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { toc } from "../toc.presentation.js";
+
+const machine = toc({
+  items: [
+    { value: "overview", label: "Overview", depth: 2 },
+    { value: "installation", label: "Installation", depth: 2 },
+    { value: "vite-plugin", label: "Vite plugin", depth: 3 },
+    { value: "verification", label: "Verification", depth: 2 },
+  ],
+  defaultActiveIds: ["overview"],
+});
+</script>
+
+<div class="mx-auto w-full max-w-[16rem]" {...machine.getRootProps()}>
+  <nav class="flex flex-col gap-2" {...machine.getNavProps()}>
+    <h2 class="uppercase text-muted" {...machine.getTitleProps()}>
+      On this page
+    </h2>
+    <ul class="list-none border-s border" {...machine.getListProps()}>
+      <template for={machine.items} as={row} key={row.value}>
+        <li {...machine.getItemProps(row)}>
+          <a
+            class="bare block border-s-2 py-1 ps-3 transition-colors duration-fast data-[deep]:ps-6 aria-[current=location]:border-primary aria-[current=location]:text-primary"
+            {...machine.getLinkProps(row)}
+          >{row.label}</a>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</div>

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

@@ -0,0 +1,5 @@
+// src/toc/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { toc } from \"../toc.presentation.ts\";\n\nconst machine = toc({\n  items: [\n    { value: \"overview\", label: \"Overview\", depth: 2 },\n    { value: \"installation\", label: \"Installation\", depth: 2 },\n    { value: \"vite-plugin\", label: \"Vite plugin\", depth: 3 },\n    { value: \"verification\", label: \"Verification\", depth: 2 },\n  ],\n  defaultActiveIds: [\"overview\"],\n});\n<\/script>\n\n<div class=\"mx-auto w-full max-w-[16rem]\" {...machine.getRootProps()}>\n  <nav class=\"flex flex-col gap-2\" {...machine.getNavProps()}>\n    <h2 class=\"uppercase text-muted\" {...machine.getTitleProps()}>\n      On this page\n    </h2>\n    <ul class=\"list-none border-s border\" {...machine.getListProps()}>\n      <template for={machine.items} as={row} key={row.value}>\n        <li {...machine.getItemProps(row)}>\n          <a\n            class=\"bare block border-s-2 py-1 ps-3 transition-colors duration-fast data-[deep]:ps-6 aria-[current=location]:border-primary aria-[current=location]:text-primary\"\n            {...machine.getLinkProps(row)}\n          >{row.label}</a>\n        </li>\n      </template>\n    </ul>\n  </nav>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/toc/toc.events.d.ts

@@ -0,0 +1,19 @@
+import { TocItem, TocRow } from "./toc.state.js";
+import { EventUnion } from "@spinjs/components/fsm";
+export interface TocEvents {
+  "ITEMS.SET": {
+    items: readonly TocRow[];
+  };
+  "ACTIVE.SET": {
+    activeIds: readonly string[];
+  };
+  "ITEM.SELECT": {
+    value: string;
+  };
+}
+export type TocEvent = EventUnion<TocEvents>;
+export interface TocActiveChange {
+  readonly activeIds: readonly string[];
+  readonly activeItems: readonly TocItem[];
+  readonly value: string;
+}

package/dist/toc/toc.events.js

@@ -0,0 +1 @@
+export {};

package/dist/toc/toc.machine.d.ts

@@ -0,0 +1,5 @@
+/** Table of contents machine: active heading tracking and navigation. */
+import { TocArgs, TocContext, TocState } from "./toc.state.js";
+import { TocEvents } from "./toc.events.js";
+import { Machine } from "@spinjs/components/fsm";
+export declare function toc(args: TocArgs | undefined, authored: (name: string) => boolean): Machine<TocContext, TocEvents, TocState>;