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

package/dist/date-picker/date-picker.presentation.d.ts

@@ -1,6 +1,6 @@
 import { DatePickerArgs, DatePickerContext, DatePickerState, DatePickerValue, DatePickerView } from "./date-picker.state.js";
 import { DatePickerEvents, DatePickerValueChange } from "./date-picker.events.js";
-import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor } from "@spinjs/components/runtime";
 /**
  * One grid cell. `value` is the day it names in every view — a month cell
  * is that month's first day, a year cell January first — so the machine's
@@ -22,12 +22,12 @@ type SlotLike<R> = SlotViewFor<R, DatePickerContext, DatePickerEvents, DatePicke
 type IdFn = (part: string, slot?: unknown) => string;
 declare const def: {
   name: string;
-  machine: (args: DatePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<DatePickerContext, DatePickerEvents, DatePickerState>;
+  machine: (args: DatePickerArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<DatePickerContext, DatePickerEvents, DatePickerState>;
   establish: (raw: Record<string, unknown>, authored: (name: string) => boolean) => {
     type: string;
   }[];
   settled: ({ before, after, root }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: DatePickerContext;
       readonly state: DatePickerState;
@@ -41,11 +41,11 @@ 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: {
     trigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         onClick: () => void;
         "data-state": string;
         id: string;
@@ -53,7 +53,7 @@ declare const def: {
       };
     };
     content: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
         role: string;
         "use:date-picker-focus": {
@@ -69,7 +69,7 @@ declare const def: {
       };
     };
     grid: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         "data-view": DatePickerView;
         class: string;
         onPointerLeave: () => void;
@@ -79,13 +79,13 @@ declare const def: {
       };
     };
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
       };
     };
     prevTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
         "aria-label": string;
         onClick: () => void;
@@ -93,7 +93,7 @@ declare const def: {
     };
     nextTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
         "aria-label": string;
         onClick: () => void;
@@ -101,7 +101,7 @@ declare const def: {
     };
     viewControl: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
         "data-view": DatePickerView;
         onClick: () => void;
@@ -109,7 +109,7 @@ declare const def: {
     };
     clearTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, DatePickerContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<DatePickerEvents>, DatePickerState>) => {
         id: string;
         "aria-label": string;
         hidden: boolean;
@@ -251,6 +251,5 @@ declare const def: {
   };
 };
 export type DatePickerApi = ApiOf<typeof def>;
-export declare const datePicker: import("@spinjs/runtime").DefinedComponent<DatePickerApi, DatePickerArgs>;
-export type { DatePickerValue, DatePickerValueChange, DatePickerView };
-//# sourceMappingURL=date-picker.presentation.d.ts.map
+export declare const datePicker: import("@spinjs/components/runtime").DefinedComponent<DatePickerApi, DatePickerArgs>;
+export type { DatePickerValue, DatePickerValueChange, DatePickerView };

package/dist/date-picker/date-picker.presentation.js

@@ -1,6 +1,6 @@
-import { dayAsString, daysInMonth, parseDay, valueAsAllStrings } from "./date-picker.state.js";
 import { datePicker as datePicker$1 } from "./date-picker.machine.js";
-import { ariaCurrent, ariaInvalid, ariaLabelledBy, dataAttr, defineComponent, disclosureTrigger, isRecord, optionRow } from "@spinjs/runtime";
+import { dayAsString, daysInMonth, parseDay, valueAsAllStrings } from "./date-picker.state.js";
+import { ariaCurrent, ariaInvalid, ariaLabelledBy, dataAttr, defineComponent, disclosureTrigger, isRecord, optionRow } from "@spinjs/components/runtime";
 // src/date-picker/date-picker.presentation.ts
 const DAY_MS = 864e5;
 const iso = (value) => dayAsString(value);

package/dist/date-picker/date-picker.state.d.ts

@@ -62,5 +62,4 @@ export declare function valueAsAllStrings(value: readonly DatePickerValue[]): st
 export declare const sameDay: (a: DatePickerValue, b: DatePickerValue) => boolean;
 export declare function clampDay(value: DatePickerValue, min: string | null, max: string | null): DatePickerValue;
 export declare const inBounds: (value: DatePickerValue, min: string | null, max: string | null) => boolean;
-export declare function normalizeDays(days: readonly DatePickerValue[], min: string | null, max: string | null): DatePickerValue[];
-//# sourceMappingURL=date-picker.state.d.ts.map
+export declare function normalizeDays(days: readonly DatePickerValue[], min: string | null, max: string | null): DatePickerValue[];

package/dist/date-picker/date-picker.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin, isRecord } from "@spinjs/runtime";
+import { defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/date-picker/date-picker.state.ts
 const MONTH_LENGTHS = [
 	31,

package/dist/date-picker/date-picker.transitions.d.ts

@@ -1,6 +1,6 @@
-import { DatePickerContext } from "./date-picker.state.js";
 import { DatePickerEvents } from "./date-picker.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { DatePickerContext } from "./date-picker.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type DatePickerAssign<K extends keyof DatePickerEvents = keyof DatePickerEvents> = AssignFor<DatePickerContext, DatePickerEvents, K>;
 export declare const resetView: DatePickerAssign<"OPEN">;
 export declare const drillIntoView: DatePickerAssign<"CELL.CLICK" | "TABLE.ENTER">;
@@ -19,5 +19,4 @@ export declare const isAboveDayView: GuardFor<DatePickerContext, DatePickerEvent
 export declare const isRangePicker: GuardFor<DatePickerContext, DatePickerEvents>;
 export declare const isMultiPicker: GuardFor<DatePickerContext, DatePickerEvents>;
 export declare const isSelfClosingSelection: GuardFor<DatePickerContext, DatePickerEvents>;
-export {};
-//# sourceMappingURL=date-picker.transitions.d.ts.map
+export {};

package/dist/date-picker/examples/appointment.html

@@ -4,7 +4,7 @@
   const machine = datePicker({});
 </script>
 <div class="relative w-full max-w-[20rem]">
-  <label class="block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate" for={machine.getTriggerProps()["id"]}>Date</label>
+  <label class="block transition-opacity duration-fast ease-decelerate" for={machine.getTriggerProps()["id"]}>Date</label>
 
   <button class={["secondary s-sm w-full items-center justify-between gap-2", { "border-primary": machine.isOpen }]} {...machine.getTriggerProps()}>
     <span class="flex min-w-0 items-center gap-1">
@@ -13,14 +13,14 @@
         <span class="truncate">{row.text}</span>
       </template>
     </span>
-    <span class={["i-lucide-chevron-down shrink-0 text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]} aria-hidden="true"></span>
+    <span class={["i-lucide-chevron-down shrink-0 type-caption transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]} aria-hidden="true"></span>
   </button>
 
   <div class={["absolute left-0 top-full z-dropdown mt-1 w-full origin-top-left transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen }]} {...machine.getContentProps()}>
-    <div class="rounded-lg border border-solid border-border bg-surface-raised p-3 shadow-lg">
+    <div class="rounded-lg border bg-surface-raised p-3 shadow-lg">
       <div class="mb-2 flex items-center justify-between gap-2">
         <button class="ghost icon s-sm" {...machine.getPrevTriggerProps()}>
-          <span class="i-lucide-chevron-left text-sm" aria-hidden="true"></span>
+          <span class="i-lucide-chevron-left type-code" aria-hidden="true"></span>
         </button>
         <button class="ghost s-sm" {...machine.getViewControlProps()}>
           <template for={machine.getViewTextRows()} as={row} key={row.value}>
@@ -28,16 +28,16 @@
           </template>
         </button>
         <button class="ghost icon s-sm" {...machine.getNextTriggerProps()}>
-          <span class="i-lucide-chevron-right text-sm" aria-hidden="true"></span>
+          <span class="i-lucide-chevron-right type-code" aria-hidden="true"></span>
         </button>
       </div>
 
       <div {...machine.getGridProps()}>
         <template for={machine.getWeekdayLabels()} as={day_}>
-          <span class="text-center text-xs font-medium text-text-muted">{day_}</span>
+          <span class="text-center type-caption-emphasized text-muted">{day_}</span>
         </template>
         <template for={machine.getCells()} as={cell} key={cell.key}>
-          <button class="bare h-7 rounded-sm text-xs tabular-nums text-text transition-colors duration-fast ease-decelerate hover:bg-surface focus-visible:outline-none data-[selected]:bg-selected data-[selected]:font-semibold data-[selected]:text-on-selected data-[in-range]:bg-surface-sunken aria-[disabled=true]:pointer-events-none aria-[disabled=true]:opacity-40 data-[outside]:opacity-60" {...machine.getCellProps(cell)}>{machine.getCellProps(cell).text}</button>
+          <button class="bare h-7 rounded-sm tabular-nums transition-colors duration-fast ease-decelerate hover:bg-surface focus-visible:outline-none data-[selected]:bg-selected data-[selected]:text-on-selected data-[in-range]:bg-surface-sunken aria-[disabled=true]:pointer-events-none aria-[disabled=true]:opacity-40 data-[outside]:opacity-60" {...machine.getCellProps(cell)}>{machine.getCellProps(cell).text}</button>
         </template>
       </div>
 

package/dist/date-picker/examples/appointment.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/appointment.html
+var appointment_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({});\n<\/script>\n<div class=\"relative w-full max-w-[20rem]\">\n  <label class=\"block transition-opacity duration-fast ease-decelerate\" for={machine.getTriggerProps()[\"id\"]}>Date</label>\n\n  <button class={[\"secondary s-sm w-full items-center justify-between gap-2\", { \"border-primary\": machine.isOpen }]} {...machine.getTriggerProps()}>\n    <span class=\"flex min-w-0 items-center gap-1\">\n      <template for={machine.getValueTextRows()} as={row} key={row.value}>\n        <span show={!row.first} aria-hidden=\"true\">–</span>\n        <span class=\"truncate\">{row.text}</span>\n      </template>\n    </span>\n    <span class={[\"i-lucide-chevron-down shrink-0 type-caption transition-transform duration-fast ease-decelerate\", { \"rotate-180\": machine.isOpen }]} aria-hidden=\"true\"></span>\n  </button>\n\n  <div class={[\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top-left transition duration-fast ease-decelerate\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.isOpen }]} {...machine.getContentProps()}>\n    <div class=\"rounded-lg border bg-surface-raised p-3 shadow-lg\">\n      <div class=\"mb-2 flex items-center justify-between gap-2\">\n        <button class=\"ghost icon s-sm\" {...machine.getPrevTriggerProps()}>\n          <span class=\"i-lucide-chevron-left type-code\" aria-hidden=\"true\"></span>\n        </button>\n        <button class=\"ghost s-sm\" {...machine.getViewControlProps()}>\n          <template for={machine.getViewTextRows()} as={row} key={row.value}>\n            <span>{row.text}</span>\n          </template>\n        </button>\n        <button class=\"ghost icon s-sm\" {...machine.getNextTriggerProps()}>\n          <span class=\"i-lucide-chevron-right type-code\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n\n      <div {...machine.getGridProps()}>\n        <template for={machine.getWeekdayLabels()} as={day_}>\n          <span class=\"text-center type-caption-emphasized text-muted\">{day_}</span>\n        </template>\n        <template for={machine.getCells()} as={cell} key={cell.key}>\n          <button class=\"bare h-7 rounded-sm tabular-nums transition-colors duration-fast ease-decelerate hover:bg-surface focus-visible:outline-none data-[selected]:bg-selected data-[selected]:text-on-selected data-[in-range]:bg-surface-sunken aria-[disabled=true]:pointer-events-none aria-[disabled=true]:opacity-40 data-[outside]:opacity-60\" {...machine.getCellProps(cell)}>{machine.getCellProps(cell).text}</button>\n        </template>\n      </div>\n\n      <div class=\"mt-2 flex justify-end\">\n        <button class=\"ghost s-sm\" {...machine.getClearTriggerProps()}>Clear</button>\n      </div>\n    </div>\n  </div>\n</div>\n";
+export { appointment_default as default };
+
+//# sourceMappingURL=appointment.html.js.map

package/dist/date-picker/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({ value: [\"2026-05-15\"] });\n<\/script>\n<include file=\"./appointment.html\" />\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/date-picker/examples/multiple.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/multiple.html
+var multiple_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({ selectionMode: \"multiple\", value: [\"2026-05-10\", \"2026-05-14\", \"2026-05-18\"] });\n<\/script>\n<include file=\"./appointment.html\" />\n";
+export { multiple_default as default };
+
+//# sourceMappingURL=multiple.html.js.map

package/dist/date-picker/examples/pricing.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/pricing.html
+var pricing_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({ selectionMode: \"range\", value: [\"2026-05-12\", \"2026-05-15\"] });\n<\/script>\n<include file=\"./appointment.html\" />\n";
+export { pricing_default as default };
+
+//# sourceMappingURL=pricing.html.js.map

package/dist/date-picker/examples/range.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/range.html
+var range_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({ selectionMode: \"range\", value: [\"2026-05-10\", \"2026-05-16\"] });\n<\/script>\n<include file=\"./appointment.html\" />\n";
+export { range_default as default };
+
+//# sourceMappingURL=range.html.js.map

package/dist/date-picker/examples/unavailable.html.js

@@ -0,0 +1,5 @@
+// src/date-picker/examples/unavailable.html
+var unavailable_default = "<script lang=\"ts\">\n  import { datePicker } from \"../date-picker.presentation.ts\";\n\n  const machine = datePicker({ value: [\"2026-05-15\"], min: \"2026-05-05\", max: \"2026-05-25\" });\n<\/script>\n<include file=\"./appointment.html\" />\n";
+export { unavailable_default as default };
+
+//# sourceMappingURL=unavailable.html.js.map

package/dist/editable/editable.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface EditableEvents {
   "VALUE.SET": {
     value: string;
@@ -25,5 +25,4 @@ export type EditableEditChange = {
 };
 export type EditableValueChange = {
   readonly value: string;
-};
-//# sourceMappingURL=editable.events.d.ts.map
+};

package/dist/editable/editable.machine.d.ts

@@ -1,5 +1,4 @@
-import { EditableEvents } from "./editable.events.js";
 import { EditableArgs, EditableContext, EditableState } from "./editable.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function editable(args?: EditableArgs, authored?: (name: string) => boolean): Machine<EditableContext, EditableEvents, EditableState>;
-//# sourceMappingURL=editable.machine.d.ts.map
+import { EditableEvents } from "./editable.events.js";
+import { Machine } from "@spinjs/components/fsm";
+export declare function editable(args?: EditableArgs, authored?: (name: string) => boolean): Machine<EditableContext, EditableEvents, EditableState>;

package/dist/editable/editable.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./editable.state.js";
 import { controlledPreviewIsSubmit, isEditControlled, revertValue, setLastEvent, setPreviousValue } from "./editable.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/editable/editable.machine.ts
 function editable(args = {}, authored = () => false) {
 	return createMachine({

package/dist/editable/editable.presentation.d.ts

@@ -1,7 +1,7 @@
-import { EditableEvents } from "./editable.events.js";
 import { EditableArgs, EditableContext, EditableState } from "./editable.state.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
-import { InteractOutsideEvent } from "@spinjs/runtime/actions";
+import { EditableEvents } from "./editable.events.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+import { InteractOutsideEvent } from "@spinjs/components/actions";
 /**
  * Editable definition: the DOM contract as data. The machine owns the two
  * modes, the value, and the previous value; this file maps parts to
@@ -19,7 +19,7 @@ export interface EditableValueChange {
 type ScopeLike = ViewFor<EditableContext, EditableEvents, EditableState>;
 export declare const def: {
   name: string;
-  machine: (args: EditableArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<EditableContext, EditableEvents, EditableState>;
+  machine: (args: EditableArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<EditableContext, EditableEvents, EditableState>;
   start: (props: Record<string, unknown>) => "preview" | "edit";
   reconcile: ({ context, state, parsed, authored, send }: {
     readonly context: EditableContext;
@@ -273,6 +273,5 @@ export declare const def: {
   };
 };
 export type EditableApi = ApiOf<typeof def>;
-export declare const editable: import("@spinjs/runtime").DefinedComponent<EditableApi, EditableArgs>;
-export {};
-//# sourceMappingURL=editable.presentation.d.ts.map
+export declare const editable: import("@spinjs/components/runtime").DefinedComponent<EditableApi, EditableArgs>;
+export {};

package/dist/editable/editable.presentation.js

@@ -1,5 +1,5 @@
 import { editable as editable$1 } from "./editable.machine.js";
-import { ariaControls, ariaDisabled, ariaInvalid, ariaReadOnly, defineComponent } from "@spinjs/runtime";
+import { ariaControls, ariaDisabled, ariaInvalid, ariaReadOnly, defineComponent } from "@spinjs/components/runtime";
 // src/editable/editable.presentation.ts
 const TRANSLATIONS = {
 	input: "editable input",

package/dist/editable/editable.state.d.ts

@@ -50,5 +50,4 @@ export interface EditableArgs {
   onFocusOutside?: unknown;
   onEditChange?: unknown;
 }
-export declare function initial(args: EditableArgs | undefined, authored: (name: string) => boolean): EditableContext;
-//# sourceMappingURL=editable.state.d.ts.map
+export declare function initial(args: EditableArgs | undefined, authored: (name: string) => boolean): EditableContext;

package/dist/editable/editable.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/editable/editable.state.ts
 function initial(args = {}, authored) {
 	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;

package/dist/editable/editable.transitions.d.ts

@@ -1,11 +1,10 @@
-import { EditableEvents } from "./editable.events.js";
 import { EditableContext } from "./editable.state.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { EditableEvents } from "./editable.events.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type EditableAssign<K extends keyof EditableEvents = keyof EditableEvents> = AssignFor<EditableContext, EditableEvents, K>;
 export declare const setPreviousValue: EditableAssign;
 export declare const setLastEvent: EditableAssign<"CANCEL" | "SUBMIT">;
 export declare const revertValue: (ctx: EditableContext) => Partial<EditableContext>;
 export declare const isEditControlled: GuardFor<EditableContext, EditableEvents>;
 export declare const controlledPreviewIsSubmit: GuardFor<EditableContext, EditableEvents>;
-export {};
-//# sourceMappingURL=editable.transitions.d.ts.map
+export {};

package/dist/editable/examples/basic.html

@@ -7,21 +7,21 @@
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate"
+      class="transition-colors duration-fast ease-decelerate"
       {...machine.getLabelProps()}
     >Display name</label>
   </div>
 
   <div
-    class="relative rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate"
+    class="relative rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate"
     {...machine.getAreaProps()}
   >
     <span show={!machine.editing}
-      class="block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary"
+      class="block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary"
       {...machine.getPreviewProps()}
     >{machine.valueText}</span>
     <input show={machine.editing}
-      class="w-full bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted"
+      class="bare w-full px-2 py-1 transition-colors duration-fast ease-decelerate placeholder:text-muted"
       {...machine.getInputProps()}
     />
   </div>
@@ -30,14 +30,14 @@
     <button
       class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]}
       {...machine.getEditTriggerProps()}
-    ><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-pencil type-caption" aria-hidden="true"></span></button>
     <button
       class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]}
       {...machine.getSubmitTriggerProps()}
-    ><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
+    ><span class="i-lucide-check type-caption" aria-hidden="true"></span></button>
     <button
       class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]}
       {...machine.getCancelTriggerProps()}
-    ><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>

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

@@ -0,0 +1,5 @@
+// src/editable/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Ada Lovelace\" });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class=\"transition-colors duration-fast ease-decelerate\"\n      {...machine.getLabelProps()}\n    >Display name</label>\n  </div>\n\n  <div\n    class=\"relative rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate\"\n    {...machine.getAreaProps()}\n  >\n    <span show={!machine.editing}\n      class=\"block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary\"\n      {...machine.getPreviewProps()}\n    >{machine.valueText}</span>\n    <input show={machine.editing}\n      class=\"bare w-full px-2 py-1 transition-colors duration-fast ease-decelerate placeholder:text-muted\"\n      {...machine.getInputProps()}\n    />\n  </div>\n\n  <div class=\"mt-2 flex items-center gap-1\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"inline-flex\": !machine.editing, \"hidden\": machine.editing }]}\n      {...machine.getEditTriggerProps()}\n    ><span class=\"i-lucide-pencil type-caption\" aria-hidden=\"true\"></span></button>\n    <button\n      class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]}\n      {...machine.getSubmitTriggerProps()}\n    ><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></button>\n    <button\n      class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]}\n      {...machine.getCancelTriggerProps()}\n    ><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/editable/examples/doubleclick.html

@@ -6,14 +6,14 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center gap-2">
-    <span class="i-lucide-mouse-pointer-2 text-sm text-text-muted" aria-hidden="true"></span>
-    <label class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Double-click me to edit</label>
+    <span class="i-lucide-mouse-pointer-2 text-muted" aria-hidden="true"></span>
+    <label class="transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Double-click me to edit</label>
   </div>
 
-  <div class="relative rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
-    <span show={!machine.editing} class="block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="w-full bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted" {...machine.getInputProps()} />
+  <div class="relative rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare w-full px-2 py-1 transition-colors duration-fast ease-decelerate placeholder:text-muted" {...machine.getInputProps()} />
   </div>
 
-  <p class="text-xs text-text-muted">Double-click the text above to start editing</p>
+  <p class="text-muted">Double-click the text above to start editing</p>
 </div>

package/dist/editable/examples/doubleclick.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/doubleclick.html
+var doubleclick_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Double-click me to edit\", placeholder: \"Double-click to edit…\", activationMode: \"dblclick\" });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center gap-2\">\n    <span class=\"i-lucide-mouse-pointer-2 text-muted\" aria-hidden=\"true\"></span>\n    <label class=\"transition-colors duration-fast ease-decelerate\" {...machine.getLabelProps()}>Double-click me to edit</label>\n  </div>\n\n  <div class=\"relative rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate\" {...machine.getAreaProps()}>\n    <span show={!machine.editing} class=\"block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare w-full px-2 py-1 transition-colors duration-fast ease-decelerate placeholder:text-muted\" {...machine.getInputProps()} />\n  </div>\n\n  <p class=\"text-muted\">Double-click the text above to start editing</p>\n</div>\n";
+export { doubleclick_default as default };
+
+//# sourceMappingURL=doubleclick.html.js.map

package/dist/editable/examples/inline-edit.html

@@ -5,9 +5,9 @@
 </script>
 
 <div class="w-full max-w-md" {...machine.getRootProps()}>
-  <label class="mb-1 block text-xs font-medium text-text-muted" {...machine.getLabelProps()}>Inline Note</label>
-  <div class="relative rounded-md border border-solid border-border bg-surface-raised" {...machine.getAreaProps()}>
-    <span show={!machine.editing} class="block min-w-0 cursor-text px-3 py-1 text-sm text-text hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="w-full bg-transparent px-3 py-1 outline-none" {...machine.getInputProps()} />
+  <label class="mb-1 block" {...machine.getLabelProps()}>Inline Note</label>
+  <div class="relative rounded-md border bg-surface-raised" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block min-w-0 cursor-text px-3 py-1 type-body hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare w-full px-3 py-1" {...machine.getInputProps()} />
   </div>
 </div>

package/dist/editable/examples/inline-edit.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/inline-edit.html
+var inline_edit_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Click to edit inline note\" });\n<\/script>\n\n<div class=\"w-full max-w-md\" {...machine.getRootProps()}>\n  <label class=\"mb-1 block\" {...machine.getLabelProps()}>Inline Note</label>\n  <div class=\"relative rounded-md border bg-surface-raised\" {...machine.getAreaProps()}>\n    <span show={!machine.editing} class=\"block min-w-0 cursor-text px-3 py-1 type-body hover:text-primary\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare w-full px-3 py-1\" {...machine.getInputProps()} />\n  </div>\n</div>\n";
+export { inline_edit_default as default };
+
+//# sourceMappingURL=inline-edit.html.js.map

package/dist/editable/examples/profile-field.html

@@ -4,17 +4,17 @@
   const machine = editable({ value: "Principal Systems Architect" });
 </script>
 
-<div class="w-full max-w-md rounded-lg border border-solid border-border bg-surface-raised p-4" {...machine.getRootProps()}>
+<div class="w-full max-w-md rounded-lg border bg-surface-raised p-4" {...machine.getRootProps()}>
   <div class="flex items-center justify-between gap-2">
-    <label class="text-xs font-semibold uppercase tracking-wide text-text-muted" {...machine.getLabelProps()}>Role Title</label>
+    <label class="uppercase" {...machine.getLabelProps()}>Role Title</label>
     <div class="flex items-center gap-1" {...machine.getControlProps()}>
-      <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
-      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
-      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+      <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil type-caption" aria-hidden="true"></span></button>
+      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check type-caption" aria-hidden="true"></span></button>
+      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
     </div>
   </div>
   <div class="mt-1 rounded-md border border-solid border-transparent" {...machine.getAreaProps()}>
-    <span show={!machine.editing} class="block cursor-text py-1 font-medium text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="w-full bg-transparent py-1 font-medium" {...machine.getInputProps()} />
+    <span show={!machine.editing} class="block cursor-text py-1 type-body-emphasized" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare w-full py-1" {...machine.getInputProps()} />
   </div>
 </div>

package/dist/editable/examples/profile-field.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/profile-field.html
+var profile_field_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Principal Systems Architect\" });\n<\/script>\n\n<div class=\"w-full max-w-md rounded-lg border bg-surface-raised p-4\" {...machine.getRootProps()}>\n  <div class=\"flex items-center justify-between gap-2\">\n    <label class=\"uppercase\" {...machine.getLabelProps()}>Role Title</label>\n    <div class=\"flex items-center gap-1\" {...machine.getControlProps()}>\n      <button class={[\"secondary icon s-sm\", { \"inline-flex\": !machine.editing, \"hidden\": machine.editing }]} {...machine.getEditTriggerProps()}><span class=\"i-lucide-pencil type-caption\" aria-hidden=\"true\"></span></button>\n      <button class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></button>\n      <button class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n    </div>\n  </div>\n  <div class=\"mt-1 rounded-md border border-solid border-transparent\" {...machine.getAreaProps()}>\n    <span show={!machine.editing} class=\"block cursor-text py-1 type-body-emphasized\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare w-full py-1\" {...machine.getInputProps()} />\n  </div>\n</div>\n";
+export { profile_field_default as default };
+
+//# sourceMappingURL=profile-field.html.js.map

package/dist/editable/examples/resize.html

@@ -6,14 +6,14 @@
 
 <div class="w-fit max-w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center gap-2">
-    <span class="i-lucide-align-left text-sm text-text-muted" aria-hidden="true"></span>
-    <label class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Short text</label>
+    <span class="i-lucide-align-left text-muted" aria-hidden="true"></span>
+    <label class="transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Short text</label>
   </div>
 
-  <div class="relative grid rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
-    <span class={["col-start-1 row-start-1 block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary", { "invisible": machine.editing }]} {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="bare col-start-1 row-start-1 min-w-0 bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted" {...machine.getInputProps()} />
+  <div class="relative grid rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
+    <span class={["col-start-1 row-start-1 block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary", { "invisible": machine.editing }]} {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare col-start-1 row-start-1 min-w-0 bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-muted" {...machine.getInputProps()} />
   </div>
 
-  <p class="text-xs text-text-muted">Click to edit • The field grows as you type</p>
+  <p class="text-muted">Click to edit • The field grows as you type</p>
 </div>

package/dist/editable/examples/resize.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/resize.html
+var resize_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Short text\", placeholder: \"Type a longer message…\", autoResize: true });\n<\/script>\n\n<div class=\"w-fit max-w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center gap-2\">\n    <span class=\"i-lucide-align-left text-muted\" aria-hidden=\"true\"></span>\n    <label class=\"transition-colors duration-fast ease-decelerate\" {...machine.getLabelProps()}>Short text</label>\n  </div>\n\n  <div class=\"relative grid rounded-md border bg-surface-raised transition-shadow duration-fast ease-decelerate\" {...machine.getAreaProps()}>\n    <span class={[\"col-start-1 row-start-1 block min-w-0 cursor-text px-2 py-1 type-body transition-colors duration-fast ease-decelerate hover:text-primary\", { \"invisible\": machine.editing }]} {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare col-start-1 row-start-1 min-w-0 bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-muted\" {...machine.getInputProps()} />\n  </div>\n\n  <p class=\"text-muted\">Click to edit • The field grows as you type</p>\n</div>\n";
+export { resize_default as default };
+
+//# sourceMappingURL=resize.html.js.map

package/dist/editable/examples/task-item.html

@@ -4,16 +4,16 @@
   const machine = editable({ value: "Finalize statechart transition audit" });
 </script>
 
-<div class="flex w-full max-w-md items-center gap-3 rounded-lg border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getRootProps()}>
-  <span class="i-lucide-check-circle-2 shrink-0 text-sm text-primary" aria-hidden="true"></span>
+<div class="flex w-full max-w-md items-center gap-3 rounded-lg border bg-surface-raised px-3 py-2" {...machine.getRootProps()}>
+  <span class="i-lucide-check-circle-2 shrink-0 text-primary" aria-hidden="true"></span>
   <span class="sr-only" {...machine.getLabelProps()}>Task</span>
   <div class="min-w-0 flex-1" {...machine.getAreaProps()}>
-    <span show={!machine.editing} class="block truncate cursor-text text-sm text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="w-full bg-transparent outline-none" {...machine.getInputProps()} />
+    <span show={!machine.editing} class="block truncate cursor-text type-body" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare w-full" {...machine.getInputProps()} />
   </div>
   <div class="flex shrink-0 items-center gap-1" {...machine.getControlProps()}>
-    <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
-    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
-    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil type-caption" aria-hidden="true"></span></button>
+    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check type-caption" aria-hidden="true"></span></button>
+    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
   </div>
 </div>

package/dist/editable/examples/task-item.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/task-item.html
+var task_item_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Finalize statechart transition audit\" });\n<\/script>\n\n<div class=\"flex w-full max-w-md items-center gap-3 rounded-lg border bg-surface-raised px-3 py-2\" {...machine.getRootProps()}>\n  <span class=\"i-lucide-check-circle-2 shrink-0 text-primary\" aria-hidden=\"true\"></span>\n  <span class=\"sr-only\" {...machine.getLabelProps()}>Task</span>\n  <div class=\"min-w-0 flex-1\" {...machine.getAreaProps()}>\n    <span show={!machine.editing} class=\"block truncate cursor-text type-body\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare w-full\" {...machine.getInputProps()} />\n  </div>\n  <div class=\"flex shrink-0 items-center gap-1\" {...machine.getControlProps()}>\n    <button class={[\"secondary icon s-sm\", { \"inline-flex\": !machine.editing, \"hidden\": machine.editing }]} {...machine.getEditTriggerProps()}><span class=\"i-lucide-pencil type-caption\" aria-hidden=\"true\"></span></button>\n    <button class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class=\"i-lucide-check type-caption\" aria-hidden=\"true\"></span></button>\n    <button class={[\"secondary icon s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n  </div>\n</div>\n";
+export { task_item_default as default };
+
+//# sourceMappingURL=task-item.html.js.map

package/dist/editable/examples/title-editor.html

@@ -6,8 +6,8 @@
 
 <div class="w-full max-w-md" {...machine.getRootProps()}>
   <span class="sr-only" {...machine.getLabelProps()}>Document title</span>
-  <div class="rounded-lg border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getAreaProps()}>
-    <span show={!machine.editing} class="block cursor-text text-lg font-semibold text-text hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
-    <input show={machine.editing} class="w-full bg-transparent text-lg font-semibold outline-none" {...machine.getInputProps()} />
+  <div class="rounded-lg border bg-surface-raised px-3 py-2" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block cursor-text type-heading hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare w-full" {...machine.getInputProps()} />
   </div>
 </div>

package/dist/editable/examples/title-editor.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/title-editor.html
+var title_editor_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Q4 Architecture Roadmap\" });\n<\/script>\n\n<div class=\"w-full max-w-md\" {...machine.getRootProps()}>\n  <span class=\"sr-only\" {...machine.getLabelProps()}>Document title</span>\n  <div class=\"rounded-lg border bg-surface-raised px-3 py-2\" {...machine.getAreaProps()}>\n    <span show={!machine.editing} class=\"block cursor-text type-heading hover:text-primary\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n    <input show={machine.editing} class=\"bare w-full\" {...machine.getInputProps()} />\n  </div>\n</div>\n";
+export { title_editor_default as default };
+
+//# sourceMappingURL=title-editor.html.js.map