@colixsystems/widget-sdk 0.149.1 → 0.150.0

package/dist/emoji-picker-tokens.js

@@ -0,0 +1,68 @@
+// sc-8104 — the values `<EmojiPicker>` is painted with, and its recents store.
+//
+// Presentation-free like ./overlay-tokens.js: both hosts render the picker
+// from the SAME component, and this is where the theme becomes numbers.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+
+export const EMOJI_PICKER_DEFAULTS = Object.freeze({
+  // Fits a comfortable grid at phone width without shrinking the glyph.
+  cellSize: 40,
+  glyphSize: 24,
+  recentsCap: 24,
+  searchLimit: 60,
+});
+
+export function resolveEmojiPickerTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const radii = base.radii || fallback.radii;
+  const spacing = base.spacing || fallback.spacing;
+
+  return {
+    surface: colors.surface || fallback.colors.surface,
+    surfaceMuted: colors.surfaceMuted || fallback.colors.surfaceMuted,
+    onSurface: colors.onSurface || fallback.colors.onSurface,
+    onSurfaceMuted: colors.onSurfaceMuted || fallback.colors.onSurfaceMuted,
+    border: colors.border || fallback.colors.border,
+    primary: colors.primary || fallback.colors.primary,
+    radius: radii.md || fallback.radii.md,
+    gap: spacing.sm || fallback.spacing.sm,
+    padding: spacing.md || fallback.spacing.md,
+    cellSize: EMOJI_PICKER_DEFAULTS.cellSize,
+    glyphSize: EMOJI_PICKER_DEFAULTS.glyphSize,
+  };
+}
+
+/** Most-recent-first, de-duplicated, capped. Pure so the host can persist it. */
+export function pushRecentEmoji(recents, emoji, cap = EMOJI_PICKER_DEFAULTS.recentsCap) {
+  if (typeof emoji !== "string" || !emoji) return Array.isArray(recents) ? recents : [];
+  const rest = (Array.isArray(recents) ? recents : []).filter((e) => e !== emoji);
+  return [emoji, ...rest].slice(0, Math.max(0, cap));
+}
+
+/**
+ * Insert text at the caret, returning the new value and where the caret lands.
+ * A composer inserts mid-draft rather than appending, so the selection has to
+ * move with the insertion.
+ */
+export function insertAtCaret(value, insertion, selection) {
+  const text = typeof value === "string" ? value : "";
+  const add = typeof insertion === "string" ? insertion : "";
+  const rawStart = selection?.start;
+  const rawEnd = selection?.end;
+  const start = clampIndex(rawStart, text.length, text.length);
+  const end = clampIndex(rawEnd, text.length, start);
+  const from = Math.min(start, end);
+  const to = Math.max(start, end);
+  return {
+    value: text.slice(0, from) + add + text.slice(to),
+    caret: from + add.length,
+  };
+}
+
+function clampIndex(value, max, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.min(Math.max(0, Math.trunc(value)), max);
+}

package/dist/emoji-picker-view.js

@@ -0,0 +1,193 @@
+// sc-8104 — the ONE implementation behind the `<EmojiPicker>` SDK primitive.
+//
+// Typed emoji already worked on both hosts; what forced users out to the OS
+// keyboard was having no in-app way to PICK one. The picker serves both the
+// composer (insert into a draft) and the reaction flow (start a new emoji
+// group), so it is one shared component bound per host the way `<Overlay>` is
+// (./overlay-view.js) — the hosts cannot drift (CLAUDE.md §3, §8).
+//
+// It renders INSIDE the SDK `Overlay`, which already escapes widget clipping
+// on both hosts, so a picker opened from a card is never cut off.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { resolveEmojiPickerTokens, EMOJI_PICKER_DEFAULTS, pushRecentEmoji } from "./emoji-picker-tokens.js";
+import { EMOJI_CATEGORIES, emojiForCategory, searchEmoji } from "./emoji-data.js";
+
+const RECENTS_KEY = "recent";
+
+/**
+ * Bind the shared emoji picker to one platform's primitives.
+ *
+ * @param {{Overlay, View, Text, Pressable, ScrollView, TextInput}} rn
+ */
+export function makeEmojiPicker(rn) {
+  const { Overlay, View, Text, Pressable, ScrollView, TextInput } = rn;
+
+  function EmojiPicker({
+    visible = false,
+    onSelect,
+    onRequestClose,
+    recents,
+    onRecentsChange,
+    accessibilityLabel = "Choose an emoji",
+    closeAccessibilityLabel = "Close the emoji picker",
+    searchPlaceholder = "Search emoji",
+  }) {
+    const theme = useHostTheme();
+    const tokens = React.useMemo(() => resolveEmojiPickerTokens(theme), [theme]);
+    const [query, setQuery] = React.useState("");
+    const [category, setCategory] = React.useState(EMOJI_CATEGORIES[0].key);
+
+    const safeRecents = React.useMemo(
+      () => (Array.isArray(recents) ? recents.filter((e) => typeof e === "string" && e) : []),
+      [recents],
+    );
+
+    // Reopening with a stale query would show yesterday's search, not the grid.
+    React.useEffect(() => {
+      if (!visible) return;
+      setQuery("");
+      setCategory(safeRecents.length ? RECENTS_KEY : EMOJI_CATEGORIES[0].key);
+    }, [visible, safeRecents.length]);
+
+    const trimmed = query.trim();
+    const results = React.useMemo(() => {
+      if (trimmed) return searchEmoji(trimmed, EMOJI_PICKER_DEFAULTS.searchLimit);
+      if (category === RECENTS_KEY) return safeRecents.map((char) => ({ char, name: char }));
+      return emojiForCategory(category);
+    }, [trimmed, category, safeRecents]);
+
+    const handleSelect = React.useCallback(
+      (char) => {
+        if (typeof onRecentsChange === "function") {
+          onRecentsChange(pushRecentEmoji(safeRecents, char));
+        }
+        if (typeof onSelect === "function") onSelect(char);
+      },
+      [onSelect, onRecentsChange, safeRecents],
+    );
+
+    const tabs = safeRecents.length
+      ? [{ key: RECENTS_KEY, label: "Recent" }, ...EMOJI_CATEGORIES]
+      : EMOJI_CATEGORIES;
+
+    return React.createElement(
+      Overlay,
+      {
+        visible,
+        onRequestClose,
+        size: "md",
+        accessibilityLabel,
+        closeAccessibilityLabel,
+      },
+      React.createElement(
+        View,
+        { style: { gap: tokens.gap }, testID: "emoji-picker" },
+        React.createElement(TextInput, {
+          testID: "emoji-picker-search",
+          value: query,
+          onChangeText: setQuery,
+          placeholder: searchPlaceholder,
+          placeholderTextColor: tokens.onSurfaceMuted,
+          accessibilityLabel: searchPlaceholder,
+          style: {
+            color: tokens.onSurface,
+            backgroundColor: tokens.surfaceMuted,
+            borderRadius: tokens.radius,
+            paddingHorizontal: tokens.padding,
+            paddingVertical: tokens.gap,
+            fontSize: 14,
+          },
+        }),
+
+        // Category tabs are hidden while searching: results already span them.
+        trimmed
+          ? null
+          : React.createElement(
+              ScrollView,
+              { horizontal: true, showsHorizontalScrollIndicator: false, testID: "emoji-picker-tabs" },
+              React.createElement(
+                View,
+                { style: { flexDirection: "row", gap: tokens.gap } },
+                tabs.map((tab) =>
+                  React.createElement(
+                    Pressable,
+                    {
+                      key: tab.key,
+                      testID: `emoji-picker-tab-${tab.key}`,
+                      onPress: () => setCategory(tab.key),
+                      accessibilityRole: "tab",
+                      accessibilityLabel: tab.label,
+                      "aria-selected": category === tab.key,
+                      style: {
+                        paddingHorizontal: tokens.padding,
+                        paddingVertical: tokens.gap,
+                        borderRadius: tokens.radius,
+                        backgroundColor:
+                          category === tab.key ? tokens.surfaceMuted : "transparent",
+                      },
+                    },
+                    React.createElement(
+                      Text,
+                      {
+                        style: {
+                          fontSize: 12,
+                          fontWeight: "600",
+                          color: category === tab.key ? tokens.primary : tokens.onSurfaceMuted,
+                        },
+                      },
+                      tab.label,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+
+        React.createElement(
+          ScrollView,
+          { style: { maxHeight: 280 }, testID: "emoji-picker-grid" },
+          results.length
+            ? React.createElement(
+                View,
+                { style: { flexDirection: "row", flexWrap: "wrap" } },
+                results.map((entry) =>
+                  React.createElement(
+                    Pressable,
+                    {
+                      key: entry.char,
+                      testID: `emoji-picker-option-${entry.char}`,
+                      onPress: () => handleSelect(entry.char),
+                      accessibilityRole: "button",
+                      accessibilityLabel: entry.name || entry.char,
+                      style: {
+                        width: tokens.cellSize,
+                        height: tokens.cellSize,
+                        alignItems: "center",
+                        justifyContent: "center",
+                      },
+                    },
+                    React.createElement(
+                      Text,
+                      { style: { fontSize: tokens.glyphSize, lineHeight: tokens.cellSize } },
+                      entry.char,
+                    ),
+                  ),
+                ),
+              )
+            : React.createElement(
+                Text,
+                {
+                  testID: "emoji-picker-empty",
+                  style: { color: tokens.onSurfaceMuted, fontSize: 13, padding: tokens.padding },
+                },
+                "No emoji found",
+              ),
+        ),
+      ),
+    );
+  }
+
+  EmojiPicker.displayName = "EmojiPicker";
+  return EmojiPicker;
+}

package/dist/emoji-picker.js

@@ -0,0 +1,14 @@
+// sc-8104 — `<EmojiPicker>` (web). Binds the shared implementation in
+// ./emoji-picker-view.js to react-native-web's primitives plus the web
+// `<Overlay>`, so the picker escapes the widget's clipping ancestors the same
+// way every other SDK overlay does.
+//
+// The import is `react-native-web` rather than the bare `react-native`
+// specifier for the rolldown optional-peer-dep reason at the top of
+// ./primitives.js.
+
+import * as ReactNative from "react-native-web";
+import { makeEmojiPicker } from "./emoji-picker-view.js";
+import { Overlay } from "./overlay.js";
+
+export const EmojiPicker = makeEmojiPicker({ ...ReactNative, Overlay });

package/dist/emoji-picker.native.js

@@ -0,0 +1,16 @@
+// sc-8104 — `<EmojiPicker>` (native). Binds the shared implementation in
+// ./emoji-picker-view.js to React Native's own primitives plus the native
+// `<Overlay>`. Only the imports differ from the web mirror (./emoji-picker.js).
+
+import { View, Text, Pressable, ScrollView, TextInput } from "react-native";
+import { makeEmojiPicker } from "./emoji-picker-view.js";
+import { Overlay } from "./overlay.native.js";
+
+export const EmojiPicker = makeEmojiPicker({
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  TextInput,
+  Overlay,
+});

package/dist/emoji-reactions.js

@@ -0,0 +1,167 @@
+// sc-8104 — the ONE reaction model behind Slack-style emoji reactions.
+//
+// Newsfeed and Chat both render per-emoji pills over rows of a Reactions
+// table, so the grouping, the self-reaction rule and the legacy-slug mapping
+// live here once rather than in each widget (CLAUDE.md §3). Presentation-free
+// and platform-free like ./overlay-tokens.js: the maths is unit-testable
+// without a renderer, and both hosts render it from the same numbers (§8).
+
+import { isEmojiChar } from "./emoji-data.js";
+
+// Reactions shipped before this as five slugs plus the bare pre-set-era
+// `like`. Production holds those rows, so they are mapped at READ time and
+// keep counting; no backfill, and writes are emoji from here on (§7).
+export const LEGACY_REACTION_EMOJI = Object.freeze({
+  like: "👍",
+  love: "❤️",
+  laugh: "😂",
+  celebrate: "🎉",
+  sad: "😢",
+});
+
+// Looked up through a Map, never the object above: a stored "constructor" or
+// "__proto__" would resolve off Object.prototype and be counted as a reaction,
+// rendering a function as a React child and crashing the whole list.
+const LEGACY_BY_SLUG = new Map(Object.entries(LEGACY_REACTION_EMOJI));
+
+// What a plain tap writes, and what every legacy `like` row maps onto.
+export const DEFAULT_REACTION_EMOJI = LEGACY_REACTION_EMOJI.like;
+
+/**
+ * The emoji a stored Type value stands for, or null when it is neither a
+ * legacy slug nor an emoji we ship — a hand-edited value must not be counted.
+ */
+export function readReactionEmoji(value) {
+  if (typeof value !== "string" || !value) return null;
+  const legacy = LEGACY_BY_SLUG.get(value);
+  if (legacy) return legacy;
+  return isEmojiChar(value) ? value : null;
+}
+
+/** Whether a stored Type value counts at all. */
+export function isCountableReaction(value) {
+  return readReactionEmoji(value) !== null;
+}
+
+/**
+ * The emoji a stored ROW stands for. An unbound type column means every row is
+ * a plain default reaction, which is what rows written before the type set
+ * existed look like.
+ */
+export function rowReactionEmoji(row, typeField) {
+  if (!typeField) return DEFAULT_REACTION_EMOJI;
+  return readReactionEmoji(row?.[typeField]);
+}
+
+/**
+ * Whether one row is this user's reaction with this emoji — the set an
+ * un-react must clear, and the single predicate deciding add-vs-remove.
+ *
+ * Shared because each widget deriving it separately is how they drift: read
+ * against the ROW's stored value, never against the tapped emoji, or an
+ * unbound type column makes every row match whatever was tapped and the tap
+ * silently deletes an unrelated reaction (CLAUDE.md §3).
+ */
+export function isMyReactionRow(row, { typeField, userField, userId, emoji }) {
+  if (!userId || !emoji) return false;
+  if (readRelationId(row?.[userField]) !== userId) return false;
+  return rowReactionEmoji(row, typeField) === emoji;
+}
+
+/**
+ * Group reaction rows into per-emoji pills.
+ *
+ * One row per (target, user, emoji) is the invariant: a user may hold several
+ * DIFFERENT emoji on one target but never two rows of the same one, so each
+ * group de-duplicates by user. `mine` keeps every one of the current user's
+ * rows for that emoji, which is what lets an un-react clear duplicates a table
+ * already picked up.
+ *
+ * @returns {Array<{emoji, count, reactedByMe, userIds, rows, mine}>}
+ *   in descending count, ties broken by first appearance.
+ */
+export function groupReactions(rows, { typeField, userField, userId } = {}) {
+  const groups = new Map();
+  let order = 0;
+
+  for (const row of Array.isArray(rows) ? rows : []) {
+    // An unbound Type column means every row is a plain like, which is what
+    // rows written before the type set existed look like.
+    const stored = typeField ? row?.[typeField] : DEFAULT_REACTION_EMOJI;
+    const emoji = readReactionEmoji(stored);
+    if (!emoji) continue;
+
+    const rowUserId = readRelationId(row?.[userField]);
+    let group = groups.get(emoji);
+    if (!group) {
+      group = { emoji, order: order++, userIds: [], seen: new Set(), rows: [], mine: [] };
+      groups.set(emoji, group);
+    }
+    group.rows.push(row);
+    if (rowUserId && userId && rowUserId === userId) group.mine.push(row);
+    if (!rowUserId || group.seen.has(rowUserId)) continue;
+    group.seen.add(rowUserId);
+    group.userIds.push(rowUserId);
+  }
+
+  return [...groups.values()]
+    .map((group) => ({
+      emoji: group.emoji,
+      count: group.userIds.length,
+      reactedByMe: group.mine.length > 0,
+      userIds: group.userIds,
+      rows: group.rows,
+      mine: group.mine,
+      order: group.order,
+    }))
+    .filter((group) => group.count > 0)
+    .sort((a, b) => b.count - a.count || a.order - b.order)
+    .map(({ order: _order, ...group }) => group);
+}
+
+/**
+ * The groups a tap should produce before the write lands, so the pill moves on
+ * the tap rather than on the refetch. `pending` is a Map of emoji → boolean:
+ * true means "mine is being added", false "mine is being removed".
+ */
+export function applyPendingReactions(groups, pending, userId) {
+  if (!pending || pending.size === 0) return groups;
+  const byEmoji = new Map(groups.map((group) => [group.emoji, { ...group }]));
+
+  for (const [emoji, adding] of pending) {
+    const group = byEmoji.get(emoji);
+    if (adding) {
+      if (!group) {
+        byEmoji.set(emoji, {
+          emoji,
+          count: 1,
+          reactedByMe: true,
+          userIds: userId ? [userId] : [],
+          rows: [],
+          mine: [],
+        });
+      } else if (!group.reactedByMe) {
+        group.reactedByMe = true;
+        group.count += 1;
+        group.userIds = userId ? [...group.userIds, userId] : group.userIds;
+      }
+    } else if (group?.reactedByMe) {
+      group.reactedByMe = false;
+      group.count = Math.max(0, group.count - 1);
+      group.userIds = group.userIds.filter((id) => id !== userId);
+    }
+  }
+
+  return [...byEmoji.values()]
+    .filter((group) => group.count > 0)
+    .sort((a, b) => b.count - a.count);
+}
+
+function readRelationId(value) {
+  if (!value) return null;
+  if (typeof value === "string") return value || null;
+  if (typeof value === "object" && typeof value.id === "string") {
+    return value.id || null;
+  }
+  return null;
+}

package/dist/index.js

@@ -101,6 +101,9 @@ export { useToast } from "./toast.js";
 // each platform's primitives, so a widget's modal escapes its container box
 // identically on the Player and the Expo export.
 export { Overlay } from "./overlay.js";
+// sc-8104 — `<EmojiPicker>` is bound the same way, so the in-app picker that
+// serves both composers and the reaction flow renders identically on both hosts.
+export { EmojiPicker } from "./emoji-picker.js";
 // sc-6970 — formatted content. `<RichText>` renders the markdown subset and
 // `<MarkdownInput>` authors it; widgets have no HTML path on either host, so
 // these are the ONE way content with bold/headings/lists is written and shown.
@@ -158,6 +161,27 @@ export {
   clampSpacingScale,
   scaleSpacing,
 } from "./contract.js";
+// sc-8104 — the curated emoji set ships WITH the SDK (plain string data, no
+// dependency), and the reaction model is shared so Newsfeed and Chat group
+// and migrate reactions identically.
+export {
+  EMOJI_CATEGORIES,
+  EMOJI_LIST,
+  searchEmoji,
+  emojiForCategory,
+  isEmojiChar,
+} from "./emoji-data.js";
+export {
+  LEGACY_REACTION_EMOJI,
+  DEFAULT_REACTION_EMOJI,
+  readReactionEmoji,
+  isCountableReaction,
+  rowReactionEmoji,
+  isMyReactionRow,
+  groupReactions,
+  applyPendingReactions,
+} from "./emoji-reactions.js";
+export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
 export { pressableLift } from "./interaction.js";
 export { styleGroup } from "./style-group.js";

package/dist/index.native.js

@@ -97,6 +97,8 @@ export { useClipboard, ClipboardError } from "./clipboard.native.js";
 export { useToast } from "./toast.native.js";
 // sc-6607 — see the note on the web mirror in ./index.js.
 export { Overlay } from "./overlay.native.js";
+// sc-8104 — see the note on the web mirror in ./index.js.
+export { EmojiPicker } from "./emoji-picker.native.js";
 // sc-6970 — see the note on the web mirror in ./index.js.
 export { RichText } from "./richtext.native.js";
 export { MarkdownInput } from "./markdown-input.native.js";
@@ -152,6 +154,27 @@ export {
   clampSpacingScale,
   scaleSpacing,
 } from "./contract.js";
+// sc-8104 — the curated emoji set ships WITH the SDK (plain string data, no
+// dependency), and the reaction model is shared so Newsfeed and Chat group
+// and migrate reactions identically.
+export {
+  EMOJI_CATEGORIES,
+  EMOJI_LIST,
+  searchEmoji,
+  emojiForCategory,
+  isEmojiChar,
+} from "./emoji-data.js";
+export {
+  LEGACY_REACTION_EMOJI,
+  DEFAULT_REACTION_EMOJI,
+  readReactionEmoji,
+  isCountableReaction,
+  rowReactionEmoji,
+  isMyReactionRow,
+  groupReactions,
+  applyPendingReactions,
+} from "./emoji-reactions.js";
+export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
 export { pressableLift } from "./interaction.native.js";
 export { styleGroup } from "./style-group.js";

package/dist/linter.cjs

@@ -567,13 +567,13 @@ function _scopeRules(source, manifest) {
   }
 
   // sc-7991 — every send spends the workspace's AI credits, so the manifest has
-  // to declare the capability. This gate is ADVISORY, not an authorization
-  // boundary: unlike users/groups (minted into X-Widget-Scopes and checked
-  // server-side), nothing re-checks ai.invoke at call time, so a widget that
-  // evades this regex still reaches the endpoint. What actually bounds abuse is
-  // the app-user JWT, the per-actor and per-tenant limiters and the AI quota
-  // gate. The scope's real job is DISCLOSURE — it is what the marketplace
-  // install consent screen shows.
+  // to declare the capability. This gate is still ADVISORY: the scope itself is
+  // not minted into X-Widget-Scopes, so a widget that evades this regex still
+  // reaches the endpoint, and the scope's real job is DISCLOSURE — it is what
+  // the marketplace install consent screen shows.
+  // sc-8128 — but the endpoint is no longer unguarded: a turn is refused unless
+  // the agent is bound on a page the caller can read. Abuse is bounded by that,
+  // the app-user JWT, the per-actor and per-tenant limiters and the AI quota.
   if (/\buseAgent\s*\(/.test(source)) {
     const invokes = declared.has("ai.invoke:*") || declared.has("ai.invoke");
     if (!invokes) {
@@ -1596,6 +1596,19 @@ function _bracedSpan(code, from) {
   return null;
 }
 
+// The non-escape branch excludes `\` so the two branches can never both
+// match the same character. With a bare `.`, escape pairs before a quote
+// the anchor then rejects backtrack exponentially — 60 characters of an
+// authored widget draft wedge the single-threaded API pod for ~60s, on the
+// AI-widget-agent publish vet, not the package-upload path (sc-8051, sc-8041).
+//
+// It excludes the line terminators too, because a character class — unlike
+// `.` — matches them, which would widen the literal past its own line.
+// An odd trailing backslash run therefore no longer matches; `_bracedSpan`
+// shares the escape rule and never yields one.
+const _TEXT_LITERAL_CHILD_RE =
+  /^(["'`])((?:\\.|(?!\1)[^\\\r\n\u2028\u2029])*)\1$/;
+
 // Copy pinned in a `<Text>`: a bare literal child, or a braced child that is
 // NOTHING BUT a string literal (`{"Hello"}`) — the one-pair-of-braces evasion.
 // A braced expression carrying an identifier is left alone: it may already be
@@ -1618,8 +1631,7 @@ function _textLiteralOccurrences(codes, masks) {
       let text = null;
       if (code[i] === "{") {
         const inner = _bracedSpan(code, i);
-        const lit =
-          inner && inner.trim().match(/^(["'`])((?:\\.|(?!\1).)*)\1$/);
+        const lit = inner && inner.trim().match(_TEXT_LITERAL_CHILD_RE);
         // A template carrying `${…}` interpolates a value, so it is not a literal.
         if (lit && !(lit[1] === "`" && lit[2].includes("${"))) text = lit[2];
       } else {

package/dist/linter.js

@@ -530,13 +530,13 @@ function _scopeRules(source, manifest) {
   }
 
   // sc-7991 — every send spends the workspace's AI credits, so the manifest has
-  // to declare the capability. This gate is ADVISORY, not an authorization
-  // boundary: unlike users/groups (minted into X-Widget-Scopes and checked
-  // server-side), nothing re-checks ai.invoke at call time, so a widget that
-  // evades this regex still reaches the endpoint. What actually bounds abuse is
-  // the app-user JWT, the per-actor and per-tenant limiters and the AI quota
-  // gate. The scope's real job is DISCLOSURE — it is what the marketplace
-  // install consent screen shows.
+  // to declare the capability. This gate is still ADVISORY: the scope itself is
+  // not minted into X-Widget-Scopes, so a widget that evades this regex still
+  // reaches the endpoint, and the scope's real job is DISCLOSURE — it is what
+  // the marketplace install consent screen shows.
+  // sc-8128 — but the endpoint is no longer unguarded: a turn is refused unless
+  // the agent is bound on a page the caller can read. Abuse is bounded by that,
+  // the app-user JWT, the per-actor and per-tenant limiters and the AI quota.
   if (/\buseAgent\s*\(/.test(source)) {
     const invokes = declared.has("ai.invoke:*") || declared.has("ai.invoke");
     if (!invokes) {
@@ -1667,6 +1667,19 @@ function _bracedSpan(code, from) {
   return null;
 }
 
+// The non-escape branch excludes `\` so the two branches can never both
+// match the same character. With a bare `.`, escape pairs before a quote
+// the anchor then rejects backtrack exponentially — 60 characters of an
+// authored widget draft wedge the single-threaded API pod for ~60s, on the
+// AI-widget-agent publish vet, not the package-upload path (sc-8051, sc-8041).
+//
+// It excludes the line terminators too, because a character class — unlike
+// `.` — matches them, which would widen the literal past its own line.
+// An odd trailing backslash run therefore no longer matches; `_bracedSpan`
+// shares the escape rule and never yields one.
+const _TEXT_LITERAL_CHILD_RE =
+  /^(["'`])((?:\\.|(?!\1)[^\\\r\n\u2028\u2029])*)\1$/;
+
 // Copy pinned in a `<Text>`: a bare literal child, or a braced child that is
 // NOTHING BUT a string literal (`{"Hello"}`) — the one-pair-of-braces evasion.
 // A braced expression carrying an identifier is left alone: it may already be
@@ -1689,8 +1702,7 @@ function _textLiteralOccurrences(codes, masks) {
       let text = null;
       if (code[i] === "{") {
         const inner = _bracedSpan(code, i);
-        const lit =
-          inner && inner.trim().match(/^(["'`])((?:\\.|(?!\1).)*)\1$/);
+        const lit = inner && inner.trim().match(_TEXT_LITERAL_CHILD_RE);
         // A template carrying `${…}` interpolates a value, so it is not a literal.
         if (lit && !(lit[1] === "`" && lit[2].includes("${"))) text = lit[2];
       } else {

package/dist/theme-components.cjs

@@ -99,6 +99,11 @@ function normaliseThemeComponents(raw) {
 }
 
 
+// Long enough for a hex, an enum value or a font name; short enough that a
+// hand-edited theme_config cannot smuggle a payload into every widget.
+// Named because the Mason plan gate prints it when it rejects a value.
+const MAX_STYLE_STRING_LENGTH = 64;
+
 // Values are assigned onto plain object literals, so `__proto__` would set a
 // PROTOTYPE rather than a style field. Refused at every level.
 const UNSAFE_STYLE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
@@ -125,9 +130,9 @@ function coerceWidgetStyleValue(value, depth = 0) {
   const { maxValueDepth, maxValueEntries } = CONTRACT.themeWidgetStyles;
   if (typeof value === "string") {
     const trimmed = value.trim();
-    // Long enough for a hex, an enum value or a font name; short enough that a
-    // hand-edited theme_config cannot smuggle a payload into every widget.
-    return trimmed && trimmed.length <= 64 ? trimmed : undefined;
+    return trimmed && trimmed.length <= MAX_STYLE_STRING_LENGTH
+      ? trimmed
+      : undefined;
   }
   if (typeof value === "number") return Number.isFinite(value) ? value : undefined;
   if (typeof value === "boolean") return value;
@@ -393,4 +398,4 @@ function applyThemeComponentStyle(manifestId, theme, props, styleSchema) {
   return { ...base, style: { ...themed, ...authored } };
 }
 
-module.exports = { normaliseThemeComponents, normaliseWidgetStyleFields, normaliseWidgetStyles, applyThemeComponentStyle };
+module.exports = { normaliseThemeComponents, normaliseWidgetStyleFields, normaliseWidgetStyles, applyThemeComponentStyle, styleValueBytes, MAX_STYLE_STRING_LENGTH };