@civitai/blocks-react 0.11.2 → 0.12.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/ui/TextInput.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,6GAmErB,CAAC"}

package/dist/ui/TextInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled text input. Wraps a native `<input>` (ref-forwarded). The label,
+ * description and error are wired to the control via `htmlFor` / `id` /
+ * `aria-describedby` / `aria-invalid` so the field is announced correctly.
+ *
+ * Auto-themed via `useBlocksStyles()`.
+ */
+export const TextInput = forwardRef(function TextInput({ label, description, error, required, className, inputClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-input-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "text-input", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("input", { ref: ref, ...rest, id: inputId, className: inputClassName, "data-civitai-ui-control": true, required: required, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=TextInput.js.map

package/dist/ui/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/ui/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAqB9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAChB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,OAAO,EAAE,CAAC;IAC5C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,YAAY,kBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,OAAO,4CACpB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,cAAc,mCAEzB,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,GACpC,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/Textarea.d.ts

@@ -0,0 +1,32 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Visible field label, rendered in a `<label>` linked to the textarea. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /**
+     * Error message. When set, the control gets `aria-invalid="true"`, the
+     * message is announced (`role="alert"`) and linked via `aria-describedby`.
+     */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /**
+     * Initial visible rows. Alias of the native `rows`; `minRows` wins if both
+     * are passed (kept for parity with Mantine's `minRows`). This is a static
+     * minimum — v0 does not auto-grow the textarea.
+     */
+    minRows?: number;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Class applied to the native `<textarea>`. */
+    textareaClassName?: string;
+}
+/**
+ * Labeled multi-line text input. Wraps a native `<textarea>` (ref-forwarded),
+ * same label/description/error wiring as `<TextInput>`. Auto-themed.
+ *
+ * `minRows` is a static minimum-rows hint (maps to the native `rows`); v0 does
+ * not auto-grow — note this limitation in the README.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/ui/Textarea.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,+GAsEpB,CAAC"}

package/dist/ui/Textarea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled multi-line text input. Wraps a native `<textarea>` (ref-forwarded),
+ * same label/description/error wiring as `<TextInput>`. Auto-themed.
+ *
+ * `minRows` is a static minimum-rows hint (maps to the native `rows`); v0 does
+ * not auto-grow — note this limitation in the README.
+ */
+export const Textarea = forwardRef(function Textarea({ label, description, error, required, minRows, rows, className, textareaClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-textarea-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "textarea", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("textarea", { ref: ref, ...rest, id: inputId, className: textareaClassName, "data-civitai-ui-control": true, rows: minRows ?? rows ?? 3, required: required, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=Textarea.js.map

package/dist/ui/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/ui/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2B9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,eAAe,OAAO,EAAE,CAAC;IAC/C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,UAAU,kBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,OAAO,4CACpB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,mBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,iBAAiB,mCAE5B,IAAI,EAAE,OAAO,IAAI,IAAI,IAAI,CAAC,EAC1B,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,GACpC,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/index.d.ts

@@ -1,11 +1,40 @@
 /**
  * `@civitai/blocks-react/ui` — opinionated UI components for App Block authoring.
  *
- * v0 scope: just the generic, manifest-driven `SettingsForm`. The W6
- * component pack (Button, Input, Card, Modal, …) will land here too as
- * separate exports; importing from `/ui` (not the root) keeps the
- * transport-only consumer's bundle lean.
+ * Two surfaces:
+ *
+ * 1. The headless, manifest-driven `SettingsForm` (W3 — host-themed native
+ *    controls; its contract is intentionally unstyled).
+ * 2. The W6 component pack — a small, Civitai-looking, self-styled component
+ *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
+ *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    which injects the pack's CSS into the block document's `<head>` once.
+ *    Theme via your block's `data-theme` root (gotcha #60).
+ *
+ * Importing from `/ui` (not the package root) keeps a transport-only block's
+ * bundle lean.
  */
 export { SettingsForm, SettingsFormError, isFieldVisible } from './SettingsForm.js';
 export type { SettingsFormProps } from './SettingsForm.js';
+export { injectBlocksStyles, useBlocksStyles, BLOCKS_UI_STYLES, } from './styles.js';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';
+export { TextInput } from './TextInput.js';
+export type { TextInputProps } from './TextInput.js';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export { Card } from './Card.js';
+export type { CardProps, CardPadding } from './Card.js';
+export { Stack } from './Stack.js';
+export type { StackProps } from './Stack.js';
+export { Group } from './Group.js';
+export type { GroupProps } from './Group.js';
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertColor } from './Alert.js';
+export { Loader } from './Loader.js';
+export type { LoaderProps, LoaderSize } from './Loader.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.js';
+export { Modal } from './Modal.js';
+export type { ModalProps, ModalSize } from './Modal.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/index.js

@@ -1,10 +1,32 @@
 /**
  * `@civitai/blocks-react/ui` — opinionated UI components for App Block authoring.
  *
- * v0 scope: just the generic, manifest-driven `SettingsForm`. The W6
- * component pack (Button, Input, Card, Modal, …) will land here too as
- * separate exports; importing from `/ui` (not the root) keeps the
- * transport-only consumer's bundle lean.
+ * Two surfaces:
+ *
+ * 1. The headless, manifest-driven `SettingsForm` (W3 — host-themed native
+ *    controls; its contract is intentionally unstyled).
+ * 2. The W6 component pack — a small, Civitai-looking, self-styled component
+ *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
+ *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    which injects the pack's CSS into the block document's `<head>` once.
+ *    Theme via your block's `data-theme` root (gotcha #60).
+ *
+ * Importing from `/ui` (not the package root) keeps a transport-only block's
+ * bundle lean.
  */
+// W3 — manifest-driven settings form (host-themed native controls).
 export { SettingsForm, SettingsFormError, isFieldVisible } from './SettingsForm.js';
+// W6 — runtime style injection.
+export { injectBlocksStyles, useBlocksStyles, BLOCKS_UI_STYLES, } from './styles.js';
+// W6 — component pack.
+export { Button } from './Button.js';
+export { TextInput } from './TextInput.js';
+export { Textarea } from './Textarea.js';
+export { Card } from './Card.js';
+export { Stack } from './Stack.js';
+export { Group } from './Group.js';
+export { Alert } from './Alert.js';
+export { Loader } from './Loader.js';
+export { Badge } from './Badge.js';
+export { Modal } from './Modal.js';
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,oEAAoE;AACpE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGpF,gCAAgC;AAChC,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/styles.d.ts

@@ -0,0 +1,19 @@
+/** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
+export declare const BLOCKS_UI_STYLES = "\n:root {\n  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ci-radius: 8px;\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #1c7ed6;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #e03131;\n  --ci-color-success: #2f9e44;\n  --ci-color-warning: #f08c00;\n  --ci-color-info: #1971c2;\n}\n\n[data-theme='light'] {\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n}\n\n[data-theme='dark'] {\n  --ci-color-text: #e6e6e6;\n  --ci-color-text-dimmed: #909296;\n  --ci-color-surface: #1a1b1e;\n  --ci-color-surface-2: #25262b;\n  --ci-color-border: #2c2e33;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #339af0;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #ff6b6b;\n  --ci-color-success: #51cf66;\n  --ci-color-warning: #ffa94d;\n  --ci-color-info: #4dabf7;\n}\n\n\n[data-civitai-ui] {\n  box-sizing: border-box;\n  font-family: var(--ci-font);\n}\n[data-civitai-ui] *,\n[data-civitai-ui] *::before,\n[data-civitai-ui] *::after {\n  box-sizing: border-box;\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(--ci-radius);\n  font-family: var(--ci-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  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n}\n[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }\n[data-civitai-ui='button'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {\n  background: var(--ci-color-primary-hover);\n  border-color: var(--ci-color-primary-hover);\n}\n[data-civitai-ui='button'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);\n}\n[data-civitai-ui='button'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button'][data-variant='subtle'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button']:disabled,\n[data-civitai-ui='button'][aria-busy='true'] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='button'] [data-civitai-ui-section] {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ----- TextInput / Textarea ----- */\n[data-civitai-ui='text-input'],\n[data-civitai-ui='textarea'] {\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(--ci-color-text);\n}\n[data-civitai-ui-required] {\n  color: var(--ci-color-error);\n  margin-left: 2px;\n}\n[data-civitai-ui-description] {\n  font-size: 12px;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui-error] {\n  font-size: 12px;\n  color: var(--ci-color-error);\n}\n[data-civitai-ui-control] {\n  width: 100%;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  color: var(--ci-color-text);\n  background: var(--ci-color-surface);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  padding: 8px 12px;\n  transition: border-color 120ms ease;\n}\n[data-civitai-ui-control]:focus {\n  outline: none;\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui-control][aria-invalid='true'] {\n  border-color: var(--ci-color-error);\n}\n[data-civitai-ui-control]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\ntextarea[data-civitai-ui-control] {\n  resize: vertical;\n  line-height: 1.5;\n}\n\n/* ----- Card ----- */\n[data-civitai-ui='card'] {\n  background: var(--ci-color-surface);\n  border-radius: var(--ci-radius);\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='card'][data-with-border='true'] {\n  border: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }\n[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }\n[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }\n\n/* ----- Stack / Group ----- */\n[data-civitai-ui='stack'] {\n  display: flex;\n  flex-direction: column;\n}\n[data-civitai-ui='group'] {\n  display: flex;\n  flex-direction: row;\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(--ci-radius);\n  border: 1px solid transparent;\n  font-size: 14px;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='alert'][data-color='info'] {\n  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='success'] {\n  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='warning'] {\n  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='error'] {\n  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {\n  flex: 1;\n  min-width: 0;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n[data-civitai-ui='alert'] [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[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {\n  opacity: 1;\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(--ci-color-primary);\n  animation: civitai-ui-spin 0.7s linear infinite;\n}\n[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n@keyframes civitai-ui-spin {\n  to { transform: rotate(360deg); }\n}\n[data-civitai-ui='button'] [data-civitai-ui='loader'] {\n  color: currentColor;\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[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='badge'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);\n  color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\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(--ci-color-surface);\n  color: var(--ci-color-text);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-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(--ci-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(--ci-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(--ci-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n";
+/**
+ * Inject the pack's stylesheet into a document's `<head>` exactly once.
+ * Idempotent: subsequent calls (including from other components) detect the
+ * marker `<style>` and no-op. Safe to call from any component's effect.
+ *
+ * @param doc Target document. Defaults to the ambient `document`. No-op when
+ *   no document is available (e.g. SSR) — callers in the browser get styling,
+ *   server renders fall back to the unstyled-but-functional markup.
+ */
+export declare function injectBlocksStyles(doc?: Document): void;
+/**
+ * Hook that injects the pack's styles once on mount. Every `/ui` component
+ * calls this so rendering any of them is enough to get the styling — the
+ * author never imports CSS or runs a setup step.
+ */
+export declare function useBlocksStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AA4XA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,uzUAAgC,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAgBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}

package/dist/ui/styles.js

@@ -0,0 +1,416 @@
+import { useEffect } from 'react';
+/**
+ * W6 component pack — runtime style injection.
+ *
+ * The package builds with `tsc` only — there is no bundler and no CSS
+ * pipeline (verified: `dist/` emits no `.css`). To give block authors a
+ * zero-setup, auto-themed pack we ship the CSS as a TS string constant and
+ * inject it into the block document's `<head>` once, idempotently. Every
+ * component calls `useBlocksStyles()` (a `useEffect` that calls
+ * `injectBlocksStyles()`), so simply rendering any `/ui` component is enough
+ * to get the styling — no CSS import, no setup step.
+ *
+ * Theming (gotcha #60): a block sets `data-theme={theme}` on its OWN root
+ * (from `BLOCK_INIT.theme`); the host can't reach across the iframe boundary.
+ * These rules theme via an ancestor `[data-theme='dark']` selector. The
+ * default (no `data-theme`, i.e. light) matches the palette in
+ * `starters/examples/hello-world/src/index.css`.
+ */
+/** Marker attribute on the injected `<style>` so injection is idempotent. */
+const STYLE_MARKER = 'data-civitai-blocks-ui';
+/**
+ * Design tokens. CSS custom properties under `:root` (light defaults),
+ * overridden under `[data-theme='dark']`. Palette mirrors Civitai's Mantine
+ * design language (8px radius, blue primary `#228be6`, the dark/light
+ * surfaces already used by the hello-world example).
+ */
+const TOKENS = `
+:root {
+  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ci-radius: 8px;
+  --ci-color-text: #1a1a1a;
+  --ci-color-text-dimmed: #6b7280;
+  --ci-color-surface: #ffffff;
+  --ci-color-surface-2: #f4f4f5;
+  --ci-color-border: #e0e0e3;
+  --ci-color-primary: #228be6;
+  --ci-color-primary-hover: #1c7ed6;
+  --ci-color-primary-fg: #ffffff;
+  --ci-color-error: #e03131;
+  --ci-color-success: #2f9e44;
+  --ci-color-warning: #f08c00;
+  --ci-color-info: #1971c2;
+}
+
+[data-theme='light'] {
+  --ci-color-text: #1a1a1a;
+  --ci-color-text-dimmed: #6b7280;
+  --ci-color-surface: #ffffff;
+  --ci-color-surface-2: #f4f4f5;
+  --ci-color-border: #e0e0e3;
+}
+
+[data-theme='dark'] {
+  --ci-color-text: #e6e6e6;
+  --ci-color-text-dimmed: #909296;
+  --ci-color-surface: #1a1b1e;
+  --ci-color-surface-2: #25262b;
+  --ci-color-border: #2c2e33;
+  --ci-color-primary: #228be6;
+  --ci-color-primary-hover: #339af0;
+  --ci-color-primary-fg: #ffffff;
+  --ci-color-error: #ff6b6b;
+  --ci-color-success: #51cf66;
+  --ci-color-warning: #ffa94d;
+  --ci-color-info: #4dabf7;
+}
+`;
+/**
+ * Component CSS. All selectors hang off the `data-civitai-ui="<name>"`
+ * attribute each component renders, so the pack never leaks styles onto the
+ * author's own markup.
+ */
+const COMPONENT_CSS = `
+[data-civitai-ui] {
+  box-sizing: border-box;
+  font-family: var(--ci-font);
+}
+[data-civitai-ui] *,
+[data-civitai-ui] *::before,
+[data-civitai-ui] *::after {
+  box-sizing: border-box;
+}
+
+/* ----- Button ----- */
+[data-civitai-ui='button'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--ci-radius);
+  font-family: var(--ci-font);
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  background: var(--ci-color-primary);
+  color: var(--ci-color-primary-fg);
+}
+[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }
+[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }
+[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }
+[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }
+[data-civitai-ui='button'][data-variant='filled'] {
+  background: var(--ci-color-primary);
+  color: var(--ci-color-primary-fg);
+  border-color: var(--ci-color-primary);
+}
+[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {
+  background: var(--ci-color-primary-hover);
+  border-color: var(--ci-color-primary-hover);
+}
+[data-civitai-ui='button'][data-variant='light'] {
+  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);
+  color: var(--ci-color-primary);
+  border-color: transparent;
+}
+[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);
+}
+[data-civitai-ui='button'][data-variant='outline'] {
+  background: transparent;
+  color: var(--ci-color-primary);
+  border-color: var(--ci-color-primary);
+}
+[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);
+}
+[data-civitai-ui='button'][data-variant='subtle'] {
+  background: transparent;
+  color: var(--ci-color-primary);
+  border-color: transparent;
+}
+[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);
+}
+[data-civitai-ui='button']:disabled,
+[data-civitai-ui='button'][aria-busy='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+[data-civitai-ui='button'] [data-civitai-ui-section] {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ----- TextInput / Textarea ----- */
+[data-civitai-ui='text-input'],
+[data-civitai-ui='textarea'] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+[data-civitai-ui-label] {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ci-color-text);
+}
+[data-civitai-ui-required] {
+  color: var(--ci-color-error);
+  margin-left: 2px;
+}
+[data-civitai-ui-description] {
+  font-size: 12px;
+  color: var(--ci-color-text-dimmed);
+}
+[data-civitai-ui-error] {
+  font-size: 12px;
+  color: var(--ci-color-error);
+}
+[data-civitai-ui-control] {
+  width: 100%;
+  font-family: var(--ci-font);
+  font-size: 14px;
+  color: var(--ci-color-text);
+  background: var(--ci-color-surface);
+  border: 1px solid var(--ci-color-border);
+  border-radius: var(--ci-radius);
+  padding: 8px 12px;
+  transition: border-color 120ms ease;
+}
+[data-civitai-ui-control]:focus {
+  outline: none;
+  border-color: var(--ci-color-primary);
+}
+[data-civitai-ui-control][aria-invalid='true'] {
+  border-color: var(--ci-color-error);
+}
+[data-civitai-ui-control]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+textarea[data-civitai-ui-control] {
+  resize: vertical;
+  line-height: 1.5;
+}
+
+/* ----- Card ----- */
+[data-civitai-ui='card'] {
+  background: var(--ci-color-surface);
+  border-radius: var(--ci-radius);
+  color: var(--ci-color-text);
+}
+[data-civitai-ui='card'][data-with-border='true'] {
+  border: 1px solid var(--ci-color-border);
+}
+[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }
+[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }
+[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }
+
+/* ----- Stack / Group ----- */
+[data-civitai-ui='stack'] {
+  display: flex;
+  flex-direction: column;
+}
+[data-civitai-ui='group'] {
+  display: flex;
+  flex-direction: row;
+}
+
+/* ----- Alert ----- */
+[data-civitai-ui='alert'] {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  border-radius: var(--ci-radius);
+  border: 1px solid transparent;
+  font-size: 14px;
+  color: var(--ci-color-text);
+}
+[data-civitai-ui='alert'][data-color='info'] {
+  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);
+  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);
+}
+[data-civitai-ui='alert'][data-color='success'] {
+  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);
+  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);
+}
+[data-civitai-ui='alert'][data-color='warning'] {
+  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);
+  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);
+}
+[data-civitai-ui='alert'][data-color='error'] {
+  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);
+  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);
+}
+[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {
+  flex: 1;
+  min-width: 0;
+}
+[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.7;
+}
+[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {
+  opacity: 1;
+}
+
+/* ----- Loader ----- */
+[data-civitai-ui='loader'] {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  color: var(--ci-color-primary);
+  animation: civitai-ui-spin 0.7s linear infinite;
+}
+[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }
+[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }
+[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }
+@keyframes civitai-ui-spin {
+  to { transform: rotate(360deg); }
+}
+[data-civitai-ui='button'] [data-civitai-ui='loader'] {
+  color: currentColor;
+}
+
+/* ----- Badge ----- */
+[data-civitai-ui='badge'] {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }
+[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }
+[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }
+[data-civitai-ui='badge'][data-variant='filled'] {
+  background: var(--ci-color-primary);
+  color: var(--ci-color-primary-fg);
+  border-color: var(--ci-color-primary);
+}
+[data-civitai-ui='badge'][data-variant='light'] {
+  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);
+  color: var(--ci-color-primary);
+}
+[data-civitai-ui='badge'][data-variant='outline'] {
+  background: transparent;
+  color: var(--ci-color-primary);
+  border-color: var(--ci-color-primary);
+}
+
+/* ----- Modal ----- */
+[data-civitai-ui='modal-overlay'] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 32px 16px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+[data-civitai-ui='modal'] {
+  background: var(--ci-color-surface);
+  color: var(--ci-color-text);
+  border: 1px solid var(--ci-color-border);
+  border-radius: var(--ci-radius);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+  width: 100%;
+  max-width: 440px;
+  outline: none;
+}
+[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }
+[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }
+[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }
+[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--ci-color-border);
+}
+[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 0;
+}
+[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--ci-color-text-dimmed);
+  font-size: 20px;
+  line-height: 1;
+  padding: 0;
+}
+[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {
+  color: var(--ci-color-text);
+}
+[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {
+  padding: 18px;
+}
+`;
+/** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
+export const BLOCKS_UI_STYLES = `${TOKENS}\n${COMPONENT_CSS}`;
+/**
+ * Inject the pack's stylesheet into a document's `<head>` exactly once.
+ * Idempotent: subsequent calls (including from other components) detect the
+ * marker `<style>` and no-op. Safe to call from any component's effect.
+ *
+ * @param doc Target document. Defaults to the ambient `document`. No-op when
+ *   no document is available (e.g. SSR) — callers in the browser get styling,
+ *   server renders fall back to the unstyled-but-functional markup.
+ */
+export function injectBlocksStyles(doc) {
+    const target = doc ?? (typeof document !== 'undefined' ? document : undefined);
+    if (!target)
+        return;
+    // Already injected → no-op (idempotent).
+    if (target.querySelector(`style[${STYLE_MARKER}]`))
+        return;
+    const style = target.createElement('style');
+    style.setAttribute(STYLE_MARKER, 'true');
+    style.textContent = BLOCKS_UI_STYLES;
+    const head = target.head ?? target.getElementsByTagName('head')[0];
+    if (head) {
+        head.appendChild(style);
+    }
+    else {
+        // Degenerate document with no <head>; fall back to documentElement.
+        target.documentElement.appendChild(style);
+    }
+}
+/**
+ * Hook that injects the pack's styles once on mount. Every `/ui` component
+ * calls this so rendering any of them is enough to get the styling — the
+ * author never imports CSS or runs a setup step.
+ */
+export function useBlocksStyles() {
+    useEffect(() => {
+        injectBlocksStyles();
+    }, []);
+}
+//# sourceMappingURL=styles.js.map