@valbuild/next 0.87.5 → 0.89.0

package/README.md

@@ -55,10 +55,12 @@ Join us on [discord](https://discord.gg/cZzqPvaX8k) to get help or give us feedb
   - [Nullable](#nullable)
   - [Array](#array)
   - [Record](#record)
+  - [Router](#router)
   - [Object](#object)
   - [Rich text](#richtext)
   - [Image](#image)
   - [keyOf](#keyof)
+  - [Route](#route)
 
 ## Installation
 
@@ -355,6 +357,42 @@ It is similar to an array, in that editors can add and remove items in it, howev
 s.record(t.number()); // <- Schema<Record<string, number>>
 ```
 
+## Router
+
+The `router` schema is a convenient shorthand for creating a record with router configuration. It combines `s.record()` and `.router()` into a single call.
+
+```ts
+import { s, c, nextAppRouter } from "../val.config";
+
+const pageSchema = s.object({ title: s.string() });
+
+// Using s.router() - shorthand
+const pagesSchema = s.router(nextAppRouter, pageSchema);
+
+// Equivalent to:
+const pagesSchema = s.record(pageSchema).router(nextAppRouter);
+```
+
+### Example:
+
+```ts
+import { s, c, nextAppRouter } from "../val.config";
+
+const pageSchema = s.object({ title: s.string() });
+
+// NOTE: to use router(nextAppRouter) - the module must be a sibling of the page.tsx
+export default c.define(
+  "/app/[slug]/page.val.ts",
+  s.router(nextAppRouter, pageSchema),
+  {
+    "/test-page": {
+      // This is the full pathname of the page - it must match the pattern of the Next JS route
+      title: "Test page",
+    },
+  },
+);
+```
+
 ## Object
 
 ```ts
@@ -363,7 +401,7 @@ s.object({
 });
 ```
 
-#### Page router
+#### Page router (using .router() method)
 
 You can configure Val to track your page structure and display content as navigable web pages in the editor interface.
 
@@ -774,6 +812,57 @@ const authors = useVal(otherVal); // s.record(s.object({ name: s.string() }))
 const nameOfAuthor = authors[articleVal.author].name;
 ```
 
+## Route
+
+The `route` schema represents a string that references a route path in your application. It can be used with `include` and `exclude` patterns to constrain which routes are valid.
+
+### Route Schema
+
+```ts
+s.route(); // <- Schema<string>
+```
+
+### Route with patterns
+
+You can use `include` and `exclude` to constrain valid routes using regular expressions:
+
+```ts
+// Only allow API routes
+s.route().include(/^\/api\//);
+
+// Exclude admin routes
+s.route().exclude(/^\/admin\//);
+
+// Combine both: API routes except internal ones
+s.route()
+  .include(/^\/api\//)
+  .exclude(/^\/api\/internal\//);
+```
+
+**Pattern semantics:**
+
+- If only `include` is set: route must match the include pattern
+- If only `exclude` is set: route must NOT match the exclude pattern
+- If both are set: route must match include AND must NOT match exclude
+
+### Using routes
+
+Routes are validated against router modules (records with `.router()` or `s.router()`). The route value must exist as a key in one of your router modules.
+
+```ts
+import { s, c } from "../val.config";
+
+const linkSchema = s.object({
+  label: s.string(),
+  href: s.route().include(/^\//), // Only allow routes starting with /
+});
+
+export default c.define("/components/link.val.ts", linkSchema, {
+  label: "Home",
+  href: "/", // This must exist in a router module
+});
+```
+
 # Custom validation
 
 All schema can use the `validate` method to show custom validation errors to editors.

package/dist/{ValNextProvider-579b1e3d.cjs.dev.js → ValNextProvider-145cfd3a.cjs.dev.js}

@@ -22,6 +22,25 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var Script__default = /*#__PURE__*/_interopDefault(Script);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function initSessionTheme(config) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  var existingSessionTheme = sessionStorage.getItem(internal.VAL_THEME_SESSION_STORAGE_KEY);
+  if (existingSessionTheme && (existingSessionTheme === "dark" || existingSessionTheme === "light")) {
+    return existingSessionTheme;
+  }
+  var storedTheme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+  var theme = "dark";
+  if (storedTheme === "light" || storedTheme === "dark") {
+    theme = storedTheme;
+  } else if ((config === null || config === void 0 ? void 0 : config.defaultTheme) === "dark" || (config === null || config === void 0 ? void 0 : config.defaultTheme) === "light") {
+    theme = config.defaultTheme;
+  }
+  sessionStorage.setItem(internal.VAL_THEME_SESSION_STORAGE_KEY, theme);
+  return theme;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -263,6 +282,9 @@ var ValNextProvider = function ValNextProvider(props) {
     }
   }, []);
   cssUtils.useConfigStorageSave(props.config);
+  var initTheme = React__default["default"].useMemo(function () {
+    return initSessionTheme(props.config);
+  }, [props.config]);
   var _React$useState1 = React__default["default"].useState(false),
     _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
     spaLoaded = _React$useState10[0],
@@ -276,11 +298,21 @@ var ValNextProvider = function ValNextProvider(props) {
       window.removeEventListener("val-ui-created", listener);
     };
   }, []);
+  var _React$useMemo = React__default["default"].useMemo(function () {
+      if (initTheme !== "light") {
+        return ["#0c111d", "white"];
+      } else {
+        return ["white", "black"];
+      }
+    }, [initTheme]),
+    _React$useMemo2 = slicedToArray._slicedToArray(_React$useMemo, 2),
+    backgroundColor = _React$useMemo2[0],
+    textColor = _React$useMemo2[1];
   var commonStyles = React__default["default"].useMemo(function () {
     return {
       "backdrop-blur": "backdrop-filter: blur(10px);",
-      "text-white": "color: white;",
-      "bg-bg-primary": "background: #0c111d;",
+      "text-text-primary": "color: ".concat(textColor, ";"),
+      "bg-bg-primary": "background: ".concat(backgroundColor, ";"),
       rounded: "border-radius: 0.25rem;",
       fixed: "position: fixed;",
       "bottom-4": "bottom: 1rem;",
@@ -297,13 +329,13 @@ var ValNextProvider = function ValNextProvider(props) {
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.ValOverlayProvider, {
     draftMode: draftMode,
     store: valStore,
-    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
         children: "\n".concat(positionStyles, "\n").concat(cssUtils.prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "".concat(getPositionClassName(dropZone), " ").concat(cssUtils.cn(["p-4"])),
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-white", "bg-bg-primary", "rounded", "backdrop-blur"])),
+          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             width: "16",

package/dist/{ValNextProvider-abf09691.esm.js → ValNextProvider-25a03cab.esm.js}

@@ -8,11 +8,30 @@ import Script from 'next/script';
 import React from 'react';
 import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-6635a4d7.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
-import { createValClient } from '@valbuild/shared/internal';
+import { VAL_THEME_SESSION_STORAGE_KEY, createValClient } from '@valbuild/shared/internal';
 import { p as prefixStyles, u as useConfigStorageSave, v as valPrefixedClass, c as cn } from './cssUtils-b5651c03.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 
+function initSessionTheme(config) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  var existingSessionTheme = sessionStorage.getItem(VAL_THEME_SESSION_STORAGE_KEY);
+  if (existingSessionTheme && (existingSessionTheme === "dark" || existingSessionTheme === "light")) {
+    return existingSessionTheme;
+  }
+  var storedTheme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+  var theme = "dark";
+  if (storedTheme === "light" || storedTheme === "dark") {
+    theme = storedTheme;
+  } else if ((config === null || config === void 0 ? void 0 : config.defaultTheme) === "dark" || (config === null || config === void 0 ? void 0 : config.defaultTheme) === "light") {
+    theme = config.defaultTheme;
+  }
+  sessionStorage.setItem(VAL_THEME_SESSION_STORAGE_KEY, theme);
+  return theme;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -254,6 +273,9 @@ var ValNextProvider = function ValNextProvider(props) {
     }
   }, []);
   useConfigStorageSave(props.config);
+  var initTheme = React.useMemo(function () {
+    return initSessionTheme(props.config);
+  }, [props.config]);
   var _React$useState1 = React.useState(false),
     _React$useState10 = _slicedToArray(_React$useState1, 2),
     spaLoaded = _React$useState10[0],
@@ -267,11 +289,21 @@ var ValNextProvider = function ValNextProvider(props) {
       window.removeEventListener("val-ui-created", listener);
     };
   }, []);
+  var _React$useMemo = React.useMemo(function () {
+      if (initTheme !== "light") {
+        return ["#0c111d", "white"];
+      } else {
+        return ["white", "black"];
+      }
+    }, [initTheme]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    backgroundColor = _React$useMemo2[0],
+    textColor = _React$useMemo2[1];
   var commonStyles = React.useMemo(function () {
     return {
       "backdrop-blur": "backdrop-filter: blur(10px);",
-      "text-white": "color: white;",
-      "bg-bg-primary": "background: #0c111d;",
+      "text-text-primary": "color: ".concat(textColor, ";"),
+      "bg-bg-primary": "background: ".concat(backgroundColor, ";"),
       rounded: "border-radius: 0.25rem;",
       fixed: "position: fixed;",
       "bottom-4": "bottom: 1rem;",
@@ -288,13 +320,13 @@ var ValNextProvider = function ValNextProvider(props) {
   return /*#__PURE__*/jsxs(ValOverlayProvider, {
     draftMode: draftMode,
     store: valStore,
-    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && /*#__PURE__*/jsxs(React.Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx("style", {
         children: "\n".concat(positionStyles, "\n").concat(prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
       }), /*#__PURE__*/jsx("div", {
         className: "".concat(getPositionClassName(dropZone), " ").concat(cn(["p-4"])),
         children: /*#__PURE__*/jsx("div", {
-          className: "".concat(cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cn(["text-white", "bg-bg-primary", "rounded", "backdrop-blur"])),
+          className: "".concat(cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             width: "16",

package/dist/ValNextProvider-96d1c795.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValNextProvider-96d1c795.cjs.prod.js");
+} else {
+  module.exports = require("./ValNextProvider-96d1c795.cjs.dev.js");
+}

package/dist/{ValNextProvider-af07de36.cjs.prod.js → ValNextProvider-96d1c795.cjs.prod.js}

@@ -22,6 +22,25 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var Script__default = /*#__PURE__*/_interopDefault(Script);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function initSessionTheme(config) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  var existingSessionTheme = sessionStorage.getItem(internal.VAL_THEME_SESSION_STORAGE_KEY);
+  if (existingSessionTheme && (existingSessionTheme === "dark" || existingSessionTheme === "light")) {
+    return existingSessionTheme;
+  }
+  var storedTheme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+  var theme = "dark";
+  if (storedTheme === "light" || storedTheme === "dark") {
+    theme = storedTheme;
+  } else if ((config === null || config === void 0 ? void 0 : config.defaultTheme) === "dark" || (config === null || config === void 0 ? void 0 : config.defaultTheme) === "light") {
+    theme = config.defaultTheme;
+  }
+  sessionStorage.setItem(internal.VAL_THEME_SESSION_STORAGE_KEY, theme);
+  return theme;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -263,6 +282,9 @@ var ValNextProvider = function ValNextProvider(props) {
     }
   }, []);
   cssUtils.useConfigStorageSave(props.config);
+  var initTheme = React__default["default"].useMemo(function () {
+    return initSessionTheme(props.config);
+  }, [props.config]);
   var _React$useState1 = React__default["default"].useState(false),
     _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
     spaLoaded = _React$useState10[0],
@@ -276,11 +298,21 @@ var ValNextProvider = function ValNextProvider(props) {
       window.removeEventListener("val-ui-created", listener);
     };
   }, []);
+  var _React$useMemo = React__default["default"].useMemo(function () {
+      if (initTheme !== "light") {
+        return ["#0c111d", "white"];
+      } else {
+        return ["white", "black"];
+      }
+    }, [initTheme]),
+    _React$useMemo2 = slicedToArray._slicedToArray(_React$useMemo, 2),
+    backgroundColor = _React$useMemo2[0],
+    textColor = _React$useMemo2[1];
   var commonStyles = React__default["default"].useMemo(function () {
     return {
       "backdrop-blur": "backdrop-filter: blur(10px);",
-      "text-white": "color: white;",
-      "bg-bg-primary": "background: #0c111d;",
+      "text-text-primary": "color: ".concat(textColor, ";"),
+      "bg-bg-primary": "background: ".concat(backgroundColor, ";"),
       rounded: "border-radius: 0.25rem;",
       fixed: "position: fixed;",
       "bottom-4": "bottom: 1rem;",
@@ -297,13 +329,13 @@ var ValNextProvider = function ValNextProvider(props) {
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.ValOverlayProvider, {
     draftMode: draftMode,
     store: valStore,
-    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
         children: "\n".concat(positionStyles, "\n").concat(cssUtils.prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "".concat(getPositionClassName(dropZone), " ").concat(cssUtils.cn(["p-4"])),
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-white", "bg-bg-primary", "rounded", "backdrop-blur"])),
+          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             width: "16",

package/dist/declarations/src/attrs.d.ts

@@ -0,0 +1,4 @@
+export type ValAttrs = {
+    "data-val-path"?: string;
+};
+export declare function attrs(target: unknown): ValAttrs;

package/dist/declarations/src/decodeValPathsOfString.d.ts

@@ -0,0 +1,2 @@
+import { ValEncodedString } from "@valbuild/react/stega";
+export declare function decodeValPathsOfString(encodedString: ValEncodedString): string[] | undefined;

package/dist/declarations/src/initVal.d.ts

@@ -1,10 +1,8 @@
-import { type ValConfig, type InitVal, type ValConstructor, ValModule, SelectorSource, Json, ValRouter } from "@valbuild/core";
+import { type ValConfig, type InitVal, type ValConstructor, ValRouter } from "@valbuild/core";
 import { raw } from "./raw.js";
 import { getUnpatchedUnencodedVal } from "./getUnpatchedUnencodedVal.js";
-import { decodeValPathOfString } from "./decodeValPathOfString.js";
-type ValAttrs = {
-    "data-val-path"?: string;
-};
+import { decodeValPathsOfString } from "./decodeValPathsOfString.js";
+import { attrs } from "./attrs.js";
 declare const nextAppRouter: ValRouter;
 export declare const initVal: (config?: ValConfig) => InitVal & {
     val: ValConstructor & {
@@ -21,10 +19,36 @@ export declare const initVal: (config?: ValConfig) => InitVal & {
          * outside of the actual application.
          */
         unstable_getUnpatchedUnencodedVal: typeof getUnpatchedUnencodedVal;
+        /**
+         * Convert any object that is encoded with Val stega encoding back to the original values
+         */
         raw: typeof raw;
-        attrs: <T extends ValModule<SelectorSource> | Json>(target: T) => ValAttrs;
-        unstable_decodeValPathOfString: typeof decodeValPathOfString;
+        /**
+         * Get the Val paths of attributes for any object.
+         *
+         * This is typically used to manually set the data-val-path attribute for visual editing on any element.
+         *
+         * @example
+         * const page = useVal(pageVal)
+         * <a href={page.url.href} {...val.attrs(page)}>
+         *   {page.url.label}
+         * </a>
+         */
+        attrs: typeof attrs;
+        unstable_decodeValPathsOfString: typeof decodeValPathsOfString;
     };
+    /**
+     * The Next.js App Router for use on s.record().router(...)
+     *
+     * @see https://val.build/docs/page-router
+     *
+     * @example
+     * const pages = s.record(s.object({ title: s.string() })).router(nextAppRouter);
+     * export default c.define("/pages/[slug].val.ts", pages, {
+     *   "/about": { title: "About" },
+     *   "/contact": { title: "Contact" },
+     * });
+     */
     nextAppRouter: ValRouter;
 };
 export {};

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

@@ -2,16 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _typeof = require('./typeof-b568f48f.cjs.dev.js');
 var objectSpread2 = require('./objectSpread2-792eb2c2.cjs.dev.js');
 var core = require('@valbuild/core');
+var _typeof = require('./typeof-b568f48f.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-579b1e3d.cjs.dev.js');
+var ValNextProvider = require('./ValNextProvider-145cfd3a.cjs.dev.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValApp = require('./ValApp-3df36e0d.cjs.dev.js');
 var version = require('./version-82faa1d0.cjs.dev.js');
+require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -65,8 +67,45 @@ function getUnpatchedUnencodedVal(selector) {
   });
 }
 
-function decodeValPathOfString(encodedString) {
-  return stega.stegaDecodeString(encodedString);
+function decodeValPathsOfString(encodedString) {
+  return stega.stegaDecodeStrings(encodedString);
+}
+
+function attrs(target) {
+  var allPaths = new Set();
+  function addPath(target) {
+    if (typeof target === "string") {
+      var paths = decodeValPathsOfString(target);
+      if (paths) {
+        var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(paths),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var path = _step.value;
+            allPaths.add(path);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    }
+    if (_typeof._typeof(target) === "object" && target !== null) {
+      var _path = core.Internal.getValPath(target);
+      if (_path) {
+        allPaths.add(_path);
+      }
+      Object.values(target).forEach(addPath);
+    }
+  }
+  addPath(target);
+  if (allPaths.size === 0) {
+    return {};
+  }
+  return {
+    "data-val-path": Array.from(allPaths).join(",")
+  };
 }
 
 var nextAppRouter = core.Internal.nextAppRouter;
@@ -82,28 +121,8 @@ var initVal = function initVal(config) {
     c: c,
     nextAppRouter: nextAppRouter,
     val: objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, val), {}, {
-      attrs: function attrs(target) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var anyTarget = target;
-        var path;
-        if (target === null) {
-          return {};
-        }
-        path = core.Internal.getValPath(anyTarget);
-        if (!path && _typeof._typeof(anyTarget) === "object") {
-          path = anyTarget["valPath"];
-        }
-        if (typeof anyTarget === "string") {
-          path = decodeValPathOfString(anyTarget);
-        }
-        if (path) {
-          return {
-            "data-val-path": path
-          };
-        }
-        return {};
-      },
-      unstable_decodeValPathOfString: decodeValPathOfString,
+      attrs: attrs,
+      unstable_decodeValPathsOfString: decodeValPathsOfString,
       raw: raw,
       unstable_getUnpatchedUnencodedVal: getUnpatchedUnencodedVal
     }),
@@ -145,11 +164,22 @@ function ValImage(props) {
     disableHotspot = props.disableHotspot,
     height = props.height,
     rest = _objectWithoutProperties(props, _excluded);
-  var valPathOfUrl = (src === null || src === void 0 ? void 0 : src.url) && decodeValPathOfString(src.url);
-  var valPaths = [valPathOfUrl];
-  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
+  var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
   if (maybeValPathOfAlt) {
-    valPaths.push(maybeValPathOfAlt);
+    var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(maybeValPathOfAlt),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var valPath = _step.value;
+        valPaths.push(valPath);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   }
   var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
   var imageStyle = hotspot && !disableHotspot ? objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, style), {}, {
@@ -164,10 +194,10 @@ function ValImage(props) {
     lazyBoundary: undefined,
     lazyRoot: undefined
   })), {}, {
-    src: valPathOfUrl ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
+    src: valPathsOfUrl && valPathsOfUrl.length > 0 ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
     "data-val-path": valPaths.join(","),
     "data-val-attr-alt": maybeValPathOfAlt,
-    "data-val-attr-src": valPathOfUrl,
+    "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
     alt: alt ? raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
     fill: rest.fill,

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

@@ -2,16 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _typeof = require('./typeof-16428c61.cjs.prod.js');
 var objectSpread2 = require('./objectSpread2-3c87fb4f.cjs.prod.js');
 var core = require('@valbuild/core');
+var _typeof = require('./typeof-16428c61.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-af07de36.cjs.prod.js');
+var ValNextProvider = require('./ValNextProvider-96d1c795.cjs.prod.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValApp = require('./ValApp-22147086.cjs.prod.js');
 var version = require('./version-a9a6a619.cjs.prod.js');
+require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -65,8 +67,45 @@ function getUnpatchedUnencodedVal(selector) {
   });
 }
 
-function decodeValPathOfString(encodedString) {
-  return stega.stegaDecodeString(encodedString);
+function decodeValPathsOfString(encodedString) {
+  return stega.stegaDecodeStrings(encodedString);
+}
+
+function attrs(target) {
+  var allPaths = new Set();
+  function addPath(target) {
+    if (typeof target === "string") {
+      var paths = decodeValPathsOfString(target);
+      if (paths) {
+        var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(paths),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var path = _step.value;
+            allPaths.add(path);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    }
+    if (_typeof._typeof(target) === "object" && target !== null) {
+      var _path = core.Internal.getValPath(target);
+      if (_path) {
+        allPaths.add(_path);
+      }
+      Object.values(target).forEach(addPath);
+    }
+  }
+  addPath(target);
+  if (allPaths.size === 0) {
+    return {};
+  }
+  return {
+    "data-val-path": Array.from(allPaths).join(",")
+  };
 }
 
 var nextAppRouter = core.Internal.nextAppRouter;
@@ -82,28 +121,8 @@ var initVal = function initVal(config) {
     c: c,
     nextAppRouter: nextAppRouter,
     val: objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, val), {}, {
-      attrs: function attrs(target) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var anyTarget = target;
-        var path;
-        if (target === null) {
-          return {};
-        }
-        path = core.Internal.getValPath(anyTarget);
-        if (!path && _typeof._typeof(anyTarget) === "object") {
-          path = anyTarget["valPath"];
-        }
-        if (typeof anyTarget === "string") {
-          path = decodeValPathOfString(anyTarget);
-        }
-        if (path) {
-          return {
-            "data-val-path": path
-          };
-        }
-        return {};
-      },
-      unstable_decodeValPathOfString: decodeValPathOfString,
+      attrs: attrs,
+      unstable_decodeValPathsOfString: decodeValPathsOfString,
       raw: raw,
       unstable_getUnpatchedUnencodedVal: getUnpatchedUnencodedVal
     }),
@@ -145,11 +164,22 @@ function ValImage(props) {
     disableHotspot = props.disableHotspot,
     height = props.height,
     rest = _objectWithoutProperties(props, _excluded);
-  var valPathOfUrl = (src === null || src === void 0 ? void 0 : src.url) && decodeValPathOfString(src.url);
-  var valPaths = [valPathOfUrl];
-  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
+  var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
   if (maybeValPathOfAlt) {
-    valPaths.push(maybeValPathOfAlt);
+    var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(maybeValPathOfAlt),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var valPath = _step.value;
+        valPaths.push(valPath);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   }
   var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
   var imageStyle = hotspot && !disableHotspot ? objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, style), {}, {
@@ -164,10 +194,10 @@ function ValImage(props) {
     lazyBoundary: undefined,
     lazyRoot: undefined
   })), {}, {
-    src: valPathOfUrl ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
+    src: valPathsOfUrl && valPathsOfUrl.length > 0 ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
     "data-val-path": valPaths.join(","),
     "data-val-attr-alt": maybeValPathOfAlt,
-    "data-val-attr-src": valPathOfUrl,
+    "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
     alt: alt ? raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
     fill: rest.fill,

package/dist/valbuild-next.esm.js

@@ -1,16 +1,18 @@
-import { _ as _typeof } from './typeof-a1531d8f.esm.js';
 import { _ as _objectSpread2 } from './objectSpread2-c1340c1c.esm.js';
 import { Internal as Internal$1, initVal as initVal$1 } from '@valbuild/core';
 import * as core from '@valbuild/core';
 export { core as expr };
 export { FILE_REF_PROP, GenericSelector, Schema, VAL_EXTENSION, derefPatch, modules } from '@valbuild/core';
-import { stegaClean, stegaEncode, stegaDecodeString, autoTagJSX } from '@valbuild/react/stega';
+import { _ as _typeof } from './typeof-a1531d8f.esm.js';
+import { stegaClean, stegaEncode, stegaDecodeStrings, autoTagJSX } from '@valbuild/react/stega';
+import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 export { ValRichText } from '@valbuild/react/internal';
-import { ValNextProvider } from './ValNextProvider-abf09691.esm.js';
+import { ValNextProvider } from './ValNextProvider-25a03cab.esm.js';
 import NextImage from 'next/image';
 import { jsx } from 'react/jsx-runtime';
 export { ValApp } from './ValApp-e2e1dfed.esm.js';
 import { V as VERSION } from './version-98ec5c7a.esm.js';
+import './unsupportedIterableToArray-5baabfdc.esm.js';
 
 function raw(val) {
   if (typeof val === "string") {
@@ -41,8 +43,45 @@ function getUnpatchedUnencodedVal(selector) {
   });
 }
 
-function decodeValPathOfString(encodedString) {
-  return stegaDecodeString(encodedString);
+function decodeValPathsOfString(encodedString) {
+  return stegaDecodeStrings(encodedString);
+}
+
+function attrs(target) {
+  var allPaths = new Set();
+  function addPath(target) {
+    if (typeof target === "string") {
+      var paths = decodeValPathsOfString(target);
+      if (paths) {
+        var _iterator = _createForOfIteratorHelper(paths),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var path = _step.value;
+            allPaths.add(path);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    }
+    if (_typeof(target) === "object" && target !== null) {
+      var _path = Internal$1.getValPath(target);
+      if (_path) {
+        allPaths.add(_path);
+      }
+      Object.values(target).forEach(addPath);
+    }
+  }
+  addPath(target);
+  if (allPaths.size === 0) {
+    return {};
+  }
+  return {
+    "data-val-path": Array.from(allPaths).join(",")
+  };
 }
 
 var nextAppRouter = Internal$1.nextAppRouter;
@@ -58,28 +97,8 @@ var initVal = function initVal(config) {
     c: c,
     nextAppRouter: nextAppRouter,
     val: _objectSpread2(_objectSpread2({}, val), {}, {
-      attrs: function attrs(target) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var anyTarget = target;
-        var path;
-        if (target === null) {
-          return {};
-        }
-        path = Internal$1.getValPath(anyTarget);
-        if (!path && _typeof(anyTarget) === "object") {
-          path = anyTarget["valPath"];
-        }
-        if (typeof anyTarget === "string") {
-          path = decodeValPathOfString(anyTarget);
-        }
-        if (path) {
-          return {
-            "data-val-path": path
-          };
-        }
-        return {};
-      },
-      unstable_decodeValPathOfString: decodeValPathOfString,
+      attrs: attrs,
+      unstable_decodeValPathsOfString: decodeValPathsOfString,
       raw: raw,
       unstable_getUnpatchedUnencodedVal: getUnpatchedUnencodedVal
     }),
@@ -121,11 +140,22 @@ function ValImage(props) {
     disableHotspot = props.disableHotspot,
     height = props.height,
     rest = _objectWithoutProperties(props, _excluded);
-  var valPathOfUrl = (src === null || src === void 0 ? void 0 : src.url) && decodeValPathOfString(src.url);
-  var valPaths = [valPathOfUrl];
-  var maybeValPathOfAlt = decodeValPathOfString(alt);
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
+  var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
   if (maybeValPathOfAlt) {
-    valPaths.push(maybeValPathOfAlt);
+    var _iterator = _createForOfIteratorHelper(maybeValPathOfAlt),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var valPath = _step.value;
+        valPaths.push(valPath);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   }
   var hotspot = src === null || src === void 0 || (_src$metadata = src.metadata) === null || _src$metadata === void 0 ? void 0 : _src$metadata.hotspot;
   var imageStyle = hotspot && !disableHotspot ? _objectSpread2(_objectSpread2({}, style), {}, {
@@ -140,10 +170,10 @@ function ValImage(props) {
     lazyBoundary: undefined,
     lazyRoot: undefined
   })), {}, {
-    src: valPathOfUrl ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
+    src: valPathsOfUrl && valPathsOfUrl.length > 0 ? raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
     "data-val-path": valPaths.join(","),
     "data-val-attr-alt": maybeValPathOfAlt,
-    "data-val-attr-src": valPathOfUrl,
+    "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
     style: imageStyle,
     alt: alt ? raw(alt) : src !== null && src !== void 0 && (_src$metadata3 = src.metadata) !== null && _src$metadata3 !== void 0 && _src$metadata3.alt ? raw(src === null || src === void 0 || (_src$metadata4 = src.metadata) === null || _src$metadata4 === void 0 ? void 0 : _src$metadata4.alt) : "",
     fill: rest.fill,

package/package.json

@@ -4,7 +4,7 @@
   "private": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/valbuild/val.git"
+    "url": "git+https://github.com/valbuild/val.git"
   },
   "sideEffects": true,
   "keywords": [
@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.87.5",
+  "version": "0.89.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -49,11 +49,11 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.87.5",
-    "@valbuild/react": "~0.87.5",
-    "@valbuild/server": "~0.87.5",
-    "@valbuild/shared": "~0.87.5",
-    "@valbuild/ui": "~0.87.5",
+    "@valbuild/core": "~0.89.0",
+    "@valbuild/react": "~0.89.0",
+    "@valbuild/server": "~0.89.0",
+    "@valbuild/shared": "~0.89.0",
+    "@valbuild/ui": "~0.89.0",
     "client-only": "^0.0.1",
     "server-only": "^0.0.1"
   },

package/dist/ValNextProvider-af07de36.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValNextProvider-af07de36.cjs.prod.js");
-} else {
-  module.exports = require("./ValNextProvider-af07de36.cjs.dev.js");
-}

package/dist/declarations/src/decodeValPathOfString.d.ts

@@ -1,2 +0,0 @@
-import { ValEncodedString } from "@valbuild/react/stega";
-export declare function decodeValPathOfString(encodedString: ValEncodedString): string | undefined;