@webjsdev/ui 0.3.17 → 0.5.0

package/README.md

@@ -100,19 +100,78 @@ step. Pass `--overwrite` to reset those instead.
 - `components.json`, your project's UI config (aliases, base color, Tailwind path)
 - `lib/utils/cn.ts`, the `cn()` class-merge helper, and `lib/utils/dom.ts`
   beside it for the client-only `onBeforeCache()` helper
-- Tailwind tokens + CSS variables appended to `styles/globals.css`
+- Tailwind tokens + CSS variables appended to `styles/globals.css`, between a
+  `/* @webjsdev/ui theme */` and a `/* @webjsdev/ui theme end */` marker
+
+### Presets, styles and icon libraries
+
+The configurator at [webjs.dev/ui/create](https://webjs.dev/ui/create) builds a
+whole design system (style, base color, theme, chart color, font, radius, icon
+library) and prints one command for it:
+
+```sh
+npx @webjsdev/ui init --preset b0
+```
+
+That writes the style and icon library into `components.json`, the chosen
+icon library to `lib/utils/icons.ts`, and the theme, REPLACING the block
+between the two markers in place, so running it again with another code
+switches the design system without touching the rest of your stylesheet. A
+block from before the end marker existed is left alone and reported. The code
+is shadcn/ui's preset format, so a shadcn code works too. The site serves
+what a code installs at `/ui/init?preset=<code>` (JSON) and
+`/ui/init/md?preset=<code>` (step-by-step markdown).
+
+One choice at a time works the same way:
+
+```sh
+npx @webjsdev/ui init --style nova         # one of the nine styles the bake applies
+npx @webjsdev/ui init --icons tabler       # lucide, tabler, hugeicons, phosphor, remixicon
+```
+
+Every icon library exports the same function names (`ChevronDownIcon('size-4')`
+and so on), so switching libraries changes no import. The themes and fonts
+are registry items too: `theme-<name>` for shadcn's 24 themes and
+`font-<name>` / `font-heading-<name>` for its 26 font families.
 
 ## What `add` does
 
 Copies the component's `.ts` source into `components/ui/<name>.ts` (or your
 configured alias). Resolves transitive deps via `registryDependencies` and
-auto-installs npm deps like `@floating-ui/dom` for popover-style components. For
+installs any npm dependency the app's `package.json` does not already declare. For
 a Tier-1 class-helper component it copies the helpers plus a lean header and a
 one-line pointer, and leaves the worked structural example OUT of the file (get
 it on demand with `npx @webjsdev/ui view <name>`, which is what the pointer it
 leaves behind says too). It also self-heals the theme tokens if
 they are missing.
 
+A block (a ready-made view such as a dashboard or a chart, registry type
+`registry:block`) installs the same way. Each of its files lands at its own
+target under the app (`app/...`, `modules/...`, `components/...`), and every
+relative import in it is rewritten to where the imported file landed: a kit
+component into your ui alias, the `cn()` helper to your utils alias, another
+file of the same block to its own target. A block's files are app code you
+own, so `add` never replaces one that exists unless you pass `--overwrite`
+(`--yes` alone keeps it), and it prints the list of files it wrote. A block or
+component that needs design tokens your theme may lack (the sidebar's
+`--sidebar-*`, a chart's `--chart-*`) carries them, and `add` adds the missing
+ones to your stylesheet without touching a token you already define.
+
+Before hand-writing a login or signup page, an app sidebar shell, a dashboard
+or a chart, list the blocks and install the closest one:
+
+```sh
+npx @webjsdev/ui list --type block          # every block, with its description
+npx @webjsdev/ui view login-03 --files-only  # what it installs, and where
+npx @webjsdev/ui add login-03                # app/login/page.ts + components/login-form.ts
+```
+
+The kit ships shadcn's ten authentication blocks today (`login-01` to
+`login-05`, `signup-01` to `signup-05`). Each page is a server-rendered page
+module and each form a real `<form>` built from the kit's class helpers, with
+no JavaScript. The form has no `action` yet: bind a server action
+(`<form action=${signIn}>`) when you wire it up.
+
 The install runs with your project's package manager. `add` looks for a
 lockfile in the current directory and then each parent, stopping at the
 workspace root, so an app inside a monorepo uses the root's lockfile:
@@ -129,12 +188,12 @@ always compares against the live upstream.
 
 | Command | Effect |
 |---|---|
-| `webjsui init` | Initialize a project (writes `components.json`, `lib/utils/cn.ts`, the theme tokens). Preserves an existing project's settings and helper files; `-o, --overwrite` resets them. Exits non-zero if the tokens cannot be written. |
-| `webjsui add <names...>` | Add components (copies helpers + a pointer for Tier-1, self-heals theme tokens) |
-| `webjsui list` | List all available components |
-| `webjsui view <name>` | Print a component's projected view (helpers + paste-ready example) and full source |
-| `webjsui diff [name]` | Show diff between your local copy and the live registry |
-| `webjsui info` | Print project diagnostics |
+| `webjsui init` | Initialize a project (writes `components.json`, `lib/utils/cn.ts`, the theme tokens). Preserves an existing project's settings and helper files; `-o, --overwrite` resets them and replaces the theme block. `--preset <code>`, `--style <name>` and `--icons <library>` apply a design system or one choice of it. Exits non-zero if the tokens cannot be written. |
+| `webjsui add <names...>` | Add components or blocks (copies helpers + a pointer for Tier-1, writes a block's files to their targets, self-heals theme tokens) |
+| `webjsui list [filter]` | List the components, blocks and charts in three labelled groups. `--type <ui\|block\|chart\|all>`, `--category <name>`, and `--json` for one compact array of `{ name, type, categories, description }` |
+| `webjsui view <name>` | A component: its projected view (helpers + paste-ready example) and full source. A block: its description, categories, dependencies, install command and files with targets, then the sources (`--files-only` stops before them, `--json` prints one document) |
+| `webjsui diff [name]` | Show diff between your local copy and the live registry, installed blocks included |
+| `webjsui info` | Print project diagnostics, with the kit's component, block and chart counts |
 | `webjsui build` | (For registry authors) Compile a custom registry |
 | `webjsui lint` | Opt-in design-system linter. Reports raw palette colors, arbitrary values and classes composed over a kit helper, at the line, with a message built from your own theme tokens and helper variants. Configured by a `lint` block in `components.json`; with no block it reports nothing and exits 0. `--json` for an agent loop, `--max-warnings <n>` to pin a count. |
 

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,349 @@
+# Third-party notices
+
+`@webjsdev/ui` and the WebJs UI site at webjs.dev/ui include work derived from
+the projects below. Each is used under the license reproduced here.
+
+## shadcn/ui
+
+The component design, the component API (variant names, sizes, the
+sub-component breakdown, the data attributes), the style skins, the themes,
+the blocks and charts, and the layout of the webjs.dev/ui site are ported from
+shadcn/ui (https://github.com/shadcn-ui/ui). The site also serves some of
+shadcn/ui's own assets unmodified: the avatars in website/public/avatars/
+(02.png, 03.png, 10.png, from apps/v4/public/avatars) and the Sera page
+screenshots in website/public/images/ (sera-0*.png, from apps/v4/public/images).
+
+```text
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## tw-animate-css
+
+The enter and exit animation utilities the ported styles use are vendored from
+tw-animate-css 1.4.0 (https://github.com/Wombosvideo/tw-animate-css) as
+`packages/registry/styles/tw-animate.css`.
+
+```text
+MIT License
+
+Copyright (c) 2025 Wombosvideo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Lucide
+
+The inline SVG icons are drawn from Lucide (https://lucide.dev).
+
+```text
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+## Hugeicons
+
+The webjs.dev/ui site draws the icons on its home page and header from
+Hugeicons Free (https://hugeicons.com), the library shadcn's own site uses,
+generated from `@hugeicons/core-free-icons` 4.4.0 into inline SVG.
+
+```text
+MIT License
+
+Copyright (c) 2025 Hugeicons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Tabler Icons
+
+The webjs.dev/ui site draws the Tabler icons some of shadcn's demos import
+(https://tabler.io/icons), generated from `@tabler/icons` 3.34.1 into inline
+SVG by `website/scripts/gen-tabler.mjs`.
+
+```text
+MIT License
+
+Copyright (c) 2020-2024 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## The kit's icon libraries
+
+`packages/registry/lib/icons*.ts`, the five icon libraries an app picks with
+`webjsui init --icons`, are generated by `scripts/gen-icons.mjs` from the
+packages below, limited to the glyphs shadcn/ui's components name. Lucide
+(`lucide` 1.70.0), Hugeicons (`@hugeicons/core-free-icons` 4.4.0) and Tabler
+Icons (`@tabler/icons` 3.50.0) are under the licenses above. The other two:
+
+### Phosphor Icons
+
+`@phosphor-icons/core` 2.1.1, the regular weight (https://phosphoricons.com).
+
+```text
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+### Remix Icon
+
+`remixicon` 4.8.0 (https://remixicon.com), Copyright (c) Remix Design,
+licensed under the Apache License, Version 2.0
+(https://www.apache.org/licenses/LICENSE-2.0). The version is pinned: 4.8.0
+is the last release licensed under Apache-2.0, and later releases ship the
+more restrictive Remix Icon License v1.0. The SVG path data is reproduced
+unmodified inside the generated functions.
+
+## Geist and Geist Mono
+
+The webjs.dev/ui site self-hosts the Geist and Geist Mono typefaces
+(https://github.com/vercel/geist-font).
+
+```text
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+```
+
+## Playfair Display
+
+The webjs.dev/ui site self-hosts the Playfair Display typeface
+(https://github.com/clauseggers/Playfair-Display) for its Sera page, as
+Google Fonts serves it (the latin subset, unmodified).
+
+```text
+Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display), with Reserved Font Name "Playfair Display"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: http://scripts.sil.org/OFL
+```
+
+The full text of the SIL Open Font License, Version 1.1 is reproduced under
+Geist and Geist Mono above.
+
+## EB Garamond and Instrument Serif
+
+The webjs.dev/ui site self-hosts the EB Garamond
+(https://github.com/octaviopardo/EBGaramond12) and Instrument Serif
+(https://github.com/Instrument/instrument-serif) typefaces for its
+design-system configurator's preview, as Google Fonts serves them to
+next/font (the latin subset, unmodified; Instrument Serif at weight 400).
+
+```text
+Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: http://scripts.sil.org/OFL
+```
+
+The full text of the SIL Open Font License, Version 1.1 is reproduced under
+Geist and Geist Mono above.
+
+## Noto Sans Arabic and Noto Sans Hebrew
+
+The webjs.dev/ui site self-hosts the Noto Sans Arabic
+(https://github.com/notofonts/arabic) and Noto Sans Hebrew
+(https://github.com/notofonts/hebrew) typefaces for its RTL example, as
+Google Fonts serves them to next/font (each family's script subset and its
+latin subset, unmodified).
+
+```text
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/arabic)
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/hebrew)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: https://openfontlicense.org
+```
+
+The full text of the SIL Open Font License, Version 1.1 is reproduced under
+Geist and Geist Mono above.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.17",
+  "version": "0.5.0",
   "type": "module",
   "description": "The AI-first component library for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Class-helper functions for visuals, custom elements only where state matters, source-copied into your repo so you own it.",
   "bin": {
@@ -17,7 +17,8 @@
     "bin",
     "src",
     "packages/registry",
-    "README.md"
+    "README.md",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "scripts": {
     "test": "node --test test/*.test.js",
@@ -25,6 +26,7 @@
     "test:e2e:a11y-tree": "node test/e2e/a11y-tree.e2e.mjs"
   },
   "dependencies": {
+    "@webjsdev/core": "^0.9.0",
     "commander": "^14.0.0",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2",

package/packages/registry/blocks/_shared/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/packages/registry/blocks/charts/chart-area-axes.ts

@@ -0,0 +1,72 @@
+/**
+ * An area chart with axes, a chart block ported from shadcn/ui's chart-area-axes.
+ *
+ * Installed by `npx @webjsdev/ui add chart-area-axes` at
+ * `components/charts/chart-area-axes.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartAreaAxes()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { areaChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartAreaAxes() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Area Chart - Axes</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${areaChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop and mobile visitors, January to June',
+          margin: { left: -20, right: 12 },
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => String(value).slice(0, 3) },
+          yAxis: { tickLine: false, axisLine: false, tickMargin: 8, tickCount: 3 },
+          tooltip: { cursor: false },
+          areas: [
+            { dataKey: 'mobile', type: 'natural', fill: 'var(--color-mobile)', fillOpacity: 0.4, stroke: 'var(--color-mobile)', stackId: 'a' },
+            { dataKey: 'desktop', type: 'natural', fill: 'var(--color-desktop)', fillOpacity: 0.4, stroke: 'var(--color-desktop)', stackId: 'a' },
+          ],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+            </div>
+            <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-area-default.ts

@@ -0,0 +1,64 @@
+/**
+ * A simple area chart, a chart block ported from shadcn/ui's chart-area-default.
+ *
+ * Installed by `npx @webjsdev/ui add chart-area-default` at
+ * `components/charts/chart-area-default.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartAreaDefault()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { areaChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 73 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartAreaDefault() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Area Chart</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Showing total visitors for the last 6 months</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${areaChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Desktop visitors, January to June',
+          margin: { left: 12, right: 12 },
+          grid: { vertical: false },
+          xAxis: { dataKey: 'month', tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => String(value).slice(0, 3) },
+          tooltip: { cursor: false, indicator: 'line' },
+          areas: [{ dataKey: 'desktop', type: 'natural', fill: 'var(--color-desktop)', fillOpacity: 0.4, stroke: 'var(--color-desktop)' }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <div class="flex w-full items-start gap-2 text-sm">
+          <div class="grid gap-2">
+            <div class="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+            </div>
+            <div class="flex items-center gap-2 leading-none text-muted-foreground">January - June 2024</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}