@stacksjs/defaults 0.70.229 → 0.70.230

package/ai/skills/stacks-models/SKILL.md

@@ -99,7 +99,7 @@ generated model types stay precise.
 | `useTimestamps` (alias `timestampable`) | `created_at` / `updated_at`. On by default |
 | `useSoftDeletes` (alias `softDeletable`) | `deleted_at` plus soft-delete query scopes |
 | `useAuth` (alias `authenticatable`) | Auth columns; `{ usePasskey: true }` adds passkeys |
-| `useApi` | Generates REST actions and routes: `{ uri, routes }` |
+| `useApi` | Generates REST actions and routes: `{ uri, routes, middleware? }` |
 | `useSearch` (alias `searchable`) | Search-engine indexing: `{ displayable, searchable, sortable, filterable }` |
 | `useSocials` | OAuth identities, e.g. `['github']` |
 | `useActivityLog` | Writes an `Activity` row per change |
@@ -111,6 +111,29 @@ Also at the top level: `indexes: [{ name, columns, unique?, where? }]` for
 composite and partial-unique indexes, and `dashboard: { highlight: true }` to
 feature the model in the admin UI.
 
+`useApi` is an API capability, not a dashboard-view generator. Its generated
+routes are registered from the merged model registry. Framework defaults are
+loaded first, then recursive `app/Models/` definitions override matching model
+names. Protect non-public resources at the model:
+
+```ts
+useApi: {
+  uri: 'mail-preferences',
+  routes: ['index', 'store', 'show', 'update', 'destroy'],
+  middleware: ['auth'],
+}
+```
+
+Dashboard-specific endpoints may still use scoped Actions when their transport
+shape, authorization boundary, or aggregation differs from generic CRUD. Do
+not expose a sensitive model through unguarded generated routes just because a
+separate dashboard endpoint is protected.
+
+Generated store and update routes accept both spellings of every fillable
+attribute and each foreign key implied by `belongsTo`. Declaring Product as a
+belongs-to relation therefore accepts `productId` or `product_id` without
+duplicating that relationship column as an attribute.
+
 ### Relationships
 
 `hasOne`, `hasMany`, `belongsTo`, `belongsToMany`, `hasOneThrough`,
@@ -118,6 +141,40 @@ feature the model in the admin UI.
 `morphedByMany`. Each takes an array of model names, or an object form when you
 need to name the foreign key.
 
+Use the named object form for a many-to-many relation that owns its pivot
+schema. It keeps the relation accessor, migration, pivot defaults, timestamps,
+and uniqueness in the model definition:
+
+```ts
+belongsToMany: {
+  tags: {
+    model: 'Tag',
+    table: 'taggable_models',
+    foreignKey: 'taggable_id',
+    relatedKey: 'tag_id',
+    pivot: {
+      columns: {
+        taggable_type: { default: 'posts' },
+      },
+      timestamps: true,
+      uniques: [['tag_id', 'taggable_id', 'taggable_type']],
+    },
+  },
+},
+```
+
+An instance then exposes the named relation directly:
+
+```ts
+const post = await Post.find(id)
+await post.tags().sync(tagIds)
+await post.tags().detach()
+```
+
+The legacy array form remains supported. Prefer the named form when the pivot
+has custom keys, columns, defaults, timestamps, or uniqueness. Run
+`buddy generate:migrations` after changing pivot metadata.
+
 ### Computed properties and scopes
 
 ```ts

package/ai/skills/stacks-notifications/SKILL.md

@@ -162,16 +162,20 @@ interface CreateNotificationOptions {
 
 ## Notification Model Fields
 
-The Notification model (at `storage/framework/defaults/app/Models/Notification.ts`) defines:
-- `type` -- notification type: email, sms, push, slack, webhook
-- `channel` -- delivery channel
-- `recipient` -- target email, phone, or user
-- `subject` -- notification subject line
-- `body` -- notification body content
-- `status` -- pending, sent, delivered, failed, read
-- `readAt`, `sentAt`, `metadata`
-
-Note: The Notification model uses 30 seeded records by default.
+The Notification model at `storage/framework/defaults/app/Models/Notification.ts`
+maps the database notification inbox used by `DatabaseNotificationDriver`:
+
+- `user_id` comes from the `belongsTo: ['User']` relationship
+- `type` is an application event name such as `order.shipped`
+- `data` is a JSON string containing the notification payload
+- `readAt` maps to the nullable `read_at` column
+- `created_at` and `updated_at` come from `useTimestamps`
+
+The model uses `useApi` for its CRUD API and seeds 30 records by default. It
+must stay aligned with `notificationsTableSql()` in
+`storage/framework/core/database/src/notification-tables.ts`. Outbound
+transport attempts belong in a separate delivery-log model and table. Do not
+add email, SMS, or provider-specific delivery columns to the inbox model.
 
 ## CLI Commands
 - `buddy make:notification [name]` -- scaffold a new notification

package/ai/skills/stacks-orm/SKILL.md

@@ -291,10 +291,24 @@ type UpdateModelData<T> = Partial<InferModelAttributes<Def<T>> & BelongsToForeig
 Each relationship type is processed into a `RelationConfig` object:
 - **hasOne / hasMany**: FK = `{parent_snake}_id`, model key = `{related_snake}_id`
 - **belongsTo**: FK is empty string (set on the owning model's side), supports custom `foreignKey`
-- **belongsToMany**: auto-creates pivot table name via `getPivotTableName()`, supports `pivotTable`, `firstForeignKey`, `secondForeignKey` overrides
+- **belongsToMany**: the legacy array form auto-creates a conventional pivot and supports `pivotTable`, `firstForeignKey`, and `secondForeignKey`; the named object form supports `table`, `foreignKey`, `relatedKey`, and `pivot` metadata (`columns`, `timestamps`, `uniques`)
 - **hasOneThrough**: includes `throughModel` and `throughForeignKey`
 - **morphOne**: uses `{modelName}able` pattern, generates `_type` and `_id` columns
 
+Named many-to-many relations are callable on model instances. Use their native
+relation builder for pivot writes:
+
+```ts
+const post = await Post.find(id)
+await post.categories().sync(categoryIds)
+await post.tags().attach(tagId)
+await post.tags().detach()
+```
+
+Declaring custom pivot columns in the model is required when those columns have
+defaults that `attach()` and `sync()` must write. `pivot.timestamps: true`
+causes both timestamps to be generated and maintained.
+
 ## Model Events (when `traits.observe: true`)
 `observe: true` emits all three events. `observe: ['create', 'update']` emits only those.
 - `'{modelname}:created'` -- via `afterCreate` hook, lazy-imports `@stacksjs/events`

package/ai/skills/stacks-payments/SKILL.md

@@ -306,6 +306,30 @@ await handleAddPaymentMethod(clientSecret, elements)  // confirms card setup
 await handlePayment(elements)         // confirms payment
 ```
 
+`useBillable()` explicitly imports `usePaymentStore` from the default payment
+store. Keep that dependency explicit in imported billing modules. Browser
+auto-imports are injected into STX script entries and do not become lexical
+globals inside the TypeScript modules those entries bundle.
+
+`usePaymentStore()` is a callable wrapper around one STX `defineStore()`
+singleton. Its requests resolve the configured API origin, include the current
+bearer token, add the CSRF header for writes, and derive mutation route IDs from
+the authenticated user. Never restore a fixed localhost port or a hard-coded
+user ID.
+
+### Dashboard Billing
+
+`/settings/billing` is a thin route that renders `BillingSettings`. The
+component calls `GET /api/dashboard/billing`, an authenticated aggregate Action
+registered in `routes/dashboard-api.ts`. Do not call the root `/payments/*`
+group from the dashboard: `buddy dev --dashboard` delegates `/api/*` to the
+Stacks router and intentionally leaves root GET paths to STX page rendering.
+
+The aggregate always returns persisted `PaymentTransaction` records for the
+authenticated user. Subscription and payment-method reads are provider-backed
+and may be unavailable when the application User override is not billable.
+Render that as an explicit unavailable state, not sample plans or fake cards.
+
 ## config/payment.ts
 
 ```typescript
@@ -358,6 +382,14 @@ The `UserModel` must have:
 - `update(data)` method -- for persisting `stripe_id`
 - `activeSubscription()` method -- for subscription updates
 
+The framework default `storage/framework/defaults/app/Models/User.ts` sets
+`billable: false` intentionally because not every application uses payments.
+Run `buddy publish:model User`, keep the override at `app/Models/User.ts`, and
+enable its `billable` trait before calling instance helpers such as
+`activeSubscription()`, `paymentMethods()`, or `createSetupIntent()`. A payment
+Action must report the missing trait clearly instead of calling an undefined
+method.
+
 ## Gotchas
 - Stripe API keys MUST be in `.env` as `STRIPE_SECRET_KEY` and `STRIPE_PUBLISHABLE_KEY` -- never hardcode them in config files
 - The Stripe SDK is initialized eagerly -- if `STRIPE_SECRET_KEY` is missing, the module throws on import

package/ai/skills/stacks-search-engine/SKILL.md

@@ -8,7 +8,8 @@ allowed-tools: Read Edit Write Bash Grep Glob
 
 # Stacks Search Engine
 
-Full-text search integration with Meilisearch and Algolia drivers.
+Full-text search integration with Meilisearch, Algolia, Typesense, and
+OpenSearch drivers.
 
 ## Key Paths
 - Core package: `storage/framework/core/search-engine/src/`
@@ -17,11 +18,20 @@ Full-text search integration with Meilisearch and Algolia drivers.
 ## Search Driver Factory
 
 ```typescript
-import { useSearchEngine, useAlgolia, useMeilisearch } from '@stacksjs/search-engine'
+import {
+  flushModelDocuments,
+  useAlgolia,
+  useMeilisearch,
+  useOpensearch,
+  useSearchEngine,
+  useTypesense,
+} from '@stacksjs/search-engine'
 
 const search = useSearchEngine()       // default driver
 const algolia = useAlgolia()            // Algolia client
 const meili = useMeilisearch()          // Meilisearch client
+const openSearch = useOpensearch()       // OpenSearch driver
+const typesense = useTypesense()         // Typesense driver
 ```
 
 ## Document Operations
@@ -37,7 +47,7 @@ await search.addDocuments('products', [
 const results = await search.search('products', 'widget')
 
 // List indexes
-const indexes = await search.listIndexes()
+const indexes = await search.listAllIndexes()
 
 // Get/update settings
 const settings = await search.getSettings('products')
@@ -48,7 +58,7 @@ await search.updateSettings('products', {
 })
 
 // Flush all documents
-await search.flush('products')
+await flushModelDocuments('Product')
 ```
 
 ## Model Integration (useSearch Trait)
@@ -82,25 +92,23 @@ buddy search-engine:settings --model Product  # settings for specific model
 
 ## Driver Comparison
 
-| Feature | Meilisearch | Algolia |
-|---------|------------|---------|
-| Self-hosted | Yes | No (cloud) |
-| Pricing | Free (self-hosted) | Per-search pricing |
-| Typo tolerance | Built-in | Built-in |
-| Faceted search | Yes | Yes |
-| Geo search | Yes | Yes |
-| Speed | Very fast | Very fast |
+| Feature | Meilisearch | Algolia | Typesense | OpenSearch |
+|---------|-------------|---------|-----------|------------|
+| Self-hosted | Yes | No | Yes | Yes |
+| Managed option | Yes | Yes | Yes | Yes |
+| Model lifecycle indexing | Yes | Yes | Yes | Driver must implement the full contract |
 
 ## config/search-engine.ts
 
 ```typescript
-{ driver: 'opensearch' }  // 'meilisearch' | 'algolia' | 'opensearch'
+{ driver: 'opensearch' }  // 'meilisearch' | 'algolia' | 'opensearch' | 'typesense'
 ```
 
 Environment variables: `MEILISEARCH_HOST`, `MEILISEARCH_KEY`, `SEARCH_ENGINE_DRIVER`
 
 ## Gotchas
 - Default driver is `opensearch` — configure in config or env
+- A selected driver must implement the complete `SearchEngineDriver` surface; never satisfy the type with an empty cast
 - `useSearch` trait determines which model fields are indexed
 - `displayable` controls which fields appear in search results
 - `searchable` controls which fields are queried during search

package/ai/skills/stacks-stx/SKILL.md

@@ -29,35 +29,98 @@ When the task is how a page should *look* (not just how stx renders), pair this
 2. **NEVER use** `var`, `document.*`, `window.*` in STX templates
 3. STX `<script>` tags should ONLY contain stx-compatible code (signals, composables, directives)
 
+### Pre-paint appearance
+
+Use `@appearanceBootstrap({...})` when persisted appearance must be applied
+before the browser parses the application shell. Do not add a raw inline
+script for `localStorage`, `document`, or `matchMedia`. The directive emits the
+synchronous compiler-owned guard, validates storage through explicit
+allowlists, applies the root data attributes and `dark` class, and receives the
+request CSP nonce when nonce support is enabled.
+
+```stx
+@appearanceBootstrap({
+  storageKey: 'app-appearance',
+  appearance: {
+    key: 'sidebarStyle',
+    attribute: 'appearance',
+    allowed: ['macos', 'arc'],
+    default: 'macos',
+  },
+  colorMode: {
+    key: 'colorMode',
+    attribute: 'color-mode',
+    default: 'system',
+  },
+})
+```
+
+Persist a JSON object under `storageKey`. Invalid JSON, storage errors, unknown
+appearance values, and unsupported color modes all fall back to the declared
+defaults before first paint.
+
 ## Template Structure
 
 ```html
+<script client>
+const count = state(0)
+const title = state('Hello STX')
+const showDescription = state(true)
+
+function increment(): void {
+  count.update(value => value + 1)
+}
+</script>
+
 <template>
   <div class="container">
-    <h1>{{ title }}</h1>
-    <p x-if="showDescription">{{ description }}</p>
-    <button @click="increment">Count: {{ count }}</button>
+    <h1>{{ title() }}</h1>
+    <p :if="showDescription()">Rendered reactively</p>
+    <button type="button" @click="increment()">Count: {{ count() }}</button>
   </div>
 </template>
 
-<script>
-import { ref, computed } from '@stacksjs/composables'
-
-const count = ref(0)
-const title = ref('Hello STX')
-const showDescription = ref(true)
-
-function increment() {
-  count.value++
-}
-</script>
-
 <style>
 /* Use crosswind utility classes or custom CSS */
 .container { max-width: 1200px; margin: 0 auto; }
 </style>
 ```
 
+STX signals are callable. Read with `count()`, replace with
+`count.set(value)`, and update from the current value with
+`count.update(value => value + 1)`. Do not use Vue-style `.value` access in
+STX templates or `resources/functions`.
+
+### Native form binding
+
+Use `x-model` for two-way form state instead of pairing `:value` with a
+manual `@input` or `@change` handler. The expression is the signal name
+without parentheses:
+
+```html
+<script client>
+const query = state('')
+const quantity = state(1)
+const enabled = state(false)
+const categories = state<string[]>([])
+</script>
+
+<input x-model.trim="query" type="search">
+<input x-model.number="quantity" type="number">
+<input x-model="enabled" type="checkbox">
+<input x-model="categories" type="checkbox" value="news">
+<select x-model="query">
+  <option value="">All</option>
+  <option value="active">Active</option>
+</select>
+```
+
+`x-model` supports text inputs, textareas, selects, radio buttons, boolean
+checkboxes, and checkbox arrays. Use `.trim` when whitespace should be
+removed and `.number` when the signal should receive a number. Keep a
+dedicated signal for each binding. Arbitrary expressions such as
+`x-model="user.name"` are not writable bindings.
+
 ## Configuration (config/ui.ts)
 
 ```typescript
@@ -112,6 +175,29 @@ interface StxConfig {
 - Reactivity system (ref, computed, watch)
 - Component composition and lifecycle
 - Dependency injection (provide/inject)
+- DOM update scheduling with the browser-auto-imported `nextTick()`
+
+### Template refs after structural updates
+
+Use `useRef()` with `nextTick()` when an element is inserted by `:if`, a modal, or another structural directive and must be focused or measured immediately afterward:
+
+```ts
+const open = state(false)
+const searchInput = useRef('searchInput')
+
+function showSearch(): void {
+  open.set(true)
+  void nextTick(() => searchInput.current?.focus())
+}
+```
+
+```html
+<template :if="open()">
+  <input ref="searchInput" type="search">
+</template>
+```
+
+`nextTick()` runs after the current synchronous signal and effect flush. Prefer it over `querySelector`, manual DOM polling, or `requestAnimationFrame` when the task is waiting for STX to materialize reactive markup.
 
 ### Rendering
 - **SSR** — Server-Side Rendering
@@ -168,9 +254,16 @@ await addLayout('admin', { nav: true, footer: true })
 - **STX is the ONLY templating system** — do not use other template engines
 - **`bun-plugin-stx` must be loaded** — without it, `.stx` files won't be processed
 - **Auto-imports** — browser auto-imports defined in `storage/framework/browser-auto-imports.json`
+- **Imported module dependencies** - browser auto-imports are injected into the STX script entry only; imported `.ts` modules must explicitly import every function or store they use
+- **Project-root server imports** - use `~/path` or `@/path` inside `<script server>` when a layout, partial, or page needs a project file. STX resolves both aliases against the application root before executing the server script. Relative imports still resolve against the `.stx` file
+- **Browser package inputs are bundled** - core browser helpers and model auto-import bootstraps are compiler bundle inputs. Rendered HTML must never contain a bare `import '@stacksjs/browser'`, because browsers cannot resolve package specifiers without an import map
+- **Server-to-client values are explicit** - a JSON-serializable top-level value exported by `<script server>` can be referenced by name in `<script client>`. STX serializes only referenced values and never overwrites a client-owned declaration
 - **`storage/framework/stx/`** — stx build cache and the generated route manifest. `config/ui.ts` sets stx's `stateDir` here, so nothing lands in the project root. Gitignored; safe to delete
-- **Reactivity is custom** — `ref()` and `computed()` from STX are not Vue's implementation
+- **Reactivity is signal-based** - use callable `state()` and `derived()` signals, not Vue-style `ref()` or `.value`
+- **Component tag case is semantic** - `<Input v-model:value="query">` is a paired component, while lowercase `<input v-model="query">` is a native void element. Keep component tags PascalCase, including names that collide with native elements
+- **Structural DOM timing** - use `nextTick()` with `useRef()` after opening reactive markup
 - **Crosswind for styling** — use utility classes, not inline styles
 - **Script block restrictions** — only stx-compatible code (signals, composables, directives), no vanilla DOM APIs
+- **Pre-paint state** - use `@appearanceBootstrap`, never a raw browser script in the template
 - **Components go in `resources/`** — not in `app/` or `storage/`
 - **118+ modules** — STX is a comprehensive framework covering rendering, routing, forms, i18n, SEO, PWA, and more

package/ai/skills/stacks-technical-diagrams/assets/template.html

@@ -26,8 +26,8 @@
   </script>
   <style>
     /* ==========================================================
-       THEME VARIABLES - switch by toggling [data-theme] on <html>
-       ========================================================== */
+      THEME VARIABLES - switch by toggling [data-theme] on <html>
+      ========================================================== */
     :root,
     [data-theme="dark"] {
       --bg: #020617;
@@ -47,7 +47,7 @@
       --arrow-emphasis: #34d399;
 
       /* Opaque mask color used behind semi-transparent component fills
-         so the arrows drawn underneath are properly hidden. */
+        so the arrows drawn underneath are properly hidden. */
       --mask: #0f172a;
 
       --frontend-fill:    rgba(8, 51, 68, 0.4);
@@ -226,17 +226,17 @@
     }
 
     /* ==========================================================
-       Print stylesheet - hide interactive controls, force light,
-       drop the grid so the diagram doesn't waste ink, use landscape
-       so wide diagrams fit, pack summary cards into 2 columns to
-       avoid an orphan card on a trailing page.
-       ========================================================== */
+      Print stylesheet - hide interactive controls, force light,
+      drop the grid so the diagram doesn't waste ink, use landscape
+      so wide diagrams fit, pack summary cards into 2 columns to
+      avoid an orphan card on a trailing page.
+      ========================================================== */
     @page { size: landscape; margin: 1.5cm; }
 
     @media print {
       /* Force the FULL light palette - including component fills/strokes and
-         lane/arrow colors - so printing from dark theme doesn't put neon
-         strokes and translucent dark fills on white paper. */
+        lane/arrow colors - so printing from dark theme doesn't put neon
+        strokes and translucent dark fills on white paper. */
       :root, [data-theme="dark"], [data-theme="light"] {
         --bg: #ffffff;
         --grid: transparent;
@@ -278,8 +278,8 @@
     }
 
     /* ==========================================================
-       TOOLBAR (theme toggle + export menu)
-       ========================================================== */
+      TOOLBAR (theme toggle + export menu)
+      ========================================================== */
     .toolbar {
       position: fixed;
       top: 1rem;
@@ -405,8 +405,8 @@
     }
 
     /* ==========================================================
-       SVG SEMANTIC CLASSES - use these instead of inline fill/stroke
-       ========================================================== */
+      SVG SEMANTIC CLASSES - use these instead of inline fill/stroke
+      ========================================================== */
     .c-grid       { stroke: var(--grid); fill: none; }
     .c-mask       { fill: var(--mask); stroke: none; }
 
@@ -448,7 +448,7 @@
     .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }
 
     /* Optional trace animation, enabled only by meta.animation = "trace".
-       Static diagrams do not carry data-animation and render exactly as before. */
+      Static diagrams do not carry data-animation and render exactly as before. */
     svg[data-animation="trace"] [data-animate="edge"] {
       stroke-dasharray: 10 8;
       stroke-dashoffset: 54;
@@ -481,7 +481,7 @@
 </head>
 <body>
   <!-- Toolbar: theme toggle + export menu (present on every generated diagram)
-       Keyboard: T toggles theme, E opens export menu (when no input focused) -->
+      Keyboard: T toggles theme, E opens export menu (when no input focused) -->
   <div class="toolbar" role="toolbar" aria-label="Diagram actions">
     <button id="btn-theme" type="button"
             title="Toggle theme (T)"
@@ -548,12 +548,12 @@
         <rect width="100%" height="100%" fill="url(#grid)" />
 
         <!-- =================================================================
-             COMPONENT EXAMPLES - use CSS classes, not inline fill/stroke
-             (so theme toggle works). Each box pattern:
-               1. opaque mask rect (.c-mask) to hide arrows underneath
-               2. styled rect (.c-<type>) with 1.5px stroke
-               3. text (.t-primary / .t-muted)
-             ================================================================= -->
+            COMPONENT EXAMPLES - use CSS classes, not inline fill/stroke
+            (so theme toggle works). Each box pattern:
+              1. opaque mask rect (.c-mask) to hide arrows underneath
+              2. styled rect (.c-<type>) with 1.5px stroke
+              3. text (.t-primary / .t-muted)
+            ================================================================= -->
 
         <!-- External/Generic Component -->
         <rect x="30" y="280" width="100" height="50" rx="6" class="c-mask"/>
@@ -587,8 +587,8 @@
         <text x="255" y="466" class="t-cloud" font-size="7" text-anchor="middle">OAI Protected</text>
 
         <!-- Security Group (dashed boundary). NOTE: extra vertical headroom
-             so the sg-name label has ~12px breathing room above the inner
-             component. Pattern: boundary y = inner.y - 30, h = inner.h + 50. -->
+            so the sg-name label has ~12px breathing room above the inner
+            component. Pattern: boundary y = inner.y - 30, h = inner.h + 50. -->
         <rect x="350" y="250" width="120" height="100" rx="8" class="c-security-group" stroke-width="1"/>
         <text x="358" y="268" class="t-security" font-size="8">sg-name :port</text>
 
@@ -620,8 +620,8 @@
         <text x="300" y="615" class="t-frontend" font-size="8" text-anchor="middle">domain.example.com</text>
 
         <!-- =================================================================
-             ARROW EXAMPLES (use .a-* classes and stroke-width on the line)
-             ================================================================= -->
+            ARROW EXAMPLES (use .a-* classes and stroke-width on the line)
+            ================================================================= -->
 
         <!-- Standard arrow with label -->
         <line x1="130" y1="305" x2="198" y2="305" class="a-default" stroke-width="1.5" marker-end="url(#arrowhead)"/>
@@ -645,8 +645,8 @@
         <text x="150" y="210" class="t-security" font-size="8">JWT + PKCE</text>
 
         <!-- =================================================================
-             LEGEND
-             ================================================================= -->
+            LEGEND
+            ================================================================= -->
         <text x="720" y="70" class="t-primary" font-size="10" font-weight="600">Legend</text>
 
         <rect x="720" y="82" width="16" height="10" rx="2" class="c-frontend" stroke-width="1"/>
@@ -690,7 +690,7 @@
 
       <div class="card">
         <div class="card-header">
-          <div class="card-dot amber"></div>
+          <div class="amber card-dot"></div>
           <h3>Card Title 2</h3>
         </div>
         <ul>
@@ -724,8 +724,8 @@
 
   <script>
     /* ============================================================
-       Theme toggle - persists to localStorage, respects system pref
-       ============================================================ */
+      Theme toggle - persists to localStorage, respects system pref
+      ============================================================ */
     var TechnicalDiagram = {};
 
     TechnicalDiagram.theme = (function () {
@@ -792,17 +792,17 @@
     })();
 
     /* ============================================================
-       Export - PNG / JPEG / WebP / SVG (download) and Copy PNG (clipboard)
+      Export - PNG / JPEG / WebP / SVG (download) and Copy PNG (clipboard)
 
-       Raster exports are always rendered at 4x source resolution for
-       maximum sharpness. The trick: we set the serialized SVG's
-       `width`/`height` to viewBox * 4 so the browser rasterizes the
-       vectors at that resolution natively. drawImage then draws at
-       the image's natural size (no upscaling = no blur).
+      Raster exports are always rendered at 4x source resolution for
+      maximum sharpness. The trick: we set the serialized SVG's
+      `width`/`height` to viewBox * 4 so the browser rasterizes the
+      vectors at that resolution natively. drawImage then draws at
+      the image's natural size (no upscaling = no blur).
 
-       JPEG/WebP paint the current theme's background explicitly since
-       those formats have no alpha channel.
-       ============================================================ */
+      JPEG/WebP paint the current theme's background explicitly since
+      those formats have no alpha channel.
+      ============================================================ */
     (function () {
       var RASTER_SCALE = 4;
 
@@ -910,7 +910,7 @@
         // serialized SVG, so url()-sourced faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
-                 "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
+                "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
         }).join('\n');
 
         var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
@@ -1025,7 +1025,7 @@
             ctx.drawImage(img, 0, 0);
             URL.revokeObjectURL(svgUrl);
             var mime = format === 'jpeg' ? 'image/jpeg' :
-                       format === 'webp' ? 'image/webp' : 'image/png';
+                      format === 'webp' ? 'image/webp' : 'image/png';
             var quality = format === 'png' ? undefined : 0.95;
             canvas.toBlob(function (blob) {
               if (!blob) reject(new Error('toBlob returned null for ' + format));
@@ -1049,8 +1049,8 @@
       // ---- Clipboard support ----------------------------------------------
       function canCopyImage() {
         return typeof ClipboardItem !== 'undefined' &&
-               navigator.clipboard &&
-               typeof navigator.clipboard.write === 'function';
+              navigator.clipboard &&
+              typeof navigator.clipboard.write === 'function';
       }
 
       // ---- Raster format detection ----------------------------------------
@@ -1230,11 +1230,11 @@
     })();
 
     /* ============================================================
-       Global keyboard shortcuts
-         T -> toggle theme
-         E -> open export menu
-       Ignored when focus is inside an input/textarea/contenteditable.
-       ============================================================ */
+      Global keyboard shortcuts
+        T -> toggle theme
+        E -> open export menu
+      Ignored when focus is inside an input/textarea/contenteditable.
+      ============================================================ */
     document.addEventListener('keydown', function (e) {
       if (e.metaKey || e.ctrlKey || e.altKey) return;
       var t = e.target;