feat: support WRN imports and dynamic public shell

.publish/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
   "license": "MIT",

.publish/authz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/authz — part of the WrNexus framework.",
   "license": "MIT",

.publish/cli/README.md

@@ -36,6 +36,7 @@ Every command accepts an optional `[app-dir]` (defaults to `.`). Commands that r
 | `wrnexus workspace <name>`            | Scaffold a monorepo (`apps/*` + shared `packages/*`).                  |
 | `wrnexus workspace add <name>`        | Add and register an app in the current workspace.                      |
 | `wrnexus gateway [--port=3000]`       | Serve every workspace app behind one port, routed by domain.           |
+| `wrnexus production [workspace-dir]`  | Build, migrate, and serve every workspace app in production.           |
 | `wrnexus generate <type> <name>`      | Scaffold a `page` \| `component` \| `api` \| `schema`.                 |
 | `wrnexus generate routes`             | Regenerate the typed routes file (`app/routes.gen.ts`).                |
 | `wrnexus generate docker`             | Scaffold `Dockerfile`, `.dockerignore`, and `docker-compose.yml`.      |
@@ -168,6 +169,17 @@ wrnexus workspace acme
 wrnexus gateway --port=3000
 ```
 
+For a complete production start, use the first-class workspace orchestrator:
+
+```bash
+wrnexus production --host=0.0.0.0 --port=3000
+```
+
+It builds every registered app, applies default and named-database SQL migrations
+when present, and starts the production gateway only after preparation succeeds.
+Use `--prepare-only`, `--no-build`, or `--no-migrate` when deployment stages are
+managed separately; `--environment=<name>` selects another workspace environment.
+
 From a workspace root, add and register another app in one command:
 
 ```bash

.publish/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/cli — part of the WrNexus framework.",
   "license": "MIT",
@@ -28,16 +28,16 @@
     "wrnexus": "./dist/index.js"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44",
+    "@wrnexus/core": "^0.2.74",
-    "@wrnexus/router": "^0.2.44",
+    "@wrnexus/router": "^0.2.74",
-    "@wrnexus/csr": "^0.2.44",
+    "@wrnexus/csr": "^0.2.74",
-    "@wrnexus/compiler": "^0.2.44",
+    "@wrnexus/compiler": "^0.2.74",
-    "@wrnexus/styles": "^0.2.44",
+    "@wrnexus/styles": "^0.2.74",
-    "@wrnexus/dev-server": "^0.2.44",
+    "@wrnexus/dev-server": "^0.2.74",
-    "@wrnexus/ui": "^0.2.44",
+    "@wrnexus/ui": "^0.2.74",
-    "@wrnexus/validation": "^0.2.44",
+    "@wrnexus/validation": "^0.2.74",
-    "@wrnexus/i18n": "^0.2.44",
+    "@wrnexus/i18n": "^0.2.74",
-    "@wrnexus/db": "^0.2.44"
+    "@wrnexus/db": "^0.2.74"
   },
   "files": [
     "dist"

.publish/compiler/README.md

@@ -8,6 +8,19 @@ Part of the **WrNexus** framework — an SSR-first, Bun-native full-stack web fr
 
 `@wrnexus/compiler` turns `.wrn` source into TypeScript that targets the framework's runtime primitives. A `.wrn` file declares either a `page` (a route) or a `component` (a reusable, prop-driven fragment) with blocks for `state`, `view` (plain HTML), `seo`, `style`, `functions`, `api`, `ssr`/`client` data bindings, and `realtime` websocket handlers. The pipeline is `source → Lexer → parse() → PageAst → generate() → TypeScript`. It is a build/server-side library — the WrNexus dev loader calls it to compile `.wrn` files on the fly, surfacing `ParseError` as a readable error page.
 
+Static ES module imports may appear before the root declaration. Imported values are
+available to server-rendered expressions, including component props:
+
+```wrn
+import { appUrl } from "@wrnexus/helpers";
+
+layout PublicLayout {
+  view {
+    <PublicHeader signInHref="{appUrl('sso', '/sign-in')}" />
+  }
+}
+```
+
 ## Installation
 
 ```bash
@@ -76,18 +89,19 @@ class Lexer {
 
 Exported type-only symbols describing the parsed tree:
 
-| Type                 | Description                                                                                                                                                                        |
+| Type                 | Description                                                                                                                                                   |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `PageAst`            | Root node: `kind` (`"page" \| "component"`), `name`, optional `layout`, `props`, `states`, `seo`, `view`, `styles`, `functions`, `dataApis`, `modeFunctions`, `apis`, `realtimes`. |
+| `PageAst`            | Root node including top-level `imports`, `kind`, `name`, `types`, typed `props`, typed `states`, `view`, styles, functions, data APIs, lifecycle, and routes. |
-| `ViewNode`           | `{ type: "text"; value }` or `{ type: "element"; tag; attrs; children }`.                                                                                                          |
+| `ViewNode`           | `{ type: "text"; value }` or `{ type: "element"; tag; attrs; children }`.                                                                                     |
-| `Attr`               | `{ name; value; event; boolean? }` — `event` marks `@event` bindings.                                                                                                              |
+| `Attr`               | `{ name; value; event; boolean? }` — `event` marks `@event` bindings.                                                                                         |
-| `StateDecl`          | `{ name; expr }` — a `state x = <expr>` declaration.                                                                                                                               |
+| `StateDecl`          | `{ name; valueType?; expr }` — a typed `state x: Type = <expr>` declaration.                                                                                  |
-| `SeoBlock`           | `Record<string, string>` from the `seo { ... }` block.                                                                                                                             |
+| `PropDecl`           | `{ name; valueType?; required; default }` — a typed prop declaration.                                                                                         |
-| `ApiBlock`           | `{ method; path; body }` — a top-level `api METHOD /path { ... }`.                                                                                                                 |
+| `SeoBlock`           | `Record<string, string>` from the `seo { ... }` block.                                                                                                        |
-| `DataApiBlock`       | `{ mode; name; method; path; body }` — an `api` inside an `ssr`/`client` block.                                                                                                    |
+| `ApiBlock`           | `{ method; path; body }` — a top-level `api METHOD /path { ... }`.                                                                                            |
-| `DataMode`           | `"ssr" \| "client"`.                                                                                                                                                               |
+| `DataApiBlock`       | `{ mode; name; method; path; body }` — an `api` inside an `ssr`/`client` block.                                                                               |
-| `ModeFunctionsBlock` | `{ mode; body }` — a `functions { ... }` inside an `ssr`/`client` block.                                                                                                           |
+| `DataMode`           | `"ssr" \| "client"`.                                                                                                                                          |
-| `RealtimeBlock`      | `{ name; handlers }` — a `realtime <name> { on evt(args) { ... } }` block.                                                                                                         |
+| `ModeFunctionsBlock` | `{ mode; body }` — a `functions { ... }` inside an `ssr`/`client` block.                                                                                      |
+| `RealtimeBlock`      | `{ name; handlers }` — a `realtime <name> { on evt(args) { ... } }` block.                                                                                    |
 
 ## Usage
 
@@ -147,12 +161,13 @@ lx.next(); // { type: "lbrace", value: "{", pos: 10 }
 A file opens with `page <Name>` or `component <Name>` followed by a `{ ... }` body containing zero or more members:
 
 - `layout = "<name>"` — selects `app/layouts/<name>.wrn` (pages only).
-- `props { name = <default> ... }` — component props; each default's type drives coercion.
+- `types { <TypeScript declarations> }` — reusable interfaces and aliases for the current file.
-- `state <ident> = <expr>` — reactive state seeded from a raw JS expression.
+- `props { name: Type = <default> ... }` — typed component props. Omit `= <default>` to make a prop required. Legacy inferred props remain supported.
+- `state <ident>: Type = <expr>` — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility.
 - `view { <html> }` — plain HTML with `{expr}` interpolation in text and attributes, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and `<!-- comments -->`. Attribute expressions that reference `state` keep an SSR value and update reactively in the browser.
 - `seo { key = "value" ... }` — metadata merged into the generated `meta`.
 - `style { <raw css> }` — inlined page/component stylesheet (repeatable).
-- `functions { <raw js> }` — shared server-side helpers (repeatable).
+- `functions { <TypeScript> }` — helpers with typed parameters and return values. Types remain in server output and are safely erased from browser behavior code.
 - `api <METHOD> <path> { <raw js> }` — route handler, lowered to a `METHOD` export (repeatable).
 - `ssr { ... }` / `client { ... }` — data blocks holding `api <name> <METHOD> <path> { ... }` bindings and their own `functions { ... }`.
 - `realtime <name> { on <evt>(<args>) { <raw js> } ... }` — websocket handlers, lowered to a `websocket` export.

.publish/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/compiler — part of the WrNexus framework.",
   "license": "MIT",

.publish/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/core — part of the WrNexus framework.",
   "license": "MIT",

.publish/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44"
+    "@wrnexus/core": "^0.2.74"
   },
   "files": [
     "dist"

.publish/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/db — part of the WrNexus framework.",
   "license": "MIT",

.publish/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,18 +25,18 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44",
+    "@wrnexus/core": "^0.2.74",
-    "@wrnexus/router": "^0.2.44",
+    "@wrnexus/router": "^0.2.74",
-    "@wrnexus/ssr": "^0.2.44",
+    "@wrnexus/ssr": "^0.2.74",
-    "@wrnexus/csr": "^0.2.44",
+    "@wrnexus/csr": "^0.2.74",
-    "@wrnexus/compiler": "^0.2.44",
+    "@wrnexus/compiler": "^0.2.74",
-    "@wrnexus/styles": "^0.2.44",
+    "@wrnexus/styles": "^0.2.74",
-    "@wrnexus/ui": "^0.2.44",
+    "@wrnexus/ui": "^0.2.74",
-    "@wrnexus/validation": "^0.2.44",
+    "@wrnexus/validation": "^0.2.74",
-    "@wrnexus/i18n": "^0.2.44",
+    "@wrnexus/i18n": "^0.2.74",
-    "@wrnexus/db": "^0.2.44",
+    "@wrnexus/db": "^0.2.74",
-    "@wrnexus/pubsub": "^0.2.44",
+    "@wrnexus/pubsub": "^0.2.74",
-    "@wrnexus/uploader": "^0.2.44"
+    "@wrnexus/uploader": "^0.2.74"
   },
   "files": [
     "dist"

.publish/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/encryption — part of the WrNexus framework.",
   "license": "MIT",

.publish/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44"
+    "@wrnexus/core": "^0.2.74"
   },
   "files": [
     "dist"

.publish/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44"
+    "@wrnexus/core": "^0.2.74"
   },
   "files": [
     "dist"

.publish/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/jwt — part of the WrNexus framework.",
   "license": "MIT",

.publish/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.2.44"
+    "@wrnexus/native": "^0.2.74"
   },
   "files": [
     "dist"

.publish/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/native — part of the WrNexus framework.",
   "license": "MIT",

.publish/oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/oauth — part of the WrNexus framework.",
   "license": "MIT",

.publish/pubsub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/pubsub — part of the WrNexus framework.",
   "license": "MIT",

.publish/queue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/queue — part of the WrNexus framework.",
   "license": "MIT",

.publish/reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/reactive — part of the WrNexus framework.",
   "license": "MIT",

.publish/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.2.44",
+    "@wrnexus/compiler": "^0.2.74",
-    "@wrnexus/core": "^0.2.44"
+    "@wrnexus/core": "^0.2.74"
   },
   "files": [
     "dist"

.publish/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.44"
+    "@wrnexus/core": "^0.2.74"
   },
   "files": [
     "dist"

.publish/styles/README.md

@@ -106,6 +106,7 @@ Tokens are emitted as `--wire-<key>` custom properties, **except** the reserved
 type ThemeTokens = Record<string, string>;
 
 interface ThemeConfig {
+  palette?: ThemePaletteName | CustomThemePalette;
   default?: string; // theme used when no cookie is present
   themes?: Record<string, ThemeTokens>; // deep-merged over built-in light/dark
 }
@@ -117,7 +118,30 @@ interface ResolvedTheme {
 }
 ```
 
-Built-in token keys (both `light` and `dark`): `color-scheme`, `color-bg`, `color-surface`, `color-surface-2`, `color-text`, `color-muted`, `color-border`, `color-primary`, `color-primary-hover`, `color-primary-contrast`, `color-danger`, `color-success`, `color-warning`, `radius`, `radius-sm`, `font-sans`, `shadow-1`.
+Built-in palettes are `blue`, `indigo`, `violet`, `emerald`, `cyan`, `rose`,
+`amber`, and `slate`. Each supplies primary, secondary, info, success, warning,
+danger/error, hover, and contrast colors to every light/dark theme. Built-in
+token keys also include surfaces, text, borders, radii, fonts, and shadows.
+
+A custom palette is intentionally complete, so components never fall back to an
+unrelated blue status or action color:
+
+```ts
+theme: {
+  palette: {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    primaryContrast: "#ffffff",
+    secondary: "#db2777",
+    secondaryHover: "#be185d",
+    secondaryContrast: "#ffffff",
+    info: "#2563eb",
+    success: "#059669",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+}
+```
 
 The client runtime (`renderThemeRuntime`) exposes `window.wireTheme` with `{ get, set, toggle, bind, themes }`, wires up any `[data-wire-theme-toggle]` and `[data-wire-theme-set]` elements on load, and persists the choice to the `wire-theme` cookie (`max-age` 1 year, `samesite=lax`). `toggle()` cycles through the configured theme names in order.
 
@@ -135,6 +159,7 @@ export default {
   port: 3000,
   db: { driver: "sqlite", url: "app.db" },
   theme: {
+    palette: "violet",
     default: "dark",
     themes: {
       light: { "color-primary": "#7c3aed" }, // override one token; rest inherited

.publish/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.2.44"
+    "@wrnexus/uploader": "^0.2.74"
   },
   "files": [
     "dist"

.publish/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/test — part of the WrNexus framework.",
   "license": "MIT",

.publish/tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.44",
+  "version": "0.2.74",
   "type": "module",
   "description": "@wrnexus/tracking — part of the WrNexus framework.",
   "license": "MIT",

.publish/ui/README.md

@@ -15,6 +15,11 @@ driven by `var(--wire-*)` theme tokens, so components restyle instantly when the
 theme changes. The tiny JS surface (`src/index.ts`) exists only so the toolchain
 (CLI build + dev server) can locate the component directory and stylesheet.
 
+The complete PDF-aligned catalog currently contains **891 components**. The
+generated `COMPONENTS.md` and `component-reference.json` files document every
+mount name, prop, inferred type, default/required status, slot, event, category,
+and source file directly from the packaged `.wrn` source.
+
 ## Installation
 
 ```bash
@@ -65,11 +70,25 @@ body from either a named prop or the default slot.
 ### Additional controls & data display
 
 Also shipped: `select`, `radio`, `switch`, `progress`, `tag`, `skeleton`,
-`tooltip`, and `table`.
+`tooltip`, `table`, `FAQAccordion`, `AnnouncementBar`, and `BackToTop`.
+
+The PDF-defined minimum release and essential build-first set also includes
+typed typography, form primitives, loading actions, combobox and multi-select,
+time/date-time and recurring schedule controls, confirmation dialogs, data
+tables, filters, desktop/mobile navigation, mega menus, marketing/product/legal
+page shells, product and metric cards, FAQ composition, pricing comparison,
+SDK tabs, legal navigation, and cookie preferences.
+
+`Seo` and `StructuredData` remain framework/page concerns rather than body
+components: use the native page `seo { ... }` block and document-head APIs so
+metadata is emitted in `<head>` instead of invalid component markup.
 
 The authoritative, always-current list is `uiComponentNames()` (below), which reads
 the component directory at runtime.
 
+For the full catalog, see [`COMPONENTS.md`](./COMPONENTS.md). The machine-readable
+equivalent is exported as `@wrnexus/ui/component-reference.json`.
+
 ## API
 
 The JS module (`@wrnexus/ui`) exposes four helpers used by the build tooling to
@@ -97,6 +116,53 @@ are `.wrn` files rendered server-side.
 The framework serves this stylesheet once at `/__wrnexus/ui.css`, so pages get all
 component styles from a single request.
 
+### Tailwind and motion
+
+Components use static Tailwind utility classes alongside the shared `.wire-*`
+layer. If the package is consumed by a separate Tailwind build, include its
+component sources so every utility is generated:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@wrnexus/ui/components/*.wrn";
+```
+
+The shared stylesheet gives all component boundaries consistent, GPU-friendly
+entry and interaction motion. Override `--wire-motion-fast`,
+`--wire-motion-base`, `--wire-motion-slow`, `--wire-ease-standard`, or
+`--wire-ease-emphasized` to tune it. Hover lift is limited to precise pointing
+devices and `prefers-reduced-motion` is honored automatically.
+
+### Using the selected theme in application UI
+
+The active theme and palette are not limited to `@wrnexus/ui` components. The
+framework exposes the resolved values as semantic CSS custom properties, so
+pages and custom `.wrn` components can use the same contract:
+
+```css
+.account-card {
+  background: var(--wire-color-surface);
+  color: var(--wire-color-text);
+  border: 1px solid var(--wire-color-border);
+}
+
+.account-card__action {
+  background: var(--wire-color-primary);
+  color: var(--wire-color-primary-contrast);
+}
+```
+
+Stable no-spacing helper classes are also available: `wire-bg-page`,
+`wire-bg-surface`, `wire-bg-surface-2`, `wire-bg-primary`, `wire-bg-secondary`,
+`wire-text`, `wire-text-muted`, `wire-text-primary`, `wire-text-success`,
+`wire-text-warning`, `wire-text-danger`, and `wire-border`.
+
+Tailwind-authored custom markup can continue using the palette families already
+used by packaged components. `indigo-*` and `violet-*` resolve to primary,
+`blue-*` to info, `emerald-*`/`green-*` to success, `amber-*` to warning, and
+`red-*`/`rose-*` to danger. These aliases live at `:root`, so they work outside
+a `[data-component]` boundary too.
+
 ## Usage
 
 ### Auto-discovery

.publish/ui/components/AcceptAllCookiesButton.wrn

@@ -0,0 +1,11 @@
+component AcceptAllCookiesButton {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
+}

.publish/ui/components/AccessibleAccordion.wrn

@@ -0,0 +1,13 @@
+component AccessibleAccordion {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AccessibleCarousel.wrn

@@ -0,0 +1,13 @@
+component AccessibleCarousel {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AccessibleChartSummary.wrn

@@ -0,0 +1,15 @@
+component AccessibleChartSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view {
+    <article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
+}

.publish/ui/components/AccessibleDialog.wrn

@@ -0,0 +1,10 @@
+component AccessibleDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/AccessibleErrorSummary.wrn

@@ -0,0 +1,13 @@
+component AccessibleErrorSummary {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AccessibleIcon.wrn

@@ -0,0 +1,13 @@
+component AccessibleIcon {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AccessibleMenu.wrn

@@ -0,0 +1,10 @@
+component AccessibleMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/AccessibleTabs.wrn

@@ -0,0 +1,13 @@
+component AccessibleTabs {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AccessibleTooltip.wrn

@@ -0,0 +1,13 @@
+component AccessibleTooltip {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/Accordion.wrn

@@ -0,0 +1,31 @@
+component Accordion {
+    props {
+        class = ""
+        title = "Question"
+        open = false
+    }
+
+    state expanded = open
+
+    view {
+        <div class="border-b border-slate-200 dark:border-slate-800 {class}" >
+            <button
+                type="button"
+                class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
+                aria-expanded="{expanded}"
+                @click="expanded = !expanded"
+            >
+                <span >
+                    {title}
+                </span>
+                <span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
+            </button>
+            <div
+                data-show="expanded"
+                class="pb-5 text-slate-600 dark:text-slate-300"
+            >
+                <slot />
+            </div>
+        </div>
+    }
+}

.publish/ui/components/AccountMenu.wrn

@@ -0,0 +1,10 @@
+component AccountMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/AccountStatusBanner.wrn

@@ -0,0 +1,11 @@
+component AccountStatusBanner {
+  props {
+    label = "AccountStatus" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}

.publish/ui/components/ActionMenu.wrn

@@ -0,0 +1,10 @@
+component ActionMenu {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/ActiveFilterList.wrn

@@ -0,0 +1,10 @@
+component ActiveFilterList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/ActivityList.wrn

@@ -0,0 +1,10 @@
+component ActivityList {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/AddOnCard.wrn

@@ -0,0 +1,13 @@
+component AddOnCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AddressInput.wrn

@@ -0,0 +1,16 @@
+component AddressInput {
+  props {
+    label = "Address" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/AddressPreview.wrn

@@ -0,0 +1,13 @@
+component AddressPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AdvancedFilterBuilder.wrn

@@ -0,0 +1,13 @@
+component AdvancedFilterBuilder {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AlertDialog.wrn

@@ -0,0 +1,10 @@
+component AlertDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/AmountInput.wrn

@@ -0,0 +1,16 @@
+component AmountInput {
+  props {
+    label = "Amount" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/AnalyticsDashboardPreview.wrn

@@ -0,0 +1,15 @@
+component AnalyticsDashboardPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
+}

.publish/ui/components/AnchorNavigation.wrn

@@ -0,0 +1,10 @@
+component AnchorNavigation {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/AnnouncementBar.wrn

@@ -0,0 +1,96 @@
+component AnnouncementBar {
+    props {
+        class: string = ""
+        badge: string = "New"
+        message: string = "WrNexus Organizations is now available."
+        description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
+        href: string = "/organizations"
+        actionLabel: string = "Explore organizations"
+        ariaLabel: string = "Announcement"
+        badgeIcon: string = "icon-[lucide--sparkles]"
+        actionIcon: string = "icon-[lucide--arrow-right]"
+        dismissLabel: string = "Dismiss announcement"
+        showBadge: boolean = true
+        showDescription: boolean = true
+        showAction: boolean = true
+        dismissible: boolean = true
+    }
+
+    state visible = true
+
+    view {
+        <aside
+            role="region"
+            aria-label="{ariaLabel}"
+            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
+            class:hidden="!visible"
+        >
+            <!-- Decorative background -->
+            <div
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 overflow-hidden"
+            >
+                <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>
+
+                <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
+            </div>
+
+            <div
+                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
+            >
+                <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
+                    <!-- Badge -->
+                    <span data-show="showBadge"
+                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
+                    >
+                        <span class="{badgeIcon} h-3 w-3" aria-hidden="true" ></span>
+
+                        {badge}
+                    </span>
+
+                    <!-- Message -->
+                    <p
+                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
+                    >
+                        <span class="font-semibold text-slate-950 dark:text-white">
+                            {message}
+                        </span>
+
+                        <span data-show="showDescription" class="hidden md:inline">
+                            {description}
+                        </span>
+                    </p>
+
+                    <!-- CTA -->
+                    <a data-show="showAction"
+                        href="{href}"
+                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
+                    >
+                        {actionLabel}
+
+                        <span class="{actionIcon} h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
+                    </a>
+                </div>
+
+                <!-- Mobile CTA -->
+                <a data-show="showAction"
+                    href="{href}"
+                    aria-label="{actionLabel}"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
+                >
+                    <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
+                </a>
+
+                <!-- Close -->
+                <button data-show="dismissible"
+                    type="button"
+                    @click="visible = false"
+                    aria-label="{dismissLabel}"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
+                >
+                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
+                </button>
+            </div>
+        </aside>
+    }
+}

.publish/ui/components/ApartmentInput.wrn

@@ -0,0 +1,16 @@
+component ApartmentInput {
+  props {
+    label = "Apartment" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/ApiAuthenticationNotice.wrn

@@ -0,0 +1,11 @@
+component ApiAuthenticationNotice {
+  props {
+    label = "ApiAuthentication" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}

.publish/ui/components/ApiEndpointCard.wrn

@@ -0,0 +1,39 @@
+component ApiEndpointCard {
+    props {
+        class = ""
+        method = "GET"
+        path = "/api/example"
+        eyebrow = ""
+        title = ""
+        description = ""
+        href = ""
+        actionLabel = "View endpoint"
+    }
+
+    view {
+        <article
+            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
+        >
+            <div class="flex flex-wrap items-center gap-3" >
+                <span
+                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
+                >
+                    {method}
+                </span>
+                <code class="text-sm font-semibold">
+                    {title || path}
+                </code>
+            </div>
+            <p
+                data-show="description"
+                class="mt-3 text-sm text-slate-500"
+            >
+                {description}
+            </p>
+            <div class="mt-4">
+                <slot />
+            </div>
+            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
+        </article>
+    }
+}

.publish/ui/components/ApiErrorExample.wrn

@@ -0,0 +1,13 @@
+component ApiErrorExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/ApiHeaderTable.wrn

@@ -0,0 +1,10 @@
+component ApiHeaderTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/ApiKeyCreateDialog.wrn

@@ -0,0 +1,10 @@
+component ApiKeyCreateDialog {
+  props {
+    title = ""
+    description = ""
+    open = false
+    closeLabel = "Close"
+    class = ""
+  }
+  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
+}

.publish/ui/components/ApiKeyDisplay.wrn

@@ -0,0 +1,13 @@
+component ApiKeyDisplay {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/ApiKeyInput.wrn

@@ -0,0 +1,16 @@
+component ApiKeyInput {
+  props {
+    label = "ApiKey" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/ApiMethodBadge.wrn

@@ -0,0 +1,11 @@
+component ApiMethodBadge {
+  props {
+    label = "ApiMethod" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}

.publish/ui/components/ApiParameterTable.wrn

@@ -0,0 +1,10 @@
+component ApiParameterTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/ApiRateLimitNotice.wrn

@@ -0,0 +1,11 @@
+component ApiRateLimitNotice {
+  props {
+    label = "ApiRateLimit" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}

.publish/ui/components/ApiRequestExample.wrn

@@ -0,0 +1,13 @@
+component ApiRequestExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/ApiResponseExample.wrn

@@ -0,0 +1,13 @@
+component ApiResponseExample {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/ApiSchemaTable.wrn

@@ -0,0 +1,10 @@
+component ApiSchemaTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/ApiSchemaViewer.wrn

@@ -0,0 +1,13 @@
+component ApiSchemaViewer {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/ApiVersionBadge.wrn

@@ -0,0 +1,11 @@
+component ApiVersionBadge {
+  props {
+    label = "ApiVersion" 
+    title = ""
+    description = ""
+    value = ""
+    variant = "default"
+    class = ""
+  }
+  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
+}

.publish/ui/components/AppHeader.wrn

@@ -0,0 +1,10 @@
+component AppHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/ArchitectureSection.wrn

@@ -0,0 +1,10 @@
+component ArchitectureSection {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/AreaChart.wrn

@@ -0,0 +1,11 @@
+component AreaChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}

.publish/ui/components/ArticleHero.wrn

@@ -0,0 +1,10 @@
+component ArticleHero {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/ArticleLayout.wrn

@@ -0,0 +1,10 @@
+component ArticleLayout {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/ArticleNewsletterCTA.wrn

@@ -0,0 +1,11 @@
+component ArticleNewsletterCTA {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
+}

.publish/ui/components/ArticlePageShell.wrn

@@ -0,0 +1,10 @@
+component ArticlePageShell {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    align = "start"
+    class = ""
+  }
+  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+}

.publish/ui/components/ArticleShareActions.wrn

@@ -0,0 +1,11 @@
+component ArticleShareActions {
+  props {
+    label = "Action"
+    href = ""
+    type = "button"
+    variant = "primary"
+    disabled = false
+    class = ""
+  }
+  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
+}

.publish/ui/components/AspectRatio.wrn

@@ -0,0 +1,6 @@
+component AspectRatio {
+  props {
+    class = ""
+  }
+  view { <div class="wire-aspect-ratio {class}"><slot /></div> }
+}

.publish/ui/components/AssetCard.wrn

@@ -0,0 +1,9 @@
+component AssetCard {
+  props {
+    title = ""
+    description = ""
+    href = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--asset {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+}

.publish/ui/components/AttachmentPicker.wrn

@@ -0,0 +1,16 @@
+component AttachmentPicker {
+  props {
+    label = "Attachment" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/AttachmentUpload.wrn

@@ -0,0 +1,13 @@
+component AttachmentUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AudioUpload.wrn

@@ -0,0 +1,13 @@
+component AudioUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AuditLogPreview.wrn

@@ -0,0 +1,13 @@
+component AuditLogPreview {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AuditTable.wrn

@@ -0,0 +1,10 @@
+component AuditTable {
+  props {
+    title = ""
+    description = ""
+    empty = false
+    emptyText = "No items available."
+    class = ""
+  }
+  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+}

.publish/ui/components/AuthenticatorCodeInput.wrn

@@ -0,0 +1,16 @@
+component AuthenticatorCodeInput {
+  props {
+    label = "AuthenticatorCode" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/AuthorAvatar.wrn

@@ -0,0 +1,13 @@
+component AuthorAvatar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AuthorCard.wrn

@@ -0,0 +1,13 @@
+component AuthorCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AuthorizedApplicationCard.wrn

@@ -0,0 +1,13 @@
+component AuthorizedApplicationCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AutoGrid.wrn

@@ -0,0 +1,6 @@
+component AutoGrid {
+  props {
+    class = ""
+  }
+  view { <div class="wire-auto-grid {class}"><slot /></div> }
+}

.publish/ui/components/AutomationExampleCard.wrn

@@ -0,0 +1,13 @@
+component AutomationExampleCard {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AvailabilityCalendar.wrn

@@ -0,0 +1,13 @@
+component AvailabilityCalendar {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/AvatarGroup.wrn

@@ -0,0 +1,16 @@
+component AvatarGroup {
+  props {
+    label = "Avatar" 
+    name = ""
+    value = ""
+    placeholder = ""
+    type = "text"
+    required = false
+    disabled = false
+    readonly = false
+    help = ""
+    error = ""
+    class = ""
+  }
+  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+}

.publish/ui/components/AvatarUpload.wrn

@@ -0,0 +1,13 @@
+component AvatarUpload {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/BackButton.wrn

@@ -0,0 +1,9 @@
+component BackButton {
+  props {
+    label = "Action"
+    type = "button"
+    disabled = false
+    class = ""
+  }
+  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
+}

.publish/ui/components/BackToTop.wrn

@@ -0,0 +1,94 @@
+component BackToTop {
+    props {
+        class = ""
+        label = "Back to top"
+        assistiveLabel = "Return to the top of the page"
+        threshold = 500
+    }
+
+    state visible = false
+
+    functions {
+        function updateBackToTopVisibility() {
+            visible = window.scrollY > threshold
+        }
+
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            })
+        }
+    }
+
+    lifecycle {
+        mount {
+            updateBackToTopVisibility()
+
+            window.addEventListener(
+            "scroll",
+            updateBackToTopVisibility,
+            { passive: true }
+            )
+        }
+
+        unmount {
+            window.removeEventListener(
+            "scroll",
+            updateBackToTopVisibility
+            )
+        }
+    }
+
+    watch visible {
+        console.debug(
+        "Back-to-top visibility:",
+        value,
+        previous
+        )
+    }
+
+    view {
+        <div
+            class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
+            class:pointer-events-none="!visible"
+            class:translate-y-5="!visible"
+            class:scale-90="!visible"
+            class:opacity-0="!visible"
+            class:pointer-events-auto="visible"
+            class:translate-y-0="visible"
+            class:scale-100="visible"
+            class:opacity-100="visible"
+        >
+            <!-- Hover label -->
+            <span
+                class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
+            >
+                {label}
+            </span>
+
+            <!-- Gradient border wrapper -->
+            <div
+                class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
+            >
+                <!-- Glow -->
+                <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>
+
+                <button
+                    type="button"
+                    @click="scrollToTop()"
+                    aria-label="{label}"
+                    title="{label}"
+                    class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
+                >
+                    <!-- Arrow -->
+                    <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
+
+                    <span class="sr-only">
+                        {assistiveLabel}
+                    </span>
+                </button>
+            </div>
+        </div>
+    }
+}

.publish/ui/components/BankTransferDetails.wrn

@@ -0,0 +1,13 @@
+component BankTransferDetails {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    href = ""
+    actionLabel = "Learn more"
+    image = ""
+    alt = ""
+    class = ""
+  }
+  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
+}

.publish/ui/components/Banner.wrn

@@ -0,0 +1,12 @@
+component Banner {
+  props {
+    class = ""
+    text = "Announcement"
+    href = ""
+    actionLabel = "Learn more"
+    variant = "brand"
+  }
+  view {
+    <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
+  }
+}

.publish/ui/components/BarChart.wrn

@@ -0,0 +1,11 @@
+component BarChart {
+  props {
+    title = ""
+    value = ""
+    description = ""
+    summary = ""
+    loading = false
+    class = ""
+  }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+}