mechanica 2.0.0-alpha.9 → 2.0.1

package/README.md

@@ -1,28 +1,61 @@
 # mechanica
 
-Build Vue 3 websites with a visual block editor. Authors write Vue SFC **blocks**, a visual editor arranges them into pages, and the result renders server-side and ships statically or via a backend.
+Build Vue 3 websites with a visual block editor. You write **blocks** — ordinary Vue single-file components with a typed props schema — and arrange them into **pages** in an editor that runs on top of your live site. Pages are stored as readable Markdown files in your project, and `mechanica export` renders every page to static HTML.
 
-Built for **Vite 8 / Vue 3.5 / Bun**.
+- **Blocks are just Vue.** One compile-time macro, `defineBlock`, declares a block's props; everything else is plain Vue 3.
+- **The editor is your site.** In development the editor overlays the real page: add blocks from a palette, edit props in forms, drag to reorder, undo/redo, manage pages.
+- **Pages are files.** `.mech/pages/about.page.md` is Markdown with YAML props — editable in the editor, by hand, or by an AI assistant, with clean git diffs.
+- **Static output, SEO included.** Per-page HTML and code splitting, sitemap, canonical URLs, hreflang and JSON-LD.
 
-## Install
+Built on Vite 8 and Vue 3.5. Runs on Node.js 20.19+ or 22.12+ (npm, pnpm, yarn) or [Bun](https://bun.sh).
 
-Works with plain Node ≥ 20.19 (npm/pnpm/yarn) or [Bun](https://bun.sh) — Bun installs run the TypeScript source directly, Node uses the compiled build. The fastest start is the scaffolder:
+## Quick start
 
 ```bash
 npm create mechanica@latest my-site
-# or: bun create mechanica my-site
+cd my-site
+npm install
+npm run dev
 ```
 
-Or add it to an existing Vite + Vue project:
+Open the URL Vite prints (`http://127.0.0.1:5173/`). The starter page appears with the editor on top of it: click a block to edit its props, add blocks from the palette, and open the page browser to create more pages. Every edit is saved into `.mech/` as you go.
+
+When you're ready to ship:
 
 ```bash
-npm install mechanica
+npm run export
 ```
 
-## Quick start
+`export/` now holds a static site: an `index.html` per page, hashed JS and CSS in `assets/`, your uploads in `media/`. It's built to be served from the root of a domain; upload it to any static host, or look at it locally with `npx vite preview --outDir export`.
+
+Prefer Bun? `bun create mechanica my-site`, then `bun install` and `bun run dev`.
+
+## A Mechanica project
+
+```text
+index.html            the document shell; {{ }} placeholders fill <head> per page
+vite.config.ts        plugins: [mechanica(), vue()]
+src/main.ts           export default defineMechanicaApp({ root: App })
+src/App.vue           site-wide chrome around <Content />
+src/blocks/*.vue      blocks: every file appears in the editor's palette
+src/data/*.ts         shared data entries (defineData)
+src/composer.ts       optional: your design system for the Block Composer
+.mech/pages/          the pages, one .page.md file each
+.mech/assets/         uploaded files
+.mech/data.json       site-wide data values
+```
+
+`.mech/` is content — commit it. Scaffolded projects also include an `AGENTS.md` that teaches AI coding assistants (Claude Code, Codex and others) to author blocks and pages in this format.
+
+### Adding Mechanica to an existing Vite + Vue project
+
+```bash
+npm install mechanica vue
+npm install -D vite @vitejs/plugin-vue
+```
 
-**`vite.config.ts`**
 ```ts
+// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { mechanica } from 'mechanica/plugin'
@@ -32,92 +65,314 @@ export default defineConfig({
 })
 ```
 
-**`index.html`** — just a mount point; the plugin injects the entry and editor:
-```html
-<body><div id="app"></div></body>
-```
-
-**`src/main.ts`** — export an app definition (no `createApp`/`mount` yourself):
 ```ts
+// src/main.ts — export an app definition; don't call createApp()/mount() yourself
 import { defineMechanicaApp } from 'mechanica'
 import App from './App.vue'
 
 export default defineMechanicaApp({ root: App })
 ```
 
-**`src/App.vue`** — render the page content somewhere:
 ```vue
+<!-- src/App.vue -->
 <template>
   <Content />
 </template>
+
 <script setup lang="ts">
 import { Content } from 'mechanica'
 </script>
 ```
 
-**`src/blocks/Hero.vue`** — a block. `defineBlock` is a global macro (no import):
+`index.html` needs only a mount point, `<div id="app"></div>`. Leave out the usual `<script type="module" src="/src/main.ts">`: the plugin injects the entry (and, in dev, the editor) itself.
+
+## Blocks
+
+A block is a `.vue` file in `src/blocks/`. Its `<script setup>` calls the global `defineBlock` macro (no import needed), which declares the editable props and returns them typed:
+
 ```vue
+<!-- src/blocks/Hero.vue -->
 <template>
-  <section>
+  <section class="hero">
     <h1>{{ props.title }}</h1>
-    <p>{{ props.subtitle }}</p>
+    <p v-if="props.subtitle">{{ props.subtitle }}</p>
+    <Image :image="props.photo" eager />
+    <Link v-if="props.cta?.url" :to="props.cta">{{ props.cta.title || 'Read more' }}</Link>
   </section>
 </template>
+
 <script setup lang="ts">
+import { Image, Link } from 'mechanica'
+
 const props = defineBlock({
   name: 'Hero',
   category: 'Content',
   props: {
-    title: { type: 'string', default: 'Hello' },
+    title: { type: 'string', label: 'Headline', default: 'Hello' },
     subtitle: 'text',
+    photo: 'image',
+    cta: 'smartLink',
   },
+  // Example values for the palette preview and `mechanica shot`
+  previewData: { title: 'Build sites visually', subtitle: 'Blocks are plain Vue components.' },
 })
 </script>
 ```
 
-Run `vite` and open the page — the editor overlay lets you add Hero blocks and edit their props live.
+The block's id is its kebab-cased file name (`Hero.vue` → `hero`). Props use [compact-json-schema](https://www.npmjs.com/package/compact-json-schema): the JSON types (`string`, `number`, `boolean`, `object`, `array`) plus Mechanica's field types `text`, `richText`, `image`, `color`, `smartLink` and `multiselect`. The object form takes `default`, `label`, `description`, `placeholder` and `enum` (rendered as a select).
 
-## Authoring API
+Other `defineBlock` options: `icon`, `description` and `order` for the palette; `hidden` and `devOnly`; `standalone`, `folders` and `layouts` to control where the palette offers the block; `chunk` for code splitting; `slots` for named slots. A block whose template contains `<slot />` becomes a container, and other blocks nest inside it in the editor.
 
-### `defineBlock(descriptor)` — the one macro
-No import; used inside a block's `<script setup>`. Fields use [compact-json-schema](https://www.npmjs.com/package/compact-json-schema). Built-in field types: `string`, `text`, `number`, `boolean`, `color`, `image`, `file`, `smartLink`, `multiselect`, `richText`, plus `array`/`object`. Object-form fields take editor metadata (`label`, `description`, `default`, `placeholder`).
+Give every block meaningful `previewData`: it drives the palette's hover preview, the standalone preview route and `mechanica shot`. A `$slots` key fills slots with child blocks, e.g. `$slots: { default: [{ blockId: 'card', data: { title: 'One' } }] }`.
+
+## Pages
+
+Each page is a `.page.md` file under `.mech/pages/`, and its path is the URL: `about.page.md` → `/about`, `blog/index.page.md` → `/blog`, `index.page.md` → `/`.
+
+```markdown
+---
+name: About
+data:
+  head:
+    title: About us
+---
+
+::: hero
+title: About us
+cta: { url: /contacts, title: Write to us }
+@subtitle
+We build fast websites
+for people who care about the details.
+:::
+
+::: columns
+gap: lg
+::: card slot=left
+title: Fast
+:::
+::: card slot=right
+title: Readable
+:::
+::: /columns
+```
+
+- The YAML frontmatter holds the editor label (`name`), page-scoped data (`data`) and optional `layout`, `draft: true` (hidden from listings and the export) and `meta` (`noindex: true`, `lastmod`).
+- Each block is a fence: `::: <blockId>`, then its props as YAML, then `@field` regions for long text, then any child blocks, closed by `:::`. Keep that order: once a region has started, a `key: value` line is part of its text.
+- A region runs until the next `@field`, child block or `:::`, and is taken as written, blank lines and Markdown included. It fills a `text` prop with that text, and a `richText` prop with its Markdown turned into rich text.
+- Blocks nest by placing fences inside a container's fence, and `slot=<name>` puts a child into a named slot (a container's children go either all to the default slot or all to named ones). Nothing is indented: every `:::` and `@field` starts at the beginning of its line, and a block is a child of whichever fence is still open. A container may close with `::: /<blockId>`, which reports a missing `:::` at the line where the fences stop pairing up.
+- Props are YAML, so quote a value that starts with `#` or contains `: `, as in `href: "#pricing"`. Inside a region nothing needs quoting; only a line that starts with `:::`, or consists of just `@name`, takes a leading backslash (`\:::`), and not even that inside a code fence.
+- An `image` prop points at an uploaded file: `photo: { src: /@mechanica/assets/team.jpg, alt: "Our team" }`.
+- Props left out take their schema defaults, so a hand-written page renders exactly like one made in the editor.
+
+With `npm run dev` running, edits you make to these files show up in the editor live, and the editor won't overwrite a file that changed on disk underneath it.
+
+## Shared data and `<head>`
+
+Data that isn't a block prop (a site header, page titles, a post date) is declared with `defineData`, an ordinary imported function that returns a hook:
 
 ```ts
-defineBlock({
-  name, category, icon, description, order, hidden,
-  props: { /* schema */ },
-  slots: ['default'],   // auto-detected from <slot> if omitted
+// src/data/head.ts
+import { defineData } from 'mechanica'
+
+export const useHead = defineData({
+  id: 'head',
+  title: 'Page head',
+  props: {
+    title: { type: 'string', default: 'My site' },
+    description: 'string',
+  },
 })
 ```
 
-### `defineData({ id, scope, props })` — shared data
-An **imported function** (not a macro), used in a standalone module; returns a hook:
+Call `useHead()` in any component to read the values. An entry registers when its module is imported, usually by the block or component that uses it. Data that only `index.html` reads, like `head`, still needs importing somewhere (the starter's `App.vue` imports `./data/head`): unregistered entries are left out of the Page data window, page state and `{{ }}` placeholders.
+
+Values are edited in the editor's **Page data** window, where each entry can be set for one page, for a folder of pages, or site-wide; a page value overrides its folder's, which overrides the site's. They're stored in the page file, `.mech/folders.json` and `.mech/data.json` respectively. Pass `folder: 'blog'` to offer an entry only on pages under that folder, and `localized: true` to translate its site/folder value per language.
+
+`index.html` is templated with the same data, in dev and in the export:
+
+```html
+<title>{{ head.title }}</title>
+<meta name="description" content="{{ head.description }}" />
+```
+
+`{{ page.path }}`, `{{ site.url }}` and `{{ site.name }}` are available too, and the triple-brace form `{{{ expr }}}` emits raw JSON for `<script type="application/ld+json">` blocks.
+
+## Layouts and whole-page blocks
+
+Give pages different shells by declaring named layouts. Each layout component renders `<Content />` inside its own chrome, and the root renders `<Layout />`:
+
 ```ts
-// data/header.ts
-import { defineData } from 'mechanica'
-export const useHeader = defineData({ id: 'header', scope: 'site', props: { logo: 'image' } })
-// in a component: const header = useHeader()
+// src/main.ts
+export default defineMechanicaApp({
+  root: App, // its template: <Layout />
+  layouts: { site: SiteLayout, bare: BareLayout }, // the first entry is the default
+})
+```
+
+A page picks its layout with `layout: bare` in its frontmatter, or in the editor's **Page setup** pane. Pages without one get the first layout, and `useLayout().name` tells a component which layout is active.
+
+Blocks with `standalone: true` are whole pages in one block, such as a 404 or a contact form. The palette offers them only on empty pages ("Start this page"), so they don't clutter it elsewhere.
+
+## Images
+
+Render an `image` prop with the `<Image>` component. It outputs `alt`, intrinsic `width`/`height` (no layout shift), native lazy loading, and a blurred inline preview until the real image arrives. Add `eager` to above-the-fold images.
+
+The editor captures dimensions and the blur-up preview on upload. For images added by hand, `mechanica images` generates them headlessly; it needs `sharp` in your project (`npm install -D sharp`), and the export fills in anything missing when `sharp` is installed.
+
+Editors can set a focal point and crop from the image field's **Position / Crop** action. Cropping is opt-in per field, via `crop: { width: 1200, height: 630 }` (fixed output size), `crop: { aspect: 16 / 9 }` or `crop: true` (free) on its schema. Crops are non-destructive: the original stays, and a derived file is rendered in its place. For images painted as a CSS background, `imagePosition(image)` turns the focal point into a `background-position` value.
+
+## Links and navigation
+
+`<Link :to="…">` takes a path string or a `smartLink` value. Internal links navigate client-side without a full reload, get an `is-active` class on the current page, and add the language prefix on multi-language sites. `useRouter().push(path)` navigates from code, and `useRoute().path` is the current path.
+
+## Listing pages and pagination
+
+Blocks can query the site's pages. Queries run at build time and their results are baked into the page, so there's no runtime API to host:
+
+```ts
+import { usePages, usePagination } from 'mechanica'
+import { usePostMeta } from '../data/post-meta' // defineData({ id: 'postMeta', props: { date: 'string' } })
+
+const latest = usePages({ folderName: 'blog', data: [usePostMeta], sort: { by: 'postMeta.date', dir: 'desc' }, limit: 3 })
+
+const blog = usePagination({ folderName: 'blog', data: [usePostMeta], pageSize: 10 })
+// blog.items, blog.page, blog.pageCount, blog.prevPath, blog.nextPath, blog.pathFor(n)
 ```
 
-### Components & composables
-`<Content>`, `<Link :to="..." />` (string path or `smartLink` object), `useRouter`, `useRoute`, `usePages`, `useFetch`, `usePageData`.
+A paginated page exports as real pages, `/blog`, `/blog/2` and so on, each with its own slice. `useFetch({ url })` fetches external JSON the same way: on the server, baked into the output.
+
+## Generated pages
+
+To produce many pages from an external source (a product catalog, API docs) without a `.page.md` file each, give the plugin page providers:
 
-### Custom field types
 ```ts
-import { defineFieldType, registerFields } from 'mechanica/editor'
-registerFields([
-  defineFieldType({ name: 'video', schema: { type: 'object', properties: { src: 'string' } }, editor: VideoField }),
-])
+// vite.config.ts
+import { mechanica, type PageProvider } from 'mechanica/plugin'
+
+const products: PageProvider = async () => {
+  const items = await fetch('https://api.example.com/products').then((res) => res.json())
+  return items.map((item) => ({
+    path: `/shop/${item.slug}`,
+    content: [{ id: item.slug, blockId: 'product', data: { title: item.title } }],
+    data: { head: { title: item.title } },
+  }))
+}
+
+// plugins: [mechanica({ generatePages: [products] }), vue()]
 ```
 
-## CLI
+Providers run when the dev server starts and at build. Generated pages render through the normal pipeline, appear in the sitemap and are read-only in the editor.
+
+## Multi-language sites
+
+```ts
+mechanica({ locales: ['en', 'de'] }) // the first locale is the default
+```
+
+The default language is served at unprefixed URLs, the others under `/de/…`. A translation is a sibling file, `about@de.page.md`, created from the editor's language switcher. It stores only the fields that differ, so images, links and anything else left untranslated keep following the default-language page.
+
+`<Link>` keeps visitors in their language automatically. For a language switcher, `useLocale()` returns `locale`, `locales` and `localePath()`, and `<Link :to="path" :locale="code">` targets a specific language. The export writes each translation to its own URL (pages without a translation are skipped for that language), and with `siteUrl` set it adds `hreflang` alternates to the page head and the sitemap.
+
+## Rich text and widgets
+
+A `richText` prop is edited with a WYSIWYG editor for headings, lists, bold/italic/underline, images, code, callouts and tables. It switches to a Markdown view, where you can also write links as `[text](url)`, and it's stored as Markdown inside the page file. Its value is a [vuewrite](https://www.npmjs.com/package/vuewrite) document; render it with vuewrite's `TextViewer`, as the starter's `RichTextView.vue` does.
+
+You can add your own content widgets to the editor's Insert menu: put a module in `src/widgets/` that default-exports `defineWidget({ type, title, icon, create, editor })` from `mechanica/widgets`, then render the widget through a `#<type>` slot on your `TextViewer`.
+
+## Block Composer
+
+Designers can build new blocks without code. The palette's **New block** button opens the composer: frames with auto layout, text, images and your own components, per-breakpoint styles, and repeated items. Any value can be bound to a prop, so each placed copy stays editable. Composed blocks are saved as `.mech/blocks/<id>.block.yml`, appear in the palette under "Site blocks", and render, preview and export like any other block.
+
+`src/composer.ts` hands the composer your design system:
+
+```ts
+import { defineComposer } from 'mechanica'
+import UiButton from './components/UiButton.vue'
+
+export default defineComposer({
+  components: {
+    button: { component: UiButton, name: 'Button', props: { label: { type: 'string', default: 'Button' } } },
+  },
+  classes: { container: { title: 'Container', on: 'frame' } }, // your CSS classes, offered as element styles
+  breakpoints: { md: 1024, sm: 640 },
+})
+```
+
+## SEO
+
+Set `siteUrl` on the plugin, or pass `--site-url` to `mechanica export`, and the export adds what nobody should write by hand: canonical and `og:url` tags, absolute social-image URLs, `rel=prev/next` on paginated pages, BreadcrumbList JSON-LD from the folder structure, `sitemap.xml` and `robots.txt` (a `public/robots.txt` of your own takes precedence). Add `siteName` for WebSite JSON-LD on the home page. Tags already in your `index.html` are never duplicated. `meta: { noindex: true }` in a page's frontmatter keeps it out of search engines and the sitemap.
+
+Every export also warns about missing titles and descriptions, pages without exactly one `<h1>`, images without `alt`, duplicate titles, and internal links to pages that don't exist. A page at `/404` is also written as `404.html`, which most static hosts serve for unknown URLs.
+
+## Code splitting
+
+By default all blocks share one `blocks` chunk, cached across pages. Mark heavy, rarely used blocks with `chunk: 'charts'` in `defineBlock` to split them into their own chunk, or set the plugin's `blockChunks: 'per-block'`. The export adds per-page `<link rel="modulepreload">` and stylesheet tags, so each page loads exactly the block code it uses.
+
+## Checking your work visually
 
 ```bash
-mechanica build     # client + SSR bundles → dist/
-mechanica export    # statically render every .mech page → export/
-mechanica shot <blockId | /page/path>   # headless screenshot of a block or page
-mechanica thumbs [--blocks]             # regenerate page / block thumbnails
-mechanica push --key <apiKey> --host <url>   # upload dist/ to a backend
+npx mechanica shot hero                     # screenshot one block, from its previewData
+npx mechanica shot /about --width 1440,390  # a whole page, at two widths
+npx mechanica thumbs                        # page thumbnails for the editor's page browser
+npx mechanica thumbs --blocks               # block thumbnails for the palette
 ```
 
-Page content lives in `.mech/pages/**.page.md` — a human-readable, Markdown-centric format equally editable by the visual editor, by hand, and by AI tools (rich text persists as plain Markdown).
+These drive a locally installed Chrome or Edge (or `--browser <path>`) and need Node.js 22+ or Bun. They reuse a dev server running on port 5173 and start one if there isn't. Screenshots go to `.mech/shots/`, which is handy for reviewing a block or letting an AI assistant check its own work.
+
+## CLI
+
+| Command | What it does |
+| --- | --- |
+| `mechanica export` | Build, then render every page to static HTML in `export/`. Flags: `--site-url`, `--site-name`, `--assets-url` (serve `/assets` and `/media` from a CDN) |
+| `mechanica build` | Build the client and server bundles into `dist/` (`export` runs this for you) |
+| `mechanica shot <blockId \| /path>` | Screenshot a block or a page. Flags: `--width`, `--data`, `--out`, `--full`, `--server`, `--browser` |
+| `mechanica thumbs [--blocks]` | Regenerate page or block thumbnails for the editor |
+| `mechanica images` | Generate image dimensions and blur-up previews for `.mech/assets` (needs `sharp`; `--force` redoes all) |
+| `mechanica push` | Experimental: upload `dist/` to a Mechanica hosting backend |
+
+## Plugin options
+
+`mechanica(options)` from `mechanica/plugin`; every option is optional.
+
+| Option | Default | |
+| --- | --- | --- |
+| `siteUrl`, `siteName` | none | Public origin and name: `{{ site.* }}` templating and SEO output at export |
+| `locales` | none | `['en', 'de']` or `{ default, all, labels }` turns on multi-language pages |
+| `generatePages` | none | Page providers (see above) |
+| `blockChunks` | `'bundled'` | `'per-block'` gives each block its own chunk |
+| `assetsUrl` | none | CDN origin for exported assets. Set Vite's `base` to the same URL |
+| `entry` | `'src/main.ts'` | Module exporting `defineMechanicaApp(…)` |
+| `mount` | `'#app'` | Mount selector |
+| `blocksDir` | `'src/blocks'` | Where blocks are collected from |
+| `widgetsDir` | `'src/widgets'` | Where rich-text widgets are collected from |
+| `composerFile` | `'src/composer.ts'` | The Block Composer manifest |
+| `mechDir` | `'.mech'` | Content directory |
+
+## API
+
+From `mechanica`:
+
+- **App and data:** `defineMechanicaApp`, `defineData`, `defineComposer`
+- **Components:** `<Content>`, `<Layout>`, `<Link>`, `<Image>`
+- **Composables:** `usePages`, `usePagination`, `useFetch`, `useLocale`, `useLayout`, `usePageData` (the current page's path, `meta`, layout and locale), `useRouter`, `useRoute`
+- **Helpers:** `imagePosition`
+
+From `mechanica/plugin`: `mechanica` and the `PageProvider` type. From `mechanica/widgets`: `defineWidget` and `useWidgetServices` (uploads and the image picker inside widget editors). `mechanica/editor` and `mechanica/composer` are loaded by the plugin in development; you don't import them.
+
+## Upgrading from 1.x
+
+Mechanica 2 is a rewrite, and a 1.x project has to be ported by hand; there is no automatic migration. What changes:
+
+- Vite 8 and `@vitejs/plugin-vue` 6 are required.
+- `src/main.ts` exports `defineMechanicaApp({ root: App })` instead of calling `createSSRApp(App).use(createMechanica()).mount('#app')`, and `index.html` no longer loads it with a `<script>` tag.
+- The plugin is a named import, `import { mechanica } from 'mechanica/plugin'`, and its `entrySsr` option is now `entry`.
+- In `defineBlock`, `group` is now `category` and a field's label is `label` (it was `name`). Block ids default to the kebab-cased file name (`Headline.vue` → `headline`); set `id` to keep an old one.
+- Pages are `.page.md` files instead of `.mech/pages/**.json`, and JSON pages are ignored. Uploaded files in `.mech/assets/` keep working.
+- `RouterLink` and `SmartLink` are replaced by `<Link>` (whose active class is now `is-active`), and `useQuery` by `usePages`, `usePagination` and `useFetch`.
+- `{{ }}` placeholders in `index.html` are now HTML-escaped.
+
+1.x remains installable as `mechanica@1`.
+
+## License
+
+MIT

package/bin/mechanica.js

@@ -1,7 +1,11 @@
 #!/usr/bin/env node
-// Under Bun, run the TS source directly (monorepo dev, Bun-native installs —
-// always live, no build needed). Under Node, use the compiled CLI from dist/.
-const entry = process.versions.bun ? '../src/cli/cli.ts' : '../dist/cli.js'
+// In the repo checkout (src/ present) under Bun, run the TS source directly —
+// monorepo dev stays live with no build. Published tarballs ship dist/ only,
+// so installed packages always run the compiled CLI, under Node and Bun alike.
+import { existsSync } from 'node:fs'
+
+const srcEntry = new URL('../src/cli/cli.ts', import.meta.url)
+const entry = process.versions.bun && existsSync(srcEntry) ? '../src/cli/cli.ts' : '../dist/cli.js'
 
 const { run } = await import(entry)
 

package/dist/chunks/{ImagePickerDialog-CY-mn2UP.js → ImagePickerDialog-6skSAzJh.js}

@@ -27,6 +27,8 @@ var contents = {
 	"corner": `<path d="M5 20v-9a6 6 0 0 1 6-6h9"/>`,
 	"desktop": `<rect x="3" y="4.5" width="18" height="12.5" rx="2"/><path d="M12 17v3"/><path d="M8.5 20.5h7"/>`,
 	"ellipsis": `<circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>`,
+	"eye-off": `<path d="M4 4l16 16"/><path d="M10.6 6c.46-.06.93-.1 1.4-.1 6 0 9.5 6.1 9.5 6.1a17.3 17.3 0 0 1-2.6 3.3"/><path d="M6.4 7.5A16.6 16.6 0 0 0 2.5 12s3.5 6.1 9.5 6.1c1.2 0 2.3-.24 3.3-.63"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/>`,
+	"eye": `<path d="M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/>`,
 	"fill": `<path d="M12 3.5c3.2 3.7 5.5 6.9 5.5 9.7a5.5 5.5 0 0 1-11 0c0-2.8 2.3-6 5.5-9.7z"/>`,
 	"folder": `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`,
 	"frame": `<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9.5h16M9.5 9.5V20"/>`,
@@ -38,6 +40,7 @@ var contents = {
 	"info": `<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
 	"italic": `<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>`,
 	"limits": `<rect x="3" y="3" width="18" height="18" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1.5" stroke-dasharray="2.5 2.5"/>`,
+	"link": `<path d="M10 14a5 5 0 0 0 7.1.4l3-3a5 5 0 0 0-7.1-7.1l-1.7 1.7"/><path d="M14 10a5 5 0 0 0-7.1-.4l-3 3a5 5 0 0 0 7.1 7.1l1.7-1.7"/>`,
 	"margin": `<rect x="8" y="8" width="8" height="8" rx="1"/><path d="M12 2.5v3"/><path d="M12 18.5v3"/><path d="M2.5 12h3"/><path d="M18.5 12h3"/>`,
 	"menu": `<path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/>`,
 	"mobile": `<rect x="7" y="2.5" width="10" height="19" rx="2.2"/><path d="M10.75 18.25h2.5"/>`,
@@ -46,6 +49,7 @@ var contents = {
 	"plus": `<path d="M12 5v14"/><path d="M5 12h14"/>`,
 	"position": `<circle cx="12" cy="12" r="5"/><path d="M12 2.5V5"/><path d="M12 19v2.5"/><path d="M2.5 12H5"/><path d="M19 12h2.5"/>`,
 	"redo": `<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/>`,
+	"repeat": `<rect x="3" y="6" width="7" height="12" rx="1.5"/><rect x="14" y="6" width="7" height="12" rx="1.5" stroke-dasharray="2.5 2.5"/>`,
 	"row": `<rect x="4" y="5" width="6.5" height="14" rx="1.6"/><rect x="13.5" y="5" width="6.5" height="14" rx="1.6"/>`,
 	"search": `<circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/>`,
 	"sides": `<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/>`,
@@ -230,6 +234,26 @@ var attrs = {
 		"viewBox": "0 0 24 24",
 		"fill": "currentColor"
 	},
+	"eye-off": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	"eye": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"fill": {
 		"width": "24",
 		"height": "24",
@@ -329,6 +353,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"link": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"margin": {
 		"width": "24",
 		"height": "24",
@@ -399,6 +433,16 @@ var attrs = {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round"
 	},
+	"repeat": {
+		"width": "24",
+		"height": "24",
+		"viewBox": "0 0 24 24",
+		"fill": "none",
+		"stroke": "currentColor",
+		"stroke-width": "1.6",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
 	"row": {
 		"width": "24",
 		"height": "24",