@valbuild/shared 0.128.0 → 0.130.0

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @valbuild/shared
 
+## 0.130.0
+
+### Patch Changes
+
+- Updated dependencies [[`8425378`](https://github.com/valbuild/val/commit/8425378c315ea46b5d822f1130b633e0449ff1b0), [`473a185`](https://github.com/valbuild/val/commit/473a185f70351b44388f3bc1852649e2c1dbe001), [`64f0de3`](https://github.com/valbuild/val/commit/64f0de339b8621cb5a6c422dfe55cae5b2bbe2a0)]:
+  - @valbuild/core@0.130.0
+
+## 0.129.0
+
+### Minor Changes
+
+- [#655](https://github.com/valbuild/val/pull/655) [`7d34ecc`](https://github.com/valbuild/val/commit/7d34ecce787a0709025ae7b4764cb6c3ad1f766b) Thanks [@freekh](https://github.com/freekh)! - A project can now make Val Studio look like its own.
+
+  `s.settings()` has a new `theme` section, edited under **Settings → Appearance**
+  in the Studio. It is content like everything else: edited as a draft, shown in
+  the publish diff, and the same for everyone working on the project.
+
+  ```ts
+  export default c.define("/settings.val.ts", s.settings(), {
+    theme: {
+      accent: "#2563eb",
+      radius: "tight",
+      mode: "light",
+    },
+  });
+  ```
+
+  **`accent` is one hex, and it restyles the whole chrome** — Publish, the active
+  rail item, focus rings, switches, the caret in a rich text field, and the
+  outlines the canvas draws around editable elements on your own page. Any colour
+  is allowed, not a list of approved ones, because what the accent replaces is a
+  ten-step ramp that is _generated_ from it: each step keeps the lightness of the
+  step it replaces and changes only the hue. WCAG contrast is almost entirely a
+  function of lightness, so every foreground/background pair the chrome renders
+  stays at AA — which is asserted across the hue circle, pure black and a
+  saturated yellow included, rather than argued for. One value drives both light
+  and dark mode, since the semantic tokens pick different steps of the ramp in
+  each.
+
+  **`radius`** is `square`, `tight`, `default` or `soft`, and moves every corner
+  in the Studio.
+
+  The accent also moves the outlines the canvas draws around editable elements on
+  your own page. Those are drawn inside your document, which has none of Val's
+  stylesheet, so the colour is sent to the page over the canvas protocol — which
+  means a project on an older `@valbuild/next` or `@valbuild/tanstack` than its
+  Studio keeps Val's green there until it upgrades, rather than breaking.
+
+  **`mode`** is the mode the Studio opens in for an editor who has never picked
+  one. It never overrides an editor who has — that choice stays theirs, per
+  person and per browser, behind the account button.
+
+  Every field is optional, and unset means Val's own look, so an existing
+  settings module needs no change.
+
+  Two smaller fixes that came with it:
+
+  - **A settings change is its own entry in the publish diff.** Editing the
+    assistant's tone used to collapse the entire settings module into one change
+    card labelled "Settings", because the patch that writes a settings field is
+    an `add`, and `PatchSets` had no case for a settings section — so it gave up
+    and grouped the whole module. Two unrelated settings edits now show as two
+    changes, each under the name the panel gives it.
+  - **The Val mark keeps its green.** It named a step of the brand ramp, so it
+    would have recoloured along with a project's accent. It has its own token now.
+
+### Patch Changes
+
+- Updated dependencies [[`7d34ecc`](https://github.com/valbuild/val/commit/7d34ecce787a0709025ae7b4764cb6c3ad1f766b), [`0c351c4`](https://github.com/valbuild/val/commit/0c351c4f97ae7f09772eab0e856ae69821b803b7)]:
+  - @valbuild/core@0.129.0
+
 ## 0.128.0
 
 ### Patch Changes

package/client/dist/valbuild-shared-client.cjs.dev.js

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-d1977d3e.cjs.dev.js');
+var getSitemapTree = require('../../dist/getSitemapTree-99c97c62.cjs.dev.js');
 require('@valbuild/core');
 
 
 
+exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
+exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.VAL_AI_SESSION_STORAGE_KEY = getSitemapTree.VAL_AI_SESSION_STORAGE_KEY;
 exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;

package/client/dist/valbuild-shared-client.cjs.prod.js

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-b320d033.cjs.prod.js');
+var getSitemapTree = require('../../dist/getSitemapTree-99839b02.cjs.prod.js');
 require('@valbuild/core');
 
 
 
+exports.DEFAULT_CANVAS_SELECTION = getSitemapTree.DEFAULT_CANVAS_SELECTION;
+exports.DEFAULT_CANVAS_SELECTION_SOFT = getSitemapTree.DEFAULT_CANVAS_SELECTION_SOFT;
 exports.VAL_AI_SESSION_STORAGE_KEY = getSitemapTree.VAL_AI_SESSION_STORAGE_KEY;
 exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;

package/client/dist/valbuild-shared-client.esm.js

@@ -1,2 +1,2 @@
-export { b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, g as getNextAppRouterSourceFolder, l as getPageRouterSitemapTree, j as getPageRouterSourceFolder, m as getPatternFromModuleFilePath, h as getTanStackRouterSourceFolder, k as isTanStackRoutesFolder, f as isValCanvasFrame, i as isValCanvasPageMessage, e as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-6777bdfa.esm.js';
+export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, h as getNextAppRouterSourceFolder, m as getPageRouterSitemapTree, k as getPageRouterSourceFolder, n as getPatternFromModuleFilePath, j as getTanStackRouterSourceFolder, l as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-878d3888.esm.js';
 import '@valbuild/core';

package/dist/declarations/src/internal/emptyOf.d.ts

@@ -1,4 +1,5 @@
-import { SerializedSchema, Json } from "@valbuild/core";
+import { SerializedSchema } from "@valbuild/core";
+import { JSONValue } from "@valbuild/core/patch";
 /**
  * What `emptyOf` cannot read off a serialized schema.
  *
@@ -22,4 +23,16 @@ export type EmptyOfContext = {
      */
     selectedLocale?: string;
 };
-export declare function emptyOf(schema: SerializedSchema, context?: EmptyOfContext): Json;
+/**
+ * The empty value for a schema — the thing a "create this" affordance writes.
+ *
+ * Returns `JSONValue`, the MUTABLE shape, rather than `Json`. Every value here
+ * is built fresh on the way out — `Object.fromEntries`, a new array, a
+ * primitive — and none of it aliases anything a caller could then mutate out
+ * from under someone. Saying `Json` instead made the type readonly, which is
+ * a claim about sharing that is not true of anything this returns, and left
+ * every caller asserting `as JSONValue` at the point of writing a patch. A
+ * `JSONValue` is still assignable to `Json`, so a reader of the value loses
+ * nothing.
+ */
+export declare function emptyOf(schema: SerializedSchema, context?: EmptyOfContext): JSONValue;

package/dist/declarations/src/internal/index.d.ts

@@ -31,3 +31,4 @@ export * from "./search/searchIndex.js";
 export * from "./search/traverseSchemaSource.js";
 export * from "./search/getFilenameFromRef.js";
 export * from "./search/sourcePath.js";
+export * from "./theme/accentRamp.js";

package/dist/declarations/src/internal/theme/accentRamp.d.ts

@@ -0,0 +1,120 @@
+/**
+ * The Studio's chrome, generated from one colour.
+ *
+ * `s.settings()`'s `theme.accent` is a single hex, and what it has to replace is
+ * a TEN-STEP RAMP: `index.css` declares `--colors-brand-green-100` through
+ * `-1000` and every brand token points into it, picking different steps in light
+ * and in dark (a tinted surface is step 200 in light and 800 in dark; the text
+ * on it is 1000 and 100). So the accent is not a colour to place, it is a ramp
+ * to build — which is also why one accent drives both modes with nothing to keep
+ * in sync.
+ *
+ * ## Why an arbitrary hex is safe
+ *
+ * The obvious worry is `contrast.test.ts`, which holds every foreground /
+ * background pair the chrome renders to WCAG AA. A hex typed by an editor never
+ * goes near that test.
+ *
+ * It holds anyway, because of how the ramp is built: **green's lightness at each
+ * step is reused unchanged, and only the hue moves.** WCAG relative luminance is
+ * almost entirely a function of lightness, so a ramp that keeps green's L
+ * profile keeps green's contrast relationships. Chroma is scaled to the accent's
+ * own saturation and then reduced — never L — until each step fits sRGB.
+ *
+ * "Almost entirely" is doing real work in that sentence: at equal OKLCH
+ * lightness a saturated yellow has a higher relative luminance than a blue, so
+ * the ratios do move a little. {@link BRAND_CONTRAST_PAIRS} is the list of pairs
+ * that have to survive it, and `accentRamp.test.ts` runs them over the hue
+ * circle rather than trusting the argument.
+ *
+ * ## What is NOT generated
+ *
+ * With no accent set, the hand-tuned ramp in `index.css` is used as it is. This
+ * module reproduces it to within a step or two, and re-deriving a value somebody
+ * tuned by eye is a silent regression rather than a simplification.
+ */
+/** The steps `index.css` declares, smallest (lightest) first. */
+export declare const RAMP_STEPS: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
+export type RampStep = (typeof RAMP_STEPS)[number];
+export type AccentRamp = Record<RampStep, string>;
+/**
+ * Val's own brand ramp, and the lightness profile every generated ramp borrows.
+ *
+ * A copy of what `index.css` declares, because this package cannot read the UI
+ * package's stylesheet — so the two are held together by a test instead:
+ * `contrast.test.ts` resolves the ramp out of the real CSS and asserts it equals
+ * this. If that test fails, the stylesheet moved and this did not.
+ */
+export declare const VAL_GREEN_RAMP: AccentRamp;
+/**
+ * The ten-step ramp for one accent, or `null` if it is not a six-digit hex.
+ *
+ * `null` rather than a fallback: the caller knows whether it is holding a value
+ * an editor picked (in which case the schema already validated it) or one that
+ * came out of a hand-edited settings file, and only the caller can decide
+ * whether "ignore it" or "report it" is right.
+ */
+export declare function accentRamp(accent: string): AccentRamp | null;
+/**
+ * The custom properties that restyle the chrome, ready to put on a `style`
+ * attribute.
+ *
+ * Custom properties on the element rather than a generated stylesheet: nothing
+ * has to be escaped, an inline custom property beats `@layer base` without a
+ * specificity fight, and a subtree that should keep the untouched palette
+ * simply is not given the object. See `useValThemeStyle` for where they go —
+ * every place the Studio stamps `data-mode`, because the theme travels with it.
+ *
+ * Empty when nothing is set, which is what makes "no theme" cost nothing.
+ */
+export declare function themeCustomProperties(theme: {
+    accent?: string | null;
+    /** A `--radius` length. The caller maps the named step; see `THEME_RADIUS_LENGTHS`. */
+    radius?: string | null;
+}): Record<string, string>;
+/**
+ * WCAG relative luminance of a six-digit hex.
+ *
+ * Exported so there is one implementation of the maths that decides whether a
+ * theme is legible; `contrast.test.ts` had its own copy, and two copies of a
+ * threshold is how a guarantee quietly stops being one.
+ */
+export declare function relativeLuminance(hex: string): number;
+/** WCAG contrast ratio between two six-digit hex colours, 1 to 21. */
+export declare function contrastRatio(a: string, b: string): number;
+/** WCAG AA for body text. */
+export declare const AA_TEXT = 4.5;
+/** WCAG AA for large text and for UI components such as a focus ring. */
+export declare const AA_LARGE = 3;
+/**
+ * Where a brand pair's background comes from.
+ *
+ * A `RampStep` is a step of the brand ramp, so it moves with the accent. A hex
+ * is a neutral surface that does not — the canvas and the floating panels are
+ * grey in every theme, and a ring has to be legible against them.
+ */
+export type PairGround = RampStep | string;
+/**
+ * Every foreground / background pair the chrome renders with BRAND colours.
+ *
+ * The list is data rather than a test body because two different things have to
+ * be held to it, and one table is the only way they can agree:
+ *
+ * - `accentRamp.test.ts` runs it over ramps generated across the hue circle,
+ *   which is what makes an arbitrary accent safe.
+ * - `contrast.test.ts` runs it over the ramp resolved out of the real
+ *   `index.css`, which is what stops someone nudging Val's own green past AA.
+ *
+ * The neutral pairs — muted text on a panel, a hairline on the canvas — stay in
+ * `contrast.test.ts`. They have nothing to do with the accent, and a theme
+ * cannot move them.
+ */
+export declare const BRAND_CONTRAST_PAIRS: readonly {
+    what: string;
+    mode: "light" | "dark";
+    fg: PairGround;
+    bg: PairGround;
+    min: number;
+}[];
+/** Resolve one side of a {@link BRAND_CONTRAST_PAIRS} entry against a ramp. */
+export declare function resolvePairGround(ground: PairGround, ramp: AccentRamp): string;

package/dist/declarations/src/internal/valCanvasProtocol.d.ts

@@ -54,6 +54,27 @@ export type ValCanvasElement = {
         height: number;
     };
 };
+/**
+ * The colours Val outlines the page's content in, when nobody has said
+ * otherwise.
+ *
+ * They mirror `--bg-page-selection` and `--bg-page-selection-soft` in
+ * `packages/ui/spa/index.css`, and they are literals here because the page the
+ * bridge runs in has none of Val's stylesheet — no `:host`, no tokens, nothing
+ * to inherit. A CSS custom property genuinely cannot reach across that
+ * boundary, which is why the colours are SENT (see the `theme` message below)
+ * rather than derived.
+ *
+ * They live beside the protocol rather than with the theme code on purpose:
+ * `@valbuild/shared/client` is what the bridge imports, and it exists to keep
+ * production bundles small (see the docblock on that entrypoint). Two strings
+ * cost nothing; the accent generator that produces the non-default values is
+ * ~350 lines of colour maths that no visitor to a Val site should download.
+ *
+ * `canvasSelectionDefaults.test.ts` holds them equal to the stylesheet.
+ */
+export declare const DEFAULT_CANVAS_SELECTION = "#079455";
+export declare const DEFAULT_CANVAS_SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
 /** What the page tells the studio. */
 export type ValCanvasPageMessage = {
     val: typeof VAL_CANVAS_MESSAGE;
@@ -200,6 +221,29 @@ export type ValCanvasStudioMessage = {
      */
     val: typeof VAL_CANVAS_MESSAGE;
     type: "sourcesSynced";
+} | {
+    /**
+     * What colour to outline the page's content in.
+     *
+     * Sent because it cannot be inherited: the bridge runs in the customer's
+     * document, which has no Val stylesheet, so the studio's custom
+     * properties are not merely overridden there — they do not exist. A
+     * project that sets `theme.accent` in `s.settings()` moves the studio's
+     * chrome by overriding tokens, and this message is the only way the same
+     * decision reaches the outlines drawn on the page itself.
+     *
+     * Both halves degrade on their own: a bridge that predates this message
+     * ignores it and stays Val green, and a bridge that never receives one
+     * falls back to {@link DEFAULT_CANVAS_SELECTION}. So an app on an older
+     * `@valbuild/next` than its studio, or the reverse, keeps working and
+     * simply does not follow the accent.
+     */
+    val: typeof VAL_CANVAS_MESSAGE;
+    type: "theme";
+    /** The outline on the element under the pointer, and on a highlight. */
+    selection: string;
+    /** The resting outline on every field the canvas found. */
+    selectionSoft: string;
 } | {
     val: typeof VAL_CANVAS_MESSAGE;
     type: "setPicking";

package/dist/{getSitemapTree-6777bdfa.esm.js → getSitemapTree-878d3888.esm.js}

@@ -51,6 +51,28 @@ var VAL_CANVAS_MESSAGE = "val-canvas";
 
 /** One element on the page that Val has a path for. */
 
+/**
+ * The colours Val outlines the page's content in, when nobody has said
+ * otherwise.
+ *
+ * They mirror `--bg-page-selection` and `--bg-page-selection-soft` in
+ * `packages/ui/spa/index.css`, and they are literals here because the page the
+ * bridge runs in has none of Val's stylesheet — no `:host`, no tokens, nothing
+ * to inherit. A CSS custom property genuinely cannot reach across that
+ * boundary, which is why the colours are SENT (see the `theme` message below)
+ * rather than derived.
+ *
+ * They live beside the protocol rather than with the theme code on purpose:
+ * `@valbuild/shared/client` is what the bridge imports, and it exists to keep
+ * production bundles small (see the docblock on that entrypoint). Two strings
+ * cost nothing; the accent generator that produces the non-default values is
+ * ~350 lines of colour maths that no visitor to a Val site should download.
+ *
+ * `canvasSelectionDefaults.test.ts` holds them equal to the stylesheet.
+ */
+var DEFAULT_CANVAS_SELECTION = "#079455";
+var DEFAULT_CANVAS_SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
 /** What the page tells the studio. */
 
 /** What the studio tells the page. */
@@ -63,11 +85,36 @@ function isValCanvasPageMessage(data) {
   return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing";
 }
 
+/**
+ * Whether a value is a colour a `theme` message may carry.
+ *
+ * A whitelist rather than an escape, and the reason is where these two strings
+ * end up: the bridge writes them into a `<style>` element in the CUSTOMER's
+ * document with `dangerouslySetInnerHTML`, so a value containing `</style>` is
+ * a script tag away from running in someone else's page. A page can be
+ * `postMessage`d by any window holding a handle on it, and this guard is the
+ * only thing between such a message and that sink.
+ *
+ * The two shapes are exactly what `themeCustomProperties` produces — a hex, and
+ * the `rgba()` it derives the soft outline as. Narrowing the contract is easier
+ * to keep true than sanitising an open one, and a forged message that passes
+ * this can do no more than pick a different colour.
+ */
+var CANVAS_SELECTION_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\))$/i;
+function isCanvasSelectionColor(value) {
+  return typeof value === "string" && CANVAS_SELECTION_COLOR.test(value);
+}
+
 /** Narrow an unknown `event.data` to a message from the studio. */
 function isValCanvasStudioMessage(data) {
   if (_typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  if (message.type === "theme") {
+    // Checked here and not in the bridge: a rejected message is never applied
+    // at all, and there is one guard rather than one per framework binding.
+    return isCanvasSelectionColor(message.selection) && isCanvasSelectionColor(message.selectionSoft);
+  }
   return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
 }
 
@@ -428,4 +475,4 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
-export { VAL_CONFIG_SESSION_STORAGE_KEY as V, _createForOfIteratorHelper as _, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, isValCanvasStudioMessage as e, isValCanvasFrame as f, getNextAppRouterSourceFolder as g, getTanStackRouterSourceFolder as h, isValCanvasPageMessage as i, getPageRouterSourceFolder as j, isTanStackRoutesFolder as k, getPageRouterSitemapTree as l, getPatternFromModuleFilePath as m, _objectSpread2 as n, _arrayLikeToArray as o, parseRoutePattern as p, _unsupportedIterableToArray as q, _typeof as r, _defineProperty as s, withValCanvasParam as w };
+export { DEFAULT_CANVAS_SELECTION as D, VAL_CONFIG_SESSION_STORAGE_KEY as V, _createForOfIteratorHelper as _, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, getNextAppRouterSourceFolder as h, isValCanvasPageMessage as i, getTanStackRouterSourceFolder as j, getPageRouterSourceFolder as k, isTanStackRoutesFolder as l, getPageRouterSitemapTree as m, getPatternFromModuleFilePath as n, _objectSpread2 as o, parseRoutePattern as p, _arrayLikeToArray as q, _unsupportedIterableToArray as r, _typeof as s, _defineProperty as t, withValCanvasParam as w };

package/dist/{getSitemapTree-b320d033.cjs.prod.js → getSitemapTree-99839b02.cjs.prod.js}

@@ -53,6 +53,28 @@ var VAL_CANVAS_MESSAGE = "val-canvas";
 
 /** One element on the page that Val has a path for. */
 
+/**
+ * The colours Val outlines the page's content in, when nobody has said
+ * otherwise.
+ *
+ * They mirror `--bg-page-selection` and `--bg-page-selection-soft` in
+ * `packages/ui/spa/index.css`, and they are literals here because the page the
+ * bridge runs in has none of Val's stylesheet — no `:host`, no tokens, nothing
+ * to inherit. A CSS custom property genuinely cannot reach across that
+ * boundary, which is why the colours are SENT (see the `theme` message below)
+ * rather than derived.
+ *
+ * They live beside the protocol rather than with the theme code on purpose:
+ * `@valbuild/shared/client` is what the bridge imports, and it exists to keep
+ * production bundles small (see the docblock on that entrypoint). Two strings
+ * cost nothing; the accent generator that produces the non-default values is
+ * ~350 lines of colour maths that no visitor to a Val site should download.
+ *
+ * `canvasSelectionDefaults.test.ts` holds them equal to the stylesheet.
+ */
+var DEFAULT_CANVAS_SELECTION = "#079455";
+var DEFAULT_CANVAS_SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
 /** What the page tells the studio. */
 
 /** What the studio tells the page. */
@@ -65,11 +87,36 @@ function isValCanvasPageMessage(data) {
   return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing";
 }
 
+/**
+ * Whether a value is a colour a `theme` message may carry.
+ *
+ * A whitelist rather than an escape, and the reason is where these two strings
+ * end up: the bridge writes them into a `<style>` element in the CUSTOMER's
+ * document with `dangerouslySetInnerHTML`, so a value containing `</style>` is
+ * a script tag away from running in someone else's page. A page can be
+ * `postMessage`d by any window holding a handle on it, and this guard is the
+ * only thing between such a message and that sink.
+ *
+ * The two shapes are exactly what `themeCustomProperties` produces — a hex, and
+ * the `rgba()` it derives the soft outline as. Narrowing the contract is easier
+ * to keep true than sanitising an open one, and a forged message that passes
+ * this can do no more than pick a different colour.
+ */
+var CANVAS_SELECTION_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\))$/i;
+function isCanvasSelectionColor(value) {
+  return typeof value === "string" && CANVAS_SELECTION_COLOR.test(value);
+}
+
 /** Narrow an unknown `event.data` to a message from the studio. */
 function isValCanvasStudioMessage(data) {
   if (_typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  if (message.type === "theme") {
+    // Checked here and not in the bridge: a rejected message is never applied
+    // at all, and there is one guard rather than one per framework binding.
+    return isCanvasSelectionColor(message.selection) && isCanvasSelectionColor(message.selectionSoft);
+  }
   return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
 }
 
@@ -430,6 +477,8 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
+exports.DEFAULT_CANVAS_SELECTION = DEFAULT_CANVAS_SELECTION;
+exports.DEFAULT_CANVAS_SELECTION_SOFT = DEFAULT_CANVAS_SELECTION_SOFT;
 exports.VAL_AI_SESSION_STORAGE_KEY = VAL_AI_SESSION_STORAGE_KEY;
 exports.VAL_CANVAS_MESSAGE = VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = VAL_CANVAS_PARAM;

package/dist/{getSitemapTree-d1977d3e.cjs.dev.js → getSitemapTree-99c97c62.cjs.dev.js}

@@ -53,6 +53,28 @@ var VAL_CANVAS_MESSAGE = "val-canvas";
 
 /** One element on the page that Val has a path for. */
 
+/**
+ * The colours Val outlines the page's content in, when nobody has said
+ * otherwise.
+ *
+ * They mirror `--bg-page-selection` and `--bg-page-selection-soft` in
+ * `packages/ui/spa/index.css`, and they are literals here because the page the
+ * bridge runs in has none of Val's stylesheet — no `:host`, no tokens, nothing
+ * to inherit. A CSS custom property genuinely cannot reach across that
+ * boundary, which is why the colours are SENT (see the `theme` message below)
+ * rather than derived.
+ *
+ * They live beside the protocol rather than with the theme code on purpose:
+ * `@valbuild/shared/client` is what the bridge imports, and it exists to keep
+ * production bundles small (see the docblock on that entrypoint). Two strings
+ * cost nothing; the accent generator that produces the non-default values is
+ * ~350 lines of colour maths that no visitor to a Val site should download.
+ *
+ * `canvasSelectionDefaults.test.ts` holds them equal to the stylesheet.
+ */
+var DEFAULT_CANVAS_SELECTION = "#079455";
+var DEFAULT_CANVAS_SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
 /** What the page tells the studio. */
 
 /** What the studio tells the page. */
@@ -65,11 +87,36 @@ function isValCanvasPageMessage(data) {
   return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing";
 }
 
+/**
+ * Whether a value is a colour a `theme` message may carry.
+ *
+ * A whitelist rather than an escape, and the reason is where these two strings
+ * end up: the bridge writes them into a `<style>` element in the CUSTOMER's
+ * document with `dangerouslySetInnerHTML`, so a value containing `</style>` is
+ * a script tag away from running in someone else's page. A page can be
+ * `postMessage`d by any window holding a handle on it, and this guard is the
+ * only thing between such a message and that sink.
+ *
+ * The two shapes are exactly what `themeCustomProperties` produces — a hex, and
+ * the `rgba()` it derives the soft outline as. Narrowing the contract is easier
+ * to keep true than sanitising an open one, and a forged message that passes
+ * this can do no more than pick a different colour.
+ */
+var CANVAS_SELECTION_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\))$/i;
+function isCanvasSelectionColor(value) {
+  return typeof value === "string" && CANVAS_SELECTION_COLOR.test(value);
+}
+
 /** Narrow an unknown `event.data` to a message from the studio. */
 function isValCanvasStudioMessage(data) {
   if (_typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  if (message.type === "theme") {
+    // Checked here and not in the bridge: a rejected message is never applied
+    // at all, and there is one guard rather than one per framework binding.
+    return isCanvasSelectionColor(message.selection) && isCanvasSelectionColor(message.selectionSoft);
+  }
   return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
 }
 
@@ -430,6 +477,8 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
+exports.DEFAULT_CANVAS_SELECTION = DEFAULT_CANVAS_SELECTION;
+exports.DEFAULT_CANVAS_SELECTION_SOFT = DEFAULT_CANVAS_SELECTION_SOFT;
 exports.VAL_AI_SESSION_STORAGE_KEY = VAL_AI_SESSION_STORAGE_KEY;
 exports.VAL_CANVAS_MESSAGE = VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = VAL_CANVAS_PARAM;