@spaethtech/svelte-ui 0.18.1-dev.91.ef0fb72 → 0.18.1-dev.93.9244176

package/.claude/skills/svelte-ui/SKILL.md

@@ -7,7 +7,8 @@ description: How to build UIs with the @spaethtech/svelte-ui component library i
 
 A **Svelte 5 (runes)** component library styled with **Tailwind CSS v4** and **MDI icons**. Every
 component is theme-aware via CSS variables and most consume the shared `variant` + `size` axes.
-Import from the package name — **`@spaethtech/svelte-ui`** — never a deep `dist/` path.
+Import from the package name — the **`@spaethtech/svelte-ui`** barrel, or a **per-component subpath**
+(`@spaethtech/svelte-ui/button`) — never a raw `dist/` path.
 
 > Depth lives in the package's shipped docs (`node_modules/@spaethtech/svelte-ui/docs/*.md`) and this
 > repo's `CLAUDE.md`. Theming (tokens, dark mode, inverse surfaces, brand bridging) → the **`themes`**
@@ -55,6 +56,36 @@ the components use:
 <Button text="Save" variant="primary" onclick={() => save(name)} />
 ```
 
+### Barrel vs. per-component subpaths (dev cold-start / memory)
+
+Two import styles, both resolving to the same source (identical output, identical HMR-into-lib):
+
+- **Barrel** — `import { Button, Input } from "@spaethtech/svelte-ui"`. Convenient, but importing
+  *anything* from the barrel pulls *all* 71 component `.svelte` files into the dev compile graph (Vite
+  doesn't tree-shake a barrel in `dev`), so the dev server compiles the whole library on cold start.
+  Prod builds tree-shake normally, so this is a dev-time cost only.
+- **Per-component subpath** — `import Button from "@spaethtech/svelte-ui/button"`. Kebab-case of the
+  component name (`DataTable` → `/data-table`, `SideBarMenu` → `/side-bar-menu`, `DatePicker` →
+  `/date-picker`; multi-export folders keep their group, e.g. `Avatar`/`AvatarGroup` at `/avatar`).
+  Only the components you actually import get compiled. **On a memory-constrained dev host, prefer
+  subpaths exclusively** — it's the single biggest lever on svelte-ui's cold-start footprint.
+
+Non-component runtime **values** have their own component-free entries so they don't drag the barrel
+in either: **`@spaethtech/svelte-ui/utils`** (`toast`, `anchored`/`tooltip`, `setUiI18n`/`uiI18n`,
+`responsiveClasses`, …) and **`@spaethtech/svelte-ui/data`** (`createGrid`, query AST). **Types** are
+free from anywhere — `import type { Variant } from "@spaethtech/svelte-ui"` is erased at compile time
+and pulls no components, so type-only imports may stay on the barrel.
+
+```svelte
+<script>
+  import Button from "@spaethtech/svelte-ui/button";
+  import DataTable from "@spaethtech/svelte-ui/data-table";
+  import { toast } from "@spaethtech/svelte-ui/utils";
+  import { createGrid } from "@spaethtech/svelte-ui/data";
+  import type { Variant } from "@spaethtech/svelte-ui"; // type-only ⇒ free, no compile
+</script>
+```
+
 ## Localization (i18n) — opt-in
 
 Components render their own microcopy (aria-labels, titles, "per page", "No results", month names…)

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
+export type { Side, Align, Boundary, PlaceOptions, Placement, AnchoredParams, } from "./positioning/anchored.js";
+export { tooltip } from "./positioning/tooltip.js";
+export type { TooltipOptions } from "./positioning/tooltip.js";
+export { setUiI18n, uiI18n, defaultUiMessages } from "./i18n.js";
+export type { UiMessages, UiI18n } from "./i18n.js";
+export type { Variant } from "./types/variants.js";
+export type { Size } from "./types/sizes.js";
+export type { StepSpec } from "./types/time.js";
+export type { Breakpoint } from "./types/breakpoints.js";
+export { BREAKPOINT_PX } from "./types/breakpoints.js";
+export type { Responsive } from "./types/responsive.js";
+export { responsiveClasses, resolveScalar } from "./types/responsive.js";

package/dist/utils.js

@@ -0,0 +1,15 @@
+// Component-free value + type re-exports for consumers using the per-component subpaths EXCLUSIVELY.
+// Importing a VALUE (toast, tooltip, setUiI18n…) from the main barrel ("@spaethtech/svelte-ui") pulls
+// every component `.svelte` into the dev compile graph; this module imports only `.ts`/`.svelte.ts`
+// (no components), so `import { toast } from "@spaethtech/svelte-ui/utils"` stays cheap. Data-grid
+// helpers live at `@spaethtech/svelte-ui/data`; component types can still be `import type`-d from the
+// root (type-only imports are erased and pull no `.svelte`).
+// Toast
+export { toast, getToasts, dismissToast, } from "./components/Toast/toast.svelte.js";
+// Positioning engine + tooltip action
+export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
+export { tooltip } from "./positioning/tooltip.js";
+// Internal localization (opt-in)
+export { setUiI18n, uiI18n, defaultUiMessages } from "./i18n.js";
+export { BREAKPOINT_PX } from "./types/breakpoints.js";
+export { responsiveClasses, resolveScalar } from "./types/responsive.js";

package/docs/usage.md

@@ -56,6 +56,27 @@ export default defineConfig({
 </script>
 ```
 
+### Per-component subpaths (faster dev cold-start)
+
+Every component also has a **kebab-case subpath** — `@spaethtech/svelte-ui/button`,
+`@spaethtech/svelte-ui/data-table`, `@spaethtech/svelte-ui/side-bar-menu`,
+`@spaethtech/svelte-ui/date-picker` (multi-export folders keep their group, e.g. `Avatar`/`AvatarGroup`
+at `/avatar`). Importing from the **barrel** pulls all 71 components into the dev compile graph (Vite
+doesn't tree-shake a barrel in `dev`); importing from **subpaths** compiles only what you use. Both
+resolve to the same source, so output and HMR-into-lib are identical — subpaths are purely a dev
+cold-start / memory optimization (prefer them exclusively on constrained hosts). No `@source` change
+(Tailwind still scans `dist`).
+
+```svelte
+<script>
+  import Button from "@spaethtech/svelte-ui/button";
+  import DataTable from "@spaethtech/svelte-ui/data-table";
+  import { toast } from "@spaethtech/svelte-ui/utils"; // non-component values, barrel-free
+  import { createGrid } from "@spaethtech/svelte-ui/data"; // grid/query helpers
+  import type { Variant } from "@spaethtech/svelte-ui"; // type-only ⇒ erased, pulls nothing
+</script>
+```
+
 ## Icons
 
 There is **no `Icon` component**. Import an MDI icon component from `~icons/mdi/*` and render it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.18.1-dev.91.ef0fb72",
+  "version": "0.18.1-dev.93.9244176",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -50,11 +50,288 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./alert": {
+      "types": "./dist/components/Alert.svelte.d.ts",
+      "svelte": "./dist/components/Alert.svelte"
+    },
+    "./banner": {
+      "types": "./dist/components/Banner.svelte.d.ts",
+      "svelte": "./dist/components/Banner.svelte"
+    },
+    "./badge": {
+      "types": "./dist/components/Badge/Badge.svelte.d.ts",
+      "svelte": "./dist/components/Badge/Badge.svelte"
+    },
+    "./chip": {
+      "types": "./dist/components/Chip/index.d.ts",
+      "svelte": "./dist/components/Chip/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/Kbd/index.d.ts",
+      "svelte": "./dist/components/Kbd/index.js"
+    },
+    "./empty-state": {
+      "types": "./dist/components/EmptyState/index.d.ts",
+      "svelte": "./dist/components/EmptyState/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/Avatar/index.d.ts",
+      "svelte": "./dist/components/Avatar/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/Button.svelte.d.ts",
+      "svelte": "./dist/components/Button.svelte"
+    },
+    "./card": {
+      "types": "./dist/components/Card.svelte.d.ts",
+      "svelte": "./dist/components/Card.svelte"
+    },
+    "./card-header": {
+      "types": "./dist/components/CardHeader.svelte.d.ts",
+      "svelte": "./dist/components/CardHeader.svelte"
+    },
+    "./card-body": {
+      "types": "./dist/components/CardBody.svelte.d.ts",
+      "svelte": "./dist/components/CardBody.svelte"
+    },
+    "./card-footer": {
+      "types": "./dist/components/CardFooter.svelte.d.ts",
+      "svelte": "./dist/components/CardFooter.svelte"
+    },
+    "./stat": {
+      "types": "./dist/components/Stat/index.d.ts",
+      "svelte": "./dist/components/Stat/index.js"
+    },
+    "./timeline": {
+      "types": "./dist/components/Timeline/index.d.ts",
+      "svelte": "./dist/components/Timeline/index.js"
+    },
+    "./toaster": {
+      "types": "./dist/components/Toast/Toaster.svelte.d.ts",
+      "svelte": "./dist/components/Toast/Toaster.svelte"
+    },
+    "./dialog": {
+      "types": "./dist/components/Dialog.svelte.d.ts",
+      "svelte": "./dist/components/Dialog.svelte"
+    },
+    "./drawer": {
+      "types": "./dist/components/Drawer/index.d.ts",
+      "svelte": "./dist/components/Drawer/index.js"
+    },
+    "./confirm-dialog": {
+      "types": "./dist/components/ConfirmDialog.svelte.d.ts",
+      "svelte": "./dist/components/ConfirmDialog.svelte"
+    },
+    "./input": {
+      "types": "./dist/components/Input.svelte.d.ts",
+      "svelte": "./dist/components/Input.svelte"
+    },
+    "./notes-editor": {
+      "types": "./dist/components/NotesEditor.svelte.d.ts",
+      "svelte": "./dist/components/NotesEditor.svelte"
+    },
+    "./rating": {
+      "types": "./dist/components/Rating.svelte.d.ts",
+      "svelte": "./dist/components/Rating.svelte"
+    },
+    "./select": {
+      "types": "./dist/components/Select.svelte.d.ts",
+      "svelte": "./dist/components/Select.svelte"
+    },
+    "./combobox": {
+      "types": "./dist/components/Combobox/index.d.ts",
+      "svelte": "./dist/components/Combobox/index.js"
+    },
+    "./token-input": {
+      "types": "./dist/components/TokenInput/index.d.ts",
+      "svelte": "./dist/components/TokenInput/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/Slider/index.d.ts",
+      "svelte": "./dist/components/Slider/index.js"
+    },
+    "./list": {
+      "types": "./dist/components/List.svelte.d.ts",
+      "svelte": "./dist/components/List.svelte"
+    },
+    "./text-area": {
+      "types": "./dist/components/TextArea.svelte.d.ts",
+      "svelte": "./dist/components/TextArea.svelte"
+    },
+    "./spinner": {
+      "types": "./dist/components/Spinner/index.d.ts",
+      "svelte": "./dist/components/Spinner/index.js"
+    },
+    "./progress": {
+      "types": "./dist/components/Progress/index.d.ts",
+      "svelte": "./dist/components/Progress/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/Skeleton/index.d.ts",
+      "svelte": "./dist/components/Skeleton/index.js"
+    },
+    "./password-input": {
+      "types": "./dist/components/PasswordInput.svelte.d.ts",
+      "svelte": "./dist/components/PasswordInput.svelte"
+    },
+    "./email-input": {
+      "types": "./dist/components/EmailInput.svelte.d.ts",
+      "svelte": "./dist/components/EmailInput.svelte"
+    },
+    "./search-input": {
+      "types": "./dist/components/SearchInput.svelte.d.ts",
+      "svelte": "./dist/components/SearchInput.svelte"
+    },
+    "./number-input": {
+      "types": "./dist/components/NumberInput.svelte.d.ts",
+      "svelte": "./dist/components/NumberInput.svelte"
+    },
+    "./phone-input": {
+      "types": "./dist/components/PhoneInput.svelte.d.ts",
+      "svelte": "./dist/components/PhoneInput.svelte"
+    },
+    "./date-time-input": {
+      "types": "./dist/components/DateTimeInput.svelte.d.ts",
+      "svelte": "./dist/components/DateTimeInput.svelte"
+    },
+    "./calendar": {
+      "types": "./dist/components/Calendar.svelte.d.ts",
+      "svelte": "./dist/components/Calendar.svelte"
+    },
+    "./date-picker": {
+      "types": "./dist/components/DatePicker.svelte.d.ts",
+      "svelte": "./dist/components/DatePicker.svelte"
+    },
+    "./time-spinner": {
+      "types": "./dist/components/TimeSpinner.svelte.d.ts",
+      "svelte": "./dist/components/TimeSpinner.svelte"
+    },
+    "./time-picker": {
+      "types": "./dist/components/TimePicker.svelte.d.ts",
+      "svelte": "./dist/components/TimePicker.svelte"
+    },
+    "./time-range-input": {
+      "types": "./dist/components/TimeRangeInput.svelte.d.ts",
+      "svelte": "./dist/components/TimeRangeInput.svelte"
+    },
+    "./file-upload": {
+      "types": "./dist/components/FileUpload/index.d.ts",
+      "svelte": "./dist/components/FileUpload/index.js"
+    },
+    "./theme-selector": {
+      "types": "./dist/components/ThemeSelector.svelte.d.ts",
+      "svelte": "./dist/components/ThemeSelector.svelte"
+    },
+    "./theme-toggle": {
+      "types": "./dist/components/ThemeToggle.svelte.d.ts",
+      "svelte": "./dist/components/ThemeToggle.svelte"
+    },
+    "./popup": {
+      "types": "./dist/components/Popup.svelte.d.ts",
+      "svelte": "./dist/components/Popup.svelte"
+    },
+    "./menu": {
+      "types": "./dist/components/Menu.svelte.d.ts",
+      "svelte": "./dist/components/Menu.svelte"
+    },
+    "./context-menu": {
+      "types": "./dist/components/ContextMenu/index.d.ts",
+      "svelte": "./dist/components/ContextMenu/index.js"
+    },
+    "./command-palette": {
+      "types": "./dist/components/CommandPalette/index.d.ts",
+      "svelte": "./dist/components/CommandPalette/index.js"
+    },
+    "./tree": {
+      "types": "./dist/components/Tree/index.d.ts",
+      "svelte": "./dist/components/Tree/index.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/ButtonGroup/index.d.ts",
+      "svelte": "./dist/components/ButtonGroup/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/Checkbox.svelte.d.ts",
+      "svelte": "./dist/components/Checkbox.svelte"
+    },
+    "./toggle": {
+      "types": "./dist/components/Toggle.svelte.d.ts",
+      "svelte": "./dist/components/Toggle.svelte"
+    },
+    "./radio": {
+      "types": "./dist/components/Radio.svelte.d.ts",
+      "svelte": "./dist/components/Radio.svelte"
+    },
+    "./field-group": {
+      "types": "./dist/components/FieldGroup.svelte.d.ts",
+      "svelte": "./dist/components/FieldGroup.svelte"
+    },
+    "./grid": {
+      "types": "./dist/components/Grid.svelte.d.ts",
+      "svelte": "./dist/components/Grid.svelte"
+    },
+    "./divider": {
+      "types": "./dist/components/Divider/index.d.ts",
+      "svelte": "./dist/components/Divider/index.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/ScrollArea/index.d.ts",
+      "svelte": "./dist/components/ScrollArea/index.js"
+    },
+    "./splitter": {
+      "types": "./dist/components/Splitter/index.d.ts",
+      "svelte": "./dist/components/Splitter/index.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/Carousel/index.d.ts",
+      "svelte": "./dist/components/Carousel/index.js"
+    },
+    "./stepper": {
+      "types": "./dist/components/Stepper/index.d.ts",
+      "svelte": "./dist/components/Stepper/index.js"
+    },
+    "./disclosure": {
+      "types": "./dist/components/Disclosure.svelte.d.ts",
+      "svelte": "./dist/components/Disclosure.svelte"
+    },
+    "./accordion": {
+      "types": "./dist/components/Accordion.svelte.d.ts",
+      "svelte": "./dist/components/Accordion.svelte"
+    },
+    "./side-bar-menu": {
+      "types": "./dist/components/SideBarMenu/SideBarMenu.svelte.d.ts",
+      "svelte": "./dist/components/SideBarMenu/SideBarMenu.svelte"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/components/Breadcrumbs/index.d.ts",
+      "svelte": "./dist/components/Breadcrumbs/index.js"
+    },
+    "./tab-strip": {
+      "types": "./dist/components/TabStrip/TabStrip.svelte.d.ts",
+      "svelte": "./dist/components/TabStrip/TabStrip.svelte"
+    },
+    "./data-table": {
+      "types": "./dist/components/DataTable.svelte.d.ts",
+      "svelte": "./dist/components/DataTable.svelte"
+    },
+    "./pagination": {
+      "types": "./dist/components/Pagination/index.d.ts",
+      "svelte": "./dist/components/Pagination/index.js"
+    },
+    "./query": {
+      "types": "./dist/components/Query.svelte.d.ts",
+      "svelte": "./dist/components/Query.svelte"
+    },
     "./data": {
       "types": "./dist/data/index.d.ts",
       "svelte": "./dist/data/index.js",
       "default": "./dist/data/index.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "svelte": "./dist/utils.js",
+      "default": "./dist/utils.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "peerDependencies": {