@cueplusplus/ui 0.18.1 → 0.18.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @cueplusplus/ui
 
+## 0.18.2
+
+### Patch Changes
+
+- 17b9bf1: Prose no longer ships CSS. `styles.css` hands `dist` to a consumer's Tailwind with `@source "./"`, and `dist` keeps its comments. Thirty-four of them elided an arbitrary value inside the brackets — `font-[number:…]`, `shadow-[…]` — and the scanner built each into a rule whose declaration was the elision itself. That meant thirty-four junk rules in every consumer stylesheet. The three inside a `var()` also printed "Found 3 warnings while optimizing generated CSS" in the consumer's build. Those comments now put a space inside the brackets, so the scanner can't take them as candidates. A test builds every candidate-shaped elision in `src` the way a consumer's Tailwind would, and fails if any declaration comes back holding one.
+- 1e06f0e: `ThemeProvider` and `ThemeConfigurator` no longer throw inside a sandboxed frame. An iframe sandboxed without `allow-same-origin` has an opaque origin, and there the `localStorage` accessor itself throws a `SecurityError` instead of answering `undefined`. Both components probed it with `typeof localStorage` outside the `try` that absorbs storage failures, so a provider that persists its preferences, or a configurator restoring its panel, threw on its first render. The probe now runs inside the `try`, and both degrade to "nothing stored" there, the way a private window's full quota already did.
+- @cueplusplus/tokens@0.18.2
+
 ## 0.18.1
 
 ### Patch Changes

package/dist/chat/message.js

@@ -13,7 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * The tight corner is the tail, and it points at whoever is speaking: bottom
 * right for the right-aligned user turn, bottom left for the agent's. Written
 * as the overlay rung with one corner overridden to the control rung, rather
-* than a `[border-radius:…]` arbitrary value reading `var(--radius-*)`
+* than a `[border-radius: …]` arbitrary value reading `var(--radius-*)`
 * directly — a `--radius-*` reader bypasses the compiled bridge utilities
 * `rounded-control`/`rounded-overlay` resolve to, so it neither shows up in
 * the class-token scan that guards this bridge nor tightens with

package/dist/configurator/_overrides.js

@@ -1,3 +1,4 @@
+import { localStore } from "../system/_storage.js";
 import { THEME_NAME_PATTERN as THEME_NAME_PATTERN$1, assertCssValue, followerSelector, serializeSystemModeAliases, serializeThemeBlock, themeFollowerSelector, tokenProperty } from "../theming/serialize.js";
 import { DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS } from "../theming/create-theme.js";
 import { resolve } from "@cueplusplus/theme-base";
@@ -506,10 +507,11 @@ function defaultSnapshot() {
 * @returns The snapshot, or `null` when there is nothing usable stored.
 */
 function readSnapshot(storageKey) {
-	if (typeof localStorage === "undefined") return null;
+	const store = localStore();
+	if (store === null) return null;
 	let parsed;
 	try {
-		const raw = localStorage.getItem(storageKey);
+		const raw = store.getItem(storageKey);
 		if (raw === null) return null;
 		parsed = JSON.parse(raw);
 	} catch {
@@ -541,9 +543,10 @@ function readSnapshot(storageKey) {
 * @param snapshot - What to store.
 */
 function writeSnapshot(storageKey, snapshot) {
-	if (typeof localStorage === "undefined") return;
+	const store = localStore();
+	if (store === null) return;
 	try {
-		localStorage.setItem(storageKey, JSON.stringify(snapshot));
+		store.setItem(storageKey, JSON.stringify(snapshot));
 	} catch {}
 }
 //#endregion

package/dist/layout/link.d.ts

@@ -20,7 +20,7 @@ import { useRender } from "@base-ui/react/use-render";
  * through every link's, so a set that inks all links inks prose links too.
  *
  * **Each variant carries its own ink, and the base carries none.** The two
- * inks are two `text-[color:…]` utilities, and `linkVariants()` is exported to
+ * inks are two `text-[color: …]` utilities, and `linkVariants()` is exported to
  * be spread onto an anchor without `cn()`: were the plain ink in the base and
  * the prose ink in the variant, an underlined link would carry both, and which
  * one painted would be decided by the order Tailwind happened to emit them in.

package/dist/layout/link.js

@@ -26,7 +26,7 @@ import { useRender } from "@base-ui/react/use-render";
 * through every link's, so a set that inks all links inks prose links too.
 *
 * **Each variant carries its own ink, and the base carries none.** The two
-* inks are two `text-[color:…]` utilities, and `linkVariants()` is exported to
+* inks are two `text-[color: …]` utilities, and `linkVariants()` is exported to
 * be spread onto an anchor without `cn()`: were the plain ink in the base and
 * the prose ink in the variant, an underlined link would carry both, and which
 * one painted would be decided by the order Tailwind happened to emit them in.

package/dist/primitives/button.d.ts

@@ -10,7 +10,7 @@ import { useRender } from "@base-ui/react/use-render";
  * A class concatenated onto it — by a template string, `clsx`, or that option —
  * does not replace the recipe's own; the two compete by the order Tailwind
  * emits them in, which is not a contract. The inline padding in particular is
- * a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
+ * a `px-[ calc(…) ]` reader of the style set's `style-control-pad`, and Tailwind
  * emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
  * the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
  * class of the recipe, pass `className` to `Button` itself, which merges, or

package/dist/primitives/button.js

@@ -72,7 +72,7 @@ const buttonTones = {
 * A class concatenated onto it — by a template string, `clsx`, or that option —
 * does not replace the recipe's own; the two compete by the order Tailwind
 * emits them in, which is not a contract. The inline padding in particular is
-* a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
+* a `px-[ calc(…) ]` reader of the style set's `style-control-pad`, and Tailwind
 * emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
 * the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
 * class of the recipe, pass `className` to `Button` itself, which merges, or

package/dist/primitives/chip.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/system/_paint-glass.js

@@ -5,7 +5,7 @@
 * **Why this writes `--tw-backdrop-blur` instead of `backdrop-filter`.** Spec
 * §13.5, decided on measurements. Tailwind composes every backdrop utility into
 * ONE declaration — `backdrop-filter: var(--tw-backdrop-blur,)
-* var(--tw-backdrop-brightness,) …` — so a raw `[backdrop-filter:var(…)]` here
+* var(--tw-backdrop-brightness,) …` — so a raw `[backdrop-filter: var(…)]` here
 * is a second, competing declaration. Measured: a consumer passing
 * `backdrop-brightness-50` through `className` then computes
 * `brightness(0.5)` and **no blur at all**. The glass does not narrow, it

package/dist/system/_paint-glow.js

@@ -27,7 +27,7 @@
 * adoption additive. The `outline` tone does carry one — `REST_SHADE_CLASS`,
 * the resting shade (fidelity plan R3) — so it must not also take
 * `GLOW_CLASSES`: one of the two would be dropped in silence. A halo there
-* would compose both into one `shadow-[…]` list instead.
+* would compose both into one `shadow-[ … ]` list instead.
 *
 * @internal Not part of the public API.
 */

package/dist/system/_storage.js

@@ -0,0 +1,25 @@
+//#region src/system/_storage.ts
+/**
+* The page's `localStorage`, or `null` where there is none this code may use.
+*
+* `typeof localStorage === "undefined"` is not a safe probe. In a document with
+* an opaque origin — a frame sandboxed without `allow-same-origin`, which is
+* what the studio's canvas is — the accessor on `window` throws a
+* `SecurityError` instead of answering `undefined`, and a `typeof` written
+* outside a `try` throws with it, before the `try` meant to absorb storage
+* failures is ever entered. The probe is taken inside one here, so every reader
+* and writer of a preference degrades to "nothing stored", the way a private
+* window's full quota already did.
+*
+* @returns The storage, or `null` on a server, under an opaque origin, or
+*   anywhere else reading the accessor throws.
+*/
+function localStore() {
+	try {
+		return typeof localStorage === "undefined" ? null : localStorage;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { localStore };

package/dist/system/_style-accordion-rule.js

@@ -6,7 +6,7 @@
 * `Accordion.Item` draws the rule with `border-t`, which writes
 * `border-top-style: var(--tw-border-style)`, a slot Tailwind registers with
 * `inherits: false` and `initial-value: solid`, so the section fills that slot
-* rather than a raw `[border-top-style:…]` — the footer's reason
+* rather than a raw `[border-top-style: …]` — the footer's reason
 * (`_style-footer-rule.ts`): a caller's own `border-dotted` still wins. The
 * fallback is the slot's `solid`. stripe.com's accordion draws its rules 1px
 * dashed in the quiet border ink (`:where(.hds-accordion) .hds-details`), so

package/dist/system/_style-app-bar.js

@@ -27,7 +27,7 @@
 * **The hover ground yields to a caller's own ground.** It is the one
 * declaration here the link never had: `Link` sets no background in any state,
 * so `<AppBar.Link className="bg-surface-2">` kept its ground under the pointer.
-* A plain `hover:bg-[…]` is `(0,2,0)` and would paint over it; this is written
+* A plain `hover:bg-[ … ]` is `(0,2,0)` and would paint over it; this is written
 * `[@media(hover:hover)]:[:where(&:hover)]:`, which is `hover:` — the same
 * media query, the same state — at zero specificity, so any class a caller
 * passes for the ground still wins, hovered or not. The hover INK replaced
@@ -43,7 +43,7 @@
 * `@property` with `inherits: false` and `initial-value: solid` — which is the
 * solid rule the bar always drew. Filling that slot keeps the one declaration,
 * for the reason `_paint-glass.ts` fills `--tw-backdrop-blur`: a raw
-* `[border-bottom-style:…]` would be a second, competing declaration, and
+* `[border-bottom-style: …]` would be a second, competing declaration, and
 * Tailwind emits it after `border-dashed`, so it would beat a caller's own
 * `border-dotted`. Through the slot a caller's style class still wins, because
 * it writes `border-style` itself, after `border-b`. The fallback is the

package/dist/system/_style-body-weight.js

@@ -15,7 +15,7 @@
 *
 * **Optional** (spec §3.0): declared on no `:root` and left at the shared
 * `[data-style]` reset by every shipped set. `_style-page-title.ts` says why a
-* weight reader is `font-[number:…]`.
+* weight reader is `font-[number: …]`.
 *
 * @internal Not part of the public API.
 */

package/dist/system/_style-control.js

@@ -15,11 +15,11 @@
 * no set and under every set that declines a name the reader is a no-op:
 *
 * - `CONTROL_WEIGHT` is `font-medium`'s 500. It is spelt
-*   `font-[number:…]`: a bare `font-[…]` is read as a family, and the
+*   `font-[number: …]`: a bare `font-[ … ]` is read as a family, and the
 *   `number` label makes it a weight to Tailwind (which emits exactly what
 *   `font-medium` emitted, `--tw-font-weight` included) and to `twMerge`, so a
 *   caller's `className="font-semibold"` still replaces it. Spelt as an
-*   arbitrary `[font-weight:…]` property instead, it would survive the merge
+*   arbitrary `[font-weight: …]` property instead, it would survive the merge
 *   and win the cascade: Tailwind emits it after `font-semibold`.
 * - `CONTROL_TRACKING`, `CONTROL_TRIM` and `CONTROL_CASE` fall back to
 *   `normal`, `normal` and `none`, the spec's fallbacks: the chassis set none

package/dist/system/_style-eyebrow.js

@@ -19,7 +19,7 @@
 * - size: `var(--cue-style-label-size, var(--cue-text-label))`, the label size's chain;
 * - ink: `var(--cue-accent)`, what `text-accent` compiled to;
 * - weight: `inherit` — the eyebrow declared none (see `_style-label-weight.ts`
-*   on why a literal `400` would not be a no-op, and on the `font-[number:…]`
+*   on why a literal `400` would not be a no-op, and on the `font-[number: …]`
 *   spelling);
 * - glyph: `inline`, the slashes' own display. A flex item is blockified either
 *   way, so under no set it computes what it computed before; `none` removes it.

package/dist/system/_style-footer-rule.js

@@ -16,13 +16,13 @@
 * **The line style fills Tailwind's own slot** (`style-footer-rule-style`,
 * round 5 of plan V.2: `tender` dashes both rules, T120 and T121). Both of
 * the footer's rules are written by width utilities — the band rule by
-* `border-t-[length:…]` above, the fine print's by `border-t` — and each
+* `border-t-[length: …]` above, the fine print's by `border-t` — and each
 * writes `border-top-style: var(--tw-border-style)`, a slot Tailwind
 * registers as `@property` with `inherits: false` and `initial-value: solid`,
 * which is the solid rule the footer always drew. So `Footer` spends
 * {@link FOOTER_RULE_STYLE} on both elements, as `_style-app-bar.ts` fills the
 * same slot for the bar's rule: one declaration each, rather than a raw
-* `[border-top-style:…]` that Tailwind would emit after `border-dotted` and
+* `[border-top-style: …]` that Tailwind would emit after `border-dotted` and
 * that would beat a caller's own style class. Through the slot, a caller's
 * `className="border-dotted"` still wins on the landmark, because a style
 * utility writes `border-style` itself and is emitted after the width

package/dist/system/_style-label-case.js

@@ -19,10 +19,10 @@
 * every shipped set but a sans-voiced one restates `uppercase`, which
 * `@cueplusplus/tokens` refuses to build otherwise for `console`.
 *
-* Written as a bare arbitrary property (`[text-transform:…]`) rather than a
+* Written as a bare arbitrary property (`[text-transform: …]`) rather than a
 * named Tailwind utility because none of Tailwind's `uppercase` / `lowercase`
 * / `capitalize` / `normal-case` utilities take a dynamic value — the same
-* reason `_paint-*` readers reach for `[mask-image:…]` and `[background-*:…]`
+* reason `_paint-*` readers reach for `[mask-image: …]` and `[background-*: …]`
 * instead of a utility that does not exist for a `var()`-driven keyword.
 *
 * **Its own module**, for the reason `_style-control-face.ts` gives: one

package/dist/system/_style-label-weight.js

@@ -17,11 +17,11 @@
 * inherits from a heavier parent today, which a fallback may not do (the R
 * lanes' rule: the fallback is the site's current value).
 *
-* **Written `font-[number:…]`, not as a bare `[font-weight:…]` property.** The
+* **Written `font-[number: …]`, not as a bare `[font-weight: …]` property.** The
 * `number:` hint is what makes Tailwind emit `font-weight` (and not a family)
 * for a `var()`, and it is also what `tailwind-merge` reads as a font weight: a
 * caller's `className="font-medium"` replaces this class, as it replaced
-* `font-normal`. A bare `[font-weight:…]` would not merge, and Tailwind sorts
+* `font-normal`. A bare `[font-weight: …]` would not merge, and Tailwind sorts
 * it AFTER every named `font-*` utility (measured: a named weight declares
 * `--tw-font-weight` too, and a rule with more declarations sorts first), so
 * the caller's weight would silently lose — against every `className` prop's

package/dist/system/_style-link.js

@@ -35,7 +35,7 @@ const LINK_RULE = "decoration-[color:var(--cue-style-link-rule,var(--cue-border)
 const LINK_OFFSET = "underline-offset-[var(--cue-style-link-offset,4px)]";
 /**
 * Every link's weight: its parent's, or the set's `style-link-weight`.
-* `font-[number:…]` rather than an arbitrary `[font-weight:…]`, so a caller's
+* `font-[number: …]` rather than an arbitrary `[font-weight: …]`, so a caller's
 * `font-*` weight still replaces it through `twMerge` — `_style-control.ts`'s
 * `CONTROL_WEIGHT` says why.
 */

package/dist/system/_style-nav-voice.js

@@ -19,11 +19,11 @@
 * weight were inherited, and computed `none`, `normal` and `400` at both
 * readers under every shipped set — spec §3.8's three fallbacks.
 *
-* **Weight is written `font-[number:…]`.** A bare `font-[var(…)]` is read as a
+* **Weight is written `font-[number: …]`.** A bare `font-[ var(…) ]` is read as a
 * family (plan §R1), and the `number` label makes it a weight to Tailwind —
 * which emits exactly what `font-medium` emits, `--tw-font-weight` included —
 * and to `tailwind-merge`, so a caller's `className="font-medium"` replaces it
-* through `cn()`. Spelt as an arbitrary `[font-weight:…]` property it survived
+* through `cn()`. Spelt as an arbitrary `[font-weight: …]` property it survived
 * the merge beside the caller's class and won the cascade, because Tailwind
 * emits it after `font-medium`: `<AppBar.Link className="font-medium">` drew
 * 400. Case is an arbitrary property for the reason `_style-label-case.ts`

package/dist/system/_style-page-title.js

@@ -27,9 +27,9 @@
 * the h1 itself — the value the old class computed there, under every set and in
 * every density island.
 *
-* **Weight is `font-[number:…]`**, the typed form: a bare `font-[var(…)]` is
+* **Weight is `font-[number: …]`**, the typed form: a bare `font-[ var(…) ]` is
 * read as a family by `tailwind-merge`, and the arbitrary property
-* `[font-weight:…]` is in no `tailwind-merge` group at all, so a caller's
+* `[font-weight: …]` is in no `tailwind-merge` group at all, so a caller's
 * `font-bold` would no longer replace it — and it sorts after `font-bold` in the
 * built stylesheet, so it would win. `number:` keeps both Tailwind and
 * `tailwind-merge` reading a weight.

package/dist/system/_style-segmented-control.js

@@ -35,7 +35,7 @@
 *   glaze;
 * - the corners: `rounded-control`'s own value (below).
 *
-* **The edge and the rest shade are one `shadow-[…]` list**, and it is written
+* **The edge and the rest shade are one `shadow-[ … ]` list**, and it is written
 * out in full rather than built from `REST_SHADE`: Tailwind finds a class by
 * scanning source text, so a class assembled at runtime is a class it never
 * generates (`_focus-ring.ts` records the failure). `test/system/style-navigation.test.tsx`
@@ -51,7 +51,7 @@
 * the others. A `data-[pressed]:` utility is `(0,2,0)` and would beat such a
 * class on the pressed segment alone, so these are written
 * `[:where(&[data-pressed])]:` — the same state at zero specificity — and a
-* caller's class wins in every state again. The weight is `font-[number:…]`
+* caller's class wins in every state again. The weight is `font-[number: …]`
 * for `_style-nav-voice.ts`'s reason.
 *
 * **The segment's radius nests in the track's inset**:

package/dist/system/_style-title.js

@@ -28,7 +28,7 @@
 * not the size, the tracking or the leading, so it is `_style-overlay-title.ts`
 * and not an import of this: docgen would publish every name in this file as a
 * token of every overlay. `_style-page-title.ts` says why the weight is
-* `font-[number:…]` and why the size comes before the leading.
+* `font-[number: …]` and why the size comes before the leading.
 *
 * @internal Not part of the public API.
 */

package/dist/system/theme-provider.js

@@ -5,6 +5,7 @@ import { published, usePublish, useRead } from "./published.js";
 import { AmbientThemeContext, DeferRestateContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes, useFollowedAxes, useMountedWhen, useRestateReady } from "./density.js";
 import { buildRegistry, isPaint, isStyleSet, vocabulary, warnOnce } from "./vocabulary.js";
 import { OverridesContext, followerColorsCss, inlineOverrides, overridesCss, reportOverrides } from "./overrides.js";
+import { localStore } from "./_storage.js";
 import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
 import { ThemeRegistryContext } from "./theme-registry.js";
 import * as React from "react";
@@ -99,9 +100,10 @@ function isOneOf(allowed, value) {
 	return typeof value === "string" && allowed.includes(value);
 }
 function readPreferences(storageKey) {
-	if (typeof localStorage === "undefined") return {};
+	const store = localStore();
+	if (store === null) return {};
 	try {
-		const raw = localStorage.getItem(storageKey);
+		const raw = store.getItem(storageKey);
 		if (raw === null) return {};
 		const parsed = JSON.parse(raw);
 		if (parsed === null || typeof parsed !== "object") return {};
@@ -157,7 +159,8 @@ function acceptedPreferences(vocab, stored, fallback) {
 	};
 }
 function writePreferences(storageKey, preferences) {
-	if (typeof localStorage === "undefined") return;
+	const store = localStore();
+	if (store === null) return;
 	const { styleSet, paint, ...axes } = preferences;
 	const withStyle = styleSet === null ? axes : {
 		...axes,
@@ -168,7 +171,7 @@ function writePreferences(storageKey, preferences) {
 		paint
 	};
 	try {
-		localStorage.setItem(storageKey, JSON.stringify(payload));
+		store.setItem(storageKey, JSON.stringify(payload));
 	} catch {}
 }
 /**

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/ui",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "cue",
@@ -34,7 +34,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "09ac70fac6ec50acc51a662ae9cddec01f793417b619c941db7c236fc707d6df"
+    "sha256": "b4f33269f4d28a34d3ab0b29047aa6d00c096cc9816365ff83268e6b43029015"
   },
   "systemApis": [
     {

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/tokens",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "themes": [
     {
       "name": "cue",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
   "license": "MIT",
   "type": "module",
@@ -146,7 +146,7 @@
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
     "@cueplusplus/theme-base": "^1.1.0",
-    "@cueplusplus/tokens": "0.18.1"
+    "@cueplusplus/tokens": "0.18.2"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.16",