@walkeros/explorer 4.8.0-next-1791441510508 → 4.8.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @walkeros/explorer
 
-## 4.8.0-next-1791441510508
+## 4.8.0
 
 ### Minor Changes
 
@@ -11,9 +11,19 @@
   colour and font constants from `@walkeros/explorer/design`. A
   `walkeros-design-check` command lints consuming code. Existing exports are
   unchanged.
+- aa4bb8b: Add `Playground`: a tagged component, its event, an editable mapping
+  and the resulting gtag call side by side, on one real flow (`startFlow`, the
+  browser source scoped to a shadow root, and the gtag destination with a
+  stubbed `gtag`). `@walkeros/web-destination-gtag` is now a runtime dependency.
 
 ### Patch Changes
 
+- 7132619: `@walkeros/explorer/design/components` gains `BrowserFrame`, a
+  browser window on the site theme around any page: an address field with the
+  URL, an optional reload button, a slot for the caller's actions and an
+  optional bookmarks row that marks the current page. It is sized by its caller
+  and styled by `@walkeros/explorer/styles.css`. `Icon` gains `lock`, `reload`
+  and `bookmark`.
 - d5cbc9c: New `@walkeros/explorer/design/components` export with `Button`,
   `InlineCode` and `EventLegend`, styled by `@walkeros/explorer/styles.css`.
   `Button` forwards tagging attributes to its element and accepts a router link
@@ -36,11 +46,34 @@
   as CSS variables: `--type-<style>-size`, `-line-height`, `-weight`, `-family`
   and, when the style sets one, `-tracking`. Components can take sizes and
   weights from the design system instead of fixed values.
+- 7132619: The `PromotionPlayground` and `LiveCode` mapping examples show events
+  and results again, and every failure says so in the box it concerns. `Preview`
+  takes a `collector` instead of `elb` and captures the page's events through
+  it; its document carries the design tokens, base rules and design atom styles,
+  so the demo product card is built from `Card`, `PhotoPlaceholder`, `Text` and
+  `Button`. The Playground drops its separate Code box and the `labelCode` prop:
+  the Preview's HTML, CSS and JS tabs edit the page. New props: `placeholder`
+  and `error` on `CodeBox`, `error` on `Box`, `boxWidth` on `Grid` for one row
+  of fixed-width boxes.
+- 7132619: New `ViewSource` component: wrap a tagged element, hover it and
+  toggle to its live HTML with the `data-elb` attributes, edited in place. Back
+  in Visual the element renders your edit and walkerOS picks up the new tags; a
+  Reset icon restores the original. New `ToggleButton`: one button that names
+  the option a click switches to, at a fixed width.
+- a4b03ba: The five event colours (globals, context, entity, property, action)
+  now have a light-theme value that reads as text on light backgrounds. Their
+  constants in `@walkeros/explorer/design` are now `{ dark, light }` objects,
+  like every other themed colour; read `.dark` where the colour sits on a dark
+  ground.
+- Updated dependencies [7132619]
 - Updated dependencies [5593d7b]
-  - @walkeros/core@4.8.0-next-1791441510508
-  - @walkeros/collector@4.8.0-next-1791441510508
-  - @walkeros/web-core@4.8.0-next-1791441510508
-  - @walkeros/web-source-browser@4.8.0-next-1791441510508
+- Updated dependencies [421233d]
+- Updated dependencies [5593d7b]
+  - @walkeros/core@4.8.0
+  - @walkeros/web-destination-gtag@4.8.0
+  - @walkeros/collector@4.8.0
+  - @walkeros/web-core@4.8.0
+  - @walkeros/web-source-browser@4.8.0
 
 ## 4.7.2
 

package/README.md

@@ -32,10 +32,10 @@ import { CodeBox } from '@walkeros/explorer';
 ```
 
 In a Tailwind v4 build, import `@walkeros/explorer/design/tailwind.css` after
-`@import "tailwindcss"` instead of `tokens.css`: it brings the tokens and a
-utility for every design colour and type style.
-`@walkeros/explorer/design/base.css` adds optional page-wide base rules (font,
-colours, focus ring, selection).
+`@import "tailwindcss"` instead of `tokens.css`: it brings the tokens, a utility
+for every design colour and type style, `max-w-*` widths in px and `transition`
+utilities on the design motion. `@walkeros/explorer/design/base.css` adds
+optional page-wide base rules (font, colours, focus ring, selection).
 
 ## Themes
 
@@ -60,7 +60,7 @@ Explorer ships the walkerOS design system:
 | `@walkeros/explorer/design/tokens.css`   | The design tokens as CSS custom properties                                                                                   |
 | `@walkeros/explorer/design/tailwind.css` | The tokens as a Tailwind v4 theme                                                                                            |
 | `@walkeros/explorer/design/base.css`     | Optional base rules for a whole page                                                                                         |
-| `@walkeros/explorer/design`              | The token values as constants, for code that cannot read CSS variables                                                       |
+| `@walkeros/explorer/design`              | The token values as constants (colours, fonts, type styles, motion), for code that cannot read CSS variables                 |
 | `@walkeros/explorer/design/components`   | React building blocks of walkerOS pages (`Button`, `InlineCode`, `EventLegend` and more), with no Monaco or walkerOS runtime |
 
 The `walkeros-design-check` command checks a package's own styles against the

package/dist/design/base.css

@@ -3,19 +3,18 @@
  * tokens.css. Explorer's own reset stays scoped to .elb-explorer.
  */
 @layer base {
-  :root,
-  :host,
-  [data-theme] {
-    --motion: 180ms;
-    --ease: cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  /* The one media query of the design system. */
+  /*
+   * tokens.css sets --motion to 0ms for reduced motion; this guard also stops
+   * animations, transitions with their own durations and smooth scrolling.
+   */
   @media (prefers-reduced-motion: reduce) {
-    :root,
-    :host,
-    [data-theme] {
-      --motion: 0ms;
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
     }
   }
 

package/dist/design/check.mjs

@@ -54,6 +54,7 @@ function globToRegExp(glob) {
 var TAILWIND_RESET_NAMESPACES = [
   "color",
   "radius",
+  "container",
   "font",
   "text",
   "shadow",
@@ -66,7 +67,6 @@ var TAILWIND_KEPT_NAMESPACES = [
   "aspect",
   "blur",
   "breakpoint",
-  "container",
   "default",
   "ease",
   "font-weight",
@@ -105,11 +105,14 @@ var RULES = [
   "shadow-class",
   "z-class",
   "text-size-class",
+  "motion-class",
   "radius-class",
   "var-fallback",
   "undeclared-var",
   "color-scheme",
-  "z-index"
+  "z-index",
+  "motion-literal",
+  "font-literal"
 ];
 var NAMED_COLORS = new Set(
   `aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown
@@ -135,6 +138,7 @@ var COLOR_UTILITY = "bg|text|border(?:-[xytrblse])?|outline|ring(?:-offset)?|div
 var START = "(?<![A-Za-z0-9_-])";
 var END = "(?![A-Za-z0-9_-])";
 var SIDE = "(?:-(?:t|r|b|l|s|e|tl|tr|br|bl|ss|se|es|ee))?";
+var LITERAL_ARBITRARY = "\\[(?![^\\]]*var\\()[^\\]\\s]+\\]";
 var CLASS_RULES = [
   [
     "palette-class",
@@ -161,9 +165,21 @@ var CLASS_RULES = [
     )
   ],
   ["z-class", new RegExp(`${START}-?z-(?:\\d+|\\[-?\\d+\\])${END}`, "g")],
+  // An arbitrary size that reads a variable (`text-[length:var(--type-x-size)]`) is not flagged.
   [
     "text-size-class",
-    new RegExp(`${START}text-(?:xs|sm|base|lg|xl|[2-9]xl)${END}`, "g")
+    new RegExp(
+      `${START}text-(?:xs|sm|base|lg|xl|[2-9]xl|\\[(?:length:)?(?![^\\]]*var\\()(?:[\\d.]|(?:calc|clamp|min|max)\\()[^\\]\\s]*\\])${END}`,
+      "g"
+    )
+  ],
+  // Tailwind's transition utilities read --motion and --ease; a zero duration, delay-* and animate-* are not flagged.
+  [
+    "motion-class",
+    new RegExp(
+      `${START}(?:duration-(?:[1-9]\\d*|(?!\\[0m?s\\])${LITERAL_ARBITRARY})|ease-(?:in-out|in|out|linear|${LITERAL_ARBITRARY}))${END}`,
+      "g"
+    )
   ],
   // An arbitrary value that reads a design radius (`rounded-[calc(var(--radius-md)-1px)]`) is not flagged.
   [
@@ -187,8 +203,126 @@ var TAILWIND_VAR = /-\(--([A-Za-z0-9_-]+)\)/g;
 var COLOR_SCHEME = /prefers-color-scheme/g;
 var Z_INDEX_CSS = /(?<![A-Za-z0-9_-])z-index\s*:\s*-?\d+/g;
 var Z_INDEX_SCRIPT = /(?<![A-Za-z0-9_-])zIndex\s*:\s*['"]?-?\d+/g;
+var CSS_STYLE = /(?<![A-Za-z0-9_-])(font-size|font-family|font|transition-duration|transition-timing-function|transition)\s*:\s*((?:\$\{[^}]*\}|[^;{}\]])+)/g;
+var SCRIPT_STYLE = /(?<![A-Za-z0-9_-])(fontSize|fontFamily|transitionDuration|transitionTimingFunction|transition)\s*(?::|=\{?)\s*('(?:\\.|[^'\\\n])*'|"(?:\\.|[^"\\\n])*"|`(?:\\.|[^`\\])*`|\d*\.?\d+(?![\w.]))/g;
+var NUMBER = /^\d*\.?\d+$/;
+var QUOTED = /^(['"`])([\s\S]*)\1$/;
+var MOTION_LITERAL = /(?<![A-Za-z0-9-])(?:cubic-bezier|steps|linear)\([^)]*\)|(?<![A-Za-z0-9.-])(?:(?:\d+(?:\.\d+)?|\.\d+)m?s|ease-in-out|ease-in|ease-out|ease|linear|step-start|step-end)(?![A-Za-z0-9-])/g;
+var LENGTH = "(?:\\d+(?:\\.\\d+)?|\\.\\d+)(?:px|rem|em|pt|%|vw|vh|vmin|vmax|ch|ex|lh|rlh|cqw|cqh|cqi)";
+var SIZE_LITERAL = new RegExp(
+  `(?<![A-Za-z0-9.-])(?:${LENGTH}|xxx-large|xx-large|x-large|xx-small|x-small|smaller|small|medium|larger|large)(?![A-Za-z0-9-])`,
+  "g"
+);
+var VARIABLE_DECLARATION = /(?<![A-Za-z0-9_-])(--[A-Za-z0-9_-]+|\$[A-Za-z_][\w-]*)['"]?\s*:\s*['"`]?([^;{}'"`\n\]]+)/g;
+var VARIABLE_READ = /var\(\s*(--[A-Za-z0-9_-]+)|(?<![\w-])(\$[A-Za-z_][\w-]*)/g;
+var MOTION_TOKEN = new RegExp(
+  `var\\(--motion\\)|${MOTION_LITERAL.source}`,
+  "g"
+);
+var FONT_KEYWORD = /(?<![\w-])(?:normal|italic|oblique|small-caps|bold|bolder|lighter|(?:ultra-|extra-|semi-)?(?:condensed|expanded))(?![\w-])/g;
+var FLUID_TYPE = /clamp\((?:[^()]|\([^()]*\))*,\s*var\(--type-[a-z0-9-]+-size\)\s*\)/g;
+var COMMENT = /\/\*[\s\S]*?\*\/|(?<=^|\s)\/\/[^\n]*/g;
+var FONT_FACE = /@font-face\s*\{[^}]*\}/g;
+var CSS_WIDE = /* @__PURE__ */ new Set([
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
 var STRING_LITERAL = /'(?:\\.|[^'\\\n])*'|"(?:\\.|[^"\\\n])*"|`(?:\\.|[^`\\])*`/g;
 var APPLY = /@apply\s+[^;}]+/g;
+var SCRIPT_TOKEN = new RegExp(
+  `${STRING_LITERAL.source}|\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/`,
+  "g"
+);
+var within = (regions, index) => regions.some(
+  (region) => index >= region.offset && index < region.offset + region.text.length
+);
+function literalFamily(value) {
+  let rest = value.replace(/\$\{[^}]*\}/g, " ").replace(/!important/g, " ");
+  for (let previous = ""; previous !== rest; ) {
+    previous = rest;
+    rest = rest.replace(/var\([^()]*\)/g, " ");
+  }
+  return (rest.match(/[A-Za-z0-9_-]+/g) ?? []).some(
+    (word) => !CSS_WIDE.has(word)
+  );
+}
+function shorthandFamily(value) {
+  return literalFamily(
+    value.replace(SIZE_LITERAL, " ").replace(/(?<![\w.-])\d*\.?\d+(?![\w.])/g, " ").replace(FONT_KEYWORD, " ").replace(/(?<![\w-])(?:calc|clamp|min|max)\(/g, "(").replace(/\//g, " ")
+  );
+}
+var blank = (text) => text.replace(/[^\n]/g, " ");
+function commaItems(value) {
+  const commas = [];
+  let depth = 0;
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === "(") depth++;
+    else if (value[i] === ")") depth--;
+    else if (value[i] === "," && depth === 0) commas.push(i);
+  }
+  return (index) => commas.filter((comma) => comma < index).length;
+}
+function localLiteralLengths(file, text) {
+  const code = STYLE_FILE.test(file) ? text.replace(COMMENT, blank) : text.replace(
+    SCRIPT_TOKEN,
+    (token) => token.startsWith("/") ? blank(token) : token
+  );
+  const names = /* @__PURE__ */ new Set();
+  forEachMatch(VARIABLE_DECLARATION, code, (match) => {
+    if (new RegExp(LENGTH).test(match[2]) && !/var\(|\$/.test(match[2]))
+      names.add(match[1]);
+  });
+  return names;
+}
+function styleValue(property, value, index, { add, motionValues, literalLengths }) {
+  const scanned = value.replace(/\$\{[^}]*\}/g, blank);
+  const bare = QUOTED.exec(value)?.[2] ?? value;
+  const asWritten = value.replace(/\s+/g, " ").trim();
+  if (property.startsWith("transition")) {
+    motionValues.push({ offset: index, text: value });
+    if (NUMBER.test(bare)) {
+      if (property === "transitionDuration")
+        add("motion-literal", index, value);
+      return;
+    }
+    const item = commaItems(value);
+    const timed = /* @__PURE__ */ new Set();
+    forEachMatch(MOTION_TOKEN, scanned, (match) => {
+      const time = /^[\d.]/.test(match[0]);
+      if (time || match[0] === "var(--motion)") {
+        const n = item(match.index);
+        if (property === "transition" && timed.has(n)) return;
+        timed.add(n);
+        if (!time || parseFloat(match[0]) === 0) return;
+      }
+      add("motion-literal", index + match.index, match[0]);
+    });
+  } else if (property === "font-family" || property === "fontFamily") {
+    if (literalFamily(value)) add("font-literal", index, asWritten);
+  } else if (NUMBER.test(bare)) {
+    add("font-literal", index, value);
+  } else {
+    const fluid = [];
+    forEachMatch(
+      FLUID_TYPE,
+      scanned,
+      (match) => fluid.push({ offset: match.index, text: match[0] })
+    );
+    forEachMatch(SIZE_LITERAL, scanned, (match) => {
+      if (!within(fluid, match.index))
+        add("font-literal", index + match.index, match[0]);
+    });
+    forEachMatch(VARIABLE_READ, scanned, (match) => {
+      if (literalLengths.has(match[1] ?? match[2]))
+        add("font-literal", index + match.index, match[0]);
+    });
+    if (property === "font" && shorthandFamily(value))
+      add("font-literal", index, asWritten);
+  }
+}
 function classRegions(style, text) {
   const regions = [];
   forEachMatch(
@@ -248,13 +382,48 @@ function scanFile(file, text, context) {
         add("named-color", match.index, match[1]);
     });
   }
-  for (const region of classRegions(style, text)) {
+  const regions = classRegions(style, text);
+  const fontFaces = [];
+  forEachMatch(
+    FONT_FACE,
+    text,
+    (match) => fontFaces.push({ offset: match.index, text: match[0] })
+  );
+  const scan = {
+    add,
+    motionValues: [],
+    literalLengths: context.literalLengths
+  };
+  const cssRegions = style ? [{ offset: 0, text }] : regions;
+  for (const region of cssRegions) {
+    const css = region.text.replace(COMMENT, blank);
+    forEachMatch(CSS_STYLE, css, (match) => {
+      const index = region.offset + match.index + match[0].length - match[2].length;
+      if (!within(fontFaces, index))
+        styleValue(match[1], match[2], index, scan);
+    });
+  }
+  if (!style)
+    forEachMatch(
+      SCRIPT_STYLE,
+      text.replace(
+        SCRIPT_TOKEN,
+        (token) => token.startsWith("/") ? blank(token) : token
+      ),
+      (match) => styleValue(
+        match[1],
+        match[2],
+        match.index + match[0].length - match[2].length,
+        scan
+      )
+    );
+  for (const region of regions) {
     for (const [rule, pattern] of CLASS_RULES) {
-      forEachMatch(
-        pattern,
-        region.text,
-        (match) => add(rule, region.offset + match.index, match[0])
-      );
+      forEachMatch(pattern, region.text, (match) => {
+        const index = region.offset + match.index;
+        if (rule !== "motion-class" || !within(scan.motionValues, index))
+          add(rule, index, match[0]);
+      });
     }
   }
   const declared = (name) => context.declaredNames.has(name) || TAILWIND_VARIABLES.some((prefix) => name.startsWith(prefix)) || context.allowVarPrefixes.some((prefix) => name.startsWith(prefix));
@@ -419,7 +588,11 @@ function main(argv, io) {
     declaredNames: collectDeclaredNames(
       sources.map((source) => source.text).join("\n")
     ),
-    allowVarPrefixes
+    allowVarPrefixes,
+    // A literal behind a local name: scanned files only, never a design name.
+    literalLengths: new Set(
+      scanned.flatMap((source) => [...localLiteralLengths(source.file, source.text)]).filter((name) => !designNames.has(name.replace(/^--/, "")))
+    )
   };
   const findings = scanned.flatMap((source) => scanFile(source.file, source.text, context)).filter((finding) => !ruleAllowed(finding));
   for (const finding of findings) {