crayon-design-system-ui 0.0.1 → 0.0.2

package/README.md

@@ -38,16 +38,16 @@ Everything inside `src/lib` is part of your library, everything inside `src/rout
 
 ## Building
 
-To build your library:
+To build the library and browser bundle (runs `vite build`, `build:browser`, then `prepack`):
 
 ```sh
-npm pack
+npm run build
 ```
 
-To create a production version of your showcase app:
+To create a publishable package (includes `prepack`: Svelte package, component builds, React/Angular build):
 
 ```sh
-npm run build
+npm pack
 ```
 
 You can preview the production build with `npm run preview`.
@@ -83,7 +83,9 @@ Example:
 <ui-button></ui-button>
 ```
 
-**Component usage docs:** See [docs/README.md](docs/README.md) for a list of per-component usage documents (Button, Accordion, AccordionItem). When you change a component in `src/lib/components/`, update its doc in `docs/components/` so the docs stay in sync.
+**Component usage docs:** See [docs/README.md](docs/README.md) for a list of per-component usage documents. When you change a component in `src/lib/components/`, update its doc in `docs/components/` so the docs stay in sync.
+
+**Design tokens:** Import `crayon-design-system-ui/tokens.css` for CSS custom properties (colors, spacing, etc.); see [docs/design-tokens.md](docs/design-tokens.md) if present.
 
 ---
 
@@ -115,19 +117,22 @@ design-system-ui/
 src/
   lib/
     components/
-      Button.svelte
-    index.ts
-
-  register.ts              ← SSR-safe registration entry
-
-vite.config.ts             ← library build config
-vite.browser.config.ts     ← browser bundle config
-
+      button/Button.svelte
+      accordion/Accordion.svelte
+      input/Input.svelte
+      ... (one folder per component)
+    register.ts             ← SSR-safe registration (registers all custom elements)
+    index.ts                ← Svelte component exports
+  register.ts               ← Entry that imports lib/register (used by package)
+  register-browser.ts       ← Browser bundle entry (imports all components)
+
+vite.config.ts              ← SvelteKit app build
+vite.browser.config.ts      ← Browser bundle (dist-browser/bundle.js)
+vite.components.config.ts   ← Custom element .js builds (dist/components/...)
 package.json
 
-
-dist/
-dist-browser/
+dist/                       ← Library build (Svelte, types, register, react, angular)
+dist-browser/               ← Browser bundle + tokens.css
 ```
 
 ---
@@ -155,29 +160,25 @@ Supports:
 
 # Build Commands
 
-## Build library
+## Full build
 
 ```
 npm run build
 ```
 
-Output:
+Runs `vite build`, then `npm run build:browser`, then `npm run prepack`. Produces `dist/` (library + register + React/Angular) and `dist-browser/` (bundle.js, tokens.css).
 
-```
-dist/
-```
-
-## Build browser bundle
+## Build browser bundle only
 
 ```
 npm run build:browser
 ```
 
-Output:
+Output: `dist-browser/bundle.js` and `dist-browser/tokens.css`.
 
-```
-dist-browser/bundle.js
-```
+## Prepack (library + single-component register)
+
+`npm run prepack` (or `npm pack`) runs: SvelteKit sync, `svelte-package`, component build, scripts (add-default-export, patch-index, generate-register-entries, strip-svelte-types), TypeScript for React and Angular, then publint. Required before publishing.
 
 ---
 
@@ -189,40 +190,47 @@ Create installable package:
 npm pack
 ```
 
-Produces:
+Produces (package name + version):
 
 ```
-design-system-ui-0.0.1.tgz
+crayon-design-system-ui-0.0.1.tgz
 ```
 
 Install in another project:
 
 ```
-npm install ../design-system-ui/design-system-ui-0.0.1.tgz
+npm install ./crayon-design-system-ui-0.0.1.tgz
 ```
 
 ---
 
 # Usage — Plain HTML
 
-```
+With a bundler (e.g. Vite, Rollup), use the register entry:
+
+```html
 <script type="module">
-  import 'design-system-ui';
+  import 'crayon-design-system-ui/register';
 </script>
+<ui-button variant="primary">Click Me</ui-button>
+```
 
-<ui-button variant="primary">
-  Click Me
-</ui-button>
+Without a bundler, use the browser bundle (e.g. copy `node_modules/crayon-design-system-ui/dist-browser/bundle.js` and optionally `tokens.css` to your server, or use a CDN):
+
+```html
+<link rel="stylesheet" href="tokens.css" />
+<script type="module" src="bundle.js"></script>
+<ui-button variant="primary">Click Me</ui-button>
 ```
 
 Optional click event:
 
-```
+```js
 document.querySelector('ui-button')
   .addEventListener('ui-click', () => alert('Clicked'));
 ```
 
-Run using local server:
+Run with a local server:
 
 ```
 npx serve .
@@ -269,6 +277,8 @@ In Svelte apps you can also use the **Svelte component** directly (package name:
 
 Other named exports: `Input`, `Textarea`, `Accordion`, `AccordionItem`, `FormSelect`, `FormSelectOption`, `Checkbox`, `Radio`, `Label`, `Form`, `Avatar`, `Card`. Use this when your app and the design system are on the same major Svelte version; otherwise use the custom elements above.
 
+For a single component (smaller bundle), import the Svelte file directly: `import Button from 'crayon-design-system-ui/components/button/Button.svelte'`.
+
 ---
 
 # Usage — SvelteKit
@@ -366,59 +376,65 @@ import 'crayon-design-system-ui/register';
 
 # SSR-safe Registration
 
-File:
+Registration runs only in the browser. Logic lives in `src/lib/register.ts`; the package entry `src/register.ts` imports it.
 
-```
-src/register.ts
-```
-
-```
+```js
+// src/lib/register.ts (simplified)
 if (typeof window !== 'undefined' && 'customElements' in window) {
-  import('./lib/components/button/Button.svelte');
+  void import('./components/button/Button.svelte');
+  void import('./components/accordion/Accordion.svelte');
+  // ... all components
 }
 ```
 
-Prevents server-side rendering errors.
+Prevents server-side rendering errors when using `import 'crayon-design-system-ui/register'`.
 
 ---
 
 # package.json (important fields)
 
+Main entry is the library (Svelte + types); custom elements are registered via `crayon-design-system-ui/register` or the browser bundle.
+
 ```
-{
-  "main": "./dist-browser/bundle.js",
-  "types": "./dist/index.d.ts",
+"main": "./dist/index.js",
+"module": "./dist/index.js",
+"types": "./dist/index.d.ts",
+"svelte": "./dist/index.js",
 
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist-browser/bundle.js"
-    }
-  },
+"exports": {
+  ".":           { "types": "./dist/index.d.ts", "svelte": "./dist/index.js", "import": "./dist/index.js", "default": "./dist/index.js" },
+  "./register":  { "types": "./dist/register.d.ts", "import": "./dist/register.js", "default": "./dist/register.js" },
+  "./register/*": { "types": "./dist/register/*.d.ts", "import": "./dist/register/*.js", "default": "./dist/register/*.js" },
+  "./components/*": { "types": "./dist/components/*.svelte.d.ts", "svelte": "./dist/components/*.svelte", "import": "./dist/components/*.svelte" },
+  "./react":     { "types": "./dist/react/index.d.ts", "import": "./dist/react/index.js", "default": "./dist/react/index.js" },
+  "./angular":   { "types": "./dist/angular/index.d.ts", "import": "./dist/angular/index.js", "default": "./dist/angular/index.js" },
+  "./tokens.css": "./dist/tokens.css"
+},
 
-  "files": [
-    "dist",
-    "dist-browser"
-  ]
-}
+"files": [ "dist", "dist-browser" ]
 ```
 
-Ensures correct runtime entry.
+Peer dependencies (all optional): `svelte`, `react`, `react-dom`, `@angular/core`.
 
 ---
 
 # Development
 
-Run dev server:
+Run dev server (showcase app):
 
 ```
 npm run dev
 ```
 
-Build everything:
+Build everything (library + browser bundle + prepack):
 
 ```
 npm run build
+```
+
+Build only the browser bundle:
+
+```
 npm run build:browser
 ```
 
@@ -426,19 +442,13 @@ npm run build:browser
 
 # How It Works
 
-When imported:
+When you import the register entry:
 
-```
-import 'design-system-ui'
-```
-
-The browser bundle executes:
-
-```
-customElements.define('ui-button', ...)
+```js
+import 'crayon-design-system-ui/register';
 ```
 
-Registers the component globally.
+the package loads and, in the browser, dynamically imports each component’s compiled output. Each component calls `customElements.define('ui-button', ...)` (and the other tags), so the custom elements are registered globally. Using the single-component entry (e.g. `import 'crayon-design-system-ui/register/button'`) registers only that component.
 
 ---
 
@@ -446,29 +456,27 @@ Registers the component globally.
 
 Works in:
 
-- Plain HTML
-- SvelteKit
-- React
-- Angular
-- Vue
-- Any browser-based framework
+- **Plain HTML** (with a bundler, or by loading `dist-browser/bundle.js` and `tokens.css`)
+- **Svelte / SvelteKit** (named Svelte components or custom elements)
+- **React** (wrapper components from `crayon-design-system-ui/react`; register once)
+- **Angular** (wrapper components / `CrayonDesignSystemModule` from `crayon-design-system-ui/angular`; register once)
+- **Vue** and any other framework (use custom elements after `import 'crayon-design-system-ui/register'`)
 
 ---
 
 # Next Steps
 
-Add more components:
+Current components: Button, Accordion, AccordionItem, Input, Textarea, FormSelect, FormSelectOption, Checkbox, Radio, Label, Form, Avatar, Card.
+
+Ideas for more:
 
-- Input
-- Card
-- Modal
-- Select
+- Modal, Tabs, Tooltip, Dropdown
 
 Optional:
 
 - Storybook
 - Private npm publish
-- Design tokens
+- Expand design tokens (see `tokens.css` and `./tokens.css` export)
 
 ---
 
@@ -476,11 +484,12 @@ Optional:
 
 This design system:
 
-- Uses Web Components
-- Framework independent
-- npm installable
-- SSR-safe
-- Production ready foundation
+- Uses **Svelte 5** and **Web Components** (custom elements)
+- **Framework independent**: HTML, Svelte, React, Angular, Vue (custom elements + optional wrappers for React/Angular)
+- **npm installable** as `crayon-design-system-ui`
+- **SSR-safe** registration
+- Exports: main (Svelte), `register` / `register/*`, `components/*`, `react`, `angular`, `tokens.css`
+- Production-ready foundation
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crayon-design-system-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run build:browser && npm run prepack",
@@ -40,6 +40,11 @@
       "import": "./dist/register.js",
       "default": "./dist/register.js"
     },
+    "./register/*": {
+      "types": "./dist/register/*.d.ts",
+      "import": "./dist/register/*.js",
+      "default": "./dist/register/*.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.svelte.d.ts",
       "svelte": "./dist/components/*.svelte",
@@ -64,10 +69,18 @@
     "@angular/core": ">=17.0.0"
   },
   "peerDependenciesMeta": {
-    "svelte": { "optional": true },
-    "react": { "optional": true },
-    "react-dom": { "optional": true },
-    "@angular/core": { "optional": true }
+    "svelte": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@angular/core": "^19.0.0",