soluid 0.1.2 → 0.1.3

package/README.md

@@ -12,7 +12,7 @@ npm install -D soluid
 
 ```sh
 npx soluid init                # create soluid.config.json interactively
-npx soluid install             # install components and CSS
+npx soluid install             # download and install components + CSS
 npx soluid add <component...>  # add components to config
 npx soluid remove <comp...>    # remove components from config
 npx soluid list                # list available components
@@ -32,16 +32,18 @@ npx soluid list                # list available components
 }
 ```
 
+`cssPath` receives all component CSS concatenated into a single file.
+
 ## Setup
 
-Import CSS in your app's entry point:
+Import CSS in your app entry point:
 
 ```tsx
 // src/index.tsx
 import "./styles/soluid.css";
 ```
 
-Theme/density switching:
+Theme and density switching:
 
 ```tsx
 document.documentElement.setAttribute("data-theme", "dark");
@@ -60,6 +62,16 @@ document.documentElement.setAttribute("data-density", "dense");
 | Navigation | Tabs, Breadcrumb, Pagination, Menu |
 | Utility | VisuallyHidden, Popover |
 
-## Primitives (5)
+## Core Utilities
+
+`createFocusTrap`, `createToast`, `createToggle`
+
+Installed automatically as dependencies when any component that requires them is added.
+
+## Dev
+
+```sh
+bun run dev
+```
 
-`createDisclosure`, `createFocusTrap`, `createToggle`, `createToast`, `createPagination`
+Starts the component catalog for local preview.

package/dist/commands/init.js

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import * as readline from "node:readline";
-import { CONFIG_FILENAME, DEFAULT_CSS_FILENAME, PROJECT_NAME, findConfigPath, saveConfig } from "../config.js";
+import { CONFIG_FILENAME, DEFAULT_CSS_FILENAME, PROJECT_NAME, fetchLatestComponentsVersion, findConfigPath, saveConfig } from "../config.js";
 import { allComponentNames } from "../registry.js";
 function prompt(question, defaultValue) {
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
@@ -36,10 +36,13 @@ export async function init(cwd) {
             return;
         }
     }
+    console.log("Fetching latest components version...");
+    const componentsVersion = await fetchLatestComponentsVersion();
     const componentDir = await prompt("Component directory?", "src/components/ui");
     const cssPath = await prompt("CSS path?", `src/styles/${DEFAULT_CSS_FILENAME}`);
     const allNames = allComponentNames();
     const config = {
+        componentsVersion,
         componentDir,
         alias: "",
         aliasBase: "src",
@@ -47,7 +50,7 @@ export async function init(cwd) {
         components: allNames,
     };
     saveConfig(cwd, config);
-    console.log(`\nCreated ${CONFIG_FILENAME} with ${allNames.length} components.`);
+    console.log(`\nCreated ${CONFIG_FILENAME} (components v${componentsVersion}, ${allNames.length} components)`);
     console.log("");
     console.log("Next steps:");
     console.log(`  1. Run: npx ${PROJECT_NAME} install`);

package/dist/commands/install.js

@@ -1,18 +1,13 @@
 import * as fs from "node:fs";
-import { createRequire } from "node:module";
 import * as path from "node:path";
 import { Readable } from "node:stream";
 import { pipeline } from "node:stream/promises";
 import { createGunzip } from "node:zlib";
 import { Parser } from "tar";
-import { CONFIG_FILENAME, DEFAULT_CSS_FILENAME, PROJECT_NAME, loadConfig } from "../config.js";
+import { CONFIG_FILENAME, PROJECT_NAME, RELEASE_URL, loadConfig } from "../config.js";
 import { collectNpmDeps, registry, resolveDependencies } from "../registry.js";
 import { rewriteImports } from "../rewrite-imports.js";
-const RELEASE_URL = "https://github.com/misebox/soluid/releases/download";
-function getVersion() {
-    const require = createRequire(import.meta.url);
-    return require("../../package.json").componentsVersion;
-}
+const ARCHIVE_PREFIX = "soluid/";
 function checkRateLimit(res) {
     const remaining = res.headers.get("X-RateLimit-Remaining");
     if (remaining !== null && parseInt(remaining, 10) <= 5) {
@@ -52,6 +47,13 @@ async function fetchAndExtract(version) {
     await pipeline(nodeStream, gunzip, parser);
     return files;
 }
+/** Strip the "soluid/" prefix from an archive path for local placement. */
+function stripPrefix(archivePath) {
+    if (archivePath.startsWith(ARCHIVE_PREFIX)) {
+        return archivePath.slice(ARCHIVE_PREFIX.length);
+    }
+    return archivePath;
+}
 export async function install(cwd) {
     const config = loadConfig(cwd);
     if (config === null) {
@@ -73,10 +75,11 @@ export async function install(cwd) {
     const resolved = resolveDependencies(["core", ...config.components]);
     const npmDeps = collectNpmDeps(resolved);
     console.log(`Installing ${resolved.length} items (including dependencies):`);
-    const version = getVersion();
+    const version = config.componentsVersion;
     const archive = await fetchAndExtract(version);
     const targetRoot = path.resolve(cwd, config.componentDir);
     let copiedCount = 0;
+    const cssChunks = [];
     for (const name of resolved) {
         const entry = registry[name];
         if (!entry)
@@ -87,20 +90,34 @@ export async function install(cwd) {
                 console.warn(`  SKIP (not in archive): ${file}`);
                 continue;
             }
-            const destPath = file === `core/${DEFAULT_CSS_FILENAME}`
-                ? path.resolve(cwd, config.cssPath)
-                : path.join(targetRoot, file);
+            const localPath = stripPrefix(file);
+            // CSS files: accumulate for concatenation instead of writing individually
+            if (file.endsWith(".css")) {
+                cssChunks.push(`/* ${localPath} */\n${content}`);
+                copiedCount++;
+                continue;
+            }
+            // TS/TSX files: strip prefix and write to componentDir
+            const destPath = path.join(targetRoot, localPath);
             const destDir = path.dirname(destPath);
             fs.mkdirSync(destDir, { recursive: true });
             let output = content;
             if (file.endsWith(".ts") || file.endsWith(".tsx")) {
-                output = rewriteImports(content, file, config);
+                output = rewriteImports(content, localPath, config);
             }
             fs.writeFileSync(destPath, output, "utf-8");
             copiedCount++;
         }
         console.log(`  + ${name}`);
     }
+    // Write concatenated CSS to cssPath
+    if (cssChunks.length > 0) {
+        const cssDestPath = path.resolve(cwd, config.cssPath);
+        const cssDestDir = path.dirname(cssDestPath);
+        fs.mkdirSync(cssDestDir, { recursive: true });
+        fs.writeFileSync(cssDestPath, cssChunks.join("\n\n") + "\n", "utf-8");
+        console.log(`\nCSS written to ${config.cssPath}`);
+    }
     console.log(`\nCopied ${copiedCount} files to ${config.componentDir}/`);
     if (npmDeps.length > 0) {
         console.log("\nRequired npm packages:");

package/dist/commands/list.js

@@ -13,7 +13,12 @@ export function list(cwd, filter) {
             const entry = registry[name];
             if (!entry)
                 continue;
-            const allExist = entry.files.every((file) => fs.existsSync(path.join(targetRoot, file)));
+            const allExist = entry.files
+                .filter((f) => !f.endsWith(".css"))
+                .every((file) => {
+                const local = file.startsWith("soluid/") ? file.slice("soluid/".length) : file;
+                return fs.existsSync(path.join(targetRoot, local));
+            });
             if (allExist)
                 installed.add(name);
         }
@@ -28,7 +33,7 @@ export function list(cwd, filter) {
             continue;
         if (filter === "not-installed" && installed.has(name))
             continue;
-        const cat = entry.category === "primitives" ? "Primitives" : capitalize(entry.category);
+        const cat = capitalize(entry.category);
         if (!categories.has(cat))
             categories.set(cat, []);
         const list = categories.get(cat);

package/dist/config.js

@@ -3,13 +3,8 @@ import * as path from "node:path";
 export const PROJECT_NAME = "soluid";
 export const CONFIG_FILENAME = `${PROJECT_NAME}.config.json`;
 export const DEFAULT_CSS_FILENAME = `${PROJECT_NAME}.css`;
-export const defaultConfig = {
-    componentDir: "src/components/ui",
-    alias: "",
-    aliasBase: "src",
-    cssPath: `src/styles/${DEFAULT_CSS_FILENAME}`,
-    components: [],
-};
+export const GITHUB_REPO = "misebox/soluid";
+export const RELEASE_URL = `https://github.com/${GITHUB_REPO}/releases/download`;
 export function findConfigPath(cwd) {
     return path.join(cwd, CONFIG_FILENAME);
 }
@@ -24,3 +19,17 @@ export function saveConfig(cwd, config) {
     const configPath = findConfigPath(cwd);
     fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
 }
+export async function fetchLatestComponentsVersion() {
+    const url = `https://api.github.com/repos/${GITHUB_REPO}/releases?per_page=20`;
+    const res = await fetch(url);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch releases: ${res.status}`);
+    }
+    const releases = await res.json();
+    for (const r of releases) {
+        if (r.tag_name.startsWith("components-v")) {
+            return r.tag_name.replace("components-v", "");
+        }
+    }
+    throw new Error("No components release found");
+}

package/dist/registry.js

@@ -1,5 +1,6 @@
 /**
- * Core is always installed. It provides types, utils, CSS tokens, and theme.
+ * Core is always installed. It provides types, utils, CSS tokens, theme,
+ * and primitive utilities (createFocusTrap, createToast, createToggle).
  */
 export const registry = {
     // --- Core (always installed) ---
@@ -7,81 +8,48 @@ export const registry = {
         name: "core",
         category: "core",
         files: [
-            "core/types.ts",
-            "core/utils.ts",
-            "core/soluid.css",
-            "core/theme.ts",
+            "soluid/core/types.ts",
+            "soluid/core/utils.ts",
+            "soluid/core/soluid.css",
+            "soluid/core/theme.ts",
+            "soluid/core/createFocusTrap.ts",
+            "soluid/core/createToast.ts",
+            "soluid/core/createToggle.ts",
         ],
         dependencies: [],
-        description: "Type definitions, CSS tokens, theme utilities",
-    },
-    // --- Primitives ---
-    "createDisclosure": {
-        name: "createDisclosure",
-        category: "primitives",
-        files: ["primitives/createDisclosure.ts"],
-        dependencies: ["core"],
-        description: "Open/close state management with a11y",
-    },
-    "createFocusTrap": {
-        name: "createFocusTrap",
-        category: "primitives",
-        files: ["primitives/createFocusTrap.ts"],
-        dependencies: ["core"],
         npmDependencies: [
             "@solid-primitives/active-element",
             "@solid-primitives/event-listener",
+            "@solid-primitives/scheduled",
         ],
-        description: "Trap focus within a container element",
-    },
-    "createToggle": {
-        name: "createToggle",
-        category: "primitives",
-        files: ["primitives/createToggle.ts"],
-        dependencies: ["core"],
-        description: "On/off toggle state with a11y",
-    },
-    "createToast": {
-        name: "createToast",
-        category: "primitives",
-        files: ["primitives/createToast.ts"],
-        dependencies: ["core"],
-        npmDependencies: ["@solid-primitives/scheduled"],
-        description: "Toast notification queue management",
-    },
-    "createPagination": {
-        name: "createPagination",
-        category: "primitives",
-        files: ["primitives/createPagination.ts"],
-        dependencies: ["core"],
-        description: "Page state management",
+        description: "Type definitions, CSS tokens, theme utilities, primitives",
     },
     // --- Layout ---
     Stack: {
         name: "Stack",
         category: "components",
-        files: ["components/layout/Stack.tsx", "components/layout/Stack.css"],
+        files: ["soluid/Stack.tsx", "soluid/Stack.css"],
         dependencies: ["core"],
         description: "Vertical flex layout with gap",
     },
     HStack: {
         name: "HStack",
         category: "components",
-        files: ["components/layout/HStack.tsx", "components/layout/HStack.css"],
+        files: ["soluid/HStack.tsx", "soluid/HStack.css"],
         dependencies: ["core"],
         description: "Horizontal flex layout with gap",
     },
     Divider: {
         name: "Divider",
         category: "components",
-        files: ["components/layout/Divider.tsx", "components/layout/Divider.css"],
+        files: ["soluid/Divider.tsx", "soluid/Divider.css"],
         dependencies: ["core"],
         description: "Horizontal/vertical separator",
     },
     Spacer: {
         name: "Spacer",
         category: "components",
-        files: ["components/layout/Spacer.tsx", "components/layout/Spacer.css"],
+        files: ["soluid/Spacer.tsx", "soluid/Spacer.css"],
         dependencies: ["core"],
         description: "Flex spacer",
     },
@@ -89,49 +57,46 @@ export const registry = {
     Button: {
         name: "Button",
         category: "components",
-        files: ["components/general/Button.tsx", "components/general/Button.css"],
+        files: ["soluid/Button.tsx", "soluid/Button.css"],
         dependencies: ["core"],
         description: "Primary, neutral, danger button with icon and loading",
     },
     IconButton: {
         name: "IconButton",
         category: "components",
-        files: [
-            "components/general/IconButton.tsx",
-            "components/general/IconButton.css",
-        ],
+        files: ["soluid/IconButton.tsx", "soluid/IconButton.css"],
         dependencies: ["core"],
         description: "Icon-only button with aria-label",
     },
     Badge: {
         name: "Badge",
         category: "components",
-        files: ["components/general/Badge.tsx", "components/general/Badge.css"],
+        files: ["soluid/Badge.tsx", "soluid/Badge.css"],
         dependencies: ["core"],
         description: "Status label",
     },
     Tag: {
         name: "Tag",
         category: "components",
-        files: ["components/general/Tag.tsx", "components/general/Tag.css"],
+        files: ["soluid/Tag.tsx", "soluid/Tag.css"],
         dependencies: ["core"],
         description: "Removable label for filters",
     },
     Tooltip: {
         name: "Tooltip",
         category: "components",
-        files: ["components/general/Tooltip.tsx"],
+        files: ["soluid/Tooltip.tsx", "soluid/Tooltip.css"],
         dependencies: ["core"],
-        description: "Tooltip (placeholder)",
+        description: "Tooltip",
     },
     // --- Form ---
     FormField: {
         name: "FormField",
         category: "components",
         files: [
-            "components/form/FormField.tsx",
-            "components/form/FormField.css",
-            "components/form/FormFieldContext.ts",
+            "soluid/FormField.tsx",
+            "soluid/FormField.css",
+            "soluid/FormFieldContext.ts",
         ],
         dependencies: ["core"],
         description: "Label + error/hint wrapper for form inputs",
@@ -139,40 +104,28 @@ export const registry = {
     TextField: {
         name: "TextField",
         category: "components",
-        files: [
-            "components/form/TextField.tsx",
-            "components/form/TextField.css",
-        ],
+        files: ["soluid/TextField.tsx", "soluid/TextField.css"],
         dependencies: ["core", "FormField"],
         description: "Text input with label/error/hint",
     },
     TextArea: {
         name: "TextArea",
         category: "components",
-        files: [
-            "components/form/TextArea.tsx",
-            "components/form/TextArea.css",
-        ],
+        files: ["soluid/TextArea.tsx", "soluid/TextArea.css"],
         dependencies: ["core", "FormField"],
         description: "Multiline text input",
     },
     NumberInput: {
         name: "NumberInput",
         category: "components",
-        files: [
-            "components/form/NumberInput.tsx",
-            "components/form/NumberInput.css",
-        ],
+        files: ["soluid/NumberInput.tsx", "soluid/NumberInput.css"],
         dependencies: ["core", "FormField"],
         description: "Number input with stepper buttons",
     },
     Select: {
         name: "Select",
         category: "components",
-        files: [
-            "components/form/Select.tsx",
-            "components/form/Select.css",
-        ],
+        files: ["soluid/Select.tsx", "soluid/Select.css"],
         dependencies: ["core", "FormField"],
         description: "Native select dropdown",
     },
@@ -180,9 +133,9 @@ export const registry = {
         name: "Checkbox",
         category: "components",
         files: [
-            "components/form/Checkbox.tsx",
-            "components/form/Checkbox.css",
-            "components/form/CheckboxGroupContext.ts",
+            "soluid/Checkbox.tsx",
+            "soluid/Checkbox.css",
+            "soluid/CheckboxGroupContext.ts",
         ],
         dependencies: ["core"],
         description: "Checkbox with indeterminate support",
@@ -190,10 +143,7 @@ export const registry = {
     CheckboxGroup: {
         name: "CheckboxGroup",
         category: "components",
-        files: [
-            "components/form/CheckboxGroup.tsx",
-            "components/form/CheckboxGroup.css",
-        ],
+        files: ["soluid/CheckboxGroup.tsx", "soluid/CheckboxGroup.css"],
         dependencies: ["core", "Checkbox"],
         description: "Checkbox group with shared state",
     },
@@ -201,11 +151,11 @@ export const registry = {
         name: "RadioGroup",
         category: "components",
         files: [
-            "components/form/RadioGroup.tsx",
-            "components/form/RadioGroup.css",
-            "components/form/RadioGroupContext.ts",
-            "components/form/RadioButton.tsx",
-            "components/form/RadioButton.css",
+            "soluid/RadioGroup.tsx",
+            "soluid/RadioGroup.css",
+            "soluid/RadioGroupContext.ts",
+            "soluid/RadioButton.tsx",
+            "soluid/RadioButton.css",
         ],
         dependencies: ["core"],
         description: "Radio button group",
@@ -213,52 +163,43 @@ export const registry = {
     Switch: {
         name: "Switch",
         category: "components",
-        files: [
-            "components/form/Switch.tsx",
-            "components/form/Switch.css",
-        ],
-        dependencies: ["core", "createToggle"],
+        files: ["soluid/Switch.tsx", "soluid/Switch.css"],
+        dependencies: ["core"],
         description: "Toggle switch",
     },
     // --- Data Display ---
     Table: {
         name: "Table",
         category: "components",
-        files: ["components/data/Table.tsx", "components/data/Table.css"],
+        files: ["soluid/Table.tsx", "soluid/Table.css"],
         dependencies: ["core"],
         description: "Data table with sort, pagination, row selection",
     },
     Card: {
         name: "Card",
         category: "components",
-        files: ["components/data/Card.tsx", "components/data/Card.css"],
+        files: ["soluid/Card.tsx", "soluid/Card.css"],
         dependencies: ["core"],
         description: "Content card with header/body/footer",
     },
     DescriptionList: {
         name: "DescriptionList",
         category: "components",
-        files: [
-            "components/data/DescriptionList.tsx",
-            "components/data/DescriptionList.css",
-        ],
+        files: ["soluid/DescriptionList.tsx", "soluid/DescriptionList.css"],
         dependencies: ["core"],
         description: "Key-value display",
     },
     Skeleton: {
         name: "Skeleton",
         category: "components",
-        files: ["components/data/Skeleton.tsx", "components/data/Skeleton.css"],
+        files: ["soluid/Skeleton.tsx", "soluid/Skeleton.css"],
         dependencies: ["core"],
         description: "Loading placeholder",
     },
     EmptyState: {
         name: "EmptyState",
         category: "components",
-        files: [
-            "components/data/EmptyState.tsx",
-            "components/data/EmptyState.css",
-        ],
+        files: ["soluid/EmptyState.tsx", "soluid/EmptyState.css"],
         dependencies: ["core"],
         description: "Empty data display with action",
     },
@@ -266,48 +207,42 @@ export const registry = {
     Dialog: {
         name: "Dialog",
         category: "components",
-        files: ["components/feedback/Dialog.tsx", "components/feedback/Dialog.css"],
-        dependencies: ["core", "createFocusTrap"],
+        files: ["soluid/Dialog.tsx", "soluid/Dialog.css"],
+        dependencies: ["core"],
         description: "Modal dialog with focus trap",
     },
     Drawer: {
         name: "Drawer",
         category: "components",
-        files: ["components/feedback/Drawer.tsx", "components/feedback/Drawer.css"],
-        dependencies: ["core", "createFocusTrap"],
+        files: ["soluid/Drawer.tsx", "soluid/Drawer.css"],
+        dependencies: ["core"],
         description: "Side panel with focus trap",
     },
     Alert: {
         name: "Alert",
         category: "components",
-        files: ["components/feedback/Alert.tsx", "components/feedback/Alert.css"],
+        files: ["soluid/Alert.tsx", "soluid/Alert.css"],
         dependencies: ["core"],
         description: "Inline notification",
     },
     Toast: {
         name: "Toast",
         category: "components",
-        files: ["components/feedback/Toast.tsx", "components/feedback/Toast.css"],
-        dependencies: ["core", "createToast"],
+        files: ["soluid/Toast.tsx", "soluid/Toast.css"],
+        dependencies: ["core"],
         description: "Toast notification with queue",
     },
     Progress: {
         name: "Progress",
         category: "components",
-        files: [
-            "components/feedback/Progress.tsx",
-            "components/feedback/Progress.css",
-        ],
+        files: ["soluid/Progress.tsx", "soluid/Progress.css"],
         dependencies: ["core"],
         description: "Progress bar",
     },
     Spinner: {
         name: "Spinner",
         category: "components",
-        files: [
-            "components/feedback/Spinner.tsx",
-            "components/feedback/Spinner.css",
-        ],
+        files: ["soluid/Spinner.tsx", "soluid/Spinner.css"],
         dependencies: ["core"],
         description: "Loading spinner",
     },
@@ -315,34 +250,28 @@ export const registry = {
     Tabs: {
         name: "Tabs",
         category: "components",
-        files: ["components/navigation/Tabs.tsx", "components/navigation/Tabs.css"],
+        files: ["soluid/Tabs.tsx", "soluid/Tabs.css"],
         dependencies: ["core"],
         description: "Tab navigation",
     },
     Breadcrumb: {
         name: "Breadcrumb",
         category: "components",
-        files: [
-            "components/navigation/Breadcrumb.tsx",
-            "components/navigation/Breadcrumb.css",
-        ],
+        files: ["soluid/Breadcrumb.tsx", "soluid/Breadcrumb.css"],
         dependencies: ["core"],
         description: "Breadcrumb navigation",
     },
     Pagination: {
         name: "Pagination",
         category: "components",
-        files: [
-            "components/navigation/Pagination.tsx",
-            "components/navigation/Pagination.css",
-        ],
+        files: ["soluid/Pagination.tsx", "soluid/Pagination.css"],
         dependencies: ["core"],
         description: "Page navigation",
     },
     Menu: {
         name: "Menu",
         category: "components",
-        files: ["components/navigation/Menu.tsx"],
+        files: ["soluid/Menu.tsx"],
         dependencies: ["core"],
         description: "Dropdown menu (placeholder)",
     },
@@ -350,17 +279,14 @@ export const registry = {
     VisuallyHidden: {
         name: "VisuallyHidden",
         category: "components",
-        files: [
-            "components/utility/VisuallyHidden.tsx",
-            "components/utility/VisuallyHidden.css",
-        ],
+        files: ["soluid/VisuallyHidden.tsx", "soluid/VisuallyHidden.css"],
         dependencies: [],
         description: "Screen reader only content",
     },
     Popover: {
         name: "Popover",
         category: "components",
-        files: ["components/utility/Popover.tsx"],
+        files: ["soluid/Popover.tsx"],
         dependencies: ["core"],
         description: "Floating element (placeholder)",
     },

package/dist/rewrite-imports.js

@@ -3,14 +3,13 @@ import * as path from "node:path";
  * Rewrite internal soluid imports in a template file.
  *
  * Template files use relative imports like:
- *   import { cls } from "../../core/utils"
+ *   import { cls } from "./core/utils"
  *   import { FormField } from "./FormField"
- *   import { createFocusTrap } from "../../primitives/createFocusTrap"
  *
  * These need to be rewritten to point to the correct location
  * in the user's project, using either an alias or relative paths.
  */
-export function rewriteImports(content, filePath, // path of this file relative to componentDir (e.g. "components/form/TextField.tsx")
+export function rewriteImports(content, filePath, // path of this file relative to componentDir (e.g. "Button.tsx", "core/types.ts")
 config) {
     // Match import statements with relative paths (starting with . or ..)
     const importRegex = /((?:import|export)\s+(?:type\s+)?(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+["'])(\.[^"']+)(["'])/g;

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "soluid",
-  "version": "0.1.2",
-  "componentsVersion": "0.1.0",
+  "version": "0.1.3",
   "type": "module",
   "description": "SolidJS Opinionated UI - copy-paste component toolkit",
   "license": "MIT",
@@ -22,6 +21,9 @@
     "lint:fix": "oxlint --fix src/ cli/"
   },
   "devDependencies": {
+    "@solid-primitives/active-element": "^2.1.5",
+    "@solid-primitives/event-listener": "^2.4.5",
+    "@solid-primitives/scheduled": "^1.5.3",
     "@types/node": "^20.19.34",
     "dprint": "^0.52.0",
     "oxlint": "^1.50.0",