mosaic-headless 1.25.1 → 1.26.1

package/SKILL.md

@@ -4,7 +4,7 @@ description: |
   Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface with `mo.py`, which joins every source table to the live sweeps so a lookup leads with the measured verdict rather than the declaration (126 node types, 191 properties, 98 style properties with 20 structured value shapes pinned down, 53 style states, 156 variants, 74 dynamic variables, 15 interaction triggers, 115 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, the design-token and element-class layers verified against compiled CSS, the @VAR() dynamic language verified against rendered output, nine designed pages built through the tables themselves, and the delivered pages re-read in Chromium at three viewports so a rule that is present, correct and still wrong cannot pass. Drives Mosaic's own theme export/import and its plugin data upgrade from outside the editor and holds the copy against the source tree for tree. Measured on Mosaic Pro 1.0.9: the modal (`<dialog>`), OpenStreetMap, the exit-intent and scroll-depth triggers, run rules and the memory actions all built on a live page and read back, and the 1.0.7 -> 1.0.8 -> 1.0.9 migrations driven from outside wp-admin.
 license: "MIT"
 author: "moksa (https://moksaweb.com)"
-version: "1.25.1"
+version: "1.26.1"
 ---
 
 # Headless Mosaic
@@ -530,12 +530,13 @@ so the pattern is in the data, not just in this paragraph.
 | `data/conversion-batch.csv` | 19 | **converted, built and checked live, one page after another** - every Elementor page of a production site through the converter, with per-page element and content counts |
 | `data/token-benchmark.csv` | 6 | **measured with tiktoken** - the same six lookups priced three ways: reading the plugin source, loading every table, querying `mo.py`. 71-99.5% fewer tokens than the source and 99.6%+ fewer than the tables, which total 259,539 - never load them, query them |
 | `data/slider-verification.csv` | 30 | **driven live** - two sliders, one autoplaying and one a carousel: advance, arrows, bullets, keyboard, reduced motion |
-| `data/navigation-verification.csv` | 22 | **fetched and opened live** - every menu item is a real `<a href>`, every page of the nineteen answers 200, and no page scrolls sideways at 390 / 768 / 1280 |
+| `data/navigation-verification.csv` | 33 | **fetched and opened live** - every menu item is a real `<a href>`, every page of the nineteen answers 200, and no page scrolls sideways at 390 / 768 / 1280 |
 | `data/page-modal-verification.csv` | 19 | **read live** - one modal per page, and what each one's trigger, run rule, memory scope and dismissal policy actually came out as |
 | `data/dialog-verification.csv` | 19 | **driven live** - the 1.0.9 modal, its triggers, its run rules and the memory actions, each exercised in a real browser |
 | `data/dialog-form-verification.csv` | 49 | **driven live** - the same three nodes made into five FORMS (sheet, drawer, corner, takeover, gate), each re-opened at 390px and 768px; also where `pickOne` on a click turned out to be a latch rather than a lottery |
 | `data/token-verification.csv` | 15 | **driven live** - every `:root` custom property declared once, non-empty, and resolved by something on the page; a token nothing points at is a token that is not working |
-| `data/mobile-audit.csv` | 54 | **driven live** - what a sideways-scroll check cannot see: type under the legible floor, controls too small to hit, a grid that never collapsed, content escaping its box |
+| `data/mobile-audit.csv` | 58 | **driven live** - what a sideways-scroll check cannot see: type under the legible floor, controls too small to hit, a grid that never collapsed, content escaping its box |
+| `data/component-wall-verification.csv` | 11 | **driven live** - tabs switched, an accordion opened, a form's fields and Mosaic's own honeypot, and an OpenStreetMap asserted on the coordinates it was GIVEN rather than the default it falls back to |
 | `data/custom-fields-verification.csv` | 62 | **rendered live** - ACF and Meta Box fields of every common type read back through `@VAR` / `@LOOP` off the delivered page, loops included |
 | `data/theme-zip-verification.csv` | 22 | **round-tripped live** - Mosaic's own ZIP export imported in test mode and compared to its source, table by table and tree by tree |
 | `data/node-type-notes.csv` | 8 | where a sweep outcome is true but misleading on its own, why. Surfaced by `mo.py type` |
@@ -808,10 +809,11 @@ post — `build_all.py` resets first for that reason.
 | `theme_zip_compare.php` | hold an imported copy against its source, tree for tree - every scoped table, the (parentType, type) shape, which ids survive, and orphans named rather than counted |
 | `theme_delete.php` | remove a theme completely through the plugin's own routine; refuses the live one |
 | `verify_slider.py` | the slider in a real browser: does it advance, do the arrows and bullets drive it, does the keyboard, does it stop when motion is not wanted - `--label`/`--append` put several sliders in one table, which is where a carousel and a plain slider can be held against each other |
-| `verify_navigation.py` | a multi-page site: is every menu item a real `<a href>`, does every page answer 200 (a template that was never bound answers 406 with an empty body, which only a logged-out visitor sees), and with `--viewports` does any page scroll SIDEWAYS - the one question no per-page checker asks |
+| `verify_navigation.py` | a multi-page site: is every menu item a real `<a href>`, does every page answer 200 (a template that was never bound answers 406 with an empty body, which only a logged-out visitor sees), and with `--viewports` does any page scroll SIDEWAYS - the one question no per-page checker asks - and whether every in-page `#fragment` resolves ON THE PAGE THAT CARRIES IT, which an HTTP check cannot see: a bare `#services` in a SHARED header fetches the current page, answers 200 everywhere, and does nothing on every page but the one that has that section |
 | `verify_dialog.py` | the 1.0.9 modal in a real browser: does it open, close, answer Esc, remember, cap - and does an OpenStreetMap carry the coordinates it was given |
 | `verify_dialog_lab.py` | the question after "does the modal work": can three nodes be made into a bottom sheet, a side drawer, a corner notice, a full takeover and a gate with no way out - and does each one still fit at phone width, which the page's own width check cannot see |
 | `verify_tokens.py` | the design tokens as the BROWSER resolved them: every `:root` property declared once (a changed value does not retire the old one), non-empty, and actually pointed at by something - a wrong `skinsData` shape still emits the declaration and serves white |
+| `verify_components.py` | presses the interactive components on a page and asserts the RESULT - a pane actually swapped, an accordion item actually opened, the map carries the coordinates it was given - because "these all work" is worth what the last press proved |
 | `audit_mobile.py` | the RWD defects a sideways-scroll check cannot see - type under the legible floor, controls too small to hit, a grid that never collapsed, content escaping a box that is not clipping it - re-opened at every `--widths` |
 | `list_fields.php` | every `@VAR` / `@LOOP` name Mosaic registers for one post - custom fields, their derived `__label` / `__url` / `__id` properties, the row variables of each loop - with the value each resolves to (`wp eval-file`) |
 | `data_upgrade.py` | after a plugin update, run Mosaic's data migration over its own milestone route - the step wp-admin does from a screen - and set the config's version when the editor API is back |

package/assets/templates/platforms/claude-ai.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.25.1"
+    "version": "1.26.1"
   },
   "loaderBehaviour": "Upload via Settings -> Skills -> Upload. Claude.ai parses SKILL.md frontmatter and surfaces the skill in your library. The extraction tool (extract-block-schema.php) needs a live WP-CLI connection and won't run in the sandbox; use it from a local terminal against your own site instead.",
   "uploadSteps": [

package/assets/templates/platforms/claude-code.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.25.1"
+    "version": "1.26.1"
   },
   "loaderBehaviour": "Auto-loads on session start when SKILL.md frontmatter parses successfully.",
   "verified": true,

package/assets/templates/platforms/codex-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.25.1"
+    "version": "1.26.1"
   },
   "loaderBehaviour": "Confirmed (2026-07-11): Codex CLI natively supports the SKILL.md spec. Place SKILL.md under .codex/skills/<name>/ (project) or ~/.codex/skills/<name>/ (personal) and Codex loads the name+description at session start, then the full body on demand. A parallel, broader convention .agents/skills/ (searched from cwd up to repo root, then ~/.agents/skills/) also exists across multiple tools - if your Codex CLI version prioritizes that path instead, mirror the same SKILL.md there.",
   "verified": true,

package/assets/templates/platforms/copilot.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.25.1"
+    "version": "1.26.1"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: GitHub Copilot added a proper '.github/skills/' Agent Skills directory (December 2025), alongside the older single-file .github/copilot-instructions.md convention. This config targets the new skills-directory form. If your Copilot version predates this (pre Dec 2025), use the instructions-append fallback instead (see fallback below).",
   "fallback": {

package/assets/templates/platforms/gemini-cli.json

@@ -20,7 +20,7 @@
     "description": "Build and modify Mosaic Pro (Nextend) sites by writing the underlying data model directly - no visual editor, no DOM. Query the real surface (122 node types, 181 node properties, 98 style properties, 53 style states, 151 element classes, 74 dynamic variables, 114 REST routes, 23 tables) instead of guessing, with every node type placed on a live site one at a time and asserted against the delivered HTML, every style and node property swept against the compiled CSS and markup, and 569 responsive declarations checked against the stylesheet the site actually served.",
     "license": "MIT",
     "author": "moksa (https://moksaweb.com)",
-    "version": "1.25.1"
+    "version": "1.26.1"
   },
   "loaderBehaviour": "CHANGED as of 2026-07-11: Gemini CLI now natively supports the same SKILL.md standard as Claude Code and Codex CLI - the same directory-based skill works unmodified. Gemini CLI discovers skills in this precedence order: built-in, extension skills, ~/.gemini/skills/ (personal), .gemini/skills/ (project, shared via version control). At session start Gemini injects each discovered skill's name+description into the system prompt and calls activate_skill when a task matches.",
   "verified": true,

package/data/component-wall-verification.csv

@@ -0,0 +1,12 @@
+check,result,detail
+TABS/one_pane_at_rest,PASS,visible panes at rest: [0]
+TABS/click_switches,PASS,clicked tab 3 -> panes [3]
+TABS/active_label_readable,PASS,"{'bg': 'rgb(22, 24, 28)', 'labels': ['rgba(250, 250, 247, 0.6)', 'rgb(250, 250, 247)']}"
+ACCORDION/shut_at_rest,PASS,open: []
+ACCORDION/click_opens_one,PASS,clicked 1 -> open [1]
+ACCORDION/keyboard_reachable,PASS,title tabindex='0' - the plugin puts it in the tab order
+FORM/fields,PASS,"named fields: ['name', 'email', 'message']"
+FORM/required,PASS,every author field is required
+FORM/honeypot,PASS,"Mosaic adds its own spam trap: ['mosaic_hp_url', 'mosaic_hp_ts']"
+MAP/frame,PASS,renders an openstreetmap iframe
+MAP/coordinates_applied,PASS,"marker=24.147700,120.673600"

package/data/mobile-audit.csv

@@ -1,4 +1,6 @@
 path,width,finding,element,detail
+components/,390,GRID_NOT_COLLAPSED,cp-tabs-menu,2 columns at 390px
+components/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 dialogs/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 sliders/,390,SMALL_TARGET,sl-main-nav-dot,34x28: 
 sliders/,390,SMALL_TARGET,sl-main-nav-dot,34x28: 
@@ -14,6 +16,8 @@ sliders/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 tokens/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 dynamic/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
 conversion/,390,GRID_NOT_COLLAPSED,mk-f-links,2 columns at 390px
+components/,768,LONG_MEASURE,m-text,44 chars/line
+components/,768,LONG_MEASURE,m-text,56 chars/line
 dialogs/,768,LONG_MEASURE,m-text,46 chars/line
 dialogs/,768,LONG_MEASURE,m-text,45 chars/line
 dialogs/,768,LONG_MEASURE,m-text,45 chars/line

package/data/navigation-verification.csv

@@ -1,21 +1,32 @@
 check,result,detail
-FRONT_PAGE,PASS,"HTTP 200, 238746 bytes"
+FRONT_PAGE,PASS,"HTTP 200, 239472 bytes"
 MENU_IS_LINKS,PASS,4 real <a href> in #mk-nav
-NAV 服務,PASS,"#services -> HTTP 200, 238844 bytes"
-NAV 作品,PASS,"#works -> HTTP 200, 238844 bytes"
-NAV 產品,PASS,"#products -> HTTP 200, 238844 bytes"
-NAV 聯絡,PASS,"#contact -> HTTP 200, 238844 bytes"
-PAGE moksa,PASS,"HTTP 200, 238747 bytes"
-PAGE my-account,PASS,"HTTP 200, 98954 bytes"
-PAGE intro,PASS,"HTTP 200, 132660 bytes"
-PAGE conversion,PASS,"HTTP 200, 100741 bytes"
-PAGE dynamic,PASS,"HTTP 200, 110919 bytes"
-PAGE tokens,PASS,"HTTP 200, 123331 bytes"
-PAGE sliders,PASS,"HTTP 200, 150106 bytes"
-PAGE dialogs,PASS,"HTTP 200, 204885 bytes"
+NAV 服務,PASS,"/#services -> HTTP 200, 239568 bytes"
+NAV 作品,PASS,"/#works -> HTTP 200, 239568 bytes"
+NAV 產品,PASS,"/#products -> HTTP 200, 239568 bytes"
+NAV 聯絡,PASS,"/#contact -> HTTP 200, 239568 bytes"
+PAGE moksa,PASS,"HTTP 200, 239471 bytes"
+PAGE my-account,PASS,"HTTP 200, 99676 bytes"
+PAGE intro,PASS,"HTTP 200, 133386 bytes"
+PAGE components,PASS,"HTTP 200, 114165 bytes"
+PAGE conversion,PASS,"HTTP 200, 101843 bytes"
+PAGE dynamic,PASS,"HTTP 200, 111263 bytes"
+PAGE tokens,PASS,"HTTP 200, 124433 bytes"
+PAGE sliders,PASS,"HTTP 200, 150450 bytes"
+PAGE dialogs,PASS,"HTTP 200, 205987 bytes"
+ANCHORS moksa,PASS,every in-page link resolves
+ANCHORS my-account,PASS,every in-page link resolves
+ANCHORS intro,PASS,every in-page link resolves
+ANCHORS components,PASS,every in-page link resolves
+ANCHORS conversion,PASS,every in-page link resolves
+ANCHORS dynamic,PASS,every in-page link resolves
+ANCHORS tokens,PASS,every in-page link resolves
+ANCHORS sliders,PASS,every in-page link resolves
+ANCHORS dialogs,PASS,every in-page link resolves
 WIDTH moksa,PASS,"no sideways scroll at 390,768,1280"
 WIDTH my-account,PASS,"no sideways scroll at 390,768,1280"
 WIDTH intro,PASS,"no sideways scroll at 390,768,1280"
+WIDTH components,PASS,"no sideways scroll at 390,768,1280"
 WIDTH conversion,PASS,"no sideways scroll at 390,768,1280"
 WIDTH dynamic,PASS,"no sideways scroll at 390,768,1280"
 WIDTH tokens,PASS,"no sideways scroll at 390,768,1280"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosaic-headless",
-  "version": "1.25.1",
+  "version": "1.26.1",
   "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
   "keywords": [
     "wordpress",

package/references/design-system.md

@@ -160,3 +160,39 @@ so knew nothing about children a type HEALS into itself — modal's overlay, loo
 `loop-items`, slider's `slider-slides`, dropdown's own two. Both fixes are the same
 move: the question the table answers was narrower than the question the table's
 name suggests, so read the other source as well and say which is which.
+
+## Component states live on the element the selector names
+
+Two of Mosaic's component states read as a parent/child pair and only one of them
+is about the component itself:
+
+```
+___tab--active                &.m-tab--active          the tab
+___tab--active___descendants  .m-tab--active &         anything inside it
+___slider_navigation_bullet--active   &.m-slider-bullet--active
+___slide--active                      .m-slide--active > &
+___arrow_hidden                       &:where(.m-slider-arrow--hidden)
+```
+
+`___tab--active___descendants` compiles with `&` in the DESCENDANT position, so it
+must be committed on the child node. Put it on the tab and it reads "a descendant
+of an active tab that is also that tab", which matches nothing — the plugin
+darkens the active tab, the label keeps the colour you gave it, and the current
+tab is ink on ink. Measured both ways; the fix is to style the label node, not
+the tab.
+
+The same shape governs `___slide--active` (`.m-slide--active > &`, so it goes on
+the slide's content) and the slider bullet's own `--active`, which is what turns a
+row of identical hairlines into a position indicator.
+
+## What `openstreetmap` is called
+
+`latitude`, `longitude`, `zoom`, `layer`, `lazyLoad` — not `lat` / `lon`. An
+unknown property name is dropped without a word and the element falls back to its
+default centre, which is Times Square: a map that renders, looks deliberate, and
+is in the wrong hemisphere. The three coordinate properties take
+`ValidatorDynamicCodeObject`, so the `{"v": "…"}` object form.
+
+The element is an `<iframe>` to openstreetmap.org, not a tile layer, so "how many
+tiles loaded" is unanswerable from the parent document — assert on the frame's
+`src`, which carries `marker=lat,lon`.

package/references/failure-modes.md

@@ -344,3 +344,31 @@ Two rules come out of it:
   that lesson: for anything with a visible and an invisible state, a suite that
   only exercises the visible one is testing half a component, and the half it
   skips is the one the visitor sees most of the time.
+
+## A fragment link in a SHARED header is dead on every page but one
+
+`#services` points at an id in the CURRENT document. Put it in a header that every
+page shares, and on the one page that has that section it works, while on the other
+seven the browser looks for the id, does not find it, and does nothing — no
+navigation, no error, no feedback of any kind. The visitor clicks and the page sits
+there. It is worse than a 404 for exactly that reason.
+
+This shipped. The nav verifier had a check for it and the check could not see it:
+it fetched every menu href and asserted HTTP 200, and `#services` resolves to the
+*current* URL, so it returned 200 on all eight pages while being dead on seven.
+"Every link answers 200" and "every link does something" are different claims.
+
+Two things come out of it:
+
+- **Write shared-shell links absolutely** — `/#services`, not `#services`. A link
+  in a component that appears on more than one page has to mean the same thing
+  from all of them.
+- **Assert the fragment resolves on the page that carries it.**
+  `verify_navigation.py` now opens every page and fails on any `[href^="#"]`
+  whose target id is absent from that document. It found the four in the header
+  immediately — and then a fifth and sixth in the masthead, which `/intro/` shares
+  with the homepage and which I had not thought to look at.
+
+The general form: a check that confirms a resource EXISTS is not a check that the
+control WORKS, and anything living in a shared layout needs verifying on every
+page that includes it, not on the page it was designed for.

package/scripts/check-release.mjs

@@ -101,8 +101,9 @@ const counts = {
   "data/dialog-verification.csv": 19,
   "data/slider-verification.csv": 30,
   "data/token-verification.csv": 15,
-  "data/mobile-audit.csv": 54,
-  "data/navigation-verification.csv": 22,
+  "data/mobile-audit.csv": 58,
+  "data/component-wall-verification.csv": 11,
+  "data/navigation-verification.csv": 33,
   "data/page-modal-verification.csv": 19,
   "data/interaction-rules-verification.csv": 17,
   "data/dialog-form-verification.csv": 49,

package/sites/_moksa.py

@@ -281,8 +281,12 @@ def mask_line(attr, text, tag="h1", **st):
 # studio's own site; everything that demonstrates what Mosaic can DO is one
 # labelled group, which is also the only honest shape - those five pages are a
 # set, not five more sections of the homepage.
-NAV = [("服務", "#services"), ("作品", "#works"),
-       ("產品", "#products"), ("聯絡", "#contact")]
+# These are sections of the HOMEPAGE, and the header is shared by every page. A
+# bare `#services` is therefore a dead link on all seven of the others: the
+# browser looks for that id in the current document, does not find it, and does
+# nothing at all. Absolute, so they mean the same thing from anywhere.
+NAV = [("服務", "/#services"), ("作品", "/#works"),
+       ("產品", "/#products"), ("聯絡", "/#contact")]
 
 # Read from the shipped tables rather than typed, so the menu cannot claim a
 # number the evidence no longer supports.
@@ -300,6 +304,8 @@ CONVERTED_COUNT = _count("conversion-batch.csv",
 
 # label, href, one line of what it demonstrates
 CAPABILITIES = [
+    ("元件牆", "/components/",
+     "分頁、手風琴、表單、地圖——都能直接操作"),
     ("彈窗與觸發", "/dialogs/",
      "九種形態、四種觸發、四種執行規則"),
     ("輪播", "/sliders/",
@@ -1369,7 +1375,7 @@ def capability_dropdown():
     table now carries a `takes_children` column and the build guard reads it.
     """
     return {"type": "dropdown",
-            "data": {"attrID": "mk-cap", "horizontalAlign": "left"},
+            "data": {"attrID": "mk-cap", "horizontalAlign": "right"},
             "style": {"&": {"_": {"position": "relative"}}},
             "children": [
                 {"type": "dropdown-toggle",
@@ -1398,9 +1404,13 @@ def capability_dropdown():
                                   "border:1px solid rgb(22,24,28);"
                                   "box-shadow:0 20px 48px rgba(22,24,28,.14);"},
                              None,
-                             {"minWidth": "0px", "width": "100%",
+                             # NOT width:100% - that is 100% of the toggle-sized
+                             # host, and the panel came out 79px wide and 1124px
+                             # tall. A fixed width, right-aligned, fits 390px.
+                             {"minWidth": "0px", "width": "296px",
                               "customDeclarations":
-                                  "border:1px solid " + RULE + ";box-shadow:none;"}),
+                                  "border:1px solid rgb(22,24,28);"
+                                  "box-shadow:0 18px 40px rgba(22,24,28,.16);"}),
                  "children": [
                      {"type": "menu-link",
                       "data": {"attrID": "mk-cap-%d" % i, "url": href},
@@ -1454,7 +1464,7 @@ HEADER = box("mk-shell-top", {}, [
              "children": [
                  # the wordmark is the only route back to the top on a one-pager, so
                  # it has to be a link. `menu-link` with a url renders a real <a>.
-                 {"type": "menu-link", "data": {"attrID": "mk-logo", "url": "#mk-home"},
+                 {"type": "menu-link", "data": {"attrID": "mk-logo", "url": "/"},
                   "style": {"&": {"_": {"display": "flex", "alignItems": "baseline",
                                         "columnGap": "9px", "cursor": "pointer"}}},
                   "children":
@@ -1508,7 +1518,7 @@ HEADER = box("mk-shell-top", {}, [
                   ] + [capability_dropdown()]},
                  # not a pill: a bracketed link, the way a document cross-references
                  {"type": "button", "data": {"attrID": "mk-header-cta",
-                                             "url": "#contact"},
+                                             "url": "/#contact"},
                   "style": {"&": {"_m": {"display": "none"},
                                   "_t": {"fontSize": "12px"},
                                   # 13px of the bright orange on the glass header is
@@ -1690,8 +1700,8 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
                                     if n == 1
                                     else {"color": {"token": "--mk-accent"}})}},
           "text": text}
-         for n, (text, href) in enumerate([("服務項目 →", "#services"),
-                                           ("精選作品 →", "#works")], start=1)
+         for n, (text, href) in enumerate([("服務項目 →", "/#services"),
+                                           ("精選作品 →", "/#works")], start=1)
      ]},
           ]),
           # the right-hand column: what a spec sheet puts in its header block
@@ -3218,6 +3228,10 @@ if __name__ == "__main__":
     # helpers it reads are pure functions - two copies produce identical dicts.
     import _dialogs
     import _sliders
+    import _components
+    SITE["pages"].append({"slug": "components", "post_id": 281,
+                          "title": "元件",
+                          "tree": apply_type(_components.TREE, DISPLAY, CJK, "600")})
     import _tokens
     import _dynamic
     import _conversion