@hraness/design-kit 0.40.3 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.40.3",
+  "version": "0.41.0",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",
@@ -129,7 +129,8 @@
     },
     "./marketing-comparison.css": "./src/marketing-comparison.css",
     "./marketing-diagram.css": "./src/marketing-diagram.css",
-    "./marketing-marquee.css": "./src/marketing-marquee.css"
+    "./marketing-marquee.css": "./src/marketing-marquee.css",
+    "./product-landscape.css": "./src/product-landscape.css"
   },
   "main": "./dist/index.js",
   "types": "./src/index.ts",
@@ -314,7 +315,9 @@
     "src/marketing-diagram.css",
     "src/marketing-marquee.ts",
     "src/marketing-marquee.css",
-    "src/react/marketing-marquee.tsx"
+    "src/react/marketing-marquee.tsx",
+    "src/product-landscape.css",
+    "LANDSCAPE.md"
   ],
   "scripts": {
     "build": "bun run ./scripts/build.ts",
@@ -328,7 +331,7 @@
     "browser:install": "bun ./node_modules/playwright-core/cli.js install chromium",
     "test:browser": "bun run test:browser:marketing && bun run test:browser:rest",
     "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts",
-    "test:browser:rest": "bun run ./scripts/marketing-header-browser.ts && bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/marketing-marquee-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
+    "test:browser:rest": "bun run ./scripts/marketing-header-browser.ts && bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/marketing-marquee-browser.ts && bun run ./scripts/product-landscape-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
     "test:package": "bun run ./scripts/package-smoke.ts && bun run ./scripts/mockups-import.ts",
     "kb:refresh": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell refresh --root kb",
     "kb:check:lane": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell check --root kb --no-catalog",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.40.3"
+      "version": "0.41.0"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/compiler-foundation.css

@@ -15,6 +15,7 @@
 @import "./status-page.css";
 @import "./marketing-marquee.css";
 @import "./product-marketing-foundation.css";
+@import "./product-landscape.css";
 @import "./design-gallery.css";
 @import "./mockups.css";
 @import "./lantern-material.css";

package/src/design-gallery.css

@@ -347,6 +347,41 @@
   background: var(--background);
 }
 
+.design-gallery__landscape {
+  display: grid;
+  min-block-size: 22rem;
+  align-content: start;
+  gap: var(--space-4);
+  padding: var(--space-8);
+  overflow: clip;
+  border: 1px solid var(--line);
+  background: var(--background);
+}
+
+.design-gallery__landscape-copy {
+  display: grid;
+  max-inline-size: 38rem;
+  gap: var(--space-2);
+}
+
+.design-gallery__landscape-copy > :where(h3, p),
+.design-gallery__landscape-code {
+  margin: 0;
+}
+
+.design-gallery__landscape-code {
+  justify-self: start;
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.design-gallery__landscape-note {
+  justify-self: start;
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--line);
+}
+
 .design-gallery__foil-deck {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));

package/src/product-landscape.css

@@ -0,0 +1,202 @@
+/* Product landscape: one product-owned illustration drawn behind marketing,
+ * documentation, and blog pages. See LANDSCAPE.md.
+ *
+ * The product supplies a grayscale luminance mask (light drawing on black) and
+ * the kit tints it with the page's own text mixed into its background, so the
+ * drawing follows every palette and appearance without an accent colour. The
+ * mask tiles down the page, so long pages never run out of scenery.
+ *
+ * Hosts:
+ * - `data-hraness-landscape="page"` on <body> or on any element inside it paints
+ *   the layer behind the whole document. `data-hraness-landscape="off"` anywhere
+ *   on the page turns it off, for application routes under a shared layout.
+ * - `data-hraness-landscape="contained"` paints the layer behind one element.
+ *
+ * Products set `--hraness-landscape-image` (and optionally the narrow image,
+ * opacity, and strength) on :root with root-relative or absolute URLs. Without
+ * an image the mask is fully transparent, so an unconfigured host paints
+ * nothing. Forced colours and print never draw the layer. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) {
+  --_hraness-landscape-ink: var(
+    --hraness-landscape-ink,
+    color-mix(
+      in oklch,
+      var(--foreground, var(--plain-foreground, CanvasText)) var(--hraness-landscape-strength, 30%),
+      var(--background, var(--plain-background, Canvas))
+    )
+  );
+  position: relative;
+  isolation: isolate;
+}
+
+@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  )::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--_hraness-landscape-ink);
+    content: "";
+    opacity: var(--hraness-landscape-opacity, 0.5);
+    pointer-events: none;
+    -webkit-mask-image: var(--hraness-landscape-image, linear-gradient(transparent, transparent));
+    mask-image: var(--hraness-landscape-image, linear-gradient(transparent, transparent));
+    -webkit-mask-source-type: luminance;
+    mask-mode: luminance;
+    -webkit-mask-position: top center;
+    mask-position: top center;
+    -webkit-mask-repeat: repeat-y;
+    mask-repeat: repeat-y;
+    -webkit-mask-size: 100% auto;
+    mask-size: 100% auto;
+  }
+
+  @media (max-width: 48rem) {
+    :is(
+      body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+      [data-hraness-landscape="contained"]
+    )::before {
+      opacity: var(--hraness-landscape-opacity-narrow, 0.36);
+      -webkit-mask-image: var(--hraness-landscape-image-narrow, var(--hraness-landscape-image, linear-gradient(transparent, transparent)));
+      mask-image: var(--hraness-landscape-image-narrow, var(--hraness-landscape-image, linear-gradient(transparent, transparent)));
+    }
+  }
+}
+
+@media (forced-colors: active), print {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  )::before {
+    display: none;
+  }
+}
+
+/* Page wrappers that repaint the page colour would hide the drawing behind a
+ * hard-edged slab. Over a landscape they let the identical body colour show. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(.hraness-marketing-page, .plain-site:not(body), .plain-footer, [data-hraness-landscape-surface="clear"]) {
+  background: transparent;
+}
+
+/* Reading surfaces stay opaque and gain rounded edges: code, tables, and any
+ * product element marked `data-hraness-landscape-surface="solid"`. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(.plain-publication__article-body pre, .plain-publication__table-scroll, [data-hraness-landscape-surface="solid"]) {
+  border-radius: var(--hraness-landscape-radius, 0.75rem);
+  background: var(--hraness-landscape-solid, var(--plain-surface, var(--hraness-marketing-surface, var(--background, Canvas))));
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) .plain-publication__article-body pre {
+  padding: 0.9rem 1.1rem;
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) .plain-publication__table-scroll {
+  border: 1px solid var(--plain-line, color-mix(in srgb, currentColor 14%, transparent));
+}
+
+/* Small cards and callouts become frosted panels over the drawing, using the
+ * sticky header's material. Without backdrop support, under reduced
+ * transparency, and in forced colours they keep their opaque surface. Keep the
+ * browser aliases in separate feature queries: CSS optimizers can collapse
+ * adjacent aliases to the prefixed property and lose Chromium blur. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(
+  .hraness-marketing-card,
+  .hraness-marketing-quote,
+  .hraness-marketing-plan,
+  .hraness-marketing-trust-item,
+  .hraness-marketing-interface,
+  .hraness-marketing-primitive,
+  .plain-publication__callout,
+  .plain-publication__social-kit-item,
+  [data-hraness-landscape-surface="glass"]
+) {
+  --_hraness-landscape-glass-base: var(--hraness-landscape-glass, var(--hraness-marketing-surface, var(--plain-surface, var(--background, Canvas))));
+  background: var(--_hraness-landscape-glass-base);
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) [data-hraness-landscape-surface="glass"] {
+  border-radius: var(--hraness-landscape-radius, 0.75rem);
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: color-mix(in srgb, var(--_hraness-landscape-glass-base) 82%, transparent);
+    -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  }
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: color-mix(in srgb, var(--_hraness-landscape-glass-base) 82%, transparent);
+    backdrop-filter: blur(14px) saturate(1.4);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: var(--_hraness-landscape-glass-base);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/react/design-gallery.tsx

@@ -21,7 +21,7 @@ import {
   WrappingRow,
 } from "@hraness/ui";
 import { Chart01Icon, CodeIcon, DashboardSquare01Icon } from "@hugeicons/core-free-icons";
-import { useState } from "react";
+import { type CSSProperties, useState } from "react";
 
 import { BrowserFrame, SampleText } from "../mockups/index.js";
 import { StepThrough } from "../mockups/client.js";
@@ -1062,6 +1062,21 @@ export function DesignSystemGallery({
             <p>Decorative paint is pointer-transparent and removable in forced colors. Marketing actions use system button colors so their labels stay readable.</p>
           </div>
         </div>
+        <div
+          className="design-gallery__landscape"
+          data-hraness-landscape="contained"
+          style={{
+            "--hraness-landscape-image":
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300'/%3E%3Cg fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M0 240 L40 190 L70 215 L110 150 L150 205 L170 185'/%3E%3Cpath d='M230 185 L260 150 L300 200 L340 140 L370 180 L400 160'/%3E%3Cpath d='M20 270 C60 250 100 262 150 250'/%3E%3Cpath d='M250 252 C300 262 340 248 390 262'/%3E%3Ccircle cx='340' cy='60' r='16'/%3E%3C/g%3E%3C/svg%3E\")",
+          } as CSSProperties}
+        >
+          <div className="design-gallery__landscape-copy">
+            <h3>Product landscape</h3>
+            <p>One product drawing, tinted from the palette and tiled down the page. Code and tables stay solid with rounded edges; small cards and callouts frost over it.</p>
+          </div>
+          <pre className="design-gallery__landscape-code" data-hraness-landscape-surface="solid"><code>relay run job-01</code></pre>
+          <p className="design-gallery__landscape-note" data-hraness-landscape-surface="glass">The log is written next to the job.</p>
+        </div>
       </section>
 
       <section className="design-gallery__section" id="syntax">

package/src/react/product-marketing.tsx

@@ -133,16 +133,22 @@ function MarketingActions({
  * gutter for every direct child role. Products set `--hraness-site-accent`
  * on this element or on a parent.
  */
+/** Where a product landscape draws (see LANDSCAPE.md): behind the whole page, behind one element, or nowhere. */
+export type ProductLandscapeHost = "page" | "contained" | "off";
+
 export function MarketingPage({
   children,
   className,
   id,
+  landscape,
   preset,
   pattern,
 }: Readonly<{
   children: ReactNode;
   className?: string;
   id?: string;
+  /** Draw the product landscape from product-landscape.css behind this page. */
+  landscape?: ProductLandscapeHost;
   /** Opt in to the separately imported product-marketing-preset.css contract. */
   preset?: MarketingPreset;
   /**
@@ -153,9 +159,10 @@ export function MarketingPage({
   pattern?: MarketingPattern;
 }>) {
   if (preset !== undefined && preset !== "editorial" && preset !== "minimal") throw new RangeError("Unknown marketing preset.");
+  if (landscape !== undefined && landscape !== "page" && landscape !== "contained" && landscape !== "off") throw new RangeError("Unknown landscape host.");
   assertMarketingPattern(pattern);
   return (
-    <div className={classNames("hraness-marketing-page", className)} data-hraness-marketing="page" data-hraness-marketing-preset={preset} data-hraness-pattern={pattern} id={id}>
+    <div className={classNames("hraness-marketing-page", className)} data-hraness-landscape={landscape} data-hraness-marketing="page" data-hraness-marketing-preset={preset} data-hraness-pattern={pattern} id={id}>
       {children}
     </div>
   );

package/src/styles.css

@@ -19,6 +19,7 @@
 @import "./status-page.css";
 @import "./product-marketing.css";
 @import "./product-marketing-foundation.css";
+@import "./product-landscape.css";
 @import "./design-gallery.css";
 @import "./mockups.css";
 @import "./palette-bridge.css";