@valbuild/tanstack 0.128.0 → 0.129.0

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # @valbuild/tanstack
 
+## 0.129.0
+
+### Patch 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.
+
+- Updated dependencies [[`e20f6fb`](https://github.com/valbuild/val/commit/e20f6fbcc215c310eef49a44c1a592c1e2081613), [`7d34ecc`](https://github.com/valbuild/val/commit/7d34ecce787a0709025ae7b4764cb6c3ad1f766b), [`0c351c4`](https://github.com/valbuild/val/commit/0c351c4f97ae7f09772eab0e856ae69821b803b7), [`41a0d76`](https://github.com/valbuild/val/commit/41a0d76636a2dce3f1e506d93170d97e46041d98), [`9e0ebb0`](https://github.com/valbuild/val/commit/9e0ebb00430f05ef92dff031309f73b8075a7d99)]:
+  - @valbuild/ui@0.129.0
+  - @valbuild/core@0.129.0
+  - @valbuild/shared@0.129.0
+  - @valbuild/react@0.129.0
+  - @valbuild/server@0.129.0
+  - @valbuild/language-server@0.129.0
+  - @valbuild/mcp@0.129.0
+
 ## 0.128.0
 
 ### Patch Changes

package/dist/valbuild-tanstack.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('./version-2d63db20.cjs.dev.js');
+var version = require('./version-8aeb5ebd.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-e75681d7.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
@@ -243,8 +243,10 @@ var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
 var floatLightBg = "#fcfcfc";
 
-var SELECTION = "#079455";
-var SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+var DEFAULT_SELECTION = {
+  selection: client.DEFAULT_CANVAS_SELECTION,
+  selectionSoft: client.DEFAULT_CANVAS_SELECTION_SOFT
+};
 
 /**
  * How often the page is re-measured even when nothing said it changed.
@@ -273,10 +275,23 @@ function ValCanvasBridge(_ref) {
     _React$useState2 = createForOfIteratorHelper._slicedToArray(_React$useState, 2),
     picking = _React$useState2[0],
     setPicking = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(null),
+  /**
+   * The outline colours, as the studio last said.
+   *
+   * State rather than a prop, because it arrives over the protocol after mount:
+   * the studio sends it when the frame reports ready and again whenever the
+   * project's accent changes. Starts at Val's green so a page that is never
+   * told — an older studio, or a message that never arrives — still outlines
+   * its content.
+   */
+  var _React$useState3 = React__default["default"].useState(DEFAULT_SELECTION),
     _React$useState4 = createForOfIteratorHelper._slicedToArray(_React$useState3, 2),
-    highlighted = _React$useState4[0],
-    setHighlighted = _React$useState4[1];
+    selectionColors = _React$useState4[0],
+    setSelectionColors = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(null),
+    _React$useState6 = createForOfIteratorHelper._slicedToArray(_React$useState5, 2),
+    highlighted = _React$useState6[0],
+    setHighlighted = _React$useState6[1];
   // Kept in a ref as well, because the capture-phase click listener below is
   // installed once and would otherwise close over the first value forever.
   var pickingRef = React__default["default"].useRef(false);
@@ -485,6 +500,13 @@ function ValCanvasBridge(_ref) {
         setPicking(message.picking);
         return;
       }
+      if (message.type === "theme") {
+        setSelectionColors({
+          selection: message.selection,
+          selectionSoft: message.selectionSoft
+        });
+        return;
+      }
       if (message.type === "sourceUpdate") {
         /**
          * Handed straight to the listener the page already has.
@@ -700,7 +722,7 @@ function ValCanvasBridge(_ref) {
     // CSS string. A path contains quotes (`?p="/"`) and would otherwise
     // close the selector early.
     dangerouslySetInnerHTML: {
-      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(SELECTION_SOFT, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(SELECTION, "; }") : "", highlighted ? highlightRule(highlighted) : ""].filter(Boolean).join("\n")
+      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(selectionColors.selectionSoft, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(selectionColors.selection, "; }") : "", highlighted ? highlightRule(highlighted, selectionColors.selection) : ""].filter(Boolean).join("\n")
     }
   });
 }
@@ -718,13 +740,13 @@ function ValCanvasBridge(_ref) {
  * and one in the middle. Between them they match the path as a complete list
  * item and nothing else.
  */
-function highlightRule(path) {
+function highlightRule(path, selection) {
   var value = JSON.stringify(path);
   var inner = JSON.stringify(",".concat(path, ","));
   var first = JSON.stringify("".concat(path, ","));
   var last = JSON.stringify(",".concat(path));
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
-  return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
+  return "".concat(selectors, " { outline: 2px solid ").concat(selection, "; outline-offset: 1px; }");
 }
 
 /**

package/dist/valbuild-tanstack.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = require('./version-b642af81.cjs.prod.js');
+var version = require('./version-ecfd83cc.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0324e063.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
@@ -243,8 +243,10 @@ var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
 var floatLightBg = "#fcfcfc";
 
-var SELECTION = "#079455";
-var SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+var DEFAULT_SELECTION = {
+  selection: client.DEFAULT_CANVAS_SELECTION,
+  selectionSoft: client.DEFAULT_CANVAS_SELECTION_SOFT
+};
 
 /**
  * How often the page is re-measured even when nothing said it changed.
@@ -273,10 +275,23 @@ function ValCanvasBridge(_ref) {
     _React$useState2 = createForOfIteratorHelper._slicedToArray(_React$useState, 2),
     picking = _React$useState2[0],
     setPicking = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(null),
+  /**
+   * The outline colours, as the studio last said.
+   *
+   * State rather than a prop, because it arrives over the protocol after mount:
+   * the studio sends it when the frame reports ready and again whenever the
+   * project's accent changes. Starts at Val's green so a page that is never
+   * told — an older studio, or a message that never arrives — still outlines
+   * its content.
+   */
+  var _React$useState3 = React__default["default"].useState(DEFAULT_SELECTION),
     _React$useState4 = createForOfIteratorHelper._slicedToArray(_React$useState3, 2),
-    highlighted = _React$useState4[0],
-    setHighlighted = _React$useState4[1];
+    selectionColors = _React$useState4[0],
+    setSelectionColors = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(null),
+    _React$useState6 = createForOfIteratorHelper._slicedToArray(_React$useState5, 2),
+    highlighted = _React$useState6[0],
+    setHighlighted = _React$useState6[1];
   // Kept in a ref as well, because the capture-phase click listener below is
   // installed once and would otherwise close over the first value forever.
   var pickingRef = React__default["default"].useRef(false);
@@ -485,6 +500,13 @@ function ValCanvasBridge(_ref) {
         setPicking(message.picking);
         return;
       }
+      if (message.type === "theme") {
+        setSelectionColors({
+          selection: message.selection,
+          selectionSoft: message.selectionSoft
+        });
+        return;
+      }
       if (message.type === "sourceUpdate") {
         /**
          * Handed straight to the listener the page already has.
@@ -700,7 +722,7 @@ function ValCanvasBridge(_ref) {
     // CSS string. A path contains quotes (`?p="/"`) and would otherwise
     // close the selector early.
     dangerouslySetInnerHTML: {
-      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(SELECTION_SOFT, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(SELECTION, "; }") : "", highlighted ? highlightRule(highlighted) : ""].filter(Boolean).join("\n")
+      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(selectionColors.selectionSoft, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(selectionColors.selection, "; }") : "", highlighted ? highlightRule(highlighted, selectionColors.selection) : ""].filter(Boolean).join("\n")
     }
   });
 }
@@ -718,13 +740,13 @@ function ValCanvasBridge(_ref) {
  * and one in the middle. Between them they match the path as a complete list
  * item and nothing else.
  */
-function highlightRule(path) {
+function highlightRule(path, selection) {
   var value = JSON.stringify(path);
   var inner = JSON.stringify(",".concat(path, ","));
   var first = JSON.stringify("".concat(path, ","));
   var last = JSON.stringify(",".concat(path));
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
-  return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
+  return "".concat(selectors, " { outline: 2px solid ").concat(selection, "; outline-offset: 1px; }");
 }
 
 /**

package/dist/valbuild-tanstack.esm.js

@@ -1,4 +1,4 @@
-import { _ as _asyncToGenerator, a as _regenerator, V as VERSION$1 } from './version-09f11ef9.esm.js';
+import { _ as _asyncToGenerator, a as _regenerator, V as VERSION$1 } from './version-a2bd1bca.esm.js';
 import { _ as _objectSpread2, a as _slicedToArray, b as _createForOfIteratorHelper } from './createForOfIteratorHelper-485c2ce1.esm.js';
 import { Internal as Internal$1, initVal as initVal$1, DEFAULT_CONTENT_HOST } from '@valbuild/core';
 import * as core from '@valbuild/core';
@@ -10,7 +10,7 @@ import { VERSION, VAL_APP_PATH, VAL_OVERLAY_ID, VAL_APP_ID } from '@valbuild/ui'
 import { useRouter, useRouterState } from '@tanstack/react-router';
 import React, { useEffect, useState, useRef } from 'react';
 import { V as ValExternalStore, a as ValOverlayProvider } from './ValOverlayContext-5bc3830f.esm.js';
-import { VAL_CONFIG_SESSION_STORAGE_KEY, VAL_THEME_SESSION_STORAGE_KEY, VAL_CANVAS_MESSAGE, isValCanvasStudioMessage, isValCanvasFrame } from '@valbuild/shared/client';
+import { VAL_CONFIG_SESSION_STORAGE_KEY, VAL_THEME_SESSION_STORAGE_KEY, VAL_CANVAS_MESSAGE, DEFAULT_CANVAS_SELECTION, DEFAULT_CANVAS_SELECTION_SOFT, isValCanvasStudioMessage, isValCanvasFrame } from '@valbuild/shared/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@valbuild/core/patch';
 
@@ -219,8 +219,10 @@ var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
 var floatLightBg = "#fcfcfc";
 
-var SELECTION = "#079455";
-var SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+var DEFAULT_SELECTION = {
+  selection: DEFAULT_CANVAS_SELECTION,
+  selectionSoft: DEFAULT_CANVAS_SELECTION_SOFT
+};
 
 /**
  * How often the page is re-measured even when nothing said it changed.
@@ -249,10 +251,23 @@ function ValCanvasBridge(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     picking = _React$useState2[0],
     setPicking = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
+  /**
+   * The outline colours, as the studio last said.
+   *
+   * State rather than a prop, because it arrives over the protocol after mount:
+   * the studio sends it when the frame reports ready and again whenever the
+   * project's accent changes. Starts at Val's green so a page that is never
+   * told — an older studio, or a message that never arrives — still outlines
+   * its content.
+   */
+  var _React$useState3 = React.useState(DEFAULT_SELECTION),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    highlighted = _React$useState4[0],
-    setHighlighted = _React$useState4[1];
+    selectionColors = _React$useState4[0],
+    setSelectionColors = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    highlighted = _React$useState6[0],
+    setHighlighted = _React$useState6[1];
   // Kept in a ref as well, because the capture-phase click listener below is
   // installed once and would otherwise close over the first value forever.
   var pickingRef = React.useRef(false);
@@ -461,6 +476,13 @@ function ValCanvasBridge(_ref) {
         setPicking(message.picking);
         return;
       }
+      if (message.type === "theme") {
+        setSelectionColors({
+          selection: message.selection,
+          selectionSoft: message.selectionSoft
+        });
+        return;
+      }
       if (message.type === "sourceUpdate") {
         /**
          * Handed straight to the listener the page already has.
@@ -676,7 +698,7 @@ function ValCanvasBridge(_ref) {
     // CSS string. A path contains quotes (`?p="/"`) and would otherwise
     // close the selector early.
     dangerouslySetInnerHTML: {
-      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(SELECTION_SOFT, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(SELECTION, "; }") : "", highlighted ? highlightRule(highlighted) : ""].filter(Boolean).join("\n")
+      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(selectionColors.selectionSoft, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(selectionColors.selection, "; }") : "", highlighted ? highlightRule(highlighted, selectionColors.selection) : ""].filter(Boolean).join("\n")
     }
   });
 }
@@ -694,13 +716,13 @@ function ValCanvasBridge(_ref) {
  * and one in the middle. Between them they match the path as a complete list
  * item and nothing else.
  */
-function highlightRule(path) {
+function highlightRule(path, selection) {
   var value = JSON.stringify(path);
   var inner = JSON.stringify(",".concat(path, ","));
   var first = JSON.stringify("".concat(path, ","));
   var last = JSON.stringify(",".concat(path));
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
-  return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
+  return "".concat(selectors, " { outline: 2px solid ").concat(selection, "; outline-offset: 1px; }");
 }
 
 /**

package/dist/{version-2d63db20.cjs.dev.js → version-8aeb5ebd.cjs.dev.js}

@@ -152,7 +152,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.128.0",
+	version: "0.129.0",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-09f11ef9.esm.js → version-a2bd1bca.esm.js}

@@ -150,7 +150,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.128.0",
+	version: "0.129.0",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-b642af81.cjs.prod.js → version-ecfd83cc.cjs.prod.js}

@@ -152,7 +152,7 @@ var packageJson = {
 		"tanstack-router",
 		"react"
 	],
-	version: "0.128.0",
+	version: "0.129.0",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/package.json

@@ -14,7 +14,7 @@
     "tanstack-router",
     "react"
   ],
-  "version": "0.128.0",
+  "version": "0.129.0",
   "main": "dist/valbuild-tanstack.cjs.js",
   "module": "dist/valbuild-tanstack.esm.js",
   "exports": {
@@ -42,13 +42,13 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "0.128.0",
-    "@valbuild/language-server": "0.128.0",
-    "@valbuild/mcp": "0.128.0",
-    "@valbuild/react": "0.128.0",
-    "@valbuild/server": "0.128.0",
-    "@valbuild/shared": "0.128.0",
-    "@valbuild/ui": "0.127.0"
+    "@valbuild/core": "0.129.0",
+    "@valbuild/language-server": "0.129.0",
+    "@valbuild/mcp": "0.129.0",
+    "@valbuild/react": "0.129.0",
+    "@valbuild/server": "0.129.0",
+    "@valbuild/ui": "0.129.0",
+    "@valbuild/shared": "0.129.0"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.170.33",

package/server/dist/valbuild-tanstack-server.cjs.dev.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-e75681d7.cjs.dev.js');
 var core = require('@valbuild/core');
 var server = require('@valbuild/server');
-var version = require('../../dist/version-2d63db20.cjs.dev.js');
+var version = require('../../dist/version-8aeb5ebd.cjs.dev.js');
 var routeFromVal = require('../../dist/routeFromVal-a9147ceb.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');

package/server/dist/valbuild-tanstack-server.cjs.prod.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var createForOfIteratorHelper = require('../../dist/createForOfIteratorHelper-0324e063.cjs.prod.js');
 var core = require('@valbuild/core');
 var server = require('@valbuild/server');
-var version = require('../../dist/version-b642af81.cjs.prod.js');
+var version = require('../../dist/version-ecfd83cc.cjs.prod.js');
 var routeFromVal = require('../../dist/routeFromVal-6693e037.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');

package/server/dist/valbuild-tanstack-server.esm.js

@@ -1,7 +1,7 @@
 import { _ as _objectSpread2, a as _slicedToArray, d as _defineProperty } from '../../dist/createForOfIteratorHelper-485c2ce1.esm.js';
 import { Internal } from '@valbuild/core';
 import { createValApiRouter, createValServer } from '@valbuild/server';
-import { _ as _asyncToGenerator, a as _regenerator, V as VERSION } from '../../dist/version-09f11ef9.esm.js';
+import { _ as _asyncToGenerator, a as _regenerator, V as VERSION } from '../../dist/version-a2bd1bca.esm.js';
 import { b as initValRouteFromVal, g as getJsonEntryStegaRoot, i as isJsonValuesRecordSchema, a as getValRouteUrlFromVal, _ as _typeof } from '../../dist/routeFromVal-728295a0.esm.js';
 import { stegaEncode, SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { VAL_SESSION_COOKIE } from '@valbuild/shared/internal';