@jini-ai/admin 0.4.12 → 0.6.10

package/dist/consent/react/ConsentFields.d.ts

@@ -0,0 +1,35 @@
+import type { ConsentFieldProblem, ConsentSettingsView } from './ConsentSettingsPanel.js';
+/**
+ * @file The consent settings split into the three sections a host can place on its own tabs:
+ * Banner (copy and links), Look (placement and appearance) and Rules (on/off, region, version).
+ * `ConsentSettingsPanel` stacks all three for hosts that want one screen. Every section is
+ * controlled: it renders `value`, reports edits as patches and shows the host's `problems` next to
+ * the field each one names. Hosts style the plain `jini-` classes.
+ */
+type TextKey = 'title' | 'message' | 'acceptLabel' | 'rejectLabel' | 'preferencesLabel' | 'privacyPolicyUrl' | 'secondaryLinkLabel' | 'secondaryLinkUrl';
+export interface ConsentFieldsProps {
+    value: ConsentSettingsView;
+    onChange(required: {
+        patch: Partial<ConsentSettingsView>;
+    }, optional?: Record<string, never>): void;
+    disabled?: boolean | undefined;
+    /** Server/engine problems; each one with a matching `field` renders under that control. */
+    problems?: readonly ConsentFieldProblem[] | undefined;
+    /** Host translations keyed by the exact fallback copy; unspecified entries use English. */
+    dictionary?: Readonly<Record<string, string>> | undefined;
+    /** Host max lengths per text field; the defaults are the engine's loosest bounds. */
+    limits?: Readonly<Partial<Record<TextKey | 'policyVersion', number>>> | undefined;
+}
+/** Banner copy and its links. Text is always plain text; the engine never renders it as HTML. */
+export declare function ConsentBannerFields({ value, onChange, disabled, problems, dictionary, limits }: ConsentFieldsProps): import("react").JSX.Element;
+/** On/off, region behavior and the policy version that re-asks visitors when it changes. */
+export declare function ConsentRulesFields({ value, onChange, disabled, problems, dictionary, limits, regionModes }: ConsentFieldsProps & {
+    regionModes?: readonly ConsentSettingsView['regionMode'][];
+}): import("react").JSX.Element;
+/** Placement, bounded appearance tokens and allowlisted custom CSS. The engine checks contrast and
+ * CSS safety; its problems arrive on the `appearance` field and show under the custom CSS. */
+export declare function ConsentLookFields({ value, onChange, disabled, problems, dictionary, placements }: ConsentFieldsProps & {
+    placements?: readonly string[];
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ConsentFields.d.ts.map

package/dist/consent/react/ConsentFields.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { defaultAdminTheme } from '@jini-ai/ui/theme';
+import { pixelInputValue, problemsFor, useConsentSettingsPanel, usePolicyVersionInput } from './settings-panel.hooks.js';
+const BANNER_FIELDS = [
+    { key: 'title', label: 'Banner title' }, { key: 'message', label: 'Banner message', multiline: true },
+    { key: 'acceptLabel', label: 'Accept button text' }, { key: 'rejectLabel', label: 'Reject button text' },
+    { key: 'preferencesLabel', label: 'Preferences label' }, { key: 'privacyPolicyUrl', label: 'Privacy policy page URL' },
+    { key: 'secondaryLinkLabel', label: 'Second link text' }, { key: 'secondaryLinkUrl', label: 'Second link URL' },
+];
+const REGION_LABELS = {
+    auto: 'Automatic (unknown region: opt-in)', 'opt-in': 'Opt-in everywhere (EU / UK)', 'opt-out': 'Opt-out everywhere (California)',
+};
+const PLACEMENT_LABELS = { 'bottom-bar': 'Bottom bar', 'bottom-left': 'Bottom left', 'bottom-right': 'Bottom right', 'top-bar': 'Top bar' };
+// Native color inputs need concrete colors rather than CSS variable expressions.
+const COLOR_TOKENS = [
+    { key: 'backgroundColor', label: 'Background', fallback: defaultAdminTheme.light.bg }, { key: 'textColor', label: 'Text', fallback: defaultAdminTheme.light.text }, { key: 'borderColor', label: 'Border', fallback: defaultAdminTheme.light.border },
+];
+/** The engine's own pixel bounds (`compileConsentCss`); out-of-range values come back as problems. */
+const PIXEL_TOKENS = [
+    { key: 'borderRadius', label: 'Corner radius (px)', min: 0, max: 32 }, { key: 'padding', label: 'Padding (px)', min: 8, max: 32 },
+    { key: 'fontSize', label: 'Text size (px)', min: 16, max: 24 }, { key: 'maxWidth', label: 'Max width (px)', min: 256, max: 960 },
+];
+function translator(dictionary = {}) {
+    return (text) => dictionary[text] ?? text;
+}
+/** One field's problems, linked to its control through `aria-describedby`. */
+function FieldProblems({ id, problems }) {
+    if (!problems.length)
+        return null;
+    return _jsx("span", { id: id, className: "jini-consent-field-problems", children: problems.map(problem => _jsx("span", { className: "jini-hint jini-hint-error", children: problem.message }, `${problem.code ?? ''}${problem.message}`)) });
+}
+/** Label + control + problems. Problems sit outside the label so they never join the control's
+ * name; they are its description and mark it invalid instead. */
+function Field({ label, field, problems, children }) {
+    const id = useId();
+    const own = problemsFor({ problems, field });
+    const attributes = own.length ? { id, 'aria-invalid': true, 'aria-describedby': `${id}-problems` } : { id };
+    return _jsxs("div", { className: "jini-consent-settings-field", children: [_jsx("label", { htmlFor: id, className: "jini-field-label", children: label }), children(attributes), _jsx(FieldProblems, { id: `${id}-problems`, problems: own })] });
+}
+/** Banner copy and its links. Text is always plain text; the engine never renders it as HTML. */
+export function ConsentBannerFields({ value, onChange, disabled = false, problems, dictionary, limits = {} }) {
+    const t = translator(dictionary);
+    const handlers = useConsentSettingsPanel({ value, onChange });
+    return _jsxs("fieldset", { disabled: disabled, className: "jini-consent-settings-fields", children: [_jsx("legend", { children: t('Banner text') }), BANNER_FIELDS.map(({ key, label, multiline }) => _jsx(Field, { label: t(label), field: key, problems: problems, children: aria => multiline
+                    ? _jsx("textarea", { className: "jini-input", value: value[key] ?? '', maxLength: limits[key] ?? 2000, rows: 3, onChange: handlers.text(key), ...aria })
+                    : _jsx("input", { className: "jini-input", type: "text", value: value[key] ?? '', maxLength: limits[key] ?? 2000, onChange: handlers.text(key), ...aria }) }, key)), _jsx("p", { className: "jini-hint", children: t('Link a published privacy page, such as /privacy. The second link is optional.') })] });
+}
+/** On/off, region behavior and the policy version that re-asks visitors when it changes. */
+export function ConsentRulesFields({ value, onChange, disabled = false, problems, dictionary, limits = {}, regionModes = ['auto', 'opt-in', 'opt-out'] }) {
+    const id = useId();
+    const t = translator(dictionary);
+    const handlers = useConsentSettingsPanel({ value, onChange });
+    const modes = regionModes.includes(value.regionMode) ? regionModes : [value.regionMode, ...regionModes];
+    return _jsxs("fieldset", { disabled: disabled, className: "jini-consent-settings-fields", children: [_jsx("legend", { children: t('Rules') }), _jsxs("button", { type: "button", className: value.enabled ? 'jini-toggle-row on' : 'jini-toggle-row', role: "switch", "aria-checked": value.enabled, "aria-labelledby": `${id}-enabled`, "aria-describedby": `${id}-hint`, onClick: handlers.toggle, children: [_jsxs("span", { className: "jini-toggle-row-text", children: [_jsx("span", { id: `${id}-enabled`, className: "jini-toggle-row-label", children: t('Enable cookie consent on this site') }), _jsx("span", { id: `${id}-hint`, className: "jini-toggle-row-hint", children: t('Applies to published site pages.') })] }), _jsx("span", { className: "jini-toggle-row-switch", "aria-hidden": "true" })] }), _jsx(Field, { label: t('Region mode'), field: "regionMode", problems: problems, children: aria => _jsx("select", { className: "jini-input", value: value.regionMode, onChange: handlers.region, ...aria, children: modes.map(mode => _jsx("option", { value: mode, children: t(REGION_LABELS[mode]) }, mode)) }) }), _jsx("p", { className: "jini-hint", children: t('California permits optional categories until opt-out. Global Privacy Control always disables analytics and marketing.') }), _jsx(Field, { label: t('Policy version'), field: "policyVersion", problems: problems, children: aria => _jsx(PolicyVersionInput, { value: value.policyVersion, onChange: onChange, maxLength: limits.policyVersion ?? 128, aria: aria }) }), _jsx("p", { className: "jini-hint", children: t('Change the policy version to ask visitors to choose again.') })] });
+}
+/** Placement, bounded appearance tokens and allowlisted custom CSS. The engine checks contrast and
+ * CSS safety; its problems arrive on the `appearance` field and show under the custom CSS. */
+export function ConsentLookFields({ value, onChange, disabled = false, problems, dictionary, placements = Object.keys(PLACEMENT_LABELS) }) {
+    const t = translator(dictionary);
+    const handlers = useConsentSettingsPanel({ value, onChange });
+    const appearance = value.appearance ?? {};
+    return _jsxs("fieldset", { disabled: disabled, className: "jini-consent-settings-fields", children: [_jsx("legend", { children: t('Look & position') }), _jsx(Field, { label: t('Position'), field: "placement", problems: problems, children: aria => _jsx("select", { className: "jini-input", value: value.placement ?? placements[0], onChange: handlers.placement, ...aria, children: placements.map(placement => _jsx("option", { value: placement, children: t(PLACEMENT_LABELS[placement] ?? placement) }, placement)) }) }), _jsxs("div", { className: "jini-consent-token-grid", children: [COLOR_TOKENS.map(token => _jsx(ColorToken, { label: t(token.label), value: appearance[token.key], fallback: token.fallback, resetLabel: t('Default'), onChange: handlers.token(token.key) }, token.key)), PIXEL_TOKENS.map(token => _jsx(Field, { label: t(token.label), field: token.key, children: attributes => _jsx("input", { className: "jini-input", type: "number", inputMode: "numeric", min: token.min, max: token.max, step: 1, placeholder: t('Default'), value: pixelInputValue({ value: appearance[token.key] }), onChange: event => handlers.token(token.key)(event.target.value === '' ? '' : `${event.target.value}px`), ...attributes }) }, token.key))] }), _jsx(Field, { label: t('Custom CSS'), field: "appearance", problems: problems, children: aria => _jsx("textarea", { className: "jini-input jini-consent-css", value: value.customCss ?? '', rows: 6, spellCheck: false, onChange: handlers.text('customCss'), ...aria }) }), _jsx("p", { className: "jini-hint", children: t('Only banner selectors and safe properties are allowed. Text needs 4.5:1 contrast.') })] });
+}
+/** A native color picker; unset shows the shared theme default and offers no reset. */
+function ColorToken({ label, value, fallback, resetLabel, onChange }) {
+    const id = useId();
+    return _jsxs("div", { className: "jini-consent-settings-field", children: [_jsx("label", { htmlFor: id, className: "jini-field-label", children: label }), _jsxs("span", { className: "jini-consent-color-row", children: [_jsx("input", { id: id, className: "jini-consent-color", type: "color", value: value ?? fallback, onChange: event => onChange(event.target.value) }), _jsx("code", { className: "jini-hint", children: value ?? resetLabel }), value !== undefined && _jsx("button", { type: "button", className: "jini-btn-link", "aria-label": `${resetLabel}: ${label}`, onClick: () => onChange(''), children: resetLabel })] })] });
+}
+/** Keep transient empty edits local; only a valid policy version reaches autosave.
+ * Native validity gives keyboard users an actionable error. @complexity O(version length), <=128. */
+function PolicyVersionInput({ value, onChange, maxLength, aria }) {
+    const { draft, change, blur } = usePolicyVersionInput({ value, onChange });
+    return _jsx("input", { className: "jini-input", type: "text", value: draft, required: true, pattern: String.raw `.*\S.*`, maxLength: maxLength, onChange: change, onBlur: blur, ...aria });
+}
+//# sourceMappingURL=ConsentFields.js.map

package/dist/consent/react/ConsentPreviewFrame.d.ts

@@ -0,0 +1,14 @@
+import { type ConsentPreviewWidth } from './settings-panel.hooks.js';
+export interface ConsentPreviewFrameProps {
+    /** The engine-gated page; `null` while it loads or when the host could not render it. */
+    html: string | null;
+    /** Shown in place of the frame while `html` is null. */
+    status?: string;
+    initialWidth?: ConsentPreviewWidth;
+    dictionary?: Readonly<Record<string, string>>;
+}
+/** The real rendered page with the banner, inert. The HTML is only ever the `srcdoc` of an iframe
+ * with an empty `sandbox`: no scripts, forms, popups or same-origin access, and it never enters the
+ * host DOM. Phone is 320px, the narrowest width the banner must still work at. */
+export declare function ConsentPreviewFrame({ html, status, initialWidth, dictionary }: ConsentPreviewFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=ConsentPreviewFrame.d.ts.map

package/dist/consent/react/ConsentPreviewFrame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConsentPreviewWidth } from './settings-panel.hooks.js';
+const WIDTHS = [{ id: 'phone', label: 'Phone' }, { id: 'desktop', label: 'Desktop' }];
+/** The real rendered page with the banner, inert. The HTML is only ever the `srcdoc` of an iframe
+ * with an empty `sandbox`: no scripts, forms, popups or same-origin access, and it never enters the
+ * host DOM. Phone is 320px, the narrowest width the banner must still work at. */
+export function ConsentPreviewFrame({ html, status = '', initialWidth = 'desktop', dictionary = {} }) {
+    const t = (text) => dictionary[text] ?? text;
+    const { width, setWidth } = useConsentPreviewWidth({ initial: initialWidth });
+    return _jsxs("section", { className: "jini-consent-preview", "aria-label": t('Banner preview'), children: [_jsx("div", { className: "jini-consent-preview-widths", role: "group", "aria-label": t('Preview width'), children: WIDTHS.map(option => _jsx("button", { type: "button", className: "jini-btn-secondary", "aria-pressed": width === option.id, onClick: () => setWidth(option.id), children: t(option.label) }, option.id)) }), html === null
+                ? _jsx("p", { className: "jini-hint jini-consent-preview-empty", children: status })
+                : _jsx("iframe", { className: `jini-consent-preview-frame is-${width}`, title: t('Banner preview'), sandbox: "", srcDoc: html, style: { width: width === 'phone' ? '320px' : '100%' } })] });
+}
+//# sourceMappingURL=ConsentPreviewFrame.js.map

package/dist/consent/react/ConsentSettingsPanel.d.ts

@@ -1,4 +1,15 @@
-/** The host's settings controller uses its existing ledger lifecycle. */
+import { type ConsentFieldsProps } from './ConsentFields.js';
+/** Bounded appearance tokens, as the engine accepts them: opaque hex colors and `Npx` lengths. */
+export interface ConsentAppearanceView {
+    backgroundColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    padding?: string;
+    fontSize?: string;
+    maxWidth?: string;
+}
+/** The host's consent configuration. The look fields are optional so older hosts stay valid. */
 export interface ConsentSettingsView {
     enabled: boolean;
     regionMode: 'auto' | 'opt-in' | 'opt-out';
@@ -9,8 +20,19 @@ export interface ConsentSettingsView {
     acceptLabel: string;
     rejectLabel: string;
     preferencesLabel: string;
+    placement?: string;
+    secondaryLinkLabel?: string;
+    secondaryLinkUrl?: string;
+    appearance?: ConsentAppearanceView;
+    customCss?: string;
+}
+/** One validation result. `field` names the setting it belongs to; field-less problems are the host's to show. */
+export interface ConsentFieldProblem {
+    message: string;
+    field?: string;
+    code?: string;
 }
-export interface ConsentSettingsPanelProps {
+export interface ConsentSettingsPanelProps extends Pick<ConsentFieldsProps, 'problems' | 'limits'> {
     value: ConsentSettingsView;
     onChange(required: {
         patch: Partial<ConsentSettingsView>;
@@ -21,7 +43,8 @@ export interface ConsentSettingsPanelProps {
     /** Host translations keyed by the exact fallback copy; unspecified entries use English. */
     dictionary?: Readonly<Record<string, string>>;
 }
-/** Shared jini settings classes keep the panel in the host's design language.
+/** The composed default for hosts that want one screen: Rules, Banner and Look stacked.
+ * Shared jini settings classes keep the panel in the host's design language.
  * Native labels/selects/checkboxes support keyboard use at desktop and narrow widths. */
-export declare function ConsentSettingsPanel({ value, onChange, loading, error, status, dictionary }: ConsentSettingsPanelProps): import("react").JSX.Element;
+export declare function ConsentSettingsPanel({ value, onChange, loading, error, status, dictionary, problems, limits }: ConsentSettingsPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=ConsentSettingsPanel.d.ts.map

package/dist/consent/react/ConsentSettingsPanel.js

@@ -1,24 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
-import { useConsentSettingsPanel, usePolicyVersionInput } from './settings-panel.hooks.js';
-const TEXT_FIELDS = [
-    ['title', 'Banner title', 2000], ['message', 'Banner message', 2000],
-    ['acceptLabel', 'Accept button text', 2000], ['rejectLabel', 'Reject button text', 2000],
-    ['preferencesLabel', 'Preferences label', 2000], ['policyVersion', 'Policy version', 128],
-    ['privacyPolicyUrl', 'Privacy policy page URL', 2000],
-];
-/** Shared jini settings classes keep the panel in the host's design language.
+import { ConsentBannerFields, ConsentLookFields, ConsentRulesFields } from './ConsentFields.js';
+/** The composed default for hosts that want one screen: Rules, Banner and Look stacked.
+ * Shared jini settings classes keep the panel in the host's design language.
  * Native labels/selects/checkboxes support keyboard use at desktop and narrow widths. */
-export function ConsentSettingsPanel({ value, onChange, loading, error, status, dictionary = {} }) {
+export function ConsentSettingsPanel({ value, onChange, loading, error, status, dictionary = {}, problems, limits }) {
     const id = useId();
     const t = (text) => dictionary[text] ?? text;
-    const handlers = useConsentSettingsPanel({ value, onChange });
-    return _jsxs("section", { className: "jini-settings-section", "aria-labelledby": `${id}-heading`, children: [_jsx("div", { className: "jini-section-head", children: _jsxs("div", { children: [_jsx("h4", { id: `${id}-heading`, children: t('Site cookie consent') }), _jsx("p", { className: "jini-hint", children: t('Provides the consent mechanism, not legal advice. Review your texts, categories, and privacy policy for your site.') })] }) }), _jsx("p", { className: "jini-hint", children: t('Off by default. In opt-in regions, optional scripts stay paused until a visitor chooses. Unclassified third-party scripts use the marketing category. Global Privacy Control disables analytics and marketing.') }), _jsxs("button", { type: "button", className: value.enabled ? 'jini-toggle-row on' : 'jini-toggle-row', role: "switch", "aria-checked": value.enabled, "aria-labelledby": `${id}-enabled`, "aria-describedby": `${id}-hint`, disabled: loading, onClick: handlers.toggle, children: [_jsxs("span", { className: "jini-toggle-row-text", children: [_jsx("span", { id: `${id}-enabled`, className: "jini-toggle-row-label", children: t('Enable cookie consent on this site') }), _jsx("span", { id: `${id}-hint`, className: "jini-toggle-row-hint", children: t('Applies to published site pages.') })] }), _jsx("span", { className: "jini-toggle-row-switch", "aria-hidden": "true" })] }), _jsxs("fieldset", { disabled: loading, className: "jini-consent-settings-fields", children: [_jsx("legend", { children: t('Banner settings') }), _jsxs("label", { className: "jini-consent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t('Region mode') }), _jsxs("select", { className: "jini-input", value: value.regionMode, onChange: handlers.region, children: [_jsx("option", { value: "auto", children: t('Automatic (unknown region: opt-in)') }), _jsx("option", { value: "opt-in", children: t('Opt-in everywhere (EU / UK)') }), _jsx("option", { value: "opt-out", children: t('Opt-out everywhere (California)') })] })] }), _jsx("p", { className: "jini-hint", children: t('Automatic uses a trusted request-region header when configured. California permits optional categories until opt-out; Global Privacy Control always disables analytics and marketing.') }), TEXT_FIELDS.map(([key, label, maxLength]) => _jsxs("label", { className: "jini-consent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t(label) }), key === 'policyVersion' ? _jsx(PolicyVersionInput, { value: value.policyVersion, onChange: onChange }) : key === 'message' ? _jsx("textarea", { className: "jini-input", value: value[key], maxLength: maxLength, rows: 3, onChange: handlers.text(key) }) : _jsx("input", { className: "jini-input", type: "text", value: value[key], maxLength: maxLength, onChange: handlers.text(key) })] }, key)), _jsx("p", { className: "jini-hint", children: t('Link a published privacy policy page with its URL, such as /privacy. Change the policy version to ask visitors to choose again.') })] }), error && _jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: error }), _jsx("p", { className: "jini-hint", role: "status", children: status })] });
-}
-/** Keep transient empty edits local; only a valid policy version reaches autosave.
- * Native validity gives keyboard users an actionable error. @complexity O(version length), <=128. */
-function PolicyVersionInput({ value, onChange }) {
-    const { draft, change, blur } = usePolicyVersionInput({ value, onChange });
-    return _jsx("input", { className: "jini-input", type: "text", value: draft, required: true, pattern: String.raw `.*\S.*`, maxLength: 128, onChange: change, onBlur: blur });
+    const fields = { value, onChange, disabled: loading, problems, dictionary, limits };
+    return _jsxs("section", { className: "jini-settings-section", "aria-labelledby": `${id}-heading`, children: [_jsx("div", { className: "jini-section-head", children: _jsxs("div", { children: [_jsx("h4", { id: `${id}-heading`, children: t('Site cookie consent') }), _jsx("p", { className: "jini-hint", children: t('Provides the consent mechanism, not legal advice. Review your texts, categories, and privacy policy for your site.') })] }) }), _jsx("p", { className: "jini-hint", children: t('Off by default. In opt-in regions, optional scripts stay paused until a visitor chooses. Unclassified third-party scripts use the marketing category. Global Privacy Control disables analytics and marketing.') }), _jsx(ConsentRulesFields, { ...fields }), _jsx(ConsentBannerFields, { ...fields }), _jsx(ConsentLookFields, { ...fields }), error && _jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: error }), _jsx("p", { className: "jini-hint", role: "status", children: status })] });
 }
 //# sourceMappingURL=ConsentSettingsPanel.js.map

package/dist/consent/react/index.d.ts

@@ -1,3 +1,8 @@
 export { ConsentSettingsPanel } from './ConsentSettingsPanel.js';
-export type { ConsentSettingsPanelProps, ConsentSettingsView } from './ConsentSettingsPanel.js';
+export type { ConsentAppearanceView, ConsentFieldProblem, ConsentSettingsPanelProps, ConsentSettingsView } from './ConsentSettingsPanel.js';
+export { ConsentBannerFields, ConsentLookFields, ConsentRulesFields } from './ConsentFields.js';
+export type { ConsentFieldsProps } from './ConsentFields.js';
+export { ConsentPreviewFrame } from './ConsentPreviewFrame.js';
+export type { ConsentPreviewFrameProps } from './ConsentPreviewFrame.js';
+export type { ConsentPreviewWidth } from './settings-panel.hooks.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/consent/react/index.js

@@ -1,2 +1,4 @@
 export { ConsentSettingsPanel } from './ConsentSettingsPanel.js';
+export { ConsentBannerFields, ConsentLookFields, ConsentRulesFields } from './ConsentFields.js';
+export { ConsentPreviewFrame } from './ConsentPreviewFrame.js';
 //# sourceMappingURL=index.js.map

package/dist/consent/react/settings-panel.hooks.d.ts

@@ -1,11 +1,30 @@
 import { type ChangeEvent, type FocusEvent } from 'react';
-import type { ConsentSettingsPanelProps, ConsentSettingsView } from './ConsentSettingsPanel.js';
+import type { ConsentAppearanceView, ConsentFieldProblem, ConsentSettingsPanelProps, ConsentSettingsView } from './ConsentSettingsPanel.js';
 /** Keep value conversions and toggle behavior out of the view. React owns event signatures. */
 export declare function useConsentSettingsPanel({ value, onChange }: Pick<ConsentSettingsPanelProps, 'value' | 'onChange'>, _options?: {}): {
     toggle: () => void;
     region: (event: ChangeEvent<HTMLSelectElement>) => void;
+    placement: (event: ChangeEvent<HTMLSelectElement>) => void;
     text: (key: keyof ConsentSettingsView) => (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Empty input unsets the token so the engine default applies again. */
+    token: (key: keyof ConsentAppearanceView) => (next: string) => void;
 };
+/** A new token object with `key` set, or removed when `value` is empty. Never mutates the input.
+ * @complexity O(t), t <= 7 tokens. */
+export declare function withAppearanceToken({ appearance, key, value }: {
+    appearance?: ConsentAppearanceView | undefined;
+    key: keyof ConsentAppearanceView;
+    value: string;
+}, _options?: {}): ConsentAppearanceView;
+/** `"12px"` → `"12"` for a number input; unset or hand-written values read empty. */
+export declare function pixelInputValue({ value }: {
+    value: string | undefined;
+}, _options?: {}): string;
+/** The problems a host attached to one field, in their original order. O(p). */
+export declare function problemsFor({ problems, field }: {
+    problems?: readonly ConsentFieldProblem[] | undefined;
+    field: string;
+}, _options?: {}): ConsentFieldProblem[];
 /** Keep transient empty edits local; only a valid policy version reaches autosave.
  * Native validity gives keyboard users an actionable error. Valid edits save before navigation.
  * @complexity O(version length), <=128. */
@@ -16,4 +35,12 @@ export declare function usePolicyVersionInput({ value, onChange }: Pick<ConsentS
     change: (event: ChangeEvent<HTMLInputElement>) => void;
     blur: (event: FocusEvent<HTMLInputElement>) => void;
 };
+export type ConsentPreviewWidth = 'phone' | 'desktop';
+/** The preview's own phone/desktop switch; the host never needs to own it. */
+export declare function useConsentPreviewWidth({ initial }?: {
+    initial?: ConsentPreviewWidth;
+}, _options?: {}): {
+    width: ConsentPreviewWidth;
+    setWidth: import("react").Dispatch<import("react").SetStateAction<ConsentPreviewWidth>>;
+};
 //# sourceMappingURL=settings-panel.hooks.d.ts.map

package/dist/consent/react/settings-panel.hooks.js

@@ -4,9 +4,30 @@ export function useConsentSettingsPanel({ value, onChange }, _options = {}) {
     return {
         toggle: () => onChange({ patch: { enabled: !value.enabled } }),
         region: (event) => onChange({ patch: { regionMode: event.target.value } }),
+        placement: (event) => onChange({ patch: { placement: event.target.value } }),
         text: (key) => (event) => onChange({ patch: { [key]: event.target.value } }),
+        /** Empty input unsets the token so the engine default applies again. */
+        token: (key) => (next) => onChange({ patch: { appearance: withAppearanceToken({ appearance: value.appearance, key, value: next }) } }),
     };
 }
+/** A new token object with `key` set, or removed when `value` is empty. Never mutates the input.
+ * @complexity O(t), t <= 7 tokens. */
+export function withAppearanceToken({ appearance = {}, key, value }, _options = {}) {
+    const next = { ...appearance };
+    if (value === '')
+        delete next[key];
+    else
+        next[key] = value;
+    return next;
+}
+/** `"12px"` → `"12"` for a number input; unset or hand-written values read empty. */
+export function pixelInputValue({ value }, _options = {}) {
+    return /^(\d+(?:\.\d+)?)px$/.exec(value ?? '')?.[1] ?? '';
+}
+/** The problems a host attached to one field, in their original order. O(p). */
+export function problemsFor({ problems = [], field }, _options = {}) {
+    return problems.filter(problem => problem.field === field);
+}
 /** Keep transient empty edits local; only a valid policy version reaches autosave.
  * Native validity gives keyboard users an actionable error. Valid edits save before navigation.
  * @complexity O(version length), <=128. */
@@ -27,4 +48,9 @@ export function usePolicyVersionInput({ value, onChange }, _options = {}) {
         },
     };
 }
+/** The preview's own phone/desktop switch; the host never needs to own it. */
+export function useConsentPreviewWidth({ initial = 'desktop' } = {}, _options = {}) {
+    const [width, setWidth] = useState(initial);
+    return { width, setWidth };
+}
 //# sourceMappingURL=settings-panel.hooks.js.map