@mdxui/named 8.0.0 → 8.1.0

package/dist/styles.css

@@ -810,4 +810,306 @@ html:has([data-dialect='named']) {
   left: 0;
   right: 0;
   border-top: 1px solid var(--color-border);
-}
+}
+
+/**
+ * @mdxui/named — GALLERY template envelope ("The Evening Gallery")
+ * ============================================================================
+ *
+ * The museum register of the named dialect: the page is an exhibition
+ * catalogue for a singular talent. Scene: an evening visitor moving alone
+ * through a dim gallery — warm near-black walls, each capability hung as a
+ * spot-lit work with its bone placard beside it, one Klein-blue wall at the
+ * end of the walk.
+ *
+ * LIGHT MODE IS THE DAY GALLERY, not an inversion: bone plaster walls under
+ * even daylight, the SAME placard system (placards are physical bone cards —
+ * they keep their material in both modes), the vitrines keep their dark
+ * velvet interiors, and the ultramarine holds. Dark mode dims the walls to
+ * warm near-black; the placards and vitrines read as lit objects by contrast
+ * alone.
+ *
+ * Color strategy: RESTRAINED — vast warm-neutral emptiness; one saturated
+ * accent (electric ultramarine, the International-Klein-Blue register of
+ * gallery walls) held under ~10% of the surface: catalogue numbers, the
+ * primary action, and the single painted wall of the closing room.
+ * Deliberately NOT gold/amber, NOT neon, NOT terminal-dark.
+ *
+ * SCOPING — rides on top of the studio envelope exactly like executive: the
+ * view renders `data-dialect="named" data-template="gallery"`, so studio's
+ * bare `[data-dialect='named']` block still matches and this two-attribute
+ * selector re-points every token the gallery subtree reads. The dark block
+ * below (3 selectors) outranks both this block and studio's `.dark` block.
+ */
+
+/* Display face — Bricolage Grotesque (variable 200–800, optical sizes 12–96):
+   a grotesque with flare cuts and real presence at exhibition-title sizes,
+   nothing like Halant's serif or Anton's condensed shout. Inter body ships
+   from the studio block of the same stylesheet. */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 200 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInHWVyNJ.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+[data-dialect='named'][data-template='gallery'] {
+  /* ---- semantic layer — the day gallery -------------------------------- */
+  /* walls: bone plaster (warm hue, whisper of chroma — never #fff) */
+  --color-surface: oklch(0.957 0.007 80);
+  --color-surface-raised: oklch(0.978 0.005 82);
+  --color-surface-sunken: oklch(0.928 0.009 78);
+
+  /* ink: warm umber, never pure black */
+  --color-fg: oklch(0.21 0.012 55);
+  --color-fg-soft: oklch(0.34 0.012 55);
+  --color-fg-muted: oklch(0.47 0.014 60);
+
+  /* hairlines — frame edges and rule lines */
+  --color-border: oklch(0.21 0.012 55 / 0.14);
+  --color-border-strong: oklch(0.21 0.012 55 / 0.42);
+  --color-ring: oklch(0.45 0.2 264 / 0.5);
+  --color-hover: oklch(0.21 0.012 55 / 0.05);
+
+  /* the one accent: electric ultramarine (Klein blue). `field` paints the
+     large surfaces (the closing-room wall, the featured edition); `strong`
+     is blue TYPE and small marks (catalogue numbers, diamonds). They share
+     a value in daylight; after dark they split — fields stay deep and
+     saturated, type lifts to stay legible on near-black. */
+  --color-accent-field: oklch(0.45 0.28 264);
+  --color-accent-strong: oklch(0.45 0.26 264);
+  --color-accent: oklch(0.5 0.24 264);
+  --color-accent-soft: oklch(0.93 0.035 264);
+  --color-accent-fg: oklch(0.975 0.006 85);
+
+  /* placards: physical bone cards — same material in BOTH modes */
+  --color-placard: oklch(0.982 0.005 85);
+  --color-placard-fg: oklch(0.21 0.012 55);
+  --color-placard-soft: oklch(0.36 0.012 55);
+  --color-placard-muted: oklch(0.48 0.014 58);
+  --color-placard-border: oklch(0.21 0.012 55 / 0.12);
+
+  /* vitrines: dark velvet interiors — display cases stay dark by day too */
+  --color-vitrine: oklch(0.15 0.012 48);
+  --color-vitrine-fg: oklch(0.92 0.008 80);
+  --color-vitrine-border: oklch(0.21 0.012 55 / 0.35);
+
+  /* primary action: solid ultramarine (the studio gradient collapses flat) */
+  --color-btn-primary-from: oklch(0.45 0.28 264);
+  --color-btn-primary-to: oklch(0.45 0.28 264);
+  --color-btn-primary-fg: oklch(0.975 0.006 85);
+
+  --color-destructive: oklch(0.55 0.19 28);
+  --color-destructive-fg: oklch(0.975 0.006 85);
+
+  /* ---- neo shared names, re-pointed (keeps shared primitives correct) -- */
+  --background: oklch(0.957 0.007 80);
+  --foreground: oklch(0.21 0.012 55);
+  --card: oklch(0.978 0.005 82);
+  --card-foreground: oklch(0.21 0.012 55);
+  --popover: oklch(0.978 0.005 82);
+  --popover-foreground: oklch(0.21 0.012 55);
+  --muted: oklch(0.928 0.009 78);
+  --muted-foreground: oklch(0.47 0.014 60);
+  --primary: oklch(0.45 0.28 264);
+  --primary-foreground: oklch(0.975 0.006 85);
+  --secondary: oklch(0.928 0.009 78);
+  --secondary-foreground: oklch(0.21 0.012 55);
+  --accent: oklch(0.5 0.24 264);
+  --accent-foreground: oklch(0.975 0.006 85);
+  --border: oklch(0.21 0.012 55 / 0.14);
+  --input: oklch(0.21 0.012 55 / 0.14);
+  --ring: oklch(0.45 0.2 264 / 0.5);
+  --destructive: oklch(0.55 0.19 28);
+  --destructive-foreground: oklch(0.975 0.006 85);
+
+  /* ---- geometry: crisp frames, gently eased placard corners ------------ */
+  /* 4px base (--radius anchors the host's @theme-inline multipliers; see
+     the studio block for the mechanism). Frames and vitrines are sharp by
+     component class; placards take the soft 4px of a die-cut card. */
+  --radius: 0.25rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.1875rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --radius-2xl: 0.5rem;
+  --radius-3xl: 0.5rem;
+  --radius-4xl: 0.5rem;
+  --radius-section: 0px;
+  --radius-image: 4px;
+
+  /* ---- elevation: museum light --------------------------------------- */
+  /* Placards and vitrines cast soft warm shadows (objects under daylight);
+     warm-black tint so the shadow belongs to the room, not to a screen. */
+  --shadow-2xs: 0 1px 1px oklch(0.15 0.012 48 / 0.05);
+  --shadow-xs: 0 1px 2px oklch(0.15 0.012 48 / 0.06);
+  --shadow-sm: 0 1px 3px oklch(0.15 0.012 48 / 0.08),
+    0 1px 2px -1px oklch(0.15 0.012 48 / 0.08);
+  --shadow-md: 0 6px 16px -6px oklch(0.15 0.012 48 / 0.14),
+    0 2px 4px -2px oklch(0.15 0.012 48 / 0.08);
+  --shadow-lg: 0 18px 40px -16px oklch(0.15 0.012 48 / 0.2),
+    0 4px 10px -6px oklch(0.15 0.012 48 / 0.1);
+  --shadow-xl: 0 28px 56px -20px oklch(0.15 0.012 48 / 0.26);
+  --shadow-2xl: 0 36px 72px -24px oklch(0.15 0.012 48 / 0.32);
+
+  /* ---- type ------------------------------------------------------------ */
+  /* Display = Bricolage Grotesque (exhibition titles, catalogue numbers,
+     prices). Body stays on the inherited Inter. */
+  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
+
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* The hero's light wash — dark mode only, FULL WIDTH of the hero (inset 0,
+   never a negative-offset box): one warm pool falling from the top of the
+   wall, fading out before the ticker rule. */
+[data-dialect='named'][data-template='gallery'] .gal-wash {
+  position: relative;
+}
+.dark [data-dialect='named'][data-template='gallery'] .gal-wash::before,
+[data-dialect='named'][data-template='gallery'].dark .gal-wash::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    120% 100% at 50% 0%,
+    oklch(0.93 0.01 80 / 0.08),
+    transparent 58%
+  );
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the evening gallery, the design's namesake. Warm near-black
+   walls (NOT cool terminal black), bone type. The placard keeps its
+   bone card material — a lit object on a dark wall — and the vitrine keeps
+   its velvet interior, now a step deeper than the room. Ultramarine splits
+   by role: painted fields stay deep IKB, type lifts to read on the dark.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">).
+   ────────────────────────────────────────────────────────────────── */
+.dark [data-dialect='named'][data-template='gallery'],
+[data-dialect='named'][data-template='gallery'].dark {
+  /* ---- semantic layer — after hours ------------------------------------ */
+  --color-surface: oklch(0.168 0.012 45);
+  --color-surface-raised: oklch(0.205 0.014 45);
+  --color-surface-sunken: oklch(0.13 0.01 45);
+
+  --color-fg: oklch(0.93 0.01 80);
+  --color-fg-soft: oklch(0.82 0.01 80);
+  --color-fg-muted: oklch(0.66 0.012 75);
+
+  --color-border: oklch(0.93 0.01 80 / 0.13);
+  --color-border-strong: oklch(0.93 0.01 80 / 0.4);
+  --color-ring: oklch(0.64 0.19 266 / 0.55);
+  --color-hover: oklch(0.93 0.01 80 / 0.06);
+
+  /* ultramarine after dark: fields hold deep IKB, type lifts */
+  --color-accent-field: oklch(0.43 0.27 264);
+  --color-accent-strong: oklch(0.66 0.19 266);
+  --color-accent: oklch(0.58 0.22 265);
+  --color-accent-soft: oklch(0.26 0.08 264);
+  --color-accent-fg: oklch(0.965 0.008 85);
+
+  /* the placard stays a bone card — now a lit object on the dark wall */
+  --color-placard: oklch(0.936 0.012 82);
+  --color-placard-fg: oklch(0.22 0.012 50);
+  --color-placard-soft: oklch(0.37 0.012 52);
+  --color-placard-muted: oklch(0.46 0.014 55);
+  --color-placard-border: oklch(0.22 0.012 50 / 0.14);
+
+  /* vitrine: a step deeper than the walls */
+  --color-vitrine: oklch(0.115 0.01 45);
+  --color-vitrine-fg: oklch(0.92 0.008 80);
+  --color-vitrine-border: oklch(0.93 0.01 80 / 0.22);
+
+  /* primary action: ultramarine lifted half a step for the dark room */
+  --color-btn-primary-from: oklch(0.48 0.26 264);
+  --color-btn-primary-to: oklch(0.48 0.26 264);
+  --color-btn-primary-fg: oklch(0.965 0.008 85);
+
+  --color-destructive: oklch(0.62 0.18 28);
+  --color-destructive-fg: oklch(0.168 0.012 45);
+
+  /* ---- neo shared names, re-pointed ----------------------------------- */
+  --background: oklch(0.168 0.012 45);
+  --foreground: oklch(0.93 0.01 80);
+  --card: oklch(0.205 0.014 45);
+  --card-foreground: oklch(0.93 0.01 80);
+  --popover: oklch(0.205 0.014 45);
+  --popover-foreground: oklch(0.93 0.01 80);
+  --muted: oklch(0.13 0.01 45);
+  --muted-foreground: oklch(0.66 0.012 75);
+  --primary: oklch(0.48 0.26 264);
+  --primary-foreground: oklch(0.965 0.008 85);
+  --secondary: oklch(0.205 0.014 45);
+  --secondary-foreground: oklch(0.93 0.01 80);
+  --accent: oklch(0.58 0.22 265);
+  --accent-foreground: oklch(0.965 0.008 85);
+  --border: oklch(0.93 0.01 80 / 0.13);
+  --input: oklch(0.93 0.01 80 / 0.13);
+  --ring: oklch(0.64 0.19 266 / 0.55);
+  --destructive: oklch(0.62 0.18 28);
+  --destructive-foreground: oklch(0.168 0.012 45);
+
+  /* shadows deepen after dark — spotlit objects throw real penumbrae */
+  --shadow-sm: 0 1px 3px oklch(0.08 0.008 45 / 0.3),
+    0 1px 2px -1px oklch(0.08 0.008 45 / 0.3);
+  --shadow-md: 0 8px 20px -8px oklch(0.08 0.008 45 / 0.5),
+    0 2px 6px -2px oklch(0.08 0.008 45 / 0.35);
+  --shadow-lg: 0 22px 48px -18px oklch(0.08 0.008 45 / 0.6),
+    0 6px 14px -8px oklch(0.08 0.008 45 / 0.4);
+  --shadow-xl: 0 32px 64px -22px oklch(0.08 0.008 45 / 0.65);
+  --shadow-2xl: 0 40px 80px -26px oklch(0.08 0.008 45 / 0.7);
+}
+
+/* Display headings: the shared h1/h2 rule supplies var(--font-display) →
+   Bricolage Grotesque here. Exhibition titles set tight and confident —
+   medium weight (the variable cut around 560 has the flare without the
+   shout), near-solid leading, a breath of negative tracking. Title case,
+   never uppercase — placards do the small-caps work. */
+[data-dialect='named'][data-template='gallery'] h1,
+[data-dialect='named'][data-template='gallery'] h2 {
+  font-weight: 560;
+  letter-spacing: -0.02em;
+  line-height: 0.98;
+}
+
+/* The display voice, on demand (prices, the wordmark, catalogue numbers). */
+[data-dialect='named'][data-template='gallery'] .gal-display {
+  font-family: var(--font-display);
+}
+
+/* Museum placard label — small-caps register built from uppercase + wide
+   tracking (Inter carries no true smcp; synthesis reads cheap). */
+[data-dialect='named'][data-template='gallery'] .gal-label {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  line-height: 1.5;
+}
+
+/* Catalogue number — "No. 3" in the display face, lining figures. */
+[data-dialect='named'][data-template='gallery'] .gal-no {
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+/* The spotlight pool — the dark gallery's lighting model. By day the room
+   is evenly lit, so the class renders nothing; after dark a soft bone wash
+   falls from above each work. A lighting effect on the wall, not a panel
+   treatment (no blur, no glass). */

package/dist/view/index.d.ts

@@ -106,7 +106,7 @@ type NamedAgentLandingContent = {
     cta: NamedAgentCta;
 };
 
-type NamedAgentTemplate = 'studio' | 'executive';
+type NamedAgentTemplate = 'studio' | 'executive' | 'gallery';
 type NamedAgentViewProps = DialectViewProps<NamedAgentLandingContent> & {
     /** Design language for the page. Defaults to the named-agents baseline. */
     template?: NamedAgentTemplate;