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

package/dist/file-upload/examples/basic.html

@@ -6,23 +6,23 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
     {...machine.getDropzoneProps()}
   >
-    <span class="i-lucide-upload-cloud icon-lg text-text-muted" aria-hidden="true"></span>
-    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Drop files here or click to browse</span>
-    <span class="text-xs text-text-muted">Up to 5 files supported</span>
+    <span class="i-lucide-upload-cloud icon-lg text-muted" aria-hidden="true"></span>
+    <span class="type-label" {...machine.getLabelProps()}>Drop files here or click to browse</span>
+    <span class="type-caption text-muted">Up to 5 files supported</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
-        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate type-body" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({ multiple: true, maxFiles: 5 });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging, \"ring-2 ring-border-strong\": machine.focused, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-upload-cloud icon-lg text-muted\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Drop files here or click to browse</span>\n    <span class=\"type-caption text-muted\">Up to 5 files supported</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 flex flex-col gap-1\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-1\" {...machine.getItemProps(row)}>\n        <span class=\"min-w-0 flex-1 truncate type-body\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n\n  <div class=\"mt-1 flex justify-end\">\n    <button class=\"ghost s-sm\" {...machine.getClearTriggerProps()}>Clear</button>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/file-upload/examples/directory.html

@@ -6,23 +6,23 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
     {...machine.getDropzoneProps()}
   >
-    <span class="i-lucide-upload text-lg text-text-muted" aria-hidden="true"></span>
-    <span class="text-sm text-text" {...machine.getLabelProps()}>Upload directory</span>
-    <span class="text-xs text-text-muted">All files and subdirectories will be included</span>
+    <span class="i-lucide-upload text-muted" aria-hidden="true"></span>
+    <span class="type-label" {...machine.getLabelProps()}>Upload directory</span>
+    <span class="type-caption text-muted">All files and subdirectories will be included</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
-        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{machine.getItemPathText(row) ?? row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate type-body" {...machine.getItemNameProps(row)}>{machine.getItemPathText(row) ?? row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="shrink-0 ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/directory.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/directory.html
+var directory_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({maxFiles: 100, directory: true});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging, \"ring-2 ring-border-strong\": machine.focused, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-upload text-muted\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Upload directory</span>\n    <span class=\"type-caption text-muted\">All files and subdirectories will be included</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 flex flex-col gap-1\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-2 py-1\" {...machine.getItemProps(row)}>\n        <span class=\"min-w-0 flex-1 truncate type-body\" {...machine.getItemNameProps(row)}>{machine.getItemPathText(row) ?? row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"shrink-0 ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n\n  <div class=\"mt-1 flex justify-end\">\n    <button class=\"ghost s-sm\" {...machine.getClearTriggerProps()}>Clear</button>\n  </div>\n</div>\n";
+export { directory_default as default };
+
+//# sourceMappingURL=directory.html.js.map

package/dist/file-upload/examples/dragdrop.html

@@ -6,24 +6,24 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border bg-surface-raised px-6 py-8 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed bg-surface-raised px-6 py-8 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
     {...machine.getDropzoneProps()}
   >
     <span class="i-lucide-folder-up icon-lg text-primary" aria-hidden="true"></span>
-    <span class="text-sm font-semibold text-text" {...machine.getLabelProps()}>Drag and drop project archives</span>
-    <span class="text-xs text-text-muted">ZIP, TAR, or source bundles up to 10 files</span>
+    <span class="type-label" {...machine.getLabelProps()}>Drag and drop project archives</span>
+    <span class="type-caption text-muted">ZIP, TAR, or source bundles up to 10 files</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-3 flex flex-col gap-2" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface px-3 py-2" {...machine.getItemProps(row)}>
-        <span class="i-lucide-file-archive shrink-0 text-sm text-text-muted" aria-hidden="true"></span>
-        <span class="min-w-0 flex-1 truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface px-3 py-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-file-archive shrink-0 text-muted" aria-hidden="true"></span>
+        <span class="min-w-0 flex-1 truncate type-body-emphasized" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/dragdrop.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/dragdrop.html
+var dragdrop_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({ multiple: true, maxFiles: 10 });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed bg-surface-raised px-6 py-8 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface\": machine.dragging, \"ring-2 ring-border-strong\": machine.focused, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-folder-up icon-lg text-primary\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Drag and drop project archives</span>\n    <span class=\"type-caption text-muted\">ZIP, TAR, or source bundles up to 10 files</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-3 flex flex-col gap-2\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface px-3 py-2\" {...machine.getItemProps(row)}>\n        <span class=\"i-lucide-file-archive shrink-0 text-muted\" aria-hidden=\"true\"></span>\n        <span class=\"min-w-0 flex-1 truncate type-body-emphasized\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { dragdrop_default as default };
+
+//# sourceMappingURL=dragdrop.html.js.map

package/dist/file-upload/examples/files.html

@@ -12,26 +12,26 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-dashed border-border bg-surface px-4 py-3 transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
+    class={["flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-dashed bg-surface px-4 py-3 transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
     {...machine.getDropzoneProps()}
   >
     <div class="flex items-center gap-2">
-      <span class="i-lucide-paperclip text-sm text-text-muted" aria-hidden="true"></span>
-      <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Attached Documents</span>
+      <span class="i-lucide-paperclip text-muted" aria-hidden="true"></span>
+      <span class="type-label" {...machine.getLabelProps()}>Attached Documents</span>
     </div>
-    <span class="text-xs text-primary">Add files</span>
+    <span class="type-caption text-primary">Add files</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 flex flex-col gap-2" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getItemProps(row)}>
-        <span class="i-lucide-file-text shrink-0 text-sm text-primary" aria-hidden="true"></span>
-        <span class="min-w-0 flex-1 truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-file-text shrink-0 text-primary" aria-hidden="true"></span>
+        <span class="min-w-0 flex-1 truncate type-body-emphasized" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-trash-2 text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-trash-2" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/files.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/files.html
+var files_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({\n    multiple: true,\n    value: [\n      { name: \"architecture-spec.pdf\", size: 245760, type: \"application/pdf\" },\n      { name: \"tokens.json\", size: 18432, type: \"application/json\" },\n    ],\n  });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-dashed bg-surface px-4 py-3 transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging }]}\n    {...machine.getDropzoneProps()}\n  >\n    <div class=\"flex items-center gap-2\">\n      <span class=\"i-lucide-paperclip text-muted\" aria-hidden=\"true\"></span>\n      <span class=\"type-label\" {...machine.getLabelProps()}>Attached Documents</span>\n    </div>\n    <span class=\"type-caption text-primary\">Add files</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 flex flex-col gap-2\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-2\" {...machine.getItemProps(row)}>\n        <span class=\"i-lucide-file-text shrink-0 text-primary\" aria-hidden=\"true\"></span>\n        <span class=\"min-w-0 flex-1 truncate type-body-emphasized\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-trash-2\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { files_default as default };
+
+//# sourceMappingURL=files.html.js.map

package/dist/file-upload/examples/images.html

@@ -13,26 +13,26 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-5 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-5 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
     {...machine.getDropzoneProps()}
   >
     <span class="i-lucide-image-plus icon-lg text-primary" aria-hidden="true"></span>
-    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Upload gallery images</span>
-    <span class="text-xs text-text-muted">PNG, JPG, WEBP, or SVG</span>
+    <span class="type-label" {...machine.getLabelProps()}>Upload gallery images</span>
+    <span class="type-caption text-muted">PNG, JPG, WEBP, or SVG</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 grid grid-cols-2 gap-2" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-lg border border-solid border-border bg-surface-raised p-2" {...machine.getItemProps(row)}>
-        <span class="i-lucide-image shrink-0 text-sm text-primary" aria-hidden="true"></span>
+      <div class="flex items-center justify-between gap-2 rounded-lg border bg-surface-raised p-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-image shrink-0 text-primary" aria-hidden="true"></span>
         <div class="min-w-0 flex-1">
-          <span class="block truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-          <span class="block text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+          <span class="block truncate type-body-emphasized" {...machine.getItemNameProps(row)}>{row.value}</span>
+          <span class="block type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         </div>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/images.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/images.html
+var images_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({\n    multiple: true,\n    accept: \"image/*\",\n    value: [\n      { name: \"hero-banner.png\", size: 512000, type: \"image/png\" },\n      { name: \"avatar-preview.webp\", size: 84200, type: \"image/webp\" },\n    ],\n  });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-5 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-image-plus icon-lg text-primary\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Upload gallery images</span>\n    <span class=\"type-caption text-muted\">PNG, JPG, WEBP, or SVG</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 grid grid-cols-2 gap-2\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-lg border bg-surface-raised p-2\" {...machine.getItemProps(row)}>\n        <span class=\"i-lucide-image shrink-0 text-primary\" aria-hidden=\"true\"></span>\n        <div class=\"min-w-0 flex-1\">\n          <span class=\"block truncate type-body-emphasized\" {...machine.getItemNameProps(row)}>{row.value}</span>\n          <span class=\"block type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        </div>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { images_default as default };
+
+//# sourceMappingURL=images.html.js.map

package/dist/file-upload/examples/paste.html

@@ -6,23 +6,23 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused }]}
     {...machine.getDropzoneProps()}
   >
-    <span class="i-lucide-clipboard-paste text-lg text-text-muted" aria-hidden="true"></span>
-    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Click or paste clipboard files</span>
-    <span class="text-xs text-text-muted">Screenshots and copied attachments</span>
+    <span class="i-lucide-clipboard-paste text-muted" aria-hidden="true"></span>
+    <span class="type-label" {...machine.getLabelProps()}>Click or paste clipboard files</span>
+    <span class="type-caption text-muted">Screenshots and copied attachments</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
-        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate type-body" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/paste.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/paste.html
+var paste_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({ multiple: true });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging, \"ring-2 ring-border-strong\": machine.focused }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-clipboard-paste text-muted\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Click or paste clipboard files</span>\n    <span class=\"type-caption text-muted\">Screenshots and copied attachments</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 flex flex-col gap-1\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-3 py-1\" {...machine.getItemProps(row)}>\n        <span class=\"min-w-0 flex-1 truncate type-body\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { paste_default as default };
+
+//# sourceMappingURL=paste.html.js.map

package/dist/file-upload/examples/table.html

@@ -14,10 +14,10 @@
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-2 flex items-center justify-between">
     <div
-      class={["inline-flex cursor-pointer items-center gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1 text-xs font-medium text-text hover:bg-surface", { "border-primary": machine.dragging }]}
+      class={["inline-flex cursor-pointer items-center gap-2 rounded-md border bg-surface-raised px-3 py-1 type-label hover:bg-surface", { "border-primary": machine.dragging }]}
       {...machine.getDropzoneProps()}
     >
-      <span class="i-lucide-plus text-xs" aria-hidden="true"></span>
+      <span class="i-lucide-plus type-caption" aria-hidden="true"></span>
       <span {...machine.getLabelProps()}>Upload Artifacts</span>
     </div>
     <button class="secondary s-sm" {...machine.getClearTriggerProps()}>Clear all</button>
@@ -25,13 +25,13 @@
 
   <input {...machine.getHiddenInputProps()} />
 
-  <div class="overflow-hidden rounded-lg border border-solid border-border bg-surface-raised" {...machine.getItemGroupProps()}>
+  <div class="overflow-hidden rounded-lg border bg-surface-raised" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-3 border-b border-solid border-border px-3 py-2 text-xs last:border-b-0" {...machine.getItemProps(row)}>
-        <span class="min-w-0 flex-1 truncate font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 font-mono text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-3 border-b px-3 py-2 last:border-b-0" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate type-body-emphasized" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-code text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x type-caption" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/table.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/table.html
+var table_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({\n    multiple: true,\n    value: [\n      { name: \"release-notes.md\", size: 4200, type: \"text/markdown\" },\n      { name: \"bundle-stats.json\", size: 128400, type: \"application/json\" },\n      { name: \"schema.sql\", size: 15800, type: \"application/sql\" },\n    ],\n  });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-2 flex items-center justify-between\">\n    <div\n      class={[\"inline-flex cursor-pointer items-center gap-2 rounded-md border bg-surface-raised px-3 py-1 type-label hover:bg-surface\", { \"border-primary\": machine.dragging }]}\n      {...machine.getDropzoneProps()}\n    >\n      <span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span>\n      <span {...machine.getLabelProps()}>Upload Artifacts</span>\n    </div>\n    <button class=\"secondary s-sm\" {...machine.getClearTriggerProps()}>Clear all</button>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"overflow-hidden rounded-lg border bg-surface-raised\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-3 border-b px-3 py-2 last:border-b-0\" {...machine.getItemProps(row)}>\n        <span class=\"min-w-0 flex-1 truncate type-body-emphasized\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-code text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n</div>\n";
+export { table_default as default };
+
+//# sourceMappingURL=table.html.js.map

package/dist/file-upload/file-upload.events.d.ts

@@ -1,5 +1,5 @@
 import { FileRecord, FileRejection } from "./file-upload.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface FileUploadEvents {
   "INPUT.CHANGE": {
     files: readonly FileRecord[];
@@ -23,5 +23,4 @@ export type FileUploadEvent = EventUnion<FileUploadEvents>;
 export type FileUploadValueChange = {
   readonly acceptedFiles: readonly FileRecord[];
   readonly rejectedFiles: readonly FileRejection[];
-};
-//# sourceMappingURL=file-upload.events.d.ts.map
+};

package/dist/file-upload/file-upload.machine.d.ts

@@ -1,6 +1,8 @@
+/**
+ * File-upload machine: the dropzone's modes and the accept/reject split.
+ */
 import { FileRecord, FileRejection, FileUploadArgs, FileUploadContext, FileUploadState, filesOf, initial, matchesPattern, patterns, splitFiles } from "./file-upload.state.js";
 import { FileUploadEvent, FileUploadEvents, FileUploadValueChange } from "./file-upload.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function fileUpload(args?: FileUploadArgs, authored?: (name: string) => boolean): Machine<FileUploadContext, FileUploadEvents, FileUploadState>;
-export { type FileRecord, type FileRejection, type FileUploadArgs, type FileUploadContext, type FileUploadEvent, type FileUploadEvents, type FileUploadValueChange, filesOf, initial, matchesPattern, patterns, splitFiles };
-//# sourceMappingURL=file-upload.machine.d.ts.map
+export { type FileRecord, type FileRejection, type FileUploadArgs, type FileUploadContext, type FileUploadEvent, type FileUploadEvents, type FileUploadValueChange, filesOf, initial, matchesPattern, patterns, splitFiles };

package/dist/file-upload/file-upload.machine.js

@@ -1,6 +1,6 @@
 import { filesOf, initial, matchesPattern, patterns, splitFiles } from "./file-upload.state.js";
 import { addFiles, clearValue, removeFile, setFiles, setValue } from "./file-upload.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/file-upload/file-upload.machine.ts
 /**
 * File-upload machine: the dropzone's modes and the accept/reject split.

package/dist/file-upload/file-upload.presentation.d.ts

@@ -1,6 +1,6 @@
 import { FileRecord, FileRejection, FileUploadArgs, FileUploadContext, FileUploadState } from "./file-upload.state.js";
 import { FileUploadEvents, FileUploadValueChange } from "./file-upload.events.js";
-import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor } from "@spinjs/components/runtime";
 export interface FileUploadCommands {
   openFilePicker(): void;
   removeFile(name: string): void;
@@ -14,22 +14,22 @@ type SlotLike<R> = SlotViewFor<R, FileUploadContext, FileUploadEvents, FileUploa
 export declare const formatBytes: (bytes: number) => string;
 export declare const def: {
   name: string;
-  machine: (props: FileUploadArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<FileUploadContext, FileUploadEvents, FileUploadState>;
+  machine: (props: FileUploadArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<FileUploadContext, FileUploadEvents, FileUploadState>;
   parts: {
     root: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         id: string;
         "data-disabled": string | undefined;
         dir: string;
       };
     };
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         id: string;
       };
     };
     dropzone: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         "data-focus": string | undefined;
         "data-dragging": string | undefined;
         "data-disabled": string | undefined;
@@ -47,7 +47,7 @@ export declare const def: {
     };
     hiddenInput: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         id: string;
         type: string;
         multiple: boolean;
@@ -60,14 +60,14 @@ export declare const def: {
     };
     itemGroup: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         id: string;
         role: string;
       };
     };
     clearTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FileUploadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FileUploadEvents>, FileUploadState>) => {
         id: string;
         "aria-label": string;
         hidden: boolean;
@@ -177,6 +177,5 @@ export declare const def: {
   };
 };
 export type FileUploadApi = ApiOf<typeof def>;
-export declare const fileUpload: import("@spinjs/runtime").DefinedComponent<FileUploadApi, FileUploadArgs>;
-export type { FileRecord, FileRejection, FileUploadValueChange };
-//# sourceMappingURL=file-upload.presentation.d.ts.map
+export declare const fileUpload: import("@spinjs/components/runtime").DefinedComponent<FileUploadApi, FileUploadArgs>;
+export type { FileRecord, FileRejection, FileUploadValueChange };

package/dist/file-upload/file-upload.presentation.js

@@ -1,5 +1,5 @@
 import { fileUpload as fileUpload$1 } from "./file-upload.machine.js";
-import { ariaDisabled, ariaLabelledBy, dataAttr, defineComponent, isRecord } from "@spinjs/runtime";
+import { ariaDisabled, ariaLabelledBy, dataAttr, defineComponent, isRecord } from "@spinjs/components/runtime";
 // src/file-upload/file-upload.presentation.ts
 /** Opening the hidden input is a view reflex, not a machine move — the
 * press that opened it must not be re-read by the input's own click

package/dist/file-upload/file-upload.state.d.ts

@@ -48,5 +48,4 @@ export declare function splitFiles(files: readonly FileRecord[], rules: {
   readonly maxSize: number;
   readonly minSize: number;
   readonly maxFiles: number;
-}, alreadyAccepted?: number): SplitResult;
-//# sourceMappingURL=file-upload.state.d.ts.map
+}, alreadyAccepted?: number): SplitResult;

package/dist/file-upload/file-upload.state.js

@@ -1,4 +1,4 @@
-import { coerceJsonArray, defaultTwin, isRecord } from "@spinjs/runtime";
+import { coerceJsonArray, defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/file-upload/file-upload.state.ts
 /** A write carries the records themselves, or the JSON text a host wrote;
 * well-shaped entries survive, anything else is no file. */

package/dist/file-upload/file-upload.transitions.d.ts

@@ -1,11 +1,10 @@
-import { FileUploadContext } from "./file-upload.state.js";
 import { FileUploadEvents } from "./file-upload.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { FileUploadContext } from "./file-upload.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type FileUploadAssign<K extends keyof FileUploadEvents = keyof FileUploadEvents> = AssignFor<FileUploadContext, FileUploadEvents, K>;
 export declare const setFiles: FileUploadAssign<"INPUT.CHANGE">;
 export declare const addFiles: FileUploadAssign<"DROP">;
 export declare const setValue: FileUploadAssign<"VALUE.SET">;
 export declare const clearValue: () => Partial<FileUploadContext>;
 export declare const removeFile: FileUploadAssign<"FILE.REMOVE">;
-export {};
-//# sourceMappingURL=file-upload.transitions.d.ts.map
+export {};

package/dist/floating-panel/examples/basic.html

@@ -1,41 +1,40 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({size: "{\"w\":320,\"h\":240}", minSize: "{\"w\":280,\"h\":180}", maxSize: "{\"w\":500,\"h\":400}"});
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":340,\"h\":300}", minSize: "{\"w\":260,\"h\":200}", maxSize: "{\"w\":540,\"h\":420}" });
 </script>
 
-<div class="grid w-full gap-2">
-  <button class="mb-2 secondary s-sm" {...machine.getTriggerProps()}>Open panel</button>
-  <div class="relative h-[24rem] w-full" {...machine.getPositionerProps()}>
-    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
-      <div class={["flex items-center justify-between gap-2 border-b border-border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
+<div class="grid w-full justify-items-center gap-2">
+  <button class="s-sm w-fit" {...machine.getTriggerProps()}>Open panel</button>
+  <div class={["relative w-full", { "h-[21rem]": machine.isOpen, "hidden": !machine.isOpen }]} {...machine.getPositionerProps()}>
+    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
+      <div class={["flex items-center justify-between gap-2 border-b border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
         <div class="flex min-w-0 items-center gap-2">
-          <span class="i-lucide-grip-vertical shrink-0 text-sm text-text-muted" aria-hidden="true"></span>
-          <span class="truncate text-sm font-medium text-text">Basic Panel</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Basic Panel</span>
         </div>
-        <div class="flex shrink-0 items-center gap-1"><button class="ghost flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus text-xs" aria-hidden="true"></span></button>
-          <button class="ghost flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square text-xs" aria-hidden="true"></span></button>
-          <button class="ghost flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy text-xs" aria-hidden="true"></span></button>
-          <button class="ghost flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 text-text-muted hover:bg-surface hover:text-text" {...machine.getCloseTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button></div>
+        <div class="flex shrink-0 items-center gap-1"><button class="bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus type-caption" aria-hidden="true"></span></button>
+          <button class="bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square type-caption" aria-hidden="true"></span></button>
+          <button class="bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy type-caption" aria-hidden="true"></span></button>
+          <button class="bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface" {...machine.getCloseTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button></div>
       </div>
       <div class="grid content-start gap-2 p-4">
-        <p class="text-sm text-text">A panel that moves, resizes, minimizes, and closes.</p>
-        <ul class="grid gap-1 text-sm text-text-muted">
+        <p>A panel that moves, resizes, minimizes, and closes.</p>
+        <ul class="grid gap-1 text-muted">
           <li>Draggable header</li>
           <li>Resizable edges</li>
           <li>Minimize, maximize, restore</li>
           <li>Close and Escape</li>
         </ul>
       </div>
-      
-      <button class="bare absolute p-0 inset-x-0 top-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-x-0 bottom-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 right-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 left-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
+      <button class="bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"><span class="h-2 w-2 border-b-2 border-r-2 border-strong opacity-50"></span></button>
+      <button class="bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
     </div>
   </div>
 </div>

package/dist/floating-panel/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/basic.html
+var basic_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":340,\\\"h\\\":300}\", minSize: \"{\\\"w\\\":260,\\\"h\\\":200}\", maxSize: \"{\\\"w\\\":540,\\\"h\\\":420}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open panel</button>\n  <div class={[\"relative w-full\", { \"h-[21rem]\": machine.isOpen, \"hidden\": !machine.isOpen }]} {...machine.getPositionerProps()}>\n    <div class={[\"absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.isOpen, \"h-12 overflow-hidden\": machine.stage === \"minimized\", \"h-full w-full\": machine.stage === \"maximized\" }]} {...machine.getContentProps()}>\n      <div class={[\"flex items-center justify-between gap-2 border-b border p-3 cursor-grab\", { \"cursor-grabbing\": machine.dragging }]} {...machine.getDragTriggerProps()}>\n        <div class=\"flex min-w-0 items-center gap-2\">\n          <span class=\"i-lucide-grip-vertical shrink-0 type-code text-muted\" aria-hidden=\"true\"></span>\n          <span class=\"truncate type-label\">Basic Panel</span>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\"><button class=\"bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"minimized\" })}><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"maximized\" })}><span class=\"i-lucide-square type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"default\" })}><span class=\"i-lucide-copy type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"bare flex h-6 max-h-6 min-h-0 w-6 items-center justify-center text-muted hover:bg-surface\" {...machine.getCloseTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button></div>\n      </div>\n      <div class=\"grid content-start gap-2 p-4\">\n        <p>A panel that moves, resizes, minimizes, and closes.</p>\n        <ul class=\"grid gap-1 text-muted\">\n          <li>Draggable header</li>\n          <li>Resizable edges</li>\n          <li>Minimize, maximize, restore</li>\n          <li>Close and Escape</li>\n        </ul>\n      </div>\n      <button class=\"bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"n\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"s\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"e\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"w\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"ne\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"nw\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"se\")} aria-hidden=\"true\"><span class=\"h-2 w-2 border-b-2 border-r-2 border-strong opacity-50\"></span></button>\n      <button class=\"bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"sw\")} aria-hidden=\"true\"></button>\n    </div>\n  </div>\n</div>\n\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map