@tangle-network/brand 1.24.2 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.25.0
+
+### Minor Changes
+
+- 3ed6fb1: Add shared interaction timing roles beside the existing motion vocabulary. Consolidate shared design policy in the design bible; consumer adoption remains separate.
+- 3d3ba7a: Publish opt-in expressive typography and shared introductory presentation. Export canonical knot data and safe static SVG without React, and reuse that geometry in the React mark.
+
 ## 1.24.2
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # @tangle-network/brand
 
-The authoring owner of shared Tangle color, typography, radius, motion, shadow and status decisions. Generic components live in `@tangle-network/ui`; product composition stays in its product repository. See the [brand guidelines](../../docs/brand-guidelines.md) for visual, copy and component standards.
+The authoring owner of shared Tangle color, typography, radius, motion, shadow and status decisions. Generic components live in `@tangle-network/ui`; product composition stays in its product repository. Read the [design bible](../../docs/design-bible.md) for shared policy and the [brand guidelines](../../docs/brand-guidelines.md) for implementation contracts.
 
 ## Install
 
@@ -107,7 +107,7 @@ The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a1
 
 Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
 
-Existing `--transition-*` values are preserved. The shared `--duration-*`, `--ease-*` and `--motion-*` vocabulary comes from the existing Agent App contract. It does not apply animations automatically. Reduced motion zeroes those durations and re-resolves composites at theme boundaries.
+Existing `--transition-*` values are preserved. The shared `--duration-*`, `--ease-*` and `--motion-*` vocabulary comes from the existing Agent App contract. It does not apply animations automatically. Reduced motion zeroes those durations and re-resolves composites at theme boundaries. The adjacent `--interaction-*` roles are elapsed acknowledgment/loading thresholds for existing product instrumentation, not animation durations; reduced motion does not change them.
 
 Focus uses `--focus-border`, `--focus-halo`, their danger variants, and `--border-strong`, derived from the local ring/border palette. UI's `focusField` / `focusRing` consume them. `globals.css` supplies the existing fallback for controls without their own focus treatment.
 
@@ -142,3 +142,32 @@ pnpm test
 For actual browser cascade checks, serve the repository with any local static server and open `packages/brand/scripts/theme-browser.html`. Repeat with light/dark color preferences and reduced motion. The page reports assertions for both default contracts, all named modes, nested scopes, aliases and immediate code-color changes. This CSS fixture does not substitute for the React SSR/hydration tests or a consuming app build.
 
 For local consumer iteration, use workspace linking or a `file:` dependency, then run that consumer's real build and browser path before release.
+
+## Expressive introductions and framework-neutral knot
+
+Opt in with `data-typography="expressive"` on the application root. Load Outfit,
+Geist and Geist Mono from your own origin using `@font-face` with
+`font-display: swap`; the default Inter contract stays available. Theme boundaries
+rebind the opt-in stacks, so changing between Tangle dark and light keeps identity.
+
+`@tangle-network/brand/styles` includes the presentation recipes. Consumers that
+import individual files also import `@tangle-network/brand/styles/presentation.css`
+after tokens, theme and named themes. Use `tangle-intro`, `tangle-display`,
+`tangle-intro-description`, `tangle-intro-actions` and `tangle-control-display`.
+`data-grid`, `data-gradient` and `data-motion` opt into atmosphere; reading and
+operational surfaces stay solid. Reduced motion removes expressive movement.
+The display control reads shared role tokens; operational sizes are unchanged.
+
+Hono and static consumers import `{ knot, knotSvg }` from
+`@tangle-network/brand/knot`. That entry requires neither React nor a DOM.
+`raw(knotSvg({ id: "request-unique-mark" }))` is safe static SVG with escaped
+labels; IDs must be unique per inline instance. Omit `label` for decoration,
+supply it for informative marks. React uses the same geometry in `TangleKnot`;
+`label=""` makes it decorative while the existing default accessible name remains.
+Consumers must remove their copied paths and palette/type definitions on adoption.
+
+`scripts/design-contract-proof.mjs` measures real React and Hono rendering with
+one set of recipes. It captures 390/1440px light/dark, contrast, font loading,
+contained width, reduced motion, control roles and path parity. `DESIGN_FONT_DIR`
+points to a consumer's self-hosted font assets; `DESIGN_EVIDENCE` selects a retained
+output directory. The baseline Hono capture explicitly records the prior export gap.

package/bin/drift-baseline.json

@@ -114,7 +114,7 @@
   "local_primitives": {}
  },
  "sandbox": {
-  "repo": "tangle-network/agent-dev-container",
+  "repo": "tangle-network/agent-container",
   "roots": [
    "products/sandbox/web"
   ],
@@ -236,7 +236,7 @@
   "transcript_type_override": 0
  },
  "platform": {
-  "repo": "tangle-network/agent-dev-container",
+  "repo": "tangle-network/agent-container",
   "roots": [
    "products/platform/web"
   ],
@@ -497,7 +497,7 @@
   "transcript_type_override": 0
  },
  "intelligence": {
-  "repo": "tangle-network/agent-dev-container",
+  "repo": "tangle-network/agent-container",
   "roots": [
    "products/intelligence/web"
   ],

package/bin/tangle-drift.mjs

@@ -28,10 +28,11 @@ export const DEFAULT_BASELINE = fileURLToPath(new URL("./drift-baseline.json", i
 
 /** surface → GitHub repository and web roots. The default branch is resolved from the remote. */
 export const SURFACES = {
+  router: { repo: "tangle-network/tangle-router", roots: ["src/views", "app/globals.css"] },
   website: { repo: "tangle-network/tangle-website", roots: ["src"] },
-  sandbox: { repo: "tangle-network/agent-dev-container", roots: ["products/sandbox/web"] },
-  platform: { repo: "tangle-network/agent-dev-container", roots: ["products/platform/web"] },
-  intelligence: { repo: "tangle-network/agent-dev-container", roots: ["products/intelligence/web"] },
+  sandbox: { repo: "tangle-network/agent-container", roots: ["products/sandbox/web"] },
+  platform: { repo: "tangle-network/agent-container", roots: ["products/platform/web"] },
+  intelligence: { repo: "tangle-network/agent-container", roots: ["products/intelligence/web"] },
   gtm: { repo: "tangle-network/gtm-agent", roots: [""] },
   tax: { repo: "tangle-network/tax-agent", roots: ["apps/web"] },
   legal: { repo: "tangle-network/legal-agent", roots: [""] },

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { knot, knotGradientIds, knotSvg } from "./knot.js";
 import * as React from "react";
 //#region src/logo.d.ts
 interface LogoProps {
@@ -6,10 +7,13 @@ interface LogoProps {
   suffix?: string | null;
   className?: string;
 }
-export declare function TangleKnot({ size, className }: {
+interface TangleKnotProps {
   size?: number;
   className?: string;
-}): React.JSX.Element;
+  /** Omit for a decorative mark. Supply a name when the mark conveys identity. */
+  label?: string;
+}
+export declare function TangleKnot({ size, className, label }: TangleKnotProps): React.JSX.Element;
 export declare function Logo({ size, variant, suffix, className }: LogoProps): React.JSX.Element;
 //#endregion
 //#region src/palette.generated.d.ts
@@ -183,4 +187,4 @@ export declare const palettes: {
   };
 };
 //#endregion
-export type { BrandPalette, LogoProps };
+export { type BrandPalette, type LogoProps, type TangleKnotProps, knot, knotGradientIds, knotSvg };

package/dist/index.js

@@ -1,3 +1,4 @@
+import { knot, knotGradientIds, knotSvg } from "./knot.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/logo.tsx
@@ -27,52 +28,35 @@ const sizeConfig = {
 		gap: "gap-3"
 	}
 };
-function TangleKnot({ size = 32, className }) {
+function TangleKnot({ size = 32, className, label = "Tangle" }) {
 	const uid = React.useId();
-	const g1 = `tk-a-${uid}`;
-	const g2 = `tk-b-${uid}`;
+	const ids = knotGradientIds(`tk-${uid}`);
 	return /* @__PURE__ */ jsxs("svg", {
 		width: size,
 		height: size,
-		viewBox: "20 45 156 140",
+		viewBox: knot.viewBox,
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
 		className,
-		"aria-label": "Tangle",
+		focusable: "false",
+		role: label ? "img" : void 0,
+		"aria-label": label || void 0,
+		"aria-hidden": !label || void 0,
 		children: [
-			/* @__PURE__ */ jsx("title", { children: "Tangle" }),
-			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
-				id: g1,
-				x1: "36.79",
-				y1: "58.78",
-				x2: "145.99",
-				y2: "183.59",
+			label && /* @__PURE__ */ jsx("title", { children: label }),
+			/* @__PURE__ */ jsx("defs", { children: knot.gradients.map((g, i) => /* @__PURE__ */ jsx("linearGradient", {
+				id: ids[i],
+				...g,
 				gradientUnits: "userSpaceOnUse",
-				children: [/* @__PURE__ */ jsx("stop", { stopColor: "#8E59FF" }), /* @__PURE__ */ jsx("stop", {
-					offset: "1",
-					stopColor: "#6888F9"
-				})]
-			}), /* @__PURE__ */ jsxs("linearGradient", {
-				id: g2,
-				x1: "36.78",
-				y1: "169.38",
-				x2: "145.99",
-				y2: "44.57",
-				gradientUnits: "userSpaceOnUse",
-				children: [/* @__PURE__ */ jsx("stop", { stopColor: "#8E59FF" }), /* @__PURE__ */ jsx("stop", {
-					offset: "1",
-					stopColor: "#6888F9"
-				})]
-			})] }),
-			/* @__PURE__ */ jsx("path", {
-				d: "M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z",
-				fill: `url(#${g1})`
-			}),
-			/* @__PURE__ */ jsx("path", {
-				opacity: "0.8",
-				d: "M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z",
-				fill: `url(#${g2})`
-			})
+				children: knot.stops.map((color, index) => /* @__PURE__ */ jsx("stop", {
+					offset: index,
+					stopColor: color
+				}, color))
+			}, ids[i])) }),
+			knot.paths.map((path, i) => /* @__PURE__ */ jsx("path", {
+				...path,
+				fill: `url(#${ids[i]})`
+			}, i))
 		]
 	});
 }
@@ -242,4 +226,4 @@ const palettes = {
 	}
 };
 //#endregion
-export { Logo, TangleKnot, palettes };
+export { Logo, TangleKnot, knot, knotGradientIds, knotSvg, palettes };

package/dist/knot.d.ts

@@ -0,0 +1,33 @@
+//#region src/knot.d.ts
+/** Canonical geometry. This entry has no React or browser dependencies. */
+export declare const knot: {
+  readonly viewBox: "20 45 156 140";
+  readonly gradients: readonly [{
+    readonly x1: "36.79";
+    readonly y1: "58.78";
+    readonly x2: "145.99";
+    readonly y2: "183.59";
+  }, {
+    readonly x1: "36.78";
+    readonly y1: "169.38";
+    readonly x2: "145.99";
+    readonly y2: "44.57";
+  }];
+  readonly stops: readonly ["#8E59FF", "#6888F9"];
+  readonly paths: readonly [{
+    readonly d: "M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z";
+    readonly opacity: 1;
+  }, {
+    readonly d: "M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z";
+    readonly opacity: 0.8;
+  }];
+};
+/** Prefix with an instance/request identifier when more than one mark is inline. */
+export declare function knotGradientIds(id: string): [string, string];
+/** Safe static markup for Hono's raw(), static sites and SVG responses. */
+export declare function knotSvg({ id, size, label }: {
+  id: string;
+  size?: number;
+  label?: string;
+}): string;
+//#endregion

package/dist/knot.js

@@ -0,0 +1,45 @@
+//#region src/knot.ts
+/** Canonical geometry. This entry has no React or browser dependencies. */
+const knot = {
+	viewBox: "20 45 156 140",
+	gradients: [{
+		x1: "36.79",
+		y1: "58.78",
+		x2: "145.99",
+		y2: "183.59"
+	}, {
+		x1: "36.78",
+		y1: "169.38",
+		x2: "145.99",
+		y2: "44.57"
+	}],
+	stops: ["#8E59FF", "#6888F9"],
+	paths: [{
+		"d": "M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z",
+		"opacity": 1
+	}, {
+		"d": "M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z",
+		"opacity": .8
+	}]
+};
+/** Prefix with an instance/request identifier when more than one mark is inline. */
+function knotGradientIds(id) {
+	if (!/^[a-zA-Z_][a-zA-Z0-9_:.-]*$/.test(id)) throw new Error("A safe, unique knot id is required");
+	return [`${id}-a`, `${id}-b`];
+}
+const escape = (text) => text.replace(/[&<>"']/g, (c) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+})[c]);
+/** Safe static markup for Hono's raw(), static sites and SVG responses. */
+function knotSvg({ id, size = 32, label }) {
+	if (!Number.isFinite(size) || size <= 0) throw new Error("Knot size must be positive");
+	const ids = knotGradientIds(id);
+	const accessibility = label ? `role="img" aria-label="${escape(label)}"` : "aria-hidden=\"true\"";
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${knot.viewBox}" fill="none" focusable="false" ${accessibility}><defs>${knot.gradients.map((g, i) => `<linearGradient id="${ids[i]}" x1="${g.x1}" y1="${g.y1}" x2="${g.x2}" y2="${g.y2}" gradientUnits="userSpaceOnUse">${knot.stops.map((color, index) => `<stop offset="${index}" stop-color="${color}"/>`).join("")}</linearGradient>`).join("")}</defs>${knot.paths.map((path, i) => `<path d="${path.d}" opacity="${path.opacity}" fill="url(#${ids[i]})"/>`).join("")}</svg>`;
+}
+//#endregion
+export { knot, knotGradientIds, knotSvg };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.24.2",
+  "version": "1.25.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",
@@ -44,7 +44,13 @@
     "./styles/named-themes.css": "./src/styles/named-themes.css",
     "./styles/ladders.css": "./src/styles/ladders.css",
     "./styles/system.css": "./src/styles/system.css",
-    "./styles/legacy-light.css": "./src/styles/legacy-light.css"
+    "./styles/legacy-light.css": "./src/styles/legacy-light.css",
+    "./knot": {
+      "types": "./dist/knot.d.ts",
+      "import": "./dist/knot.js",
+      "default": "./dist/knot.js"
+    },
+    "./styles/presentation.css": "./src/styles/presentation.css"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/index.ts

@@ -1,2 +1,3 @@
-export { Logo, TangleKnot, type LogoProps } from "./logo.js";
+export { Logo, TangleKnot, type LogoProps, type TangleKnotProps } from "./logo.js";
 export { palettes, type BrandPalette } from "./palette.generated.js";
+export { knot, knotGradientIds, knotSvg } from "./knot.js";

package/src/knot.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { knot, knotSvg } from "./knot";
+import { TangleKnot } from "./logo";
+describe("canonical knot across renderers",()=>{
+ it("uses identical geometry and distinct gradient ids",()=>{
+  const react=renderToStaticMarkup(<><TangleKnot/><TangleKnot label=""/></>);
+  for(const path of knot.paths)expect(react).toContain(path.d);
+  const ids=[...react.matchAll(/linearGradient id="([^"]+)"/g)].map(m=>m[1]);
+  expect(new Set(ids).size).toBe(4);
+  const svg=knotSvg({id:"hono-1"});for(const path of knot.paths)expect(svg).toContain(path.d);
+  expect(svg).toContain('aria-hidden="true"');expect(react).toContain('aria-hidden="true"');
+ });
+ it("escapes names and rejects unsafe instance ids",()=>{
+  expect(knotSvg({id:"a",label:'<img onerror="bad">'})).toContain('&lt;img onerror=&quot;bad&quot;&gt;');
+  expect(()=>knotSvg({id:'a" onload="bad'})).toThrow();
+  expect(()=>knotSvg({id:"a",size:NaN})).toThrow();
+ });
+});

package/src/knot.ts

@@ -0,0 +1,34 @@
+/** Canonical geometry. This entry has no React or browser dependencies. */
+export const knot = {
+  viewBox: "20 45 156 140",
+  gradients: [
+    { x1: "36.79", y1: "58.78", x2: "145.99", y2: "183.59" },
+    { x1: "36.78", y1: "169.38", x2: "145.99", y2: "44.57" },
+  ],
+  stops: ["#8E59FF", "#6888F9"],
+  paths: [
+  {
+    "d": "M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z",
+    "opacity": 1
+  },
+  {
+    "d": "M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z",
+    "opacity": 0.8
+  }
+],
+} as const;
+
+/** Prefix with an instance/request identifier when more than one mark is inline. */
+export function knotGradientIds(id: string): [string, string] {
+  if (!/^[a-zA-Z_][a-zA-Z0-9_:.-]*$/.test(id)) throw new Error("A safe, unique knot id is required");
+  return [`${id}-a`, `${id}-b`];
+}
+const escape = (text: string) => text.replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[c]!);
+
+/** Safe static markup for Hono's raw(), static sites and SVG responses. */
+export function knotSvg({ id, size = 32, label }: { id: string; size?: number; label?: string }): string {
+  if (!Number.isFinite(size) || size <= 0) throw new Error("Knot size must be positive");
+  const ids = knotGradientIds(id);
+  const accessibility = label ? `role="img" aria-label="${escape(label)}"` : 'aria-hidden="true"';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${knot.viewBox}" fill="none" focusable="false" ${accessibility}><defs>${knot.gradients.map((g,i)=>`<linearGradient id="${ids[i]}" x1="${g.x1}" y1="${g.y1}" x2="${g.x2}" y2="${g.y2}" gradientUnits="userSpaceOnUse">${knot.stops.map((color,index)=>`<stop offset="${index}" stop-color="${color}"/>`).join("")}</linearGradient>`).join("")}</defs>${knot.paths.map((path,i)=>`<path d="${path.d}" opacity="${path.opacity}" fill="url(#${ids[i]})"/>`).join("")}</svg>`;
+}

package/src/logo.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { knot, knotGradientIds } from "./knot.js";
 
 export interface LogoProps {
   size?: "sm" | "md" | "lg" | "xl";
@@ -14,42 +15,25 @@ const sizeConfig = {
   xl: { icon: 48, text: "text-3xl", suffix: "text-lg", gap: "gap-3" },
 } as const;
 
-export function TangleKnot({
-  size = 32,
-  className,
-}: {
+export interface TangleKnotProps {
   size?: number;
   className?: string;
-}) {
-  const uid = React.useId();
-  const g1 = `tk-a-${uid}`;
-  const g2 = `tk-b-${uid}`;
+  /** Omit for a decorative mark. Supply a name when the mark conveys identity. */
+  label?: string;
+}
 
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="20 45 156 140"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      aria-label="Tangle"
-    >
-      <title>Tangle</title>
-      <defs>
-        <linearGradient id={g1} x1="36.79" y1="58.78" x2="145.99" y2="183.59" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#8E59FF" />
-          <stop offset="1" stopColor="#6888F9" />
-        </linearGradient>
-        <linearGradient id={g2} x1="36.78" y1="169.38" x2="145.99" y2="44.57" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#8E59FF" />
-          <stop offset="1" stopColor="#6888F9" />
-        </linearGradient>
-      </defs>
-      <path d="M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z" fill={`url(#${g1})`} />
-      <path opacity="0.8" d="M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z" fill={`url(#${g2})`} />
-    </svg>
-  );
+export function TangleKnot({size = 32, className, label = "Tangle"}: TangleKnotProps) {
+  const uid = React.useId();
+  const ids = knotGradientIds(`tk-${uid}`);
+  return <svg width={size} height={size} viewBox={knot.viewBox} fill="none"
+    xmlns="http://www.w3.org/2000/svg" className={className} focusable="false"
+    role={label ? "img" : undefined} aria-label={label || undefined} aria-hidden={!label || undefined}>
+    {label && <title>{label}</title>}
+    <defs>{knot.gradients.map((g,i)=><linearGradient key={ids[i]} id={ids[i]} {...g} gradientUnits="userSpaceOnUse">
+      {knot.stops.map((color,index)=><stop key={color} offset={index} stopColor={color}/>)}
+    </linearGradient>)}</defs>
+    {knot.paths.map((path,i)=><path key={i} {...path} fill={`url(#${ids[i]})`}/>)}
+  </svg>;
 }
 
 export function Logo({

package/src/styles/index.css

@@ -9,3 +9,5 @@
 @import "./theme.css";
 @import "./named-themes.css";
 @import "./globals.css";
+
+@import "./presentation.css";

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: d10503737fc4c0704770bb4a56ec1ecf92d8cc4a875de7553f9b30fcb8317b07
+ * SHA-256: f65ac1c530c2769494fc2e77b17ccd1cddabae8d0b0b0bcc5071fa5e695cddd7
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -319,6 +319,25 @@
     --tracking-tight: -0.02em;
     --tracking-snug: -0.01em;
     --tracking-wide: 0.08em;
+    --tracking-display: -0.03em;
+    --hero-gutter: 1.5rem;
+    --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
+    --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
+    --display-max-width: 56rem;
+    --reading-max-width: 42rem;
+    --hero-action-gap: 0.75rem;
+    --hero-content-gap: 1.5rem;
+    --display-control-height: 2.875rem;
+    --display-control-radius: 0.625rem;
+    --display-control-font-size: 0.9375rem;
+    --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
+    --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
+    --hero-grid-pitch: 3.5rem;
+    --hero-atmosphere-opacity: 0.16;
+    --hero-knot-opacity: 0.07;
+    --duration-expressive-entrance: 300ms;
+    --duration-expressive-ambient: 14s;
+    --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
     --avatar-size: 2rem;
     --timeline-dot-size: 0.625rem;
     --indicator-dot-size: 0.25rem;
@@ -358,6 +377,10 @@
     --motion-dismiss: var(--duration-instant) var(--ease-exit);
     --motion-stream: var(--duration-stream) var(--ease-expo);
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
+    --interaction-feedback-budget: 100ms;
+    --interaction-pending-delay: 200ms;
+    --interaction-long-work-delay: 1000ms;
+    --interaction-mutation-budget: 500ms;
     --stagger-step: 50ms;
     --stagger-index: 0;
     --arrive-distance: 8px;

package/src/styles/presentation.css

@@ -0,0 +1,120 @@
+/* Framework-neutral opt-in presentation. Load fonts from the application's origin. */
+[data-typography="expressive"],
+[data-typography="expressive"] :is([data-theme], [data-sandbox-ui], [data-sandbox-theme], .dark, .light) {
+  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  font-family: var(--font-sans);
+}
+.tangle-intro {
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+  padding: var(--hero-padding-top) var(--hero-gutter) var(--hero-padding-bottom);
+  text-align: center;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+.tangle-intro::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: var(--hero-atmosphere-opacity);
+  background: radial-gradient(ellipse at 50% 0%, hsl(var(--primary)), transparent 70%);
+}
+.tangle-intro[data-grid]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
+  background-size: var(--hero-grid-pitch) var(--hero-grid-pitch);
+  mask-image: radial-gradient(ellipse at top, black, transparent 75%);
+}
+.tangle-display {
+  margin: 0 auto;
+  max-width: var(--display-max-width);
+  overflow-wrap: anywhere;
+  font-family: var(--font-display);
+  font-size: var(--font-size-display);
+  line-height: var(--line-height-display);
+  letter-spacing: var(--tracking-display);
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+.tangle-display[data-gradient] {
+  background-image: var(--display-gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+.tangle-intro-description {
+  margin: var(--hero-content-gap) auto 0;
+  max-width: var(--reading-max-width);
+  color: hsl(var(--muted-foreground));
+  font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
+  line-height: 1.625;
+}
+.tangle-intro-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--hero-action-gap);
+  margin-top: 2.5rem;
+}
+.tangle-control-display {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--hero-action-gap);
+  min-height: var(--display-control-height);
+  padding: 0 1.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--display-control-radius);
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  font: 600 var(--display-control-font-size)/1 var(--font-sans);
+  text-decoration: none;
+  white-space: nowrap;
+  box-shadow: var(--display-control-shadow);
+  cursor: pointer;
+  transition: transform var(--duration-fast) ease-out;
+}
+.tangle-control-display[data-variant="outline"] {
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border-color: hsl(var(--border));
+  box-shadow: none;
+}
+.tangle-control-display:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
+.tangle-control-display:disabled, .tangle-control-display[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+@media (hover: hover) and (pointer: fine) {
+  .tangle-control-display:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); }
+}
+.tangle-control-display:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
+.tangle-intro-knot {
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  width: clamp(30rem, 45vw, 40rem);
+  height: auto;
+  right: -10rem;
+  top: 1.5rem;
+  opacity: var(--hero-knot-opacity);
+  rotate: -14deg;
+}
+.tangle-intro-knot > svg { width: 100%; height: auto; }
+.tangle-intro[data-motion] { animation: tangle-intro-enter var(--duration-expressive-entrance) var(--ease-expressive) both; }
+.tangle-intro[data-motion] .tangle-intro-knot { animation: tangle-intro-drift var(--duration-expressive-ambient) ease-in-out infinite; }
+@keyframes tangle-intro-enter { from { opacity: 0; transform: translateY(var(--arrive-distance)); } to { opacity: 1; transform: none; } }
+@keyframes tangle-intro-drift { 50% { transform: translateY(-0.75rem) scale(1.04); } }
+@media (prefers-reduced-motion: reduce) {
+  .tangle-intro, .tangle-intro *, .tangle-control-display { animation: none !important; transition: none !important; transform: none !important; }
+}
+@media (forced-colors: active) {
+  .tangle-display[data-gradient] { background: none; color: CanvasText; }
+  .tangle-intro::before, .tangle-intro::after { display: none; }
+}

package/src/styles/tokens.css

@@ -494,6 +494,27 @@
   --tracking-snug: -0.01em;       /* section titles */
   --tracking-wide: 0.08em;        /* uppercase eyebrows / stat labels */
 
+  /* Expressive roles are opt-in; operational type and controls keep their scale. */
+  --tracking-display: -0.03em;
+  --hero-gutter: 1.5rem;
+  --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
+  --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
+  --display-max-width: 56rem;
+  --reading-max-width: 42rem;
+  --hero-action-gap: 0.75rem;
+  --hero-content-gap: 1.5rem;
+  --display-control-height: 2.875rem;
+  --display-control-radius: 0.625rem;
+  --display-control-font-size: 0.9375rem;
+  --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
+  --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
+  --hero-grid-pitch: 3.5rem;
+  --hero-atmosphere-opacity: 0.16;
+  --hero-knot-opacity: 0.07;
+  --duration-expressive-entrance: 300ms;
+  --duration-expressive-ambient: 14s;
+  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
+
   /* Component spacing — override per-app for tighter/looser layouts */
   --avatar-size: 2rem;            /* 32px — chat avatars */
   --timeline-dot-size: 0.625rem;  /* 10px — timeline connector dots */
@@ -539,6 +560,13 @@
   --motion-dismiss: var(--duration-instant) var(--ease-exit);
   --motion-stream: var(--duration-stream) var(--ease-expo);
   --motion-arrive: var(--duration-arrive) var(--ease-expo);
+
+  /* Elapsed interaction thresholds, not animation durations. See
+   * docs/design-bible.md#interaction. Reduced motion leaves these unchanged. */
+  --interaction-feedback-budget: 100ms;
+  --interaction-pending-delay: 200ms;
+  --interaction-long-work-delay: 1000ms;
+  --interaction-mutation-budget: 500ms;
   --stagger-step: 50ms;
   --stagger-index: 0;
   --arrive-distance: 8px;