@civitai/blocks-react 0.44.2 → 0.45.0

package/README.md

@@ -157,6 +157,41 @@ useBlockResize(rootRef);
 > height — a too-small minHeight makes the iframe seed short and grow-jump on
 > `BLOCK_READY` (CLS). Measure it in the dev harness (gotcha #53).
 
+### `useBlockBreakpoint(ref?)`
+
+Reports the block's **own** width tier, so you can branch on "am I narrow?"
+without hand-rolling a `ResizeObserver` or hard-coding pixel numbers.
+
+```tsx
+const bp = useBlockBreakpoint();
+<div style={{ display: 'flex', flexDirection: bp.below('sm') ? 'column' : 'row' }}>
+  {bp.atLeast('md') && <aside>…</aside>}
+</div>
+```
+
+- `tier` — `'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` on civitai's **px** scale
+  (480 / 768 / 1024 / 1184 / 1440 — *not* Mantine's em scale, which agrees only
+  on `sm`). Tailwind semantics: a tier applies at its breakpoint and above.
+  `'base'` is narrower than `xs`, where both a 360px phone and the desktop
+  `model.sidebar_top` slot land.
+- `atLeast(key)` / `below(key)` — the comparators you actually want at a call site.
+- `measured` — `false` until the first measurement lands. An unmeasured width
+  resolves to `'base'`, so gate a *structural* narrow branch on
+  `measured && below('sm')` if a one-frame swap would be jarring.
+
+> **Container query, not a media query.** It observes an element — by default
+> `document.documentElement`, which inside the block's sandbox iframe *is* the
+> slot the host gave you. Slot width is not monotonic in viewport width (the
+> `model.sidebar_top` slot is ~360px at a 360px viewport and only ~430px at a
+> 1440px one), so a `matchMedia` inside the frame answers the wrong question.
+> Pass a `ref` to measure a nested container instead.
+
+> **No re-render storm.** A `ResizeObserver` fires on every pixel; this hook
+> stores the resolved *tier* and returns a referentially stable object while the
+> tier is unchanged, so a 200px drag inside one tier re-renders zero times. That
+> is also why the raw width is not returned — it would either cost a render per
+> pixel or be stale.
+
 ### `useBlockToken()`
 
 Current block-scoped JWT, auto-refreshing ~2 min before expiry. Returns the token

package/dist/hooks/useBlockBreakpoint.d.ts

@@ -0,0 +1,92 @@
+import { type BreakpointKey } from '@civitai/theme';
+import { type RefObject } from 'react';
+/**
+ * Width tier of the block's own box.
+ *
+ * `'base'` is "narrower than the smallest named breakpoint" (< 480px). The
+ * `model.sidebar_top` slot and a 360px phone both land there, which is the
+ * point: they are the same layout problem.
+ *
+ * Tier semantics follow Tailwind's — a tier applies AT its breakpoint and above
+ * — matching civitai's px scale, NOT Mantine's `hiddenFrom`/`visibleFrom`.
+ */
+export type BlockSizeTier = 'base' | BreakpointKey;
+/**
+ * Resolve a width in CSS pixels to a tier, against civitai's PX breakpoint scale
+ * (`@civitai/theme`'s `breakpoints`: 480 / 768 / 1024 / 1184 / 1440).
+ *
+ * 🔴 That is deliberately NOT Mantine's stock em scale (576 / 768 / 992 / 1200 /
+ * 1408), which agrees on `sm` alone. See `@civitai/theme`'s
+ * `src/breakpoints.source.ts`.
+ *
+ * A non-finite or non-positive width (an unmeasured element, SSR, a
+ * `display: none` ancestor) resolves to `'base'` — the most conservative tier.
+ */
+export declare function resolveBlockTier(width: number): BlockSizeTier;
+export interface BlockBreakpoint {
+    /**
+     * The current tier. `'base'` while unmeasured — see `measured`.
+     */
+    tier: BlockSizeTier;
+    /**
+     * `false` until a `ResizeObserver` measurement has landed (SSR, and the first
+     * client render before the observer fires).
+     *
+     * 🔴 THIS EXISTS BECAUSE `tier` ALONE IS LOSSY. An unmeasured width (0)
+     * resolves to `'base'`, which is indistinguishable from a genuinely narrow
+     * block. That is the right default for a block — the slot is narrow far more
+     * often than not — but a caller doing something expensive or visually jarring
+     * on the narrow branch (a structural DOM swap rather than a style change)
+     * wants to defer it one frame rather than render it and immediately undo it.
+     * Gate on `measured && below('sm')` for that; `below('sm')` alone otherwise.
+     */
+    measured: boolean;
+    /** `true` when the block is at least as wide as `key`'s breakpoint. */
+    atLeast: (key: BreakpointKey) => boolean;
+    /** `true` when the block is narrower than `key`'s breakpoint. */
+    below: (key: BreakpointKey) => boolean;
+}
+/**
+ * Report the block's own width tier, so a block can branch on "am I narrow?"
+ * without hand-rolling a media query.
+ *
+ * 🔴 CONTAINER QUERY, NOT A VIEWPORT MEDIA QUERY — and the difference is not
+ * cosmetic. A block renders inside a sandboxed iframe whose width is whatever
+ * slot the host gave it, and SLOT WIDTH IS NOT MONOTONIC IN VIEWPORT WIDTH: the
+ * `model.sidebar_top` slot is ~360px at a 360px viewport and only ~430px at a
+ * 1440px one. A `matchMedia('(min-width: 768px)')` inside the frame would
+ * therefore answer a question nobody asked. Observing the element instead — by
+ * default `document.documentElement`, which inside the sandbox IS the slot the
+ * host handed us — makes this a container query against the real box.
+ *
+ * This mirrors the reasoning already reviewed and written down on the host side
+ * in civitai's `src/components/AppBlocks/chromeGeometry.ts` ("THE MEASURED BOX IS
+ * THE CHROME'S OWN ELEMENT, NOT THE VIEWPORT"). Same mechanism, same scale,
+ * pointed at the block's box instead of the chrome's.
+ *
+ * RE-RENDER SAFETY. A `ResizeObserver` fires on every pixel. This hook stores
+ * the resolved TIER, not the width, and returns the same object identity while
+ * the tier is unchanged — so dragging a window edge across 200px inside one tier
+ * re-renders the block ZERO times. That is also why the raw width is not part of
+ * the return value: exposing it would either force a render per pixel or be a
+ * lie (a width that only updates when the tier changes).
+ *
+ * SSR-safe: with no `ResizeObserver` (or no `document`) the hook stays at
+ * `{ tier: 'base', measured: false }` and never touches the DOM.
+ *
+ * @param ref - Optional element to measure instead of the sandbox document
+ *   element. Pass this to ask about a nested container (e.g. one column of a
+ *   split layout), or in a test where the viewport is fixed. The wrapper object
+ *   may be recreated freely — the observer keys on the ELEMENT, not on the ref's
+ *   identity — and an element that mounts later is picked up.
+ *
+ * @example
+ * const bp = useBlockBreakpoint();
+ * return (
+ *   <div style={{ display: 'flex', flexDirection: bp.below('sm') ? 'column' : 'row' }}>
+ *     {bp.atLeast('md') && <aside>…</aside>}
+ *   </div>
+ * );
+ */
+export declare function useBlockBreakpoint(ref?: RefObject<HTMLElement | null>): BlockBreakpoint;
+//# sourceMappingURL=useBlockBreakpoint.d.ts.map

package/dist/hooks/useBlockBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlockBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBlockBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;AAKnD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAO7D;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,OAAO,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;IACzC,iEAAiE;IACjE,KAAK,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,eAAe,CAgEvF"}

package/dist/hooks/useBlockBreakpoint.js

@@ -0,0 +1,129 @@
+import { BREAKPOINT_KEYS, breakpoints } from '@civitai/theme';
+import { useEffect, useMemo, useRef, useState } from 'react';
+/** Ascending tier order. `base` first; the rest follow `BREAKPOINT_KEYS`. */
+const TIER_ORDER = ['base', ...BREAKPOINT_KEYS];
+/**
+ * Resolve a width in CSS pixels to a tier, against civitai's PX breakpoint scale
+ * (`@civitai/theme`'s `breakpoints`: 480 / 768 / 1024 / 1184 / 1440).
+ *
+ * 🔴 That is deliberately NOT Mantine's stock em scale (576 / 768 / 992 / 1200 /
+ * 1408), which agrees on `sm` alone. See `@civitai/theme`'s
+ * `src/breakpoints.source.ts`.
+ *
+ * A non-finite or non-positive width (an unmeasured element, SSR, a
+ * `display: none` ancestor) resolves to `'base'` — the most conservative tier.
+ */
+export function resolveBlockTier(width) {
+    if (!Number.isFinite(width) || width <= 0)
+        return 'base';
+    let tier = 'base';
+    for (const key of BREAKPOINT_KEYS) {
+        if (width >= breakpoints[key])
+            tier = key;
+    }
+    return tier;
+}
+/**
+ * Report the block's own width tier, so a block can branch on "am I narrow?"
+ * without hand-rolling a media query.
+ *
+ * 🔴 CONTAINER QUERY, NOT A VIEWPORT MEDIA QUERY — and the difference is not
+ * cosmetic. A block renders inside a sandboxed iframe whose width is whatever
+ * slot the host gave it, and SLOT WIDTH IS NOT MONOTONIC IN VIEWPORT WIDTH: the
+ * `model.sidebar_top` slot is ~360px at a 360px viewport and only ~430px at a
+ * 1440px one. A `matchMedia('(min-width: 768px)')` inside the frame would
+ * therefore answer a question nobody asked. Observing the element instead — by
+ * default `document.documentElement`, which inside the sandbox IS the slot the
+ * host handed us — makes this a container query against the real box.
+ *
+ * This mirrors the reasoning already reviewed and written down on the host side
+ * in civitai's `src/components/AppBlocks/chromeGeometry.ts` ("THE MEASURED BOX IS
+ * THE CHROME'S OWN ELEMENT, NOT THE VIEWPORT"). Same mechanism, same scale,
+ * pointed at the block's box instead of the chrome's.
+ *
+ * RE-RENDER SAFETY. A `ResizeObserver` fires on every pixel. This hook stores
+ * the resolved TIER, not the width, and returns the same object identity while
+ * the tier is unchanged — so dragging a window edge across 200px inside one tier
+ * re-renders the block ZERO times. That is also why the raw width is not part of
+ * the return value: exposing it would either force a render per pixel or be a
+ * lie (a width that only updates when the tier changes).
+ *
+ * SSR-safe: with no `ResizeObserver` (or no `document`) the hook stays at
+ * `{ tier: 'base', measured: false }` and never touches the DOM.
+ *
+ * @param ref - Optional element to measure instead of the sandbox document
+ *   element. Pass this to ask about a nested container (e.g. one column of a
+ *   split layout), or in a test where the viewport is fixed. The wrapper object
+ *   may be recreated freely — the observer keys on the ELEMENT, not on the ref's
+ *   identity — and an element that mounts later is picked up.
+ *
+ * @example
+ * const bp = useBlockBreakpoint();
+ * return (
+ *   <div style={{ display: 'flex', flexDirection: bp.below('sm') ? 'column' : 'row' }}>
+ *     {bp.atLeast('md') && <aside>…</aside>}
+ *   </div>
+ * );
+ */
+export function useBlockBreakpoint(ref) {
+    // `null` means UNMEASURED — distinct from a measured `'base'`. See `measured`.
+    const [tier, setTier] = useState(null);
+    // 🔴 THE EFFECT MUST NOT DEPEND ON THE REF WRAPPER'S IDENTITY. Unlike
+    // `useBlockResize`, this hook RE-RENDERS its caller, so a `[ref]` dependency
+    // turns a caller who writes `useBlockBreakpoint({ current: el })` inline into
+    // a tear-down/re-observe on every render — and, worse, re-runs the
+    // `apply(el.clientWidth)` seed each time, which re-reports a stale width. So
+    // the wrapper is held in a mutable ref (never a dependency) and the effect
+    // keys on the observed ELEMENT, which is the thing that actually matters and
+    // which also picks up an element that mounts later.
+    const refHolder = useRef(ref);
+    refHolder.current = ref;
+    const target = ref === undefined ? undefined : ref.current;
+    // Last tier we pushed into state. 🔴 THE DEDUPE HAPPENS HERE, NOT VIA A
+    // `setTier(prev => prev === next ? prev : next)` BAIL-OUT: React's same-value
+    // bail-out is documented to still re-render the component ONE more time before
+    // it takes effect, so the first no-op resize after a real tier change would
+    // still cost a render. Same `lastHeight` idiom as `useBlockResize`.
+    const lastTier = useRef(null);
+    useEffect(() => {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const caller = refHolder.current;
+        const el = caller
+            ? caller.current
+            : typeof document === 'undefined'
+                ? null
+                : document.documentElement;
+        if (!el)
+            return;
+        const apply = (width) => {
+            const next = resolveBlockTier(width);
+            // The whole re-render guard: only a TIER CHANGE reaches the block.
+            if (lastTier.current === next)
+                return;
+            lastTier.current = next;
+            setTier(next);
+        };
+        const observer = new ResizeObserver((entries) => {
+            apply(entries[0]?.contentRect.width ?? el.clientWidth);
+        });
+        observer.observe(el);
+        // Seed synchronously from layout: `observe()` schedules its first callback,
+        // and without this the block paints one frame at `measured: false` even
+        // though the width is already knowable.
+        apply(el.clientWidth);
+        return () => observer.disconnect();
+    }, [target]);
+    return useMemo(() => {
+        const resolved = tier ?? 'base';
+        const index = TIER_ORDER.indexOf(resolved);
+        const atLeast = (key) => index >= TIER_ORDER.indexOf(key);
+        return {
+            tier: resolved,
+            measured: tier !== null,
+            atLeast,
+            below: (key) => !atLeast(key),
+        };
+    }, [tier]);
+}
+//# sourceMappingURL=useBlockBreakpoint.js.map

package/dist/hooks/useBlockBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlockBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBlockBreakpoint.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -26,6 +26,8 @@ export type { TipParams, TipOptions, TipResult, UseTip } from './hooks/useTip.js
 export { useTipAllowance } from './hooks/useTipAllowance.js';
 export type { TipAllowance, UseTipAllowance } from './hooks/useTipAllowance.js';
 export { useBlockResize } from './hooks/useBlockResize.js';
+export { useBlockBreakpoint, resolveBlockTier } from './hooks/useBlockBreakpoint.js';
+export type { BlockBreakpoint, BlockSizeTier } from './hooks/useBlockBreakpoint.js';
 export { useBuzzPurchase } from './hooks/useBuzzPurchase.js';
 export { useBuzzBalance } from './hooks/useBuzzBalance.js';
 export type { BuzzBalance, UseBuzzBalance } from './hooks/useBuzzBalance.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -27,6 +27,7 @@ export { DEFAULT_WATCH_WAIT_SECONDS, useBuzzWorkflow, WorkflowEstimateError, Wor
 export { useTip } from './hooks/useTip.js';
 export { useTipAllowance } from './hooks/useTipAllowance.js';
 export { useBlockResize } from './hooks/useBlockResize.js';
+export { useBlockBreakpoint, resolveBlockTier } from './hooks/useBlockBreakpoint.js';
 export { useBuzzPurchase } from './hooks/useBuzzPurchase.js';
 export { useBuzzBalance } from './hooks/useBuzzBalance.js';
 export { useViewer } from './hooks/useViewer.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/BlockGate.d.ts

@@ -74,6 +74,14 @@ export interface BlockGateProps {
  *
  * The embedded happy path and the dev harness are untouched — see
  * {@link useDirectLoad} for exactly why the trigger can't fire in either.
+ *
+ * It also injects the design-system stylesheets, on BOTH branches. Every `/ui`
+ * component calls {@link useBlocksStyles} itself, so styling used to arrive as a
+ * side effect of rendering one — which means a block that wraps its root in
+ * `BlockGate` but renders NO `/ui` component (its own markup, another UI
+ * library, a canvas) got the tokens on the direct-load fallback and ZERO
+ * design-system CSS on the happy path. Wrapping the root is the one thing every
+ * block is told to do, so that is the right place to make it unconditional.
  */
 export declare function BlockGate({ children, timeoutMs, fallback, hostname, autoRedirectMs, }: BlockGateProps): React.JSX.Element;
 //# sourceMappingURL=BlockGate.d.ts.map

package/dist/ui/BlockGate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockGate.d.ts","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkD5D;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA8BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,cAAc,GACf,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+D7C;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAQpC"}
+{"version":3,"file":"BlockGate.d.ts","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkD5D;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA8BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,cAAc,GACf,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+D7C;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAWpC"}

package/dist/ui/BlockGate.js

@@ -132,8 +132,19 @@ export function DirectLoadFallback({ hostname, autoRedirectMs, }) {
  *
  * The embedded happy path and the dev harness are untouched — see
  * {@link useDirectLoad} for exactly why the trigger can't fire in either.
+ *
+ * It also injects the design-system stylesheets, on BOTH branches. Every `/ui`
+ * component calls {@link useBlocksStyles} itself, so styling used to arrive as a
+ * side effect of rendering one — which means a block that wraps its root in
+ * `BlockGate` but renders NO `/ui` component (its own markup, another UI
+ * library, a canvas) got the tokens on the direct-load fallback and ZERO
+ * design-system CSS on the happy path. Wrapping the root is the one thing every
+ * block is told to do, so that is the right place to make it unconditional.
  */
 export function BlockGate({ children, timeoutMs, fallback, hostname, autoRedirectMs, }) {
+    // BEFORE the branch, and unconditional: hook order must not depend on
+    // `directLoad`, and the happy path is the branch that was missing styles.
+    useBlocksStyles();
     const directLoad = useDirectLoad({ timeoutMs });
     if (directLoad) {
         return (_jsx(_Fragment, { children: fallback ?? _jsx(DirectLoadFallback, { hostname: hostname, autoRedirectMs: autoRedirectMs }) }));

package/dist/ui/BlockGate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockGate.js","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BlockGate.js","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"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"}

package/dist/ui/styles.d.ts

@@ -5,7 +5,7 @@
  * CSS. (At RUNTIME, `injectBlocksStyles()` injects these as three separately
  * marked `<style>` elements instead — see below.)
  */
-export declare const BLOCKS_UI_STYLES = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n   Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #222;\n}\n@property --civitai-color-text-dimmed {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-body {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-border {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #1C7ED6;\n}\n@property --civitai-color-primary-fg {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-primary-light {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: rgba(34, 139, 230, 0.1);\n}\n@property --civitai-color-error {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fa5252;\n}\n@property --civitai-color-success {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-gray-0 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f8f9fa;\n}\n@property --civitai-color-gray-1 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f1f3f5;\n}\n@property --civitai-color-gray-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n@property --civitai-color-gray-3 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #dee2e6;\n}\n@property --civitai-color-gray-4 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-gray-5 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #adb5bd;\n}\n@property --civitai-color-gray-6 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-gray-7 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #495057;\n}\n@property --civitai-color-gray-8 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #343a40;\n}\n@property --civitai-color-gray-9 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #212529;\n}\n\n:root {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n}\n\n[data-theme='light'] {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n}\n\n[data-theme='dark'] {\n  --civitai-color-text: #C1C2C5;\n  --civitai-color-text-dimmed: #8c8fa3;\n  --civitai-color-body: #1A1B1E;\n  --civitai-color-surface: #1A1B1E;\n  --civitai-color-surface-2: #25262B;\n  --civitai-color-border: #373A40;\n  --civitai-color-primary: #1971C2;\n  --civitai-color-primary-hover: #1864AB;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n  --civitai-color-error: #e03131;\n  --civitai-color-success: #326D5C;\n  --civitai-color-warning: #e8590c;\n  --civitai-color-info: #1971C2;\n}\n\n/*\n * @civitai/components \u2014 attribute-driven, framework-agnostic component CSS.\n *\n * Contract: style is selected by `data-civitai-ui=\"<name>\"` + `data-variant` +\n * `data-size` (+ a few component-specific `data-*`). Theme via an ancestor\n * `[data-theme='light'|'dark']`. Tokens come from @civitai/theme's `--civitai-*`\n * custom properties (link `@civitai/theme/styles.css` alongside this file, or\n * call `injectStyles()` which injects both).\n *\n * ALL rules live in `@layer civitai.components` so a consumer's own unlayered\n * CSS always wins the cascade WITHOUT specificity fights. State colors are\n * derived with `color-mix()` from base tokens (no shade enumeration), and\n * structure uses native CSS nesting (no preprocessor).\n *\n * See MARKUP.md for the full per-component markup + ARIA contract.\n */\n@layer civitai.components {\n  [data-civitai-ui] {\n    box-sizing: border-box;\n    font-family: var(--civitai-font);\n\n    & *,\n    & *::before,\n    & *::after {\n      box-sizing: border-box;\n    }\n  }\n\n  /* ----- Button ----- */\n  [data-civitai-ui='button'] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    border: 1px solid transparent;\n    border-radius: var(--civitai-radius);\n    font-family: var(--civitai-font);\n    font-weight: 600;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n\n    /*\n     * Documented DEFAULTS (MARKUP.md): variant=filled, size=md. Applied on the\n     * BASE rule (unconditionally) so BARE markup \u2014 a `<button data-civitai-ui=\n     * \"button\">` with no `data-variant`/`data-size` \u2014 renders the documented\n     * default (filled + md), not an unstyled/zero-size button. The explicit\n     * `[data-variant]` / `[data-size]` rules below OVERRIDE (all four variants\n     * set their own bg/border/hover, so the base filled default only ever wins\n     * for a bare button). Every non-filled variant also sets its own\n     * `border-color`, so the base primary border never leaks to them.\n     */\n    background: var(--civitai-color-primary);\n    color: var(--civitai-color-primary-fg);\n    border-color: var(--civitai-color-primary);\n    height: 36px;\n    padding: 0 18px;\n    font-size: 14px;\n\n    &:hover:not(:disabled) {\n      background: var(--civitai-color-primary-hover);\n      border-color: var(--civitai-color-primary-hover);\n    }\n\n    &[data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n    &[data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n    &[data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n    &[data-full-width='true'] { width: 100%; }\n\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: var(--civitai-color-primary-hover);\n        border-color: var(--civitai-color-primary-hover);\n      }\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 12%, transparent);\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 22%, transparent);\n      }\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &[data-variant='subtle'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &:disabled,\n    &[aria-busy='true'] {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    & [data-civitai-ui-section] {\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  /* ----- TextInput / Textarea / NumberInput / Select ----- */\n  [data-civitai-ui='text-input'],\n  [data-civitai-ui='textarea'],\n  [data-civitai-ui='number-input'],\n  [data-civitai-ui='select'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-label] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--civitai-color-text);\n  }\n  [data-civitai-ui-required] {\n    color: var(--civitai-color-error);\n    margin-left: 2px;\n  }\n  [data-civitai-ui-description] {\n    font-size: 12px;\n    color: var(--civitai-color-text-dimmed);\n  }\n  [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui-control] {\n    width: 100%;\n    font-family: var(--civitai-font);\n    font-size: 14px;\n    color: var(--civitai-color-text);\n    background: var(--civitai-color-surface);\n    border: 1px solid var(--civitai-color-border);\n    border-radius: var(--civitai-radius);\n    padding: 8px 12px;\n    transition: border-color 120ms ease;\n\n    &:focus {\n      outline: none;\n      border-color: var(--civitai-color-primary);\n    }\n    &[aria-invalid='true'] {\n      border-color: var(--civitai-color-error);\n    }\n    &:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n  }\n  textarea[data-civitai-ui-control] {\n    resize: vertical;\n    line-height: 1.5;\n  }\n  /*\n   * Select (issue #181 F6): a native <select> reusing the shared\n   * `-control` field chrome (border/background/radius/focus/invalid, above).\n   * Keep the native disclosure caret (most robust + accessible); just make the\n   * control feel interactive and reserve room on the right so the caret never\n   * overlaps a long option label.\n   */\n  select[data-civitai-ui-control] {\n    cursor: pointer;\n    padding-right: 28px;\n    line-height: 1.4;\n  }\n  select[data-civitai-ui-control]:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ----- Checkbox / Radio (issue #181 F6) ----- */\n  /*\n   * Themed native <input type=\"checkbox\">/<input type=\"radio\">: `accent-color`\n   * carries the primary tint (native control, so keyboard/indeterminate/tab all\n   * work for free), plus custom sizing, a token focus ring, and disabled state.\n   * The box + its inline label sit in a `-choice` row; description + error live\n   * below, reusing the shared field markers. The inputs deliberately do NOT\n   * carry `data-civitai-ui-control` (that is the full-width field-input chrome).\n   */\n  [data-civitai-ui='checkbox'],\n  [data-civitai-ui='radio'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-choice] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  [data-civitai-ui='checkbox'] [data-civitai-ui-label],\n  [data-civitai-ui='radio'] [data-civitai-ui-label] {\n    font-weight: 500;\n    cursor: pointer;\n    user-select: none;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox'],\n  [data-civitai-ui='radio'] input[type='radio'] {\n    accent-color: var(--civitai-color-primary);\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    flex: none;\n    cursor: pointer;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:focus-visible,\n  [data-civitai-ui='radio'] input[type='radio']:focus-visible {\n    outline: 2px solid var(--civitai-color-primary);\n    outline-offset: 2px;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled,\n  [data-civitai-ui='radio'] input[type='radio']:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled ~ [data-civitai-ui-label],\n  [data-civitai-ui='radio'] input[type='radio']:disabled ~ [data-civitai-ui-label] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  /* ----- RadioGroup (issue #181 F6) \u2014 role=radiogroup layout ----- */\n  [data-civitai-ui='radio-group'] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  [data-civitai-ui-radio-options] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    &[data-orientation='horizontal'] {\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n  }\n  /*\n   * RadioGroup group-level error (0.2.0): mirrors the field `-error` treatment.\n   * The message reuses the shared `[data-civitai-ui-error]` styling (12px, error\n   * token); the invalid state (`data-invalid` on the group, set alongside\n   * `aria-invalid`) tints the child radios' `accent-color` to the error token so\n   * the invalid cue reads on the group, not just the message text \u2014 the group\n   * analogue of a field control's error-colored border.\n   */\n  [data-civitai-ui='radio-group'] [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui='radio-group'][data-invalid] input[type='radio'] {\n    accent-color: var(--civitai-color-error);\n  }\n\n  /* ----- Card ----- */\n  /*\n   * F5 (issue #181): in LIGHT mode --civitai-color-surface == --civitai-color-body\n   * (both #fefefe), so a borderless card is invisible against the page. Give\n   * every card a subtle DEFAULT hairline (a low-alpha mix of the border token)\n   * so a card WITHOUT `data-with-border` is still visible. `data-with-border`\n   * stays the stronger, explicit, fully-opaque border. Dark mode already\n   * differentiates surface from body, so the default hairline is removed there\n   * (see the [data-theme='dark'] rule below) \u2014 no over-adding. The default\n   * (no [data-theme]) light palette keeps the hairline, matching light mode.\n   */\n  [data-civitai-ui='card'] {\n    background: var(--civitai-color-surface);\n    border-radius: var(--civitai-radius);\n    color: var(--civitai-color-text);\n    border: 1px solid color-mix(in srgb, var(--civitai-color-border) 55%, transparent);\n\n    &[data-with-border='true'] {\n      border: 1px solid var(--civitai-color-border);\n    }\n    &[data-padding='sm'] { padding: 10px; }\n    &[data-padding='md'] { padding: 16px; }\n    &[data-padding='lg'] { padding: 24px; }\n  }\n  /*\n   * Dark already differentiates surface (#1A1B1E) from body \u2014 drop the default\n   * hairline on a borderless card so dark is visually unchanged. An explicit\n   * `data-with-border` still renders its full border.\n   */\n  [data-theme='dark'] [data-civitai-ui='card']:not([data-with-border='true']) {\n    border: 0;\n  }\n\n  /* ----- Stack / Group ----- */\n  [data-civitai-ui='stack'] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n\n    &[data-gap='sm'] { gap: 8px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n  [data-civitai-ui='group'] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &[data-gap='sm'] { gap: 6px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n\n  /* ----- Alert ----- */\n  [data-civitai-ui='alert'] {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    padding: 12px 14px;\n    border-radius: var(--civitai-radius);\n    border: 1px solid transparent;\n    font-size: 14px;\n    color: var(--civitai-color-text);\n\n    /*\n     * Documented DEFAULT (MARKUP.md): color=info (default intent). Applied on\n     * the base rule so a BARE alert \u2014 `<div data-civitai-ui=\"alert\">` with no\n     * `data-color` \u2014 renders the info intent (tinted bg + border), not just the\n     * neutral chrome. The explicit `[data-color]` rules below OVERRIDE (success\n     * / warning / error each set both bg + border-color), so the info default\n     * only ever wins when `data-color` is omitted.\n     */\n    background: color-mix(in srgb, var(--civitai-color-info) 12%, transparent);\n    border-color: color-mix(in srgb, var(--civitai-color-info) 35%, transparent);\n\n    &[data-color='info'] {\n      background: color-mix(in srgb, var(--civitai-color-info) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-info) 35%, transparent);\n    }\n    &[data-color='success'] {\n      background: color-mix(in srgb, var(--civitai-color-success) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-success) 35%, transparent);\n    }\n    &[data-color='warning'] {\n      background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-warning) 35%, transparent);\n    }\n    &[data-color='error'] {\n      background: color-mix(in srgb, var(--civitai-color-error) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-error) 35%, transparent);\n    }\n    & [data-civitai-ui-alert-body] {\n      flex: 1;\n      min-width: 0;\n    }\n    & [data-civitai-ui-alert-title] {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n    & [data-civitai-ui-alert-close] {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      color: inherit;\n      font-size: 16px;\n      line-height: 1;\n      padding: 0;\n      opacity: 0.7;\n\n      &:hover { opacity: 1; }\n    }\n  }\n\n  /* ----- Loader ----- */\n  [data-civitai-ui='loader'] {\n    display: inline-block;\n    border-radius: 50%;\n    border-style: solid;\n    border-color: color-mix(in srgb, currentColor 25%, transparent);\n    border-top-color: currentColor;\n    color: var(--civitai-color-primary);\n    animation: civitai-ui-spin 0.7s linear infinite;\n\n    /*\n     * Documented DEFAULT (MARKUP.md): size=md. Applied on the base rule so a\n     * BARE loader \u2014 `<span data-civitai-ui=\"loader\">` with no `data-size` \u2014 has\n     * real dimensions (otherwise 0\u00D70 and invisible). sm/lg OVERRIDE below.\n     */\n    width: 22px;\n    height: 22px;\n    border-width: 3px;\n\n    &[data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n    &[data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n    &[data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n  }\n  [data-civitai-ui='button'] [data-civitai-ui='loader'] {\n    color: currentColor;\n  }\n  @keyframes civitai-ui-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ----- Badge ----- */\n  [data-civitai-ui='badge'] {\n    display: inline-flex;\n    align-items: center;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.02em;\n\n    /*\n     * Documented DEFAULTS (MARKUP.md): variant=filled, size=md. Applied on the\n     * base rule so a BARE badge \u2014 `<span data-civitai-ui=\"badge\">` with no\n     * `data-variant`/`data-size` (MARKUP's own minimal example) \u2014 renders\n     * filled + md (padding + primary fill), not an unstyled, zero-padding pill.\n     * The explicit `[data-variant]`/`[data-size]` rules below OVERRIDE. Because\n     * the base now carries a primary `border-color`, the `light` variant (which\n     * previously relied on the base transparent border) explicitly resets it to\n     * transparent so light badges are visually unchanged.\n     */\n    height: 22px;\n    padding: 0 10px;\n    font-size: 11px;\n    background: var(--civitai-color-primary);\n    color: var(--civitai-color-primary-fg);\n    border-color: var(--civitai-color-primary);\n\n    &[data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n    &[data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n    &[data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 14%, transparent);\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n    }\n\n    /*\n     * Intent color via `data-color`, mirroring Alert's `data-color` contract\n     * (info / success / warning / error). Absent `data-color` => the default\n     * primary above (non-breaking). Each intent recolors the `filled`, `light`\n     * and `outline` variants with the same `color-mix()` token approach Alert\n     * uses; `filled` keeps the white `--civitai-color-primary-fg` text. These\n     * `[data-color][data-variant]` rules out-specify the plain-variant rules\n     * above, so order-independence holds.\n     */\n    &[data-color='info'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-info) 14%, transparent);\n        color: var(--civitai-color-info);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n    }\n    &[data-color='success'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-success) 14%, transparent);\n        color: var(--civitai-color-success);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n    }\n    &[data-color='warning'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n        color: var(--civitai-color-warning);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n    }\n    &[data-color='error'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-error) 14%, transparent);\n        color: var(--civitai-color-error);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n    }\n  }\n\n  /* ----- Slider ----- */\n  /*\n   * A themed native <input type=\"range\">: `accent-color` carries the primary\n   * tint (native control, so keyboard arrow-key nav + ARIA come for free), plus\n   * a full-width track, a token focus ring, and disabled/invalid states. Like\n   * checkbox/radio, the range input deliberately does NOT carry\n   * `data-civitai-ui-control` (that is the bordered field-input chrome). The\n   * label/description/error reuse the shared field markers, laid out in a\n   * column; an optional value read-out sits inline with the label in a header.\n   */\n  [data-civitai-ui='slider'] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  [data-civitai-ui-slider-header] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n  }\n  [data-civitai-ui-slider-value] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--civitai-color-text-dimmed);\n    font-variant-numeric: tabular-nums;\n  }\n  [data-civitai-ui='slider'] input[type='range'] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 6px;\n    margin: 6px 0;\n    padding: 0;\n    border-radius: 999px;\n    accent-color: var(--civitai-color-primary);\n    background: var(--civitai-color-gray-2);\n    cursor: pointer;\n  }\n  [data-theme='dark'] [data-civitai-ui='slider'] input[type='range'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui='slider'] input[type='range']:focus-visible {\n    outline: 2px solid var(--civitai-color-primary);\n    outline-offset: 4px;\n  }\n  [data-civitai-ui='slider'] input[type='range']:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    accent-color: var(--civitai-color-gray-5);\n  }\n  [data-civitai-ui='slider'][data-invalid] input[type='range'] {\n    accent-color: var(--civitai-color-error);\n  }\n\n  /* ----- SegmentedControl / Tabs ----- */\n  /*\n   * A `role=tablist` of segment buttons (`role=tab`). Presentational chrome\n   * only \u2014 the roving-tabindex + arrow-key nav + selection follow-focus live in\n   * the React binding (or must be author-provided for hand HTML). The selected\n   * segment (`aria-selected='true'`) lifts to the surface color with a soft\n   * shadow; unselected segments read dimmed. Paired tab panels use\n   * `data-civitai-ui-tabpanel` (role=tabpanel).\n   */\n  [data-civitai-ui='segmented-control'] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 4px;\n    background: var(--civitai-color-gray-1);\n    border-radius: var(--civitai-radius);\n    max-width: 100%;\n    overflow-x: auto;\n  }\n  [data-theme='dark'] [data-civitai-ui='segmented-control'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui-segment] {\n    -webkit-appearance: none;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    background: transparent;\n    color: var(--civitai-color-text-dimmed);\n    font-family: var(--civitai-font);\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    border-radius: calc(var(--civitai-radius) - 1px);\n    transition: background-color 120ms ease, color 120ms ease;\n\n    /* Documented DEFAULT (MARKUP.md): size=md. On the base rule so a bare\n       segment renders at md height, not zero-height. sm/lg override below. */\n    height: 30px;\n    padding: 0 14px;\n    font-size: 13px;\n\n    &[data-size='sm'] { height: 26px; padding: 0 10px; font-size: 12px; }\n    &[data-size='md'] { height: 30px; padding: 0 14px; font-size: 13px; }\n    &[data-size='lg'] { height: 38px; padding: 0 18px; font-size: 15px; }\n\n    &:hover:not(:disabled):not([aria-selected='true']):not([aria-checked='true']) {\n      color: var(--civitai-color-text);\n    }\n    /* Selected state \u2014 `aria-selected` in tabs mode (role=tab) OR `aria-checked`\n       in toggle mode (role=radio). Same visual treatment for both. */\n    &[aria-selected='true'],\n    &[aria-checked='true'] {\n      background: var(--civitai-color-surface);\n      color: var(--civitai-color-text);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n    }\n    &:focus-visible {\n      outline: 2px solid var(--civitai-color-primary);\n      outline-offset: 2px;\n    }\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n  [data-civitai-ui-tabpanel] {\n    color: var(--civitai-color-text);\n\n    &:focus-visible {\n      outline: 2px solid var(--civitai-color-primary);\n      outline-offset: 2px;\n    }\n    &[hidden] { display: none; }\n  }\n\n  /* ----- Toast ----- */\n  /*\n   * `toast-region` is the fixed-position `aria-live` host (bottom-right stack).\n   * The behavior \u2014 enqueue, auto-dismiss timers, portal \u2014 lives in the React\n   * binding's ToastProvider/useToast; the presentational `toast` is a standalone\n   * component so hand HTML and React share one visual contract. Each toast is\n   * opaque (it sits over content) with an intent-colored left accent, mirroring\n   * Alert's `data-color` set.\n   */\n  [data-civitai-ui='toast-region'] {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 9999;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: min(92vw, 380px);\n    pointer-events: none;\n  }\n  [data-civitai-ui='toast'] {\n    pointer-events: auto;\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    padding: 12px 14px;\n    border-radius: var(--civitai-radius);\n    background: var(--civitai-color-surface);\n    color: var(--civitai-color-text);\n    border: 1px solid var(--civitai-color-border);\n    border-left: 4px solid var(--civitai-color-border);\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n    font-size: 14px;\n\n    &[data-color='info'] { border-left-color: var(--civitai-color-info); }\n    &[data-color='success'] { border-left-color: var(--civitai-color-success); }\n    &[data-color='warning'] { border-left-color: var(--civitai-color-warning); }\n    &[data-color='error'] { border-left-color: var(--civitai-color-error); }\n\n    & [data-civitai-ui-toast-body] {\n      flex: 1;\n      min-width: 0;\n    }\n    & [data-civitai-ui-toast-title] {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n    & [data-civitai-ui-toast-close] {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      color: inherit;\n      font-size: 16px;\n      line-height: 1;\n      padding: 0;\n      opacity: 0.7;\n\n      &:hover { opacity: 1; }\n    }\n  }\n\n  /* ----- Tooltip ----- */\n  /*\n   * A hover/focus tooltip: a positioned `role=tooltip` bubble revealed when the\n   * wrapper is hovered or contains focus (pure-CSS reveal), or explicitly via\n   * `data-open='true'` (the React binding also wires `aria-describedby` +\n   * Escape-to-dismiss). The bubble is a dark chip (gray-9) with light text in\n   * both themes.\n   */\n  [data-civitai-ui='tooltip'] {\n    position: relative;\n    display: inline-flex;\n  }\n  [data-civitai-ui-tooltip-bubble] {\n    position: absolute;\n    bottom: calc(100% + 6px);\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 200;\n    max-width: 260px;\n    width: max-content;\n    padding: 4px 8px;\n    border-radius: var(--civitai-radius);\n    background: var(--civitai-color-gray-9);\n    color: var(--civitai-color-primary-fg);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.4;\n    text-align: center;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 120ms ease;\n  }\n  /*\n   * Reveal on hover/focus or an explicit `data-open='true'` \u2014 BUT\n   * `data-dismissed='true'` overrides (gates every reveal selector), so the\n   * React binding's Escape-to-dismiss can force-HIDE the bubble even while the\n   * pointer still hovers or focus is still within. The dismissed flag is cleared\n   * on the next hover/focus so the tooltip can re-open normally.\n   */\n  [data-civitai-ui='tooltip']:hover [data-civitai-ui-tooltip-bubble]:not([data-dismissed='true']),\n  [data-civitai-ui='tooltip']:focus-within [data-civitai-ui-tooltip-bubble]:not([data-dismissed='true']),\n  [data-civitai-ui-tooltip-bubble][data-open='true']:not([data-dismissed='true']) {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  /* ----- Image ----- */\n  /*\n   * A media container with a token placeholder background (visible while the\n   * image loads), object-fit control, and a broken-image fallback. `data-status`\n   * (loading|loaded|error) \u2014 set by the React binding's onLoad/onError, or by\n   * the author for hand HTML \u2014 fades the <img> in on load and swaps to the\n   * fallback overlay on error. Bare markup (no `data-status`) shows the image.\n   */\n  [data-civitai-ui='image'] {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    background: var(--civitai-color-gray-2);\n    border-radius: var(--civitai-radius);\n  }\n  [data-theme='dark'] [data-civitai-ui='image'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui-image-img] {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 1;\n    transition: opacity 200ms ease;\n\n    &[data-fit='contain'] { object-fit: contain; }\n    &[data-fit='cover'] { object-fit: cover; }\n  }\n  [data-civitai-ui='image'][data-status='loading'] [data-civitai-ui-image-img],\n  [data-civitai-ui='image'][data-status='error'] [data-civitai-ui-image-img] {\n    opacity: 0;\n  }\n  [data-civitai-ui-image-fallback] {\n    position: absolute;\n    inset: 0;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: 8px;\n    color: var(--civitai-color-text-dimmed);\n    font-size: 13px;\n    text-align: center;\n  }\n  [data-civitai-ui='image'][data-status='error'] [data-civitai-ui-image-fallback] {\n    display: flex;\n  }\n}\n\n\n/* ----- Select / Slider field wrappers -----\n   The shared -control/-label/-required/-description/-error primitives come from\n   @civitai/components (layered). Only the select/slider WRAPPERS live here \u2014 the\n   design-system package scopes its field-wrapper rule to the presentational\n   inputs (text-input/textarea/number-input). */\n[data-civitai-ui='select'],\n[data-civitai-ui='slider'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-text);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--civitai-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--civitai-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--civitai-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n\n/* ----- Slider ----- */\n[data-civitai-ui='slider'] [data-civitai-ui-label] {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n}\n[data-civitai-ui-slider-value] {\n  font-weight: 500;\n  color: var(--civitai-color-text-dimmed);\n  font-variant-numeric: tabular-nums;\n}\n[data-civitai-ui-range] {\n  width: 100%;\n  margin: 0;\n  accent-color: var(--civitai-color-primary);\n  cursor: pointer;\n}\n[data-civitai-ui-range]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui-range]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 2px;\n}\n\n/* ----- Collapse ----- */\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 0;\n  background: transparent;\n  border: none;\n  font-family: var(--civitai-font);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--civitai-color-text);\n  text-align: left;\n  cursor: pointer;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {\n  display: inline-block;\n  width: 1em;\n  color: var(--civitai-color-text-dimmed);\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {\n  padding-top: 4px;\n}\n\n/* ----- SegmentedControl ----- */\n[data-civitai-ui='segmented-control'] {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 2px;\n  padding: 3px;\n  background: var(--civitai-color-surface-2);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  vertical-align: middle;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] {\n  display: flex;\n  width: 100%;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: calc(var(--civitai-radius) - 3px);\n  background: transparent;\n  color: var(--civitai-color-text-dimmed);\n  font-family: var(--civitai-font);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] [data-civitai-ui-segment] {\n  flex: 1 1 0;\n}\n[data-civitai-ui='segmented-control'][data-size='sm'] [data-civitai-ui-segment] { height: 24px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='segmented-control'][data-size='md'] [data-civitai-ui-segment] { height: 30px; padding: 0 16px; font-size: 14px; }\n[data-civitai-ui='segmented-control'][data-size='lg'] [data-civitai-ui-segment] { height: 38px; padding: 0 20px; font-size: 16px; }\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:hover:not(:disabled):not([data-active]) {\n  color: var(--civitai-color-text);\n  background: color-mix(in srgb, var(--civitai-color-text) 6%, transparent);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment][data-active] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 1px;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n[data-civitai-ui='segmented-control'][data-disabled='true'] {\n  opacity: 0.7;\n}\n";
+export declare const BLOCKS_UI_STYLES = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n   Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #222;\n}\n@property --civitai-color-text-dimmed {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-body {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-border {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #1C7ED6;\n}\n@property --civitai-color-primary-fg {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-primary-light {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: rgba(34, 139, 230, 0.1);\n}\n@property --civitai-color-error {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fa5252;\n}\n@property --civitai-color-success {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-gray-0 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f8f9fa;\n}\n@property --civitai-color-gray-1 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f1f3f5;\n}\n@property --civitai-color-gray-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n@property --civitai-color-gray-3 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #dee2e6;\n}\n@property --civitai-color-gray-4 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-gray-5 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #adb5bd;\n}\n@property --civitai-color-gray-6 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-gray-7 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #495057;\n}\n@property --civitai-color-gray-8 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #343a40;\n}\n@property --civitai-color-gray-9 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #212529;\n}\n\n:root {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n  --civitai-bp-xs: 480px;\n  --civitai-bp-sm: 768px;\n  --civitai-bp-md: 1024px;\n  --civitai-bp-lg: 1184px;\n  --civitai-bp-xl: 1440px;\n}\n\n[data-theme='light'] {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n  --civitai-bp-xs: 480px;\n  --civitai-bp-sm: 768px;\n  --civitai-bp-md: 1024px;\n  --civitai-bp-lg: 1184px;\n  --civitai-bp-xl: 1440px;\n}\n\n[data-theme='dark'] {\n  --civitai-color-text: #C1C2C5;\n  --civitai-color-text-dimmed: #8c8fa3;\n  --civitai-color-body: #1A1B1E;\n  --civitai-color-surface: #1A1B1E;\n  --civitai-color-surface-2: #25262B;\n  --civitai-color-border: #373A40;\n  --civitai-color-primary: #1971C2;\n  --civitai-color-primary-hover: #1864AB;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n  --civitai-color-error: #e03131;\n  --civitai-color-success: #326D5C;\n  --civitai-color-warning: #e8590c;\n  --civitai-color-info: #1971C2;\n}\n\n/*\n * @civitai/components \u2014 attribute-driven, framework-agnostic component CSS.\n *\n * Contract: style is selected by `data-civitai-ui=\"<name>\"` + `data-variant` +\n * `data-size` (+ a few component-specific `data-*`). Theme via an ancestor\n * `[data-theme='light'|'dark']`. Tokens come from @civitai/theme's `--civitai-*`\n * custom properties (link `@civitai/theme/styles.css` alongside this file, or\n * call `injectStyles()` which injects both).\n *\n * ALL rules live in `@layer civitai.components` so a consumer's own unlayered\n * CSS always wins the cascade WITHOUT specificity fights. State colors are\n * derived with `color-mix()` from base tokens (no shade enumeration), and\n * structure uses native CSS nesting (no preprocessor).\n *\n * See MARKUP.md for the full per-component markup + ARIA contract.\n */\n@layer civitai.components {\n  [data-civitai-ui] {\n    box-sizing: border-box;\n    font-family: var(--civitai-font);\n\n    & *,\n    & *::before,\n    & *::after {\n      box-sizing: border-box;\n    }\n  }\n\n  /* ----- Button ----- */\n  [data-civitai-ui='button'] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    border: 1px solid transparent;\n    border-radius: var(--civitai-radius);\n    font-family: var(--civitai-font);\n    font-weight: 600;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n\n    /*\n     * Documented DEFAULTS (MARKUP.md): variant=filled, size=md. Applied on the\n     * BASE rule (unconditionally) so BARE markup \u2014 a `<button data-civitai-ui=\n     * \"button\">` with no `data-variant`/`data-size` \u2014 renders the documented\n     * default (filled + md), not an unstyled/zero-size button. The explicit\n     * `[data-variant]` / `[data-size]` rules below OVERRIDE (all four variants\n     * set their own bg/border/hover, so the base filled default only ever wins\n     * for a bare button). Every non-filled variant also sets its own\n     * `border-color`, so the base primary border never leaks to them.\n     */\n    background: var(--civitai-color-primary);\n    color: var(--civitai-color-primary-fg);\n    border-color: var(--civitai-color-primary);\n    height: 36px;\n    padding: 0 18px;\n    font-size: 14px;\n\n    &:hover:not(:disabled) {\n      background: var(--civitai-color-primary-hover);\n      border-color: var(--civitai-color-primary-hover);\n    }\n\n    &[data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n    &[data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n    &[data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n    &[data-full-width='true'] { width: 100%; }\n\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: var(--civitai-color-primary-hover);\n        border-color: var(--civitai-color-primary-hover);\n      }\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 12%, transparent);\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 22%, transparent);\n      }\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &[data-variant='subtle'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &:disabled,\n    &[aria-busy='true'] {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    & [data-civitai-ui-section] {\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  /* ----- TextInput / Textarea / NumberInput / Select ----- */\n  [data-civitai-ui='text-input'],\n  [data-civitai-ui='textarea'],\n  [data-civitai-ui='number-input'],\n  [data-civitai-ui='select'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-label] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--civitai-color-text);\n  }\n  [data-civitai-ui-required] {\n    color: var(--civitai-color-error);\n    margin-left: 2px;\n  }\n  [data-civitai-ui-description] {\n    font-size: 12px;\n    color: var(--civitai-color-text-dimmed);\n  }\n  [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui-control] {\n    width: 100%;\n    font-family: var(--civitai-font);\n    font-size: 14px;\n    color: var(--civitai-color-text);\n    background: var(--civitai-color-surface);\n    border: 1px solid var(--civitai-color-border);\n    border-radius: var(--civitai-radius);\n    padding: 8px 12px;\n    transition: border-color 120ms ease;\n\n    &:focus {\n      outline: none;\n      border-color: var(--civitai-color-primary);\n    }\n    &[aria-invalid='true'] {\n      border-color: var(--civitai-color-error);\n    }\n    &:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n  }\n  textarea[data-civitai-ui-control] {\n    resize: vertical;\n    line-height: 1.5;\n  }\n  /*\n   * Select (issue #181 F6): a native <select> reusing the shared\n   * `-control` field chrome (border/background/radius/focus/invalid, above).\n   * Keep the native disclosure caret (most robust + accessible); just make the\n   * control feel interactive and reserve room on the right so the caret never\n   * overlaps a long option label.\n   */\n  select[data-civitai-ui-control] {\n    cursor: pointer;\n    padding-right: 28px;\n    line-height: 1.4;\n  }\n  select[data-civitai-ui-control]:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ----- Checkbox / Radio (issue #181 F6) ----- */\n  /*\n   * Themed native <input type=\"checkbox\">/<input type=\"radio\">: `accent-color`\n   * carries the primary tint (native control, so keyboard/indeterminate/tab all\n   * work for free), plus custom sizing, a token focus ring, and disabled state.\n   * The box + its inline label sit in a `-choice` row; description + error live\n   * below, reusing the shared field markers. The inputs deliberately do NOT\n   * carry `data-civitai-ui-control` (that is the full-width field-input chrome).\n   */\n  [data-civitai-ui='checkbox'],\n  [data-civitai-ui='radio'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-choice] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  [data-civitai-ui='checkbox'] [data-civitai-ui-label],\n  [data-civitai-ui='radio'] [data-civitai-ui-label] {\n    font-weight: 500;\n    cursor: pointer;\n    user-select: none;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox'],\n  [data-civitai-ui='radio'] input[type='radio'] {\n    accent-color: var(--civitai-color-primary);\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    flex: none;\n    cursor: pointer;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:focus-visible,\n  [data-civitai-ui='radio'] input[type='radio']:focus-visible {\n    outline: 2px solid var(--civitai-color-primary);\n    outline-offset: 2px;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled,\n  [data-civitai-ui='radio'] input[type='radio']:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled ~ [data-civitai-ui-label],\n  [data-civitai-ui='radio'] input[type='radio']:disabled ~ [data-civitai-ui-label] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  /* ----- RadioGroup (issue #181 F6) \u2014 role=radiogroup layout ----- */\n  [data-civitai-ui='radio-group'] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  [data-civitai-ui-radio-options] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    &[data-orientation='horizontal'] {\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n  }\n  /*\n   * RadioGroup group-level error (0.2.0): mirrors the field `-error` treatment.\n   * The message reuses the shared `[data-civitai-ui-error]` styling (12px, error\n   * token); the invalid state (`data-invalid` on the group, set alongside\n   * `aria-invalid`) tints the child radios' `accent-color` to the error token so\n   * the invalid cue reads on the group, not just the message text \u2014 the group\n   * analogue of a field control's error-colored border.\n   */\n  [data-civitai-ui='radio-group'] [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui='radio-group'][data-invalid] input[type='radio'] {\n    accent-color: var(--civitai-color-error);\n  }\n\n  /* ----- Card ----- */\n  /*\n   * F5 (issue #181): in LIGHT mode --civitai-color-surface == --civitai-color-body\n   * (both #fefefe), so a borderless card is invisible against the page. Give\n   * every card a subtle DEFAULT hairline (a low-alpha mix of the border token)\n   * so a card WITHOUT `data-with-border` is still visible. `data-with-border`\n   * stays the stronger, explicit, fully-opaque border. Dark mode already\n   * differentiates surface from body, so the default hairline is removed there\n   * (see the [data-theme='dark'] rule below) \u2014 no over-adding. The default\n   * (no [data-theme]) light palette keeps the hairline, matching light mode.\n   */\n  [data-civitai-ui='card'] {\n    background: var(--civitai-color-surface);\n    border-radius: var(--civitai-radius);\n    color: var(--civitai-color-text);\n    border: 1px solid color-mix(in srgb, var(--civitai-color-border) 55%, transparent);\n\n    &[data-with-border='true'] {\n      border: 1px solid var(--civitai-color-border);\n    }\n    &[data-padding='sm'] { padding: 10px; }\n    &[data-padding='md'] { padding: 16px; }\n    &[data-padding='lg'] { padding: 24px; }\n  }\n  /*\n   * Dark already differentiates surface (#1A1B1E) from body \u2014 drop the default\n   * hairline on a borderless card so dark is visually unchanged. An explicit\n   * `data-with-border` still renders its full border.\n   */\n  [data-theme='dark'] [data-civitai-ui='card']:not([data-with-border='true']) {\n    border: 0;\n  }\n\n  /* ----- Stack / Group ----- */\n  [data-civitai-ui='stack'] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n\n    &[data-gap='sm'] { gap: 8px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n  [data-civitai-ui='group'] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    /*\n     * RESPONSIVE BASE. A group is a ROW, and a row of three or more controls\n     * has no escape at phone widths \u2014 a block's slot is ~360px there, so the\n     * row simply ran off the edge.\n     *\n     * \uD83D\uDD34 There are THREE `group` surfaces, and for TWO of them this is a NEW\n     * DEFAULT \u2014 do not read it as the CSS merely catching up:\n     *   - `@civitai/blocks-react`'s `<Group>` defaults `wrap = true` and writes\n     *     `flex-wrap` as an INLINE style, so its consumers already wrapped.\n     *     For that one, and only that one, this is the CSS agreeing with a\n     *     default that was already shipping.\n     *   - `@civitai/components-react`'s `<Group>` writes NO inline style and has\n     *     NO `wrap` prop, so it resolves against this rule \u2014 a React consumer\n     *     that did NOT wrap before.\n     *   - bare `data-civitai-ui=\"group\"` markup, the framework-agnostic contract\n     *     this package exists to serve \u2014 likewise.\n     * Nothing could see the disagreement, because each surface was only ever\n     * tested against itself. TWO tests now pin it, one per React surface \u2014 there\n     * is no single \"the parity test\":\n     *   - `civitai-blocks-react/test/Group.test.tsx` reads the wrap default off\n     *     ITS `<Group>` and compares it to this rule, so flipping either alone\n     *     fails;\n     *   - `civitai-components-react/test/html-vs-react-parity.browser.test.tsx`\n     *     (\"styling anchors \u2014 Group\") asserts the COMPUTED value on both the\n     *     React and the bare-markup render, which is what covers the other two\n     *     surfaces. A parity check alone cannot: deleting this rule moves both\n     *     of its arms identically, so only the absolute anchor sees it.\n     *\n     * \uD83D\uDD34 The three-surface distinction is load-bearing for the RELEASE, not just\n     * the prose: \"existing callers notice\" is what `RELEASING.md` reserves\n     * `major` for, and it is true for two of the three surfaces. Shipped as a\n     * MINOR by maintainer decision \u2014 see the changeset for the reasoning and for\n     * the upgrade note that decision makes load-bearing.\n     *\n     * Opt out with `data-nowrap=\"true\"`. An inline `flex-wrap` also still\n     * outranks this layer, so existing markup that already sets it is untouched.\n     */\n    flex-wrap: wrap;\n\n    /*\n     * A flex item defaults to `min-width: auto`, which refuses to shrink below\n     * its CONTENT width \u2014 so one long label (a model name, a prompt) pushes the\n     * row past the slot even WITH wrap. `min-width: 0` lets it shrink.\n     *\n     * \uD83D\uDD34 SCOPE, measured: this only matters for a child whose computed\n     * `overflow` is `visible`. Per CSS Flexbox \u00A74.5 an item with any other\n     * `overflow` ALREADY has an automatic minimum size of 0 \u2014 so a child that\n     * sets `overflow: hidden`, as any `text-overflow: ellipsis` child must, is\n     * unaffected by this line. An earlier version of this comment claimed\n     * ellipsis \"can never engage\" without it, which was exactly backwards; the\n     * browser guard built on that belief used an ellipsis fixture and therefore\n     * passed with this rule DELETED. Both are fixed \u2014 see\n     * `civitai-blocks-react/test/responsive-group.browser.test.tsx`.\n     *\n     * Specificity is (0,1,0), not zero: `&` carries the parent selector's, and\n     * `:where(*)` is specificity-identical to `*`, so that wrapper bought\n     * nothing and has been dropped. What actually lets a CONSUMER's own rule\n     * win is `@layer civitai.components`, which every rule in this file sits\n     * inside \u2014 unlayered author CSS beats it regardless of specificity. Note\n     * the limit: another rule INSIDE this layer does not get that protection,\n     * so a future non-zero `min-width` on a nested component here must be more\n     * specific or come later.\n     */\n    & > * { min-width: 0; }\n\n    &[data-nowrap='true'] { flex-wrap: nowrap; }\n\n    &[data-gap='sm'] { gap: 6px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n\n  /* ----- Alert ----- */\n  [data-civitai-ui='alert'] {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    padding: 12px 14px;\n    border-radius: var(--civitai-radius);\n    border: 1px solid transparent;\n    font-size: 14px;\n    color: var(--civitai-color-text);\n\n    /*\n     * Documented DEFAULT (MARKUP.md): color=info (default intent). Applied on\n     * the base rule so a BARE alert \u2014 `<div data-civitai-ui=\"alert\">` with no\n     * `data-color` \u2014 renders the info intent (tinted bg + border), not just the\n     * neutral chrome. The explicit `[data-color]` rules below OVERRIDE (success\n     * / warning / error each set both bg + border-color), so the info default\n     * only ever wins when `data-color` is omitted.\n     */\n    background: color-mix(in srgb, var(--civitai-color-info) 12%, transparent);\n    border-color: color-mix(in srgb, var(--civitai-color-info) 35%, transparent);\n\n    &[data-color='info'] {\n      background: color-mix(in srgb, var(--civitai-color-info) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-info) 35%, transparent);\n    }\n    &[data-color='success'] {\n      background: color-mix(in srgb, var(--civitai-color-success) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-success) 35%, transparent);\n    }\n    &[data-color='warning'] {\n      background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-warning) 35%, transparent);\n    }\n    &[data-color='error'] {\n      background: color-mix(in srgb, var(--civitai-color-error) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-error) 35%, transparent);\n    }\n    & [data-civitai-ui-alert-body] {\n      flex: 1;\n      min-width: 0;\n    }\n    & [data-civitai-ui-alert-title] {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n    & [data-civitai-ui-alert-close] {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      color: inherit;\n      font-size: 16px;\n      line-height: 1;\n      padding: 0;\n      opacity: 0.7;\n\n      &:hover { opacity: 1; }\n    }\n  }\n\n  /* ----- Loader ----- */\n  [data-civitai-ui='loader'] {\n    display: inline-block;\n    border-radius: 50%;\n    border-style: solid;\n    border-color: color-mix(in srgb, currentColor 25%, transparent);\n    border-top-color: currentColor;\n    color: var(--civitai-color-primary);\n    animation: civitai-ui-spin 0.7s linear infinite;\n\n    /*\n     * Documented DEFAULT (MARKUP.md): size=md. Applied on the base rule so a\n     * BARE loader \u2014 `<span data-civitai-ui=\"loader\">` with no `data-size` \u2014 has\n     * real dimensions (otherwise 0\u00D70 and invisible). sm/lg OVERRIDE below.\n     */\n    width: 22px;\n    height: 22px;\n    border-width: 3px;\n\n    &[data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n    &[data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n    &[data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n  }\n  [data-civitai-ui='button'] [data-civitai-ui='loader'] {\n    color: currentColor;\n  }\n  @keyframes civitai-ui-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ----- Badge ----- */\n  [data-civitai-ui='badge'] {\n    display: inline-flex;\n    align-items: center;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.02em;\n\n    /*\n     * Documented DEFAULTS (MARKUP.md): variant=filled, size=md. Applied on the\n     * base rule so a BARE badge \u2014 `<span data-civitai-ui=\"badge\">` with no\n     * `data-variant`/`data-size` (MARKUP's own minimal example) \u2014 renders\n     * filled + md (padding + primary fill), not an unstyled, zero-padding pill.\n     * The explicit `[data-variant]`/`[data-size]` rules below OVERRIDE. Because\n     * the base now carries a primary `border-color`, the `light` variant (which\n     * previously relied on the base transparent border) explicitly resets it to\n     * transparent so light badges are visually unchanged.\n     */\n    height: 22px;\n    padding: 0 10px;\n    font-size: 11px;\n    background: var(--civitai-color-primary);\n    color: var(--civitai-color-primary-fg);\n    border-color: var(--civitai-color-primary);\n\n    &[data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n    &[data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n    &[data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 14%, transparent);\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n    }\n\n    /*\n     * Intent color via `data-color`, mirroring Alert's `data-color` contract\n     * (info / success / warning / error). Absent `data-color` => the default\n     * primary above (non-breaking). Each intent recolors the `filled`, `light`\n     * and `outline` variants with the same `color-mix()` token approach Alert\n     * uses; `filled` keeps the white `--civitai-color-primary-fg` text. These\n     * `[data-color][data-variant]` rules out-specify the plain-variant rules\n     * above, so order-independence holds.\n     */\n    &[data-color='info'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-info) 14%, transparent);\n        color: var(--civitai-color-info);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n    }\n    &[data-color='success'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-success) 14%, transparent);\n        color: var(--civitai-color-success);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n    }\n    &[data-color='warning'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n        color: var(--civitai-color-warning);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n    }\n    &[data-color='error'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-error) 14%, transparent);\n        color: var(--civitai-color-error);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n    }\n  }\n\n  /* ----- Slider ----- */\n  /*\n   * A themed native <input type=\"range\">: `accent-color` carries the primary\n   * tint (native control, so keyboard arrow-key nav + ARIA come for free), plus\n   * a full-width track, a token focus ring, and disabled/invalid states. Like\n   * checkbox/radio, the range input deliberately does NOT carry\n   * `data-civitai-ui-control` (that is the bordered field-input chrome). The\n   * label/description/error reuse the shared field markers, laid out in a\n   * column; an optional value read-out sits inline with the label in a header.\n   */\n  [data-civitai-ui='slider'] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  [data-civitai-ui-slider-header] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n  }\n  [data-civitai-ui-slider-value] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--civitai-color-text-dimmed);\n    font-variant-numeric: tabular-nums;\n  }\n  [data-civitai-ui='slider'] input[type='range'] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 6px;\n    margin: 6px 0;\n    padding: 0;\n    border-radius: 999px;\n    accent-color: var(--civitai-color-primary);\n    background: var(--civitai-color-gray-2);\n    cursor: pointer;\n  }\n  [data-theme='dark'] [data-civitai-ui='slider'] input[type='range'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui='slider'] input[type='range']:focus-visible {\n    outline: 2px solid var(--civitai-color-primary);\n    outline-offset: 4px;\n  }\n  [data-civitai-ui='slider'] input[type='range']:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    accent-color: var(--civitai-color-gray-5);\n  }\n  [data-civitai-ui='slider'][data-invalid] input[type='range'] {\n    accent-color: var(--civitai-color-error);\n  }\n\n  /* ----- SegmentedControl / Tabs ----- */\n  /*\n   * A `role=tablist` of segment buttons (`role=tab`). Presentational chrome\n   * only \u2014 the roving-tabindex + arrow-key nav + selection follow-focus live in\n   * the React binding (or must be author-provided for hand HTML). The selected\n   * segment (`aria-selected='true'`) lifts to the surface color with a soft\n   * shadow; unselected segments read dimmed. Paired tab panels use\n   * `data-civitai-ui-tabpanel` (role=tabpanel).\n   */\n  [data-civitai-ui='segmented-control'] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 4px;\n    background: var(--civitai-color-gray-1);\n    border-radius: var(--civitai-radius);\n    max-width: 100%;\n    overflow-x: auto;\n  }\n  [data-theme='dark'] [data-civitai-ui='segmented-control'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui-segment] {\n    -webkit-appearance: none;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    background: transparent;\n    color: var(--civitai-color-text-dimmed);\n    font-family: var(--civitai-font);\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    border-radius: calc(var(--civitai-radius) - 1px);\n    transition: background-color 120ms ease, color 120ms ease;\n\n    /* Documented DEFAULT (MARKUP.md): size=md. On the base rule so a bare\n       segment renders at md height, not zero-height. sm/lg override below. */\n    height: 30px;\n    padding: 0 14px;\n    font-size: 13px;\n\n    &[data-size='sm'] { height: 26px; padding: 0 10px; font-size: 12px; }\n    &[data-size='md'] { height: 30px; padding: 0 14px; font-size: 13px; }\n    &[data-size='lg'] { height: 38px; padding: 0 18px; font-size: 15px; }\n\n    &:hover:not(:disabled):not([aria-selected='true']):not([aria-checked='true']) {\n      color: var(--civitai-color-text);\n    }\n    /* Selected state \u2014 `aria-selected` in tabs mode (role=tab) OR `aria-checked`\n       in toggle mode (role=radio). Same visual treatment for both. */\n    &[aria-selected='true'],\n    &[aria-checked='true'] {\n      background: var(--civitai-color-surface);\n      color: var(--civitai-color-text);\n      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n    }\n    &:focus-visible {\n      outline: 2px solid var(--civitai-color-primary);\n      outline-offset: 2px;\n    }\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n  [data-civitai-ui-tabpanel] {\n    color: var(--civitai-color-text);\n\n    &:focus-visible {\n      outline: 2px solid var(--civitai-color-primary);\n      outline-offset: 2px;\n    }\n    &[hidden] { display: none; }\n  }\n\n  /* ----- Toast ----- */\n  /*\n   * `toast-region` is the fixed-position `aria-live` host (bottom-right stack).\n   * The behavior \u2014 enqueue, auto-dismiss timers, portal \u2014 lives in the React\n   * binding's ToastProvider/useToast; the presentational `toast` is a standalone\n   * component so hand HTML and React share one visual contract. Each toast is\n   * opaque (it sits over content) with an intent-colored left accent, mirroring\n   * Alert's `data-color` set.\n   */\n  [data-civitai-ui='toast-region'] {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 9999;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: min(92vw, 380px);\n    pointer-events: none;\n  }\n  [data-civitai-ui='toast'] {\n    pointer-events: auto;\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    padding: 12px 14px;\n    border-radius: var(--civitai-radius);\n    background: var(--civitai-color-surface);\n    color: var(--civitai-color-text);\n    border: 1px solid var(--civitai-color-border);\n    border-left: 4px solid var(--civitai-color-border);\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n    font-size: 14px;\n\n    &[data-color='info'] { border-left-color: var(--civitai-color-info); }\n    &[data-color='success'] { border-left-color: var(--civitai-color-success); }\n    &[data-color='warning'] { border-left-color: var(--civitai-color-warning); }\n    &[data-color='error'] { border-left-color: var(--civitai-color-error); }\n\n    & [data-civitai-ui-toast-body] {\n      flex: 1;\n      min-width: 0;\n    }\n    & [data-civitai-ui-toast-title] {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n    & [data-civitai-ui-toast-close] {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      color: inherit;\n      font-size: 16px;\n      line-height: 1;\n      padding: 0;\n      opacity: 0.7;\n\n      &:hover { opacity: 1; }\n    }\n  }\n\n  /* ----- Tooltip ----- */\n  /*\n   * A hover/focus tooltip: a positioned `role=tooltip` bubble revealed when the\n   * wrapper is hovered or contains focus (pure-CSS reveal), or explicitly via\n   * `data-open='true'` (the React binding also wires `aria-describedby` +\n   * Escape-to-dismiss). The bubble is a dark chip (gray-9) with light text in\n   * both themes.\n   */\n  [data-civitai-ui='tooltip'] {\n    position: relative;\n    display: inline-flex;\n  }\n  [data-civitai-ui-tooltip-bubble] {\n    position: absolute;\n    bottom: calc(100% + 6px);\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 200;\n    max-width: 260px;\n    width: max-content;\n    padding: 4px 8px;\n    border-radius: var(--civitai-radius);\n    background: var(--civitai-color-gray-9);\n    color: var(--civitai-color-primary-fg);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.4;\n    text-align: center;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 120ms ease;\n  }\n  /*\n   * Reveal on hover/focus or an explicit `data-open='true'` \u2014 BUT\n   * `data-dismissed='true'` overrides (gates every reveal selector), so the\n   * React binding's Escape-to-dismiss can force-HIDE the bubble even while the\n   * pointer still hovers or focus is still within. The dismissed flag is cleared\n   * on the next hover/focus so the tooltip can re-open normally.\n   */\n  [data-civitai-ui='tooltip']:hover [data-civitai-ui-tooltip-bubble]:not([data-dismissed='true']),\n  [data-civitai-ui='tooltip']:focus-within [data-civitai-ui-tooltip-bubble]:not([data-dismissed='true']),\n  [data-civitai-ui-tooltip-bubble][data-open='true']:not([data-dismissed='true']) {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  /* ----- Image ----- */\n  /*\n   * A media container with a token placeholder background (visible while the\n   * image loads), object-fit control, and a broken-image fallback. `data-status`\n   * (loading|loaded|error) \u2014 set by the React binding's onLoad/onError, or by\n   * the author for hand HTML \u2014 fades the <img> in on load and swaps to the\n   * fallback overlay on error. Bare markup (no `data-status`) shows the image.\n   */\n  [data-civitai-ui='image'] {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    background: var(--civitai-color-gray-2);\n    border-radius: var(--civitai-radius);\n  }\n  [data-theme='dark'] [data-civitai-ui='image'] {\n    background: var(--civitai-color-surface-2);\n  }\n  [data-civitai-ui-image-img] {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 1;\n    transition: opacity 200ms ease;\n\n    &[data-fit='contain'] { object-fit: contain; }\n    &[data-fit='cover'] { object-fit: cover; }\n  }\n  [data-civitai-ui='image'][data-status='loading'] [data-civitai-ui-image-img],\n  [data-civitai-ui='image'][data-status='error'] [data-civitai-ui-image-img] {\n    opacity: 0;\n  }\n  [data-civitai-ui-image-fallback] {\n    position: absolute;\n    inset: 0;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: 8px;\n    color: var(--civitai-color-text-dimmed);\n    font-size: 13px;\n    text-align: center;\n  }\n  [data-civitai-ui='image'][data-status='error'] [data-civitai-ui-image-fallback] {\n    display: flex;\n  }\n}\n\n\n/* ----- Select / Slider field wrappers -----\n   The shared -control/-label/-required/-description/-error primitives come from\n   @civitai/components (layered). Only the select/slider WRAPPERS live here \u2014 the\n   design-system package scopes its field-wrapper rule to the presentational\n   inputs (text-input/textarea/number-input). */\n[data-civitai-ui='select'],\n[data-civitai-ui='slider'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-text);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--civitai-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--civitai-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--civitai-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n\n/* ----- Slider ----- */\n[data-civitai-ui='slider'] [data-civitai-ui-label] {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n}\n[data-civitai-ui-slider-value] {\n  font-weight: 500;\n  color: var(--civitai-color-text-dimmed);\n  font-variant-numeric: tabular-nums;\n}\n[data-civitai-ui-range] {\n  width: 100%;\n  margin: 0;\n  accent-color: var(--civitai-color-primary);\n  cursor: pointer;\n}\n[data-civitai-ui-range]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui-range]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 2px;\n}\n\n/* ----- Collapse ----- */\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 0;\n  background: transparent;\n  border: none;\n  font-family: var(--civitai-font);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--civitai-color-text);\n  text-align: left;\n  cursor: pointer;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {\n  display: inline-block;\n  width: 1em;\n  color: var(--civitai-color-text-dimmed);\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {\n  padding-top: 4px;\n}\n\n/* ----- SegmentedControl ----- */\n[data-civitai-ui='segmented-control'] {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 2px;\n  padding: 3px;\n  background: var(--civitai-color-surface-2);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  vertical-align: middle;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] {\n  display: flex;\n  width: 100%;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: calc(var(--civitai-radius) - 3px);\n  background: transparent;\n  color: var(--civitai-color-text-dimmed);\n  font-family: var(--civitai-font);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] [data-civitai-ui-segment] {\n  flex: 1 1 0;\n}\n[data-civitai-ui='segmented-control'][data-size='sm'] [data-civitai-ui-segment] { height: 24px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='segmented-control'][data-size='md'] [data-civitai-ui-segment] { height: 30px; padding: 0 16px; font-size: 14px; }\n[data-civitai-ui='segmented-control'][data-size='lg'] [data-civitai-ui-segment] { height: 38px; padding: 0 20px; font-size: 16px; }\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:hover:not(:disabled):not([data-active]) {\n  color: var(--civitai-color-text);\n  background: color-mix(in srgb, var(--civitai-color-text) 6%, transparent);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment][data-active] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 1px;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n[data-civitai-ui='segmented-control'][data-disabled='true'] {\n  opacity: 0.7;\n}\n";
 /**
  * Inject the pack's stylesheets into a document's `<head>`, idempotently.
  *

package/dist/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAqPA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,o8uCAA0D,CAAC;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAmBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAqPA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,4r3CAA0D,CAAC;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAmBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/blocks-react",
-  "version": "0.44.2",
+  "version": "0.45.0",
   "description": "React hooks and iframe transport for Civitai Apps. Pairs with @civitai/app-sdk/blocks.",
   "license": "MIT",
   "type": "module",
@@ -31,8 +31,8 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@civitai/components": "0.3.1",
-    "@civitai/theme": "0.2.1"
+    "@civitai/theme": "0.3.0",
+    "@civitai/components": "0.4.0"
   },
   "peerDependencies": {
     "@civitai/app-sdk": ">=0.29.0 <1.0.0",
@@ -50,7 +50,7 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.9.2",
     "vitest": "^4.1.11",
-    "@civitai/app-sdk": "^0.36.0"
+    "@civitai/app-sdk": "^0.37.0"
   },
   "publishConfig": {
     "access": "public"