@tangle-network/brand 1.22.1 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.23.0
+
+### Minor Changes
+
+- 03c7da0: Surface ladder and one interaction language.
+  
+  Brand: Hospitality gets a stepped ladder (light page 91.6, white cards with a two-layer shadow, raised 95.6; dark page 16.9, card 31.1, raised 37.9 with a top highlight, popover 42.0), field wells that are always the opposite step from their parent, a 3:1 `--field-border`, darker muted text, and status fills retuned for its planes (success, warning, danger, neutral). Dark accent text (#b2dbc2) and the dark destructive red (0 80% 88%) are lifted so they keep 4.5:1 on the lighter raised and popover planes. New tokens `--hsl-raised`, `--hsl-raised-2`, `--well-page`, `--well-card`, `--well-raised`, `--well-raised-2`, `--well`, `--field-border`, `--shadow-raised`, `--shadow-well` and `--edge-highlight` default to the plain spine, so other themes look as before. Shared `--ix-hover`, `--ix-hover-border`, `--ix-press`, `--ix-after`, `--ix-sel-ring`, `--ix-sel-bg` and `--ix-hover-bg` derive from `--hsl-ring`. A `[data-slot="card"]` rule re-declares `--card` and `--well` per card level.
+  
+  UI: new `ixControl`, `ixControlAfter`, `ixControlSoft`, `ixField`, `ixSelected`, `ixTabUnderline` and `ixRow` (exported from `@tangle-network/ui/utils`) give hover, press, after-click and selected states in the focus ring hue; the keyboard focus glow is unchanged. Button, Input, Textarea, `focusFieldWithin`, SelectTrigger/Item/Content, DropdownMenu content and items, Card, SegmentedControl and TabsTrigger apply them. Card renders `data-slot="card"` with `--edge-highlight` + `--shadow-card`, gains `interactive`, and CardDescription clamps at two lines. Select and DropdownMenu content paint the popover level. See docs/surfaces-and-states.md.
+
+### Patch Changes
+
+- c75b5c8: tangle-drift counts transcript text restyled through a message role attribute ([data-role="assistant"], [data-assistant-prose]), not only through classes, and skips headings, code and tables inside a message. The baseline is lowered from every default branch: header_height_literal and transcript_type_override are 0 for every agent app.
+
 ## 1.22.1
 
 ### Patch Changes

package/bin/drift-baseline.json

@@ -5,7 +5,7 @@
    "src"
   ],
   "branch": "master",
-  "head": "88cf5074ea42",
+  "head": "32b7e40a9131",
   "tsx_files": 33,
   "css_files": 5,
   "versions": {
@@ -502,7 +502,7 @@
    "products/intelligence/web"
   ],
   "branch": "develop",
-  "head": "abe2f910be0c",
+  "head": "b2753f3761c4",
   "tsx_files": 83,
   "css_files": 1,
   "versions": {
@@ -607,28 +607,28 @@
    ""
   ],
   "branch": "master",
-  "head": "9c6b7a92901d",
+  "head": "c84c3887366d",
   "tsx_files": 134,
   "css_files": 3,
   "versions": {
    "agent-app": [
-    "0.60.54"
+    "0.60.80"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 3,
-   "ui": 9,
-   "sandbox-ui": 113,
-   "agent-app": 232
+   "ui": 10,
+   "sandbox-ui": 115,
+   "agent-app": 233
   },
   "by_file": {
    "raw_palette": {},
@@ -667,12 +667,7 @@
     "src/components/vault-chat-rail.tsx": 2,
     "src/routes/app.workspace.vault.tsx": 2
    },
-   "header_height_literal": {
-    "src/components/publishing/publish-header.tsx": 1,
-    "src/components/vault-chat-rail.tsx": 1,
-    "src/routes/app.workspace.designs.$documentId.tsx": 1,
-    "src/routes/app.workspace.sequences.$sequenceId.tsx": 1
-   },
+   "header_height_literal": {},
    "transcript_type_override": {}
   },
   "raw_palette": 0,
@@ -686,7 +681,7 @@
   "control_override": 4,
   "page_heading": 18,
   "shell_override": 4,
-  "header_height_literal": 4,
+  "header_height_literal": 0,
   "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
@@ -697,40 +692,40 @@
    "apps/web"
   ],
   "branch": "main",
-  "head": "54448faf7404",
+  "head": "d88f237a23f2",
   "tsx_files": 58,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.60.19"
+    "0.60.72"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:agent-app": [
-    "0.60.19"
+    "0.60.72"
    ],
    "override:brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "override:ui": [
-    "11.31.2"
+    "11.32.1"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 1,
-   "ui": 3,
-   "sandbox-ui": 38,
-   "agent-app": 105
+   "ui": 4,
+   "sandbox-ui": 39,
+   "agent-app": 108
   },
   "by_file": {
    "raw_palette": {},
@@ -753,10 +748,7 @@
     "apps/web/src/routes/app.billing.tsx": 2
    },
    "shell_override": {},
-   "header_height_literal": {
-    "apps/web/src/components/legal-page.tsx": 1,
-    "apps/web/src/routes/app.$sessionId.tsx": 1
-   },
+   "header_height_literal": {},
    "transcript_type_override": {}
   },
   "raw_palette": 0,
@@ -770,7 +762,7 @@
   "control_override": 3,
   "page_heading": 6,
   "shell_override": 0,
-  "header_height_literal": 2,
+  "header_height_literal": 0,
   "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
@@ -781,28 +773,28 @@
    ""
   ],
   "branch": "main",
-  "head": "075784fc5bc6",
+  "head": "d8c3ecca3a72",
   "tsx_files": 63,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.60.33"
+    "0.60.72"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 2,
    "ui": 33,
-   "sandbox-ui": 25,
-   "agent-app": 125
+   "sandbox-ui": 26,
+   "agent-app": 128
   },
   "by_file": {
    "raw_palette": {},
@@ -970,28 +962,28 @@
    ""
   ],
   "branch": "master",
-  "head": "f0e2134d4499",
+  "head": "20b11756ba9d",
   "tsx_files": 52,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.60.33"
+    "0.60.83"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 1,
    "ui": 2,
-   "sandbox-ui": 36,
-   "agent-app": 131
+   "sandbox-ui": 38,
+   "agent-app": 134
   },
   "by_file": {
    "raw_palette": {},
@@ -1002,7 +994,7 @@
    "font_size_literal": {
     "eval/build-gist.ts": 11,
     "eval/digest-media.ts": 1,
-    "src/app.css": 8
+    "src/app.css": 6
    },
    "size_literal": {
     "src/routes/app.workspace.tasks.tsx": 1
@@ -1016,10 +1008,7 @@
     "src/routes/invite.$token.tsx": 1
    },
    "shell_override": {},
-   "header_height_literal": {
-    "src/routes/app.workspace.designs.$documentId.tsx": 1,
-    "src/routes/app.workspace.sequences.$sequenceId.tsx": 1
-   },
+   "header_height_literal": {},
    "transcript_type_override": {}
   },
   "raw_palette": 0,
@@ -1027,13 +1016,13 @@
   "arbitrary_color": 0,
   "css_var_defs": 0,
   "local_primitive_count": 0,
-  "font_size_literal": 20,
+  "font_size_literal": 18,
   "size_literal": 1,
   "native_control": 0,
   "control_override": 0,
   "page_heading": 4,
   "shell_override": 0,
-  "header_height_literal": 2,
+  "header_height_literal": 0,
   "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
@@ -1044,30 +1033,30 @@
    "apps/web"
   ],
   "branch": "main",
-  "head": "ee37d9941628",
+  "head": "6b1b12e7f8f6",
   "tsx_files": 18,
-  "css_files": 8,
+  "css_files": 7,
   "versions": {
    "agent-app": [
-    "0.60.19"
+    "0.60.84"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "override:ui": [
-    "11.31.2"
+    "11.32.1"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
@@ -1090,12 +1079,11 @@
     "apps/web/src/assembly/AssemblyBooklet.tsx": 9,
     "apps/web/src/canvas/NodeInspector.tsx": 8,
     "apps/web/src/canvas/SystemDiagramCanvas.tsx": 1,
-    "apps/web/src/styles.css": 199,
+    "apps/web/src/styles.css": 190,
     "apps/web/src/styles/assembly.css": 21,
     "apps/web/src/styles/canvas-nodes.css": 8,
     "apps/web/src/styles/composer.css": 13,
-    "apps/web/src/styles/fusion.css": 30,
-    "apps/web/src/styles/provenance.css": 8
+    "apps/web/src/styles/fusion.css": 30
    },
    "size_literal": {},
    "native_control": {
@@ -1117,28 +1105,22 @@
     "apps/web/src/assembly/AssemblyBooklet.tsx": 1
    },
    "shell_override": {},
-   "header_height_literal": {
-    "apps/web/src/styles.css": 1,
-    "apps/web/src/styles/canvas-nodes.css": 1,
-    "apps/web/src/styles/provenance.css": 1
-   },
-   "transcript_type_override": {
-    "apps/web/src/styles.css": 1
-   }
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
   "arbitrary_color": 0,
   "css_var_defs": 1,
   "local_primitive_count": 0,
-  "font_size_literal": 302,
+  "font_size_literal": 285,
   "size_literal": 0,
   "native_control": 52,
   "control_override": 0,
   "page_heading": 1,
   "shell_override": 0,
-  "header_height_literal": 3,
-  "transcript_type_override": 1,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1148,28 +1130,28 @@
    ""
   ],
   "branch": "main",
-  "head": "d9f4270af41c",
-  "tsx_files": 29,
-  "css_files": 14,
+  "head": "15d54650c9e6",
+  "tsx_files": 32,
+  "css_files": 12,
   "versions": {
    "agent-app": [
-    "0.60.23"
+    "0.60.83"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 0,
    "ui": 3,
-   "sandbox-ui": 26,
-   "agent-app": 54
+   "sandbox-ui": 31,
+   "agent-app": 65
   },
   "by_file": {
    "raw_palette": {},
@@ -1178,10 +1160,9 @@
    "css_var_defs": {},
    "local_primitive_count": {},
    "font_size_literal": {
-    "src/resetos/demo/preview.css": 2,
-    "src/resetos/resetos.css": 43,
+    "src/resetos/resetos.css": 30,
     "src/ui/operator-dashboard.css": 33,
-    "src/web/agent-profile-settings.css": 3,
+    "src/web/agent-profile-settings.css": 1,
     "src/web/workspace.css": 1
    },
    "size_literal": {},
@@ -1196,28 +1177,22 @@
     "src/web/WorkspaceFilesView.tsx": 1
    },
    "shell_override": {},
-   "header_height_literal": {
-    "src/ui/operator-dashboard.css": 2,
-    "src/web/workspace-files-view.css": 1,
-    "src/web/workspace.css": 5
-   },
-   "transcript_type_override": {
-    "src/web/workspace.css": 1
-   }
+   "header_height_literal": {},
+   "transcript_type_override": {}
   },
   "raw_palette": 0,
   "hex": 0,
   "arbitrary_color": 0,
   "css_var_defs": 0,
   "local_primitive_count": 0,
-  "font_size_literal": 82,
+  "font_size_literal": 65,
   "size_literal": 0,
   "native_control": 0,
   "control_override": 0,
   "page_heading": 12,
   "shell_override": 0,
-  "header_height_literal": 8,
-  "transcript_type_override": 1,
+  "header_height_literal": 0,
+  "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
  },
@@ -1227,7 +1202,7 @@
    "packages/website"
   ],
   "branch": "main",
-  "head": "af6c5106a02e",
+  "head": "f15b7f2a883d",
   "tsx_files": 26,
   "css_files": 1,
   "versions": {
@@ -1329,7 +1304,7 @@
    ""
   ],
   "branch": "main",
-  "head": "e2de2b85ee7c",
+  "head": "c3ca6f919e26",
   "tsx_files": 43,
   "css_files": 1,
   "versions": {
@@ -1426,40 +1401,40 @@
    ""
   ],
   "branch": "main",
-  "head": "97f77723ac9f",
+  "head": "2df6a86bcc28",
   "tsx_files": 110,
   "css_files": 2,
   "versions": {
    "agent-app": [
-    "0.60.23"
+    "0.60.72"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:agent-app": [
-    "0.60.23"
+    "0.60.72"
    ],
    "override:brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "override:sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "override:ui": [
-    "11.31.2"
+    "11.32.1"
    ],
    "sandbox-ui": [
-    "0.132.1"
+    "0.133.1"
    ],
    "ui": [
-    "11.31.2"
+    "11.32.1"
    ]
   },
   "importing_files": {
    "brand": 2,
-   "ui": 3,
-   "sandbox-ui": 77,
-   "agent-app": 67
+   "ui": 4,
+   "sandbox-ui": 78,
+   "agent-app": 69
   },
   "by_file": {
    "raw_palette": {},
@@ -1496,9 +1471,7 @@
     "src/routes/pay.$token.tsx": 1
    },
    "shell_override": {},
-   "header_height_literal": {
-    "src/styles/listing.css": 1
-   },
+   "header_height_literal": {},
    "transcript_type_override": {}
   },
   "raw_palette": 0,
@@ -1512,7 +1485,7 @@
   "control_override": 1,
   "page_heading": 12,
   "shell_override": 0,
-  "header_height_literal": 1,
+  "header_height_literal": 0,
   "transcript_type_override": 0,
   "palette_top": [],
   "local_primitives": {}
@@ -1523,7 +1496,7 @@
    "apps/web"
   ],
   "branch": "develop",
-  "head": "978ff883f4f5",
+  "head": "732a028e393f",
   "tsx_files": 356,
   "css_files": 9,
   "versions": {
@@ -1816,21 +1789,21 @@
    "public"
   ],
   "branch": "main",
-  "head": "34483f7ae430",
+  "head": "037eee72f92f",
   "tsx_files": 1,
   "css_files": 0,
   "versions": {
    "agent-app": [
-    "0.60.30"
+    "0.60.70"
    ],
    "brand": [
-    "1.20.0"
+    "1.22.0"
    ],
    "sandbox-ui": [
-    "0.132.2"
+    "0.133.0"
    ],
    "ui": [
-    "11.31.3"
+    "11.32.1"
    ]
   },
   "importing_files": {

package/bin/tangle-drift.mjs

@@ -107,13 +107,14 @@ export const RULE_PATTERNS = {
       String.raw`(?<!<header\b[^>]*)\bclassName=\{?["'\x60](?=[^"'\x60]*(?<![\w-])[\w-]*${HEADER_WORD}(?![\w-]))[^"'\x60]*?${LITERAL_HEIGHT_UTILITY}`,
     ],
   },
-  // Product CSS restyling transcript text. Brand's `tangle-transcript-text` gives the person's and
+  // Product CSS restyling transcript text (by class, timeline step, or a message role attribute such
+  // as [data-role="assistant"]). Brand's `tangle-transcript-text` gives the person's and
   // the agent's messages one family, size and leading; an app rule on `.tangle-prose` or a
   // timeline step re-splits them (an agent message at 16px beside a 15px user message).
   transcript_type_override: {
-    prefilter: String.raw`tangle-prose|tangle-transcript-text|data-timeline-step|transcript`,
+    prefilter: String.raw`tangle-prose|tangle-transcript-text|data-timeline-step|transcript|data-role|data-message-role|data-assistant-prose`,
     patterns: [
-      String.raw`(?:tangle-prose|tangle-transcript-text|data-timeline-step|transcript)[^{};]*\{[^{}]*?(?<![\w-])(?:font-size|line-height|font-family|font)\s*:`,
+      String.raw`(?:tangle-prose|tangle-transcript-text|data-timeline-step|transcript|data-(?:message-)?role=["']?(?:assistant|user|agent)|data-assistant-prose)[^{};]*?(?<![\s>+~](?:h[1-6]|code|pre|kbd|table|th|td)\s*)\{[^{}]*?(?<![\w-])(?:font-size|line-height|font-family|font)\s*:`,
       String.raw`\bclassName=\{?["'\x60](?=[^"'\x60]*\btangle-(?:prose|transcript-text)\b)[^"'\x60]*?(?<![\w-])(?:text-(?:xs|sm|base|lg|xl|\[)|leading-|font-(?:sans|serif|mono))`,
     ],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/styles/css-test-utils.ts

@@ -184,3 +184,20 @@ export function contrastRatio(a: Rgb, b: Rgb): number {
 export function hexRelativeLuminanceIn(css: string, token: string): number {
   return relativeLuminance(hexIn(css, token));
 }
+
+/**
+ * OKLCH lightness x100 of an opaque color — the unit the surface ladder is
+ * specified in. Perceptual, so equal steps read as equal steps; contrast
+ * floors are still checked with `contrastRatio`.
+ */
+export function oklchLightness(rgb: Rgb): number {
+  const lin = (c: number) => {
+    const v = c / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const [r, g, b] = rgb.map(lin);
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  return 100 * (0.2104542553 * Math.cbrt(l) + 0.793617785 * Math.cbrt(m) - 0.0040720468 * Math.cbrt(s));
+}