@jini-ai/admin 0.4.11 → 0.4.13

package/dist/consent/react/ConsentFields.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+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' };
+const COLOR_TOKENS = [
+    { key: 'backgroundColor', label: 'Background', fallback: '#ffffff' }, { key: 'textColor', label: 'Text', fallback: '#222222' }, { key: 'borderColor', label: 'Border', fallback: '#222222' },
+];
+/** 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 engine 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

package/dist/core/entities/rules.js

@@ -42,40 +42,59 @@ const MAX_JSON_NODES = 10_000;
  *   {@link MAX_JSON_DEPTH}.
  * @overallScore 100
  */
-function describeNonJsonValue(value, depth = 0, budget = { nodes: 0 }) {
+function describeNonJsonValue({ value, depth, budget }, _optional = {}) {
     if (depth > MAX_JSON_DEPTH)
         return `nests deeper than ${MAX_JSON_DEPTH} levels`;
     if (++budget.nodes > MAX_JSON_NODES)
         return `holds more than ${MAX_JSON_NODES} values`;
-    if (value === null)
-        return null;
-    const type = typeof value;
-    if (type === 'string' || type === 'boolean')
-        return null;
-    if (type === 'number')
-        return Number.isFinite(value) ? null : 'is a non-finite number';
-    if (type !== 'object')
-        return `is a ${type}`;
-    if (Array.isArray(value)) {
-        for (const item of value) {
-            const reason = describeNonJsonValue(item, depth + 1, budget);
-            if (reason !== null)
-                return reason;
-        }
-        return null;
-    }
+    if (value === null || typeof value !== 'object')
+        return describeNonJsonScalar(value);
     // Rejects class instances, `Map`, `Date`, and anything else that survives `typeof === 'object'`
     // but does not round-trip through JSON as itself.
-    const proto = Object.getPrototypeOf(value);
-    if (proto !== Object.prototype && proto !== null)
+    if (!Array.isArray(value) && !isPlainObject(value))
         return 'is a non-plain object';
     for (const item of Object.values(value)) {
-        const reason = describeNonJsonValue(item, depth + 1, budget);
+        const reason = describeNonJsonValue({ value: item, depth: depth + 1, budget });
         if (reason !== null)
             return reason;
     }
     return null;
 }
+/** The leaf half of {@link describeNonJsonValue}: `null` or a non-object `value`. */
+function describeNonJsonScalar(value) {
+    if (value === null)
+        return null;
+    const type = typeof value;
+    if (type === 'string' || type === 'boolean')
+        return null;
+    if (type === 'number')
+        return Number.isFinite(value) ? null : 'is a non-finite number';
+    return `is a ${type}`;
+}
+function isPlainObject(value) {
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+}
+/** `null` when `typeof value` is `type`, otherwise "expected <label>, got <typeof value>". */
+function describeWrongType({ value, type, label }, _optional = {}) {
+    return typeof value === type ? null : `expected ${label}, got ${typeof value}`;
+}
+function describeNonDatetime(value) {
+    if (typeof value !== 'string')
+        return `expected an ISO-8601 string, got ${typeof value}`;
+    // A `datetime` that is not parseable renders fine and orders wrongly — the exact class of
+    // fault this whole check exists for, so it is a mismatch rather than a pass.
+    return Number.isNaN(Date.parse(value)) ? 'is not a parseable ISO-8601 timestamp' : null;
+}
+function describeNonNumber({ value, accepts, reason }, _optional = {}) {
+    if (typeof value !== 'number')
+        return `expected a number, got ${typeof value}`;
+    return accepts(value) ? null : reason;
+}
+function describeNonJson(value) {
+    const reason = describeNonJsonValue({ value, depth: 0, budget: { nodes: 0 } });
+    return reason === null ? null : `is not a JSON value: it ${reason}`;
+}
 /**
  * Whether `value` is a legal runtime value for `field`.
  *
@@ -98,27 +117,21 @@ export function describeAdminEntityFieldMismatch(field, value) {
     switch (field.kind) {
         case 'text':
         case 'relation':
-            return typeof value === 'string' ? null : `expected a string, got ${typeof value}`;
+            return describeWrongType({ value, type: 'string', label: 'a string' });
         case 'datetime':
-            if (typeof value !== 'string')
-                return `expected an ISO-8601 string, got ${typeof value}`;
-            // A `datetime` that is not parseable renders fine and orders wrongly — the exact class of
-            // fault this whole check exists for, so it is a mismatch rather than a pass.
-            return Number.isNaN(Date.parse(value)) ? 'is not a parseable ISO-8601 timestamp' : null;
+            return describeNonDatetime(value);
         case 'integer':
-            if (typeof value !== 'number')
-                return `expected a number, got ${typeof value}`;
-            return Number.isInteger(value) ? null : 'is not an integer';
+            return describeNonNumber({ value, accepts: Number.isInteger, reason: 'is not an integer' });
         case 'real':
-            if (typeof value !== 'number')
-                return `expected a number, got ${typeof value}`;
-            return Number.isFinite(value) ? null : 'is not a finite number';
+            return describeNonNumber({
+                value,
+                accepts: Number.isFinite,
+                reason: 'is not a finite number',
+            });
         case 'boolean':
-            return typeof value === 'boolean' ? null : `expected a boolean, got ${typeof value}`;
-        case 'json': {
-            const reason = describeNonJsonValue(value);
-            return reason === null ? null : `is not a JSON value: it ${reason}`;
-        }
+            return describeWrongType({ value, type: 'boolean', label: 'a boolean' });
+        case 'json':
+            return describeNonJson(value);
     }
 }
 /**
@@ -132,49 +145,63 @@ export function describeAdminEntityFieldMismatch(field, value) {
  * @complexity Time O(fields + row keys) plus the `json` walk; space O(violations).
  * @overallScore 100
  */
-function findRowViolations(descriptor, operation, row) {
+function findRowViolations({ descriptor, operation, row, }, _optional = {}) {
+    const hasId = typeof row.id === 'string' && row.id !== '';
+    const rowId = hasId ? row.id : '<no id>';
+    const at = { entity: descriptor.name, operation, rowId };
     const found = [];
-    const rowId = typeof row.id === 'string' && row.id !== '' ? row.id : '<no id>';
-    const push = (field, problem, detail) => {
-        found.push({ entity: descriptor.name, operation, rowId, field, problem, detail });
-    };
-    if (typeof row.id !== 'string' || row.id === '') {
-        push(IMPLICIT_ROW_KEY, 'wrong-type', 'every row must carry a non-empty string `id`');
+    if (!hasId) {
+        found.push({
+            ...at,
+            field: IMPLICIT_ROW_KEY,
+            problem: 'wrong-type',
+            detail: 'every row must carry a non-empty string `id`',
+        });
     }
-    const declared = new Set([IMPLICIT_ROW_KEY]);
     for (const field of descriptor.fields) {
-        declared.add(field.name);
-        const value = row[field.name];
-        if (value === undefined) {
-            if (field.required === true) {
-                push(field.name, 'missing-required', 'declared `required: true` but absent from the row');
-            }
-            continue;
-        }
-        const mismatch = describeAdminEntityFieldMismatch(field, value);
-        if (mismatch !== null)
-            push(field.name, 'wrong-type', `declared \`${field.kind}\`; ${mismatch}`);
+        const problem = describeFieldProblem({ field, value: row[field.name] });
+        if (problem !== null)
+            found.push({ ...at, field: field.name, ...problem });
     }
+    const declared = new Set([IMPLICIT_ROW_KEY, ...descriptor.fields.map((field) => field.name)]);
     for (const key of Object.keys(row)) {
         if (declared.has(key))
             continue;
-        push(key, 'undeclared-field', 'present on the row but not declared on the descriptor');
+        found.push({
+            ...at,
+            field: key,
+            problem: 'undeclared-field',
+            detail: 'present on the row but not declared on the descriptor',
+        });
     }
     return found;
 }
+/** What is wrong with one declared field's cell, or `null` when it conforms or is legally absent. */
+function describeFieldProblem({ field, value }, _optional = {}) {
+    if (value === undefined) {
+        return field.required === true
+            ? { problem: 'missing-required', detail: 'declared `required: true` but absent from the row' }
+            : null;
+    }
+    const mismatch = describeAdminEntityFieldMismatch(field, value);
+    return mismatch === null
+        ? null
+        : { problem: 'wrong-type', detail: `declared \`${field.kind}\`; ${mismatch}` };
+}
 /**
  * Runs `row` past its descriptor and reports anything wrong, then returns it unchanged.
  *
  * Deliberately identity-returning: this is an observation point, never a repair point. Coercing a
  * bad value here would hide the adapter bug it exists to expose.
  *
- * @complexity Time O(rows × fields); no-op and O(1) when `onViolation` is absent.
+ * Only {@link eraseEntityPort}'s checking wrapper calls this, and that wrapper exists only when
+ * `onViolation` is set — so the sink is required here rather than re-checked.
+ *
+ * @complexity Time O(rows × fields).
  * @overallScore 100
  */
-function checkRow(descriptor, operation, row, onViolation) {
-    if (onViolation === undefined)
-        return row;
-    for (const violation of findRowViolations(descriptor, operation, row))
+function checkRow({ descriptor, operation, row, onViolation, }, _optional = {}) {
+    for (const violation of findRowViolations({ descriptor, operation, row }))
         onViolation(violation);
     return row;
 }
@@ -208,18 +235,20 @@ export function eraseEntityPort(port, options = {}) {
         async list(query) {
             const page = await erased.list(query);
             for (const row of page.items)
-                checkRow(descriptor, 'list', row, onViolation);
+                checkRow({ descriptor, operation: 'list', row, onViolation });
             return page;
         },
         async get(id) {
             const row = await erased.get(id);
-            return row === null ? null : checkRow(descriptor, 'get', row, onViolation);
+            return row === null ? null : checkRow({ descriptor, operation: 'get', row, onViolation });
         },
         async create(input) {
-            return checkRow(descriptor, 'create', await erased.create(input), onViolation);
+            const row = await erased.create(input);
+            return checkRow({ descriptor, operation: 'create', row, onViolation });
         },
         async update(id, patch) {
-            return checkRow(descriptor, 'update', await erased.update(id, patch), onViolation);
+            const row = await erased.update(id, patch);
+            return checkRow({ descriptor, operation: 'update', row, onViolation });
         },
     };
     // Preserved by presence, not by a forwarding stub: a screen decides whether to render a delete
@@ -241,44 +270,60 @@ export function eraseEntityPort(port, options = {}) {
  * @complexity Time O(fields); space O(problems).
  * @overallScore 100
  */
-function findDescriptorProblems(descriptor, registryKey, registeredNames) {
-    const problems = [];
+function findDescriptorProblems({ descriptor, registryKey, registeredNames, }, _optional = {}) {
     const at = `'${registryKey}'`;
+    return [
+        ...findHeaderProblems({ descriptor, registryKey }),
+        ...findFieldProblems({ descriptor, registeredNames }),
+        ...findTitleFieldProblems({ descriptor }),
+    ].map((problem) => `${at}: ${problem}`);
+}
+function findHeaderProblems({ descriptor, registryKey }, _optional = {}) {
+    const problems = [];
     if (descriptor.name !== registryKey) {
         // One entity, one name. Allowing these to differ would leave the URL segment, the relation
         // target, and the registry key as three identifiers with no stated relationship between them.
-        problems.push(`${at}: registered under '${registryKey}' but its descriptor is named '${descriptor.name}'`);
+        problems.push(`registered under '${registryKey}' but its descriptor is named '${descriptor.name}'`);
     }
     if (descriptor.labelSingular === '' || descriptor.labelPlural === '') {
-        problems.push(`${at}: labelSingular and labelPlural must both be non-empty`);
+        problems.push('labelSingular and labelPlural must both be non-empty');
     }
     if (descriptor.fields.length === 0) {
-        problems.push(`${at}: declares no fields, so nothing but its id could ever be shown or edited`);
+        problems.push('declares no fields, so nothing but its id could ever be shown or edited');
     }
+    return problems;
+}
+function findFieldProblems({ descriptor, registeredNames, }, _optional = {}) {
+    const problems = [];
     const seen = new Set();
     for (const field of descriptor.fields) {
         if (field.name === '') {
-            problems.push(`${at}: a field has an empty name`);
+            problems.push('a field has an empty name');
             continue;
         }
         if (field.name === IMPLICIT_ROW_KEY) {
-            problems.push(`${at}: '${IMPLICIT_ROW_KEY}' is implicit on every row and must not be declared as a field`);
+            problems.push(`'${IMPLICIT_ROW_KEY}' is implicit on every row and must not be declared as a field`);
         }
         if (seen.has(field.name))
-            problems.push(`${at}: field '${field.name}' is declared more than once`);
+            problems.push(`field '${field.name}' is declared more than once`);
         seen.add(field.name);
         if (field.kind === 'relation' && !registeredNames.has(field.target)) {
-            problems.push(`${at}: field '${field.name}' targets '${field.target}', which is not a registered entity`);
+            problems.push(`field '${field.name}' targets '${field.target}', which is not a registered entity`);
         }
     }
+    return problems;
+}
+function findTitleFieldProblems({ descriptor }, _optional = {}) {
     const titleField = descriptor.fields.find((field) => field.name === descriptor.titleField);
     if (titleField === undefined) {
-        problems.push(`${at}: titleField '${descriptor.titleField}' does not name a declared field`);
+        return [`titleField '${descriptor.titleField}' does not name a declared field`];
     }
-    else if (titleField.kind !== 'text') {
-        problems.push(`${at}: titleField '${descriptor.titleField}' is kind '${titleField.kind}'; a title must be 'text'`);
+    if (titleField.kind !== 'text') {
+        return [
+            `titleField '${descriptor.titleField}' is kind '${titleField.kind}'; a title must be 'text'`,
+        ];
     }
-    return problems;
+    return [];
 }
 /**
  * Assembles entity ports into a registry, validating every descriptor first.
@@ -306,7 +351,7 @@ function findDescriptorProblems(descriptor, registryKey, registeredNames) {
 export function createAdminEntityRegistry(ports) {
     const entries = Object.entries(ports);
     const registeredNames = new Set(entries.map(([, port]) => port.descriptor.name));
-    const problems = entries.flatMap(([key, port]) => findDescriptorProblems(port.descriptor, key, registeredNames));
+    const problems = entries.flatMap(([key, port]) => findDescriptorProblems({ descriptor: port.descriptor, registryKey: key, registeredNames }));
     if (problems.length > 0) {
         throw new Error(`createAdminEntityRegistry: invalid descriptors\n- ${problems.join('\n- ')}`);
     }