IV-107 Flatten scientific-modern surfaces and move liquidity into navigation

.agents/memory/structured-liquidity-motion.md

@@ -5,7 +5,7 @@ description: How the tactile "liquid glass" interaction motion is built on the S
 
 # Liquid motion layer
 
-Tactile interaction motion (press ripples, liquid toggles/switch sheen, flowing tab marker, settling menus/dialogs/accordion, hover refraction) lives entirely in `index.html`'s inline `<style>` (gated under `@media (prefers-reduced-motion: no-preference)`) + three `mount*()` fns in `src/main.ts` (`mountRipples`, `mountTabFlow`, `mountRefraction`, each early-returns under `prefers-reduced-motion: reduce`). The verbatim `public/*` stays untouched — see the verbatim-public rule in `structured-liquidity.md`.
+Tactile interaction motion includes press feedback, flowing navbar/tab/filter markers, scroll continuity, settling menus/dialogs/accordions, and stateful toggles. Flat information surfaces do not refract on hover. Motion styles live in the layered source stylesheets and React/behavior hooks, with complete reduced-motion fallbacks; regenerate the distributable `public/*` files and registry after changes.
 
 ## Governing principle (content decision)
 The rigid **container** never bounces/squishes/morphs (sharp corners, flat offset shadow, grid hold). Only the **liquid inside** reacts — ripple, flood, settle with viscous overshoot, catch light. One shared easing token set (`--ease-liquid`, `--ease-liquid-over`, `--motion*`) so every motion feels like the same material.

.agents/memory/structured-liquidity.md

@@ -5,7 +5,7 @@ description: The durable decisions behind the SL specimen port — what it is, a
 
 # Structured Liquidity
 
-An open UI design language—**Structured framing. Liquid motion. Scientific clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, tactile interaction, and flat offset shadows used selectively for interactive or deliberately layered cutout surfaces; the frame makes hierarchy and action understandable before decoration. Liquid Motion makes system behavior perceptible through neutral translucency, continuity, and purposeful movement without becoming the only carrier of meaning, and every interaction has a complete reduced-motion state; glass is not a default card treatment. Scientific Clarity communicates meaning through disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable, and every screen remains complete without relying on color, glass, or motion. Together these three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and tenets are documented in `replit.md` — don't duplicate them; read there.
+An open UI design language—**Structured framing. Liquid motion. Scientific clarity.**—shipped as a live specimen at `artifacts/structured-liquidity`. Structured Framing organizes information through load-bearing borders, square geometry, rational grids, clear affordances, tactile interaction, and flat offset shadows used selectively for interactive or deliberately layered cutout surfaces; the frame makes hierarchy and action understandable before decoration. Liquid Motion makes system behavior perceptible through shared markers and transitions between navbar actions, menu options, tabs, filters, overlays, and page areas without becoming the only carrier of meaning. Default information surfaces are flat; gradients are not shorthand for liquidity, neutral translucency is reserved for moving state boundaries, and every interaction has a complete reduced-motion state. Scientific Clarity communicates meaning through disciplined hierarchy, measured typography, captions, labeling, evidence, and purposeful whitespace. Swiss modernism and the International Typographic Style are the informing tradition: information should be legible, ordered, and unmistakable, and every screen remains complete without relying on color, glass, or motion. Together these three tenets form the Structured Liquidity trifecta, represented by the cube's three visible faces. Token reference, file map, and tenets are documented in `replit.md` — don't duplicate them; read there.
 
 ## The non-obvious trap (why the port isn't a verbatim copy)
 
@@ -130,9 +130,7 @@ Every demo inside the `#components` kit (sidebar, navbar, nav-menu flyout, bread
 
 **Lucide has NO brand icons (e.g. `Github`):** the vanilla `lucide` package dropped all brand glyphs, so `import { Github }` fails typecheck (`TS2305 has no exported member 'Github'`). Icons are the design-language default for nav/buttons here, so when a button needs a brand mark, fall back to a generic semantic icon (e.g. `download` for an "Install"→GitHub CTA) rather than chasing a brand icon. **How to apply:** before adding any `data-lucide="x"` + import, confirm `x` exists in `node_modules/lucide/dist/lucide.d.ts`.
 
-**Why dropdowns/overlays look like a "cream" slab in LIGHT mode:** the verbatim `.glass` panels declare their tint with the legacy `rgba(var(--glass-tint), <a>)` comma form over a space-separated channel triplet, which browsers DROP — so panels are effectively transparent backdrop-blur (they pick up the cool page bg). But overlay surfaces in the kit (`.sl-menu`, `.sl-dialog`, `.sl-sheet`, `.sl-tip`, `.sl-hover-card`) use `background: var(--bg-2)`, which is opaque `#ffffff` in light mode → a stark warm white block next to the cool frosted panels. **Fix in `index.html` (NOT public CSS):** scope `[data-mode="light"] .sl-menu{...}` and re-declare the SAME glass gradient with VALID slash syntax `rgb(var(--glass-tint) / <a>)` so the menu's already-declared `backdrop-filter` shows through. Keep dark mode's opaque `var(--bg-2)` (legible). Same recipe applies to the other overlay classes if a user flags them.
-
-**Overlay cream-slab fix — per-class blur caveat:** the light-mode frosted override must be applied PER overlay class (`.sl-menu`, `.sl-ctx-menu`, etc.) since each is a separate selector. Crucially NOT every overlay carries its own `backdrop-filter`: `.sl-menu` gets `blur(18px) saturate(180%)` from the kit, but `.sl-ctx-menu` declares NONE — so swapping its bg to a translucent gradient alone leaves it see-through (no frost). When fixing a new overlay, check whether it has a `backdrop-filter` in the public CSS; if not, add `backdrop-filter:blur(18px) saturate(180%)` (+ `-webkit-` prefix) in the same index.html override or it won't read as glass.
+**Overlay rule:** information surfaces stay flat, while menus and overlays may use a single neutral translucent fill plus `backdrop-filter` because they are moving state boundaries. Never use a multi-stop gradient to make an overlay feel liquid. Apply the fill and blur per overlay class (`.sl-menu`, `.sl-ctx-menu`, etc.) so the behavior is explicit and legible in both modes.
 
 ## Showcase entries — verify sourced favicons, and frame partial adopters honestly
 

.agents/skills/structured-liquidity/SKILL.md

@@ -21,7 +21,7 @@ Follow these literally — they are what keep generated output on-brand:
 2. **Flat offset shadows, used selectively.** `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Blur is always `0`. Reserve shadows for tactile affordances and deliberately layered cutout surfaces; flat information containers can rely on borders, rules, and alignment.
 3. **Load-bearing borders.** `var(--border-w) solid rgb(var(--edge))`. The edge is black in both light and dark mode.
 4. **Exactly one accent.** `--accent` carries all emphasis. Never add a competing hue.
-5. **Glass is state and depth, not decoration.** Liquid glass = `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Keep it neutral/translucent and use it where continuity, layering, or motion matters—not on every card.
+5. **Liquid is movement, not a gradient treatment.** Default information surfaces are flat. Express liquidity through moving selection markers, menu and popover settling, tab changes, scroll continuity, and transitions between areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries such as navigation, menus, and overlays—not on every card.
 6. **Destructive is gray, not red.** Destructive _containers_ use `--neg`. Error _text_ may warn in color.
 7. **Fixed type roles.** display (`--display`, Archivo) = headings/buttons/brand; body (`--body`, Archivo) = reading copy; mono (`--mono`, IBM Plex Mono) = labels/data/captions/eyebrows.
 8. **Leading icons.** Nav links and buttons take a leading Lucide icon, then the label.
@@ -74,7 +74,7 @@ Three roles — header / body / detail (display / body / mono). Archivo carries
 
 ## Motion contract
 
-The rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.
+The rigid frame never wobbles or morphs. Motion belongs inside it and must explain state, continuity, or spatial relationship. Prefer a shared marker that visibly travels between menu options, tabs, filters, navbar actions, and page areas over per-item gradient fills or decorative sheen. Use one liquid easing family; reserve ambient motion for a single focal specimen; provide a complete static state under `prefers-reduced-motion`. If the interface communicates the same thing without the animation, the motion is optional polish, not a dependency.
 
 ## Components
 

artifacts/structured-liquidity/public/design-tokens.json

@@ -57,19 +57,19 @@
     "blur": {
       "$type": "dimension",
       "$value": "14px",
-      "$description": "backdrop-filter blur radius for liquid glass surfaces.",
+      "$description": "Backdrop blur for moving state boundaries such as navigation, menus, and overlays; not for default information surfaces.",
       "$extensions": { "cssVar": "--glass-blur" }
     },
     "tint": {
       "$type": "color",
       "$value": "#ffffff",
-      "$description": "Glass fill tint. The CSS token --glass-tint holds rgb channels ('255 255 255') for rgba(var(--glass-tint), var(--glass-alpha)).",
+      "$description": "Neutral translucent fill for moving state boundaries. The CSS token --glass-tint holds rgb channels ('255 255 255') for rgb(var(--glass-tint) / var(--glass-alpha)).",
       "$extensions": { "cssVar": "--glass-tint", "cssValue": "255 255 255" }
     },
     "alpha": {
       "$type": "number",
       "$value": 0.72,
-      "$description": "Glass fill opacity for the light-first default. Dark mode lowers this to 0.08.",
+      "$description": "Translucent boundary opacity for the light-first default. Dark mode lowers this to 0.08.",
       "$extensions": { "cssVar": "--glass-alpha" }
     }
   },

artifacts/structured-liquidity/public/llms.txt

@@ -22,7 +22,8 @@ This installs the theme and `.agents/skills/structured-liquidity/SKILL.md`. Veri
 - Shadows are **flat and offset**: `box-shadow: var(--hard-x) var(--hard-y) 0 0 var(--hard-shadow)`. Never use a blur radius. Reserve them for tactile affordances and deliberately layered cutout surfaces; flat information containers do not need a shadow.
 - Borders are solid and load-bearing: `var(--border-w) solid rgb(var(--edge))`. The edge (`--edge`) is black in both light and dark mode.
 - **Exactly one accent.** `--accent` carries all emphasis. Do not introduce a second hue to compete with it.
-- Glass surfaces use `backdrop-filter: blur(var(--glass-blur))` over `rgba(var(--glass-tint), var(--glass-alpha))`. Glass stays neutral/translucent and communicates state, continuity, or depth; it is not the default treatment for every card.
+- Default information surfaces are flat. Do not interpret Liquid Motion as permission to add decorative gradients or sheen.
+- Express Liquid Motion through shared markers moving between navbar actions, menu options, tabs, filters, overlays, and page areas. Use neutral translucency or `backdrop-filter` only at moving state boundaries.
 - Destructive surfaces use a neutral gray (`--neg`), never red. Error *text* may use a warning color, but destructive *containers* stay neutral.
 - Type roles are fixed: **display** = headings/buttons/brand (`--display`), **mono** = labels, captions, data, eyebrows (`--mono`), **body** = paragraph/reading copy (`--body`).
 - Leading icons are the default for nav links and buttons (Lucide). Put the icon first, then the label.