@jini-ai/admin 0.6.15-rc.1 → 0.6.15

package/dist/forms/html-rules.js

@@ -1,4 +1,4 @@
-import { FIELD_TYPE_REGISTRY } from "@jini-ai/cms/forms";
+import { FIELD_TYPE_REGISTRY, escapeFormHtml } from "@jini-ai/cms/forms";
 /** Persisted descriptors, including those derived from HTML, supply column headers, choice labels and field types. */
 export function formAnswerColumns({ fields }, display = {}) {
     return fields.map((field) => {
@@ -85,9 +85,6 @@ export function formSubmissionRows({ data, answerColumns }, { unknownFieldLabel
         return { key, label: column?.header.trim() || unknownFieldLabel, value: formatted, file: formAnswerFile({ value }) };
     });
 }
-function escapeHtml(value) {
-    return value.replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
-}
 const kindOf = (type) => Object.hasOwn(FIELD_TYPE_REGISTRY, type) ? FIELD_TYPE_REGISTRY[type] : { control: "input", htmlType: "text" };
 const isDefault = (field, value) => Array.isArray(field.default) ? field.default.includes(value) : field.default === value;
 /** Name, required and the stored constraints, as authored HTML attributes the CMS reads back. */
@@ -97,13 +94,13 @@ function starterAttributes(field, kind) {
         ["pattern", field.pattern], ["min", field.min], ["max", field.max], ["step", field.step], ["accept", field.accept?.join(",")],
         ...Object.entries(kind.attributes ?? {}),
     ];
-    return `name="${escapeHtml(field.id)}"${field.required ? " required" : ""}` +
-        constraints.filter(([, value]) => value != null && value !== "").map(([name, value]) => ` ${name}="${escapeHtml(String(value))}"`).join("");
+    return `name="${escapeFormHtml({ value: field.id })}"${field.required ? " required" : ""}` +
+        constraints.filter(([, value]) => value != null && value !== "").map(([name, value]) => ` ${name}="${escapeFormHtml({ value: String(value) })}"`).join("");
 }
 /** One field's starter markup; every control comes from the registry kind, as the public render does. */
 function starterField(field) {
     const kind = kindOf(field.type);
-    return starterRendererFor({ kind })({ field, kind, label: escapeHtml(field.label), attrs: starterAttributes(field, kind) });
+    return starterRendererFor({ kind })({ field, kind, label: escapeFormHtml({ value: field.label }), attrs: starterAttributes(field, kind) });
 }
 function starterRendererFor({ kind }) {
     if (kind.control === "group")
@@ -113,7 +110,7 @@ function starterRendererFor({ kind }) {
     if (kind.control === "textarea")
         return ({ label, attrs }) => `<label>${label}\n  <textarea ${attrs}></textarea>\n</label>`;
     if (kind.htmlType === "hidden")
-        return ({ field, label, attrs }) => `<input type="hidden" ${attrs} value="${escapeHtml(String(field.default ?? ""))}" aria-label="${label}">`;
+        return ({ field, label, attrs }) => `<input type="hidden" ${attrs} value="${escapeFormHtml({ value: String(field.default ?? "") })}" aria-label="${label}">`;
     if (kind.htmlType === "checkbox")
         return starterCheckbox;
     return ({ label, attrs }) => `<label>${label}\n  <input type="${kind.htmlType}" ${attrs}>\n</label>`;
@@ -123,16 +120,16 @@ function starterGroup({ field, kind, label, attrs }) {
     // Native `required` on every checkbox would demand ALL of them, so a checkbox group leaves it
     // off (the server still enforces one-or-more); a radio group's `required` means "pick one".
     const boxAttrs = kind.multiple ? starterAttributes({ ...field, required: false }, kind) : attrs;
-    const boxes = (field.options ?? []).map((option) => `  <label><input type="${kind.htmlType}" ${boxAttrs} value="${escapeHtml(option.value)}"${isDefault(field, option.value) ? " checked" : ""}> ${escapeHtml(option.label)}</label>`);
+    const boxes = (field.options ?? []).map((option) => `  <label><input type="${kind.htmlType}" ${boxAttrs} value="${escapeFormHtml({ value: option.value })}"${isDefault(field, option.value) ? " checked" : ""}> ${escapeFormHtml({ value: option.label })}</label>`);
     return `<fieldset>\n  <legend>${label}</legend>\n${boxes.join("\n")}\n</fieldset>`;
 }
 function starterSelect({ field, kind, label, attrs }) {
-    const empty = kind.multiple ? [] : [`    <option value="">${escapeHtml(field.placeholder ?? "Choose an option")}</option>`];
-    const choices = (field.options ?? []).map((option) => `    <option value="${escapeHtml(option.value)}"${isDefault(field, option.value) ? " selected" : ""}>${escapeHtml(option.label)}</option>`);
+    const empty = kind.multiple ? [] : [`    <option value="">${escapeFormHtml({ value: field.placeholder ?? "Choose an option" })}</option>`];
+    const choices = (field.options ?? []).map((option) => `    <option value="${escapeFormHtml({ value: option.value })}"${isDefault(field, option.value) ? " selected" : ""}>${escapeFormHtml({ value: option.label })}</option>`);
     return `<label>${label}\n  <select ${attrs}${kind.multiple ? " multiple" : ""}>\n${[...empty, ...choices].join("\n")}\n  </select>\n</label>`;
 }
 function starterCheckbox({ field, label, attrs }) {
-    const value = field.checkboxValue !== undefined ? ` value="${escapeHtml(field.checkboxValue)}"` : "";
+    const value = field.checkboxValue !== undefined ? ` value="${escapeFormHtml({ value: field.checkboxValue })}"` : "";
     const checked = field.default === true || (field.checkboxValue !== undefined && field.default === field.checkboxValue) ? " checked" : "";
     return `<label><input type="checkbox"${field.type === "toggle" ? ' role="switch"' : ""} ${attrs}${value}${checked}> ${label}</label>`;
 }
@@ -144,7 +141,7 @@ function starterCheckbox({ field, label, attrs }) {
  * @complexity O(f + o) for fields and their options; no I/O.
  */
 export function formHtmlStarter({ fields }, { submitLabel = "Send" } = {}) {
-    return fields.map(starterField).join("\n\n") + `\n\n<button type="submit">${escapeHtml(submitLabel)}</button>`;
+    return fields.map(starterField).join("\n\n") + `\n\n<button type="submit">${escapeFormHtml({ value: submitLabel })}</button>`;
 }
 export function formHtmlEmbed({ slug }, _optional = {}) {
     const config = JSON.stringify({ type: "form", id: slug, mode: "html" }).replace(/'/g, "&#39;");

package/dist/forms/react/hooks/forms-view.hooks.d.ts

@@ -26,7 +26,7 @@ export declare function useFormsListView({ forms, t, formatFormDates, toggleStat
         createdAt: string;
         updatedAt: string;
         name: string;
-        mode?: "builder" | "html" | undefined;
+        mode?: import("../../../core/ports/forms.js").AdminFormMode | undefined;
         workspaceId?: string;
         fields: AdminFormField[];
         notify: import("../../models.js").AdminFormNotify;
@@ -97,7 +97,7 @@ export declare function useFieldSettingsView({ field, controller, t }: {
     boundsType: import("../../field-settings.js").FieldBounds;
     boundsClass: string;
     /** `<input type>` for a typed default, or `null` when the default is a box or a choice. */
-    defaultInputType: string | null;
+    defaultInputType: "text" | import("../../field-settings.js").FieldBounds | null;
     defaultClass: string | undefined;
     onPlaceholder: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
     onHelpText: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;

package/dist/forms/react/hooks/forms-view.hooks.js

@@ -56,6 +56,14 @@ export function useFieldAttributesView({ field, fieldIndex, controller, onCancel
             onRemove: () => controller.removeRow(row._rowId), })),
     };
 }
+/** `<input type>` for a typed default: temporal kinds use their bounds type; boxes and choices have none. */
+function defaultInputTypeFor(kind, boundsType) {
+    if (kind === 'temporal')
+        return boundsType;
+    if (kind === 'number')
+        return 'number';
+    return kind === 'text' || kind === 'textarea' ? 'text' : null;
+}
 /** Bind the settings section's controls; which ones render comes from the field's registry kind. */
 export function useFieldSettingsView({ field, controller, t }, _optional = {}) {
     const settings = fieldSettingsFor({ type: field.type });
@@ -69,7 +77,7 @@ export function useFieldSettingsView({ field, controller, t }, _optional = {}) {
         settings, form, boundsType,
         boundsClass: settings.bounds === 'number' ? 'field-settings-num' : 'field-settings-compact',
         /** `<input type>` for a typed default, or `null` when the default is a box or a choice. */
-        defaultInputType: kind === 'temporal' ? boundsType : kind === 'number' ? 'number' : kind === 'text' || kind === 'textarea' ? 'text' : null,
+        defaultInputType: defaultInputTypeFor(kind, boundsType),
         defaultClass: kind === 'number' || kind === 'temporal' ? 'field-settings-compact' : undefined,
         onPlaceholder: value('placeholder'), onHelpText: value('helpText'), onDefaultText: value('defaultText'),
         onMinLength: value('minLength'), onMaxLength: value('maxLength'), onPattern: value('pattern'),

package/dist/forms/react/hooks/use-field-attributes-dialog.hooks.js

@@ -5,10 +5,8 @@ import { settingsFormFromField } from "../../field-settings.js";
 export function useFieldAttributesDialog(props, _optional = {}) {
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFieldAttributesDialogController({ field: props.field }), dependencies: [] });
     const state = stateSnapshot ?? { className: props.field.className ?? "", rows: [], settings: settingsFormFromField({ field: props.field }), error: null };
-    const className = state.className;
+    const { className, rows, error } = state;
     const setClassName = (value) => stateController?.update({ key: "className", value });
-    const rows = state.rows;
-    const error = state.error;
     function updateRow(rowId, patch) { stateController?.updateRow({ rowId, patch }); }
     function removeRow(rowId) { stateController?.removeRow({ rowId }); }
     function addRow() { stateController?.addRow({}); }

package/dist/forms/react/hooks/use-form-editor.hooks.js

@@ -8,24 +8,24 @@ import { useDirtyGuard } from "@jini-ai/ui/panel-kit";
 import { formEditorBaseline, formEditorDraft } from "../../form-editor-dirty.js";
 import { useFetchMutation, useFetchQuery } from "@jini-ai/ui/fetch-query";
 import { FORM_TABS, KEYS, existingFieldIdsOf, nextTabIndex, visibleFormEditorError } from "../../rules.js";
+/** Ordinary Builder saves keep their existing endpoint/permissions; a mode change is explicit. */
+function authoringPatch({ mode, html, savedMode }) {
+    if (mode === "html")
+        return { mode, html };
+    return savedMode === "html" ? { mode } : {};
+}
 export function useFormEditor(props, { clipboard } = {}) {
     const { port, navigate, t } = props;
     const { tab } = props;
     const isNew = props.formId === "new";
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFormEditorController({}), dependencies: [] });
     const state = stateSnapshot ?? initialFormEditorState({});
-    const form = state.form;
+    const { form, mode, html, copyFeedback, name, slug, fields, notify } = state;
     const setForm = (value) => stateController?.update({ key: "form", value });
-    const mode = state.mode;
-    const html = state.html;
     const setHtml = (value) => stateController?.update({ key: "html", value });
-    const copyFeedback = state.copyFeedback;
     const setCopyFeedback = (value) => stateController?.update({ key: "copyFeedback", value });
-    const name = state.name;
     const setName = (value) => stateController?.update({ key: "name", value });
-    const slug = state.slug;
     const setSlug = (value) => stateController?.update({ key: "slug", value });
-    const fields = state.fields;
     const setFields = (value) => stateController?.update({ key: "fields", value });
     // No UI edits this (owner ask 2026-09-22 removed the notify checkbox/recipients input from the
     // Fields tab — a future outside mail integration will design its own way to set it). Seeded from
@@ -33,7 +33,6 @@ export function useFormEditor(props, { clipboard } = {}) {
     // wipes out a `notify` setting that predates this UI removal. Lives in the section controller, not a
     // `const`, only so `handleSave`'s existing-form branch can resync it from the write's own response
     // exactly like `form`/`name`/`slug`/`fields` already do below.
-    const notify = state.notify;
     // Roving-tabindex focus targets for the tab strip below, indexed the same as `FORM_TABS` — see
     // `nextTabIndex`'s doc comment for why the index math itself lives outside the component.
     const tabRefs = useRef([]);
@@ -106,7 +105,7 @@ export function useFormEditor(props, { clipboard } = {}) {
     }
     async function handleSave() {
         // Ordinary Builder saves keep their existing endpoint/permissions. A mode change is explicit.
-        const authoring = mode === "html" ? { mode, html } : form?.mode === "html" ? { mode } : {};
+        const authoring = authoringPatch({ mode, html, savedMode: form?.mode });
         try {
             if (isNew) {
                 // `notify` here is always this hook's own blank default — a new form has no earlier value

package/dist/forms/react/hooks/use-form-submission-detail.hooks.js

@@ -56,13 +56,10 @@ export function useFormSubmissionDetail(props, _optional = {}) {
     // The delete's own failure outranks a background load-refresh failure — flat `if`s rather than a
     // nested ternary, per `@jini-ai/ui/fetch-query`'s `resolveFetchQueryStatus` doc on why the two carry
     // a different complexity-gate weight for the same branch count.
-    let error = null;
+    let error = list.error ? describeApiError(list.error, "failed to load submission") : null;
     if (deleteMutation.error) {
         error = describeTrashError({ error: deleteMutation.error, fallback: "delete failed", versionChangedMessage: t("This item changed since you loaded it. Reload and try again.") }).message;
     }
-    else if (list.error) {
-        error = describeApiError(list.error, "failed to load submission");
-    }
     return {
         submission,
         error,

package/dist/forms/react/hooks/use-form-submissions.hooks.js

@@ -17,15 +17,11 @@ export function useFormSubmissions(props, _optional = {}) {
     });
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFormSubmissionsController({}), dependencies: [] });
     const state = stateSnapshot ?? initialFormSubmissionsState({});
-    const morePages = state.morePages;
+    const { morePages, moreCursor, moreError, selectedId, loadingMore } = state;
     const setMorePages = (value) => stateController?.update({ key: "morePages", value });
-    const moreCursor = state.moreCursor;
     const setMoreCursor = (value) => stateController?.update({ key: "moreCursor", value });
-    const moreError = state.moreError;
     const setMoreError = (value) => stateController?.update({ key: "moreError", value });
-    const selectedId = state.selectedId;
     const setSelectedId = (value) => stateController?.update({ key: "selectedId", value });
-    const loadingMore = state.loadingMore;
     const setLoadingMore = (value) => stateController?.update({ key: "loadingMore", value });
     // The "latest call wins" guard for accumulated pages — see the file header. `loadingMoreRef` is
     // the synchronous half (blocks a same-tick double `loadMore`); `pageSettlement` is the async half

package/dist/forms/react/hooks/use-forms-list.hooks.js

@@ -15,7 +15,7 @@ export function useFormsList(deps, { locale = "en" } = {}) {
     useEffect(() => events?.subscribe({ onRefresh: invalidateList }), [events, invalidateList]);
     const { controller: stateController, snapshot: stateSnapshot } = useController({ create: () => createFormsListController({}), dependencies: [] });
     const state = stateSnapshot ?? initialFormsListState({});
-    const rowSavingId = state.rowSavingId;
+    const { rowSavingId, pendingDelete } = state;
     const setRowSavingId = (value) => stateController?.update({ key: "rowSavingId", value });
     const toggleMutation = useFetchMutation({
         run: ({ input: form }) => port.updateFormDefinition({ id: form.id }, { status: form.status === "active" ? "disabled" : "active" }),
@@ -25,7 +25,6 @@ export function useFormsList(deps, { locale = "en" } = {}) {
     // The form a `RowMenu` "Delete" selection is asking to confirm — `null` when the `ConfirmDialog`
     // is closed. `ConfirmDialog` stays mounted unconditionally in `FormsList.tsx`; this is what drives
     // its `open` prop — same shape `use-posts.hooks.ts`'s `pendingDelete` uses for its own row delete.
-    const pendingDelete = state.pendingDelete;
     const setPendingDelete = (value) => stateController?.update({ key: "pendingDelete", value });
     const deleteMutation = useFetchMutation({
         run: ({ input: form }) => trash.trash({ type: "form", id: form.id }),

package/dist/forms/rules.js

@@ -291,8 +291,13 @@ export const ATTRIBUTE_NAME_SUGGESTIONS = [
  *  stable identity — same `_rowId`/module-counter pattern `collections/rules.ts`'s
  *  `EditFieldsDialog` support uses for its own draft field rows. */
 let nextAttrRowId = 0;
+function takeAttrRowId() {
+    const id = nextAttrRowId;
+    nextAttrRowId += 1;
+    return id;
+}
 export function attrRowsFromField({ field }, _optional = {}) {
-    return Object.entries(field.attributes ?? {}).map(([name, value]) => ({ _rowId: nextAttrRowId++, name, value }));
+    return Object.entries(field.attributes ?? {}).map(([name, value]) => ({ _rowId: takeAttrRowId(), name, value }));
 }
 /** @complexity O(n) in `rows.length`. */
 export function updateAttrRow({ rows, rowId, patch }, _optional = {}) {
@@ -304,7 +309,7 @@ export function removeAttrRow({ rows, rowId }, _optional = {}) {
 }
 /** @complexity O(n) in `rows.length`. */
 export function addAttrRow({ rows }, _optional = {}) {
-    return [...rows, { _rowId: nextAttrRowId++, name: "", value: "" }];
+    return [...rows, { _rowId: takeAttrRowId(), name: "", value: "" }];
 }
 /**
  * Validates + shapes `FieldAttributesDialog`'s draft into the `Partial<AdminFormField>` patch

package/dist/media/adapters/memory.js

@@ -1,3 +1,4 @@
+import { trimCharsEnd } from '@jini-ai/core/text';
 import { queryMedia } from '../rules.js';
 const METADATA_KEYS = ['title', 'slug', 'alt', 'caption', 'credit', 'width', 'height', 'cssClass', 'htmlAttributes'];
 /** Only metadata keys with a defined value; null stays, so a patch can clear a nullable field. */
@@ -6,12 +7,13 @@ function pickMetadata({ patch }) {
 }
 /** Decoded length of a base64 string: 3 bytes per 4 chars, minus trailing padding. */
 function base64ByteSize({ dataBase64 }) {
-    const padding = dataBase64.match(/=+$/)?.[0].length ?? 0;
+    const padding = dataBase64.length - trimCharsEnd({ text: dataBase64, chars: '=' }).length;
     return Math.max(0, Math.floor(dataBase64.length * 3 / 4) - padding);
 }
 export function createMemoryMediaApi({ assets = [] }, { now = () => new Date().toISOString() } = {}) {
     const items = new Map(assets.map((item) => [item.id, Object.freeze({ ...item })]));
     let sequence = 0;
+    const nextSequence = () => { sequence += 1; return sequence; };
     function check(options) {
         options.signal?.throwIfAborted();
     }
@@ -30,7 +32,7 @@ export function createMemoryMediaApi({ assets = [] }, { now = () => new Date().t
         // The REAL server ignores the declared string and stores sniffContentType(bytes) instead.
         // This fake has no bytes to sniff — its input is an opaque base64 string a test made up —
         // so it echoes what the caller declared. Tests needing disagreement must seed assets directly.
-        return { byteSize: base64ByteSize(input), contentType: input.contentType, sha256: `memory-content-${++sequence}` };
+        return { byteSize: base64ByteSize(input), contentType: input.contentType, sha256: `memory-content-${nextSequence()}` };
     }
     return {
         replaceSupported: true,
@@ -43,7 +45,7 @@ export function createMemoryMediaApi({ assets = [] }, { now = () => new Date().t
             check(options);
             let id;
             do {
-                id = `memory-${++sequence}`;
+                id = `memory-${nextSequence()}`;
             } while (items.has(id));
             const timestamp = now();
             return put({

package/dist/media/controllers/library.controller.js

@@ -52,7 +52,8 @@ export function createLibraryController({ api }, { query = {} } = {}) {
         // Retry reads only, never destructive writes. Keep trying at a capped delay so
         // recovery needs no manual repair, while an offline service isn't hammered.
         if (isRetryableMediaError({ error })) {
-            const delay = Math.min(1000 * 2 ** Math.min(retryAttempt++, 5), 30000);
+            const delay = Math.min(1000 * 2 ** Math.min(retryAttempt, 5), 30000);
+            retryAttempt += 1;
             retryTimer = setTimeout(() => { retryTimer = null; void load(); }, delay);
         }
     }
@@ -63,7 +64,8 @@ export function createLibraryController({ api }, { query = {} } = {}) {
         readAbort?.abort();
         const abort = new AbortController();
         readAbort = abort;
-        const ticket = ++generation;
+        generation += 1;
+        const ticket = generation;
         store.set({ patch: { loading: true, error: null } });
         try {
             const all = await api.list({}, { signal: abort.signal });

package/dist/media/controllers/providers.controller.js

@@ -12,7 +12,8 @@ export function createProvidersController({ api }, _optional = {}) {
     async function load(_required = {}, _optional = {}) {
         if (store.signal.aborted)
             return;
-        const ticket = ++generation;
+        generation += 1;
+        const ticket = generation;
         store.set({ patch: { loading: true } });
         try {
             const items = await api.list({}, { signal: store.signal });

package/dist/media/html-attributes.d.ts

@@ -1,13 +1,6 @@
-/** Browser-only live metadata hint, separate from server validation across the browser/Node
- * boundary. The server must enforce the same policy on writes and rendering independently.
- * Hints never gate Save: an invalid attribute once silently blocked saving unrelated title/alt/
- * caption/credit/class changes. Rejections must instead reach the authoritative atomic write.
- * One flat allowlist includes global and image/video extras: per-element name filtering is
- * unnecessary because an unused loading attribute on a wrapper is harmless. Extend the list,
- * not the tokenizer, when adding an allowed name. data-/aria- families remain open-ended. */
 export declare const MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES: readonly ["class", "id", "style", "title", "role", "tabindex", "lang", "dir", "hidden", "translate", "draggable", "loading", "decoding", "playsinline", "muted", "loop", "autoplay", "poster"];
 /** Whether `name` is on the allowlist — a well-formed attribute name
- *  ({@link MEDIA_HTML_ATTRIBUTE_NAME_PATTERN}) that is either an exact match against
+ *  (`/^[a-z][a-z0-9-]*$/`) that is either an exact match against
  *  {@link MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES} or carries a `data-`/`aria-` prefix (both open-ended
  *  families with no fixed suffix list). Case-insensitive: HTML attribute names are themselves
  *  case-insensitive, and an operator typing `DATA-FOO` should not slip past a lowercase-only check.

package/dist/media/html-attributes.js

@@ -5,44 +5,10 @@
  * One flat allowlist includes global and image/video extras: per-element name filtering is
  * unnecessary because an unused loading attribute on a wrapper is harmless. Extend the list,
  * not the tokenizer, when adding an allowed name. data-/aria- families remain open-ended. */
-export const MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES = [
-    // Global attributes (2026-09-23).
-    "class",
-    "id",
-    "style",
-    "title",
-    "role",
-    "tabindex",
-    "lang",
-    "dir",
-    "hidden",
-    "translate",
-    "draggable",
-    // Pre-existing <img>/<video> extras, kept everywhere (one list, not one per element).
-    "loading",
-    "decoding",
-    "playsinline",
-    "muted",
-    "loop",
-    "autoplay",
-    "poster",
-];
-/**
- * The shape EVERY accepted attribute name must have, checked before allowlist membership
- * (2026-09-07 stored-XSS fix; keep identical in `@jini-ai/cms/media`'s `html-attributes.ts` — see
- * that file's copy of this comment for the full incident).
- *
- * The `data-`/`aria-` families below are open-ended by design — no fixed suffix list — so the
- * prefix check alone accepted whatever characters {@link HTML_ATTRIBUTE_TOKEN}'s name class
- * (`[^\s="']+`, which excludes only whitespace, `=` and quotes) let through. `<`, `>` and `/` are
- * all legal in that class, and the server renderer templating a name into ` name="value"` escapes
- * only the VALUE — so a stored `data-x><svg/onload=alert(1)` closed the `<img>` and opened a live
- * `<svg onload>` on the public page. Constraining the NAME to the characters a real HTML attribute
- * name can contain is what makes "the value is escaped" sufficient.
- */
-const MEDIA_HTML_ATTRIBUTE_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
+import { EMBED_HTML_ATTRIBUTE_ALLOWED_NAMES, isAllowedEmbedHtmlAttributeName, parseEmbedHtmlAttributes, } from "@jini-ai/cms/widgets/markers";
+export const MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES = EMBED_HTML_ATTRIBUTE_ALLOWED_NAMES;
 /** Whether `name` is on the allowlist — a well-formed attribute name
- *  ({@link MEDIA_HTML_ATTRIBUTE_NAME_PATTERN}) that is either an exact match against
+ *  (`/^[a-z][a-z0-9-]*$/`) that is either an exact match against
  *  {@link MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES} or carries a `data-`/`aria-` prefix (both open-ended
  *  families with no fixed suffix list). Case-insensitive: HTML attribute names are themselves
  *  case-insensitive, and an operator typing `DATA-FOO` should not slip past a lowercase-only check.
@@ -51,82 +17,7 @@ const MEDIA_HTML_ATTRIBUTE_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
  * one fixed-length array lookup.
  */
 export function isAllowedMediaHtmlAttributeName({ name }, _optional = {}) {
-    const lower = name.toLowerCase();
-    if (!MEDIA_HTML_ATTRIBUTE_NAME_PATTERN.test(lower))
-        return false;
-    if (lower.startsWith("data-") || lower.startsWith("aria-"))
-        return true;
-    return MEDIA_HTML_ATTRIBUTE_ALLOWED_NAMES.includes(lower);
-}
-/** Matches one `name`, or one `name="value"`/`name='value'`/`name=value` pair — the same loose
- *  shape real HTML attribute syntax allows, since that is the syntax an operator typing this field
- *  would naturally reach for. */
-const HTML_ATTRIBUTE_TOKEN = /([^\s="']+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s"']+)))?/g;
-/** The highest ASCII code point {@link isUnsafeMediaUrlValue} strips: every C0 control character
- *  plus the ordinary space, i.e. code points `0`-`32` inclusive. Named rather than written as an
- *  inline regex control-character range so the linter never has to reason about a literal control
- *  character inside a pattern. Ported from the shared server parser, `html-attributes.ts`. */
-const ASCII_WHITESPACE_OR_CONTROL_MAX_CODE_POINT = 0x20;
-/**
- * Whether `value`'s scheme, once every ASCII whitespace/control character (code points `0`-`32`) is
- * stripped and the result lowercased, starts with `javascript:`, `vbscript:` or `data:` — the three
- * schemes a browser will still execute or navigate to even when the URL carries interior whitespace
- * a naive end-trim (the old `.trim()`-only check) would miss, e.g. `java\tscript:x`: browsers strip
- * tabs and newlines from inside a URL before parsing its scheme, so this check must too. Ported
- * 2026-09-23 from the shared server parser's `isUnsafeUrlValue` (`html-attributes.ts`).
- *
- * @complexity O(n) in the value's length (one filter pass, one prefix test).
- */
-function isUnsafeMediaUrlValue(value) {
-    let stripped = "";
-    for (const char of value) {
-        // `char` is never empty, so `charCodeAt(0)` is always a number; for an astral character it is
-        // the high surrogate (>= 0xD800), which is kept exactly as the full code point would be.
-        if (char.charCodeAt(0) > ASCII_WHITESPACE_OR_CONTROL_MAX_CODE_POINT)
-            stripped += char;
-    }
-    stripped = stripped.toLowerCase();
-    return stripped.startsWith("javascript:") || stripped.startsWith("vbscript:") || stripped.startsWith("data:");
-}
-/**
- * Whether a `style` value carries a known CSS injection or CSS-escape-bypass vector:
- * `expression(...)` (legacy IE script-in-CSS), a `javascript:`/`vbscript:` value inside a CSS
- * `url(...)`, `-moz-binding`/`behavior:` (XBL/HTC script bindings), `@import` (pulls in a second,
- * unvetted stylesheet), or ANY backslash — a CSS escape sequence (`\65` is `e`) can respell any of
- * the above past a plain substring check, so a backslash anywhere in the value is rejected outright.
- * Plain `url(...)` values (background images) are otherwise allowed. Ported 2026-09-23 from the
- * shared server parser's `isUnsafeStyleValue` (`html-attributes.ts`).
- *
- * @complexity O(n) in the value's length (one regex test).
- */
-const UNSAFE_MEDIA_STYLE_PATTERN = /expression\(|javascript:|vbscript:|-moz-binding|behavior:|@import|\\/i;
-function isUnsafeMediaStyleValue(value) {
-    return UNSAFE_MEDIA_STYLE_PATTERN.test(value);
-}
-/** Classifies one already-tokenized `name`/`value` pair. Split out of {@link parseMediaHtmlAttributes}
- *  so each rejection reason is its own directly testable branch, and so the loop below reads as
- *  "tokenize, then classify" rather than one function doing both.
- *
- * Order matters (ported 2026-09-23 from the shared server parser's `classifyEmbedHtmlAttributeToken`):
- * `on*` is checked FIRST (so an `onerror` always reports as `event-handler`, the more actionable
- * reason, never the generic `disallowed-name`), then the URL-scheme check runs against EVERY value
- * regardless of name (matching the pre-existing `javascript:` check this is ported from), then
- * allowlist membership, then — only for an already-allowed `style` — the CSS-specific unsafe-value
- * check.
- *
- * @complexity O(1) — four fixed checks against one already-extracted token; each check's own O(n) in
- * the token's length is linear, not nested.
- */
-function classifyMediaHtmlAttributeToken(name, value) {
-    if (name.startsWith("on"))
-        return { reason: "event-handler", attribute: name };
-    if (isUnsafeMediaUrlValue(value))
-        return { reason: "unsafe-url", attribute: name };
-    if (!isAllowedMediaHtmlAttributeName({ name }))
-        return { reason: "disallowed-name", attribute: name };
-    if (name === "style" && isUnsafeMediaStyleValue(value))
-        return { reason: "unsafe-style", attribute: name };
-    return null;
+    return isAllowedEmbedHtmlAttributeName({ name });
 }
 /**
  * Parses the `HTML attributes` field's free text (`name="value" name2="value2"`, or a bare
@@ -154,54 +45,8 @@ function classifyMediaHtmlAttributeToken(name, value) {
  *   attributes plus O(e) for e rejected tokens.
  */
 export function parseMediaHtmlAttributes({ text }, _optional = {}) {
-    const trimmed = text.trim();
-    if (trimmed === "")
-        return { attributes: {}, errors: [], error: null };
-    const attributes = {};
-    const errors = [];
-    HTML_ATTRIBUTE_TOKEN.lastIndex = 0;
-    let consumed = 0;
-    // A `for` loop (rather than `while ((match = …exec(trimmed)) !== null)`) keeps every assignment
-    // to `match` in statement position, never inside the loop's own test expression.
-    for (let match = HTML_ATTRIBUTE_TOKEN.exec(trimmed); match !== null; match = HTML_ATTRIBUTE_TOKEN.exec(trimmed)) {
-        // Non-whitespace text between the previous match and this one is a fragment the token pattern
-        // could not parse as a name (e.g. a stray quote) — the tokenizer has lost sync, so everything
-        // parsed so far is discarded rather than trusted.
-        const skipped = trimmed.slice(consumed, match.index).trim();
-        if (skipped !== "")
-            return malformedMediaHtmlAttributes({ errors, fragment: skipped });
-        consumed = match.index + match[0].length;
-        const { name, value } = readMediaHtmlAttributeToken({ match });
-        const rejection = classifyMediaHtmlAttributeToken(name, value);
-        if (rejection) {
-            errors.push(rejection);
-            continue;
-        }
-        attributes[name] = value;
-    }
-    const trailing = trimmed.slice(consumed).trim();
-    if (trailing !== "")
-        return malformedMediaHtmlAttributes({ errors, fragment: trailing });
-    return { attributes, errors, error: errors[0] ?? null };
-}
-/** The lowercased name and the value of one {@link HTML_ATTRIBUTE_TOKEN} match: whichever of the
- *  double-quoted, single-quoted or unquoted value groups matched, or `""` for a bare boolean name.
- *
- * @complexity O(n) in the name's length (one lowercase pass).
- */
-function readMediaHtmlAttributeToken({ match }, _optional = {}) {
-    return { name: match[1].toLowerCase(), value: match[2] ?? match[3] ?? match[4] ?? "" };
-}
-/** The fail-closed result once the tokenizer loses sync: `fragment` (already trimmed) is appended
- *  to `errors` as the final `malformed` entry, and every accepted attribute is discarded — see
- *  {@link parseMediaHtmlAttributes}'s header for why. Mutates `errors` (the caller's own list).
- *
- * @complexity O(1).
- */
-function malformedMediaHtmlAttributes({ errors, fragment }, _optional = {}) {
-    const malformed = { reason: "malformed", attribute: fragment };
-    errors.push(malformed);
-    return { attributes: {}, errors, error: malformed };
+    // Media hints always use inline-attribute policy; stylesheet escape allowances do not apply.
+    return parseEmbedHtmlAttributes({ text });
 }
 /** The hint names the rejected token so operators can distinguish a typo from a hard no.
  * This is client feedback only; the server must independently enforce write/render policy. */

package/dist/media/react/components/MediaCard.js

@@ -2,8 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Badge, Button, Menu } from '@jini-ai/ui-kit/react';
 import { useMediaCard } from '../hooks/MediaCard.hooks.js';
 import { EyeIcon, ExpandIcon, DocumentIcon } from './MediaIcons.js';
+/** Image (expandable when a preview exists), then video, then a download placeholder. */
+function previewMedia(vm) {
+    if (vm.image) {
+        const img = _jsx("img", { className: "jini-media-card-media", src: vm.src, alt: vm.alt, loading: "lazy", onError: vm.onImageError });
+        return vm.imagePreview ? _jsxs(Button, { className: "jini-media-card-expand jini-media-card-expand-fill", variant: "ghost", attrs: vm.previewAttrs, onPress: vm.preview, children: [img, _jsx(ExpandIcon, {})] }) : img;
+    }
+    if (vm.video)
+        return _jsx("video", { className: "jini-media-card-media", src: vm.src, controls: true, preload: "metadata", "aria-label": vm.alt, onError: vm.onVideoError });
+    return _jsxs("div", { className: "jini-media-card-placeholder", children: [_jsx(DocumentIcon, {}), _jsx("p", { className: "jini-media-card-placeholder-text", children: "Preview not available" }), vm.src && _jsx("a", { className: "jini-media-card-placeholder-link", href: vm.src, target: "_blank", rel: "noreferrer", children: "Download original" })] });
+}
 function PreviewMarkup(vm, _optional = {}) {
-    return _jsxs(_Fragment, { children: [vm.image ? (vm.imagePreview ? _jsxs(Button, { className: "jini-media-card-expand jini-media-card-expand-fill", variant: "ghost", attrs: vm.previewAttrs, onPress: vm.preview, children: [_jsx("img", { className: "jini-media-card-media", src: vm.src, alt: vm.alt, loading: "lazy", onError: vm.onImageError }), _jsx(ExpandIcon, {})] }) : _jsx("img", { className: "jini-media-card-media", src: vm.src, alt: vm.alt, loading: "lazy", onError: vm.onImageError })) : vm.video ? (_jsx("video", { className: "jini-media-card-media", src: vm.src, controls: true, preload: "metadata", "aria-label": vm.alt, onError: vm.onVideoError })) : (_jsxs("div", { className: "jini-media-card-placeholder", children: [_jsx(DocumentIcon, {}), _jsx("p", { className: "jini-media-card-placeholder-text", children: "Preview not available" }), vm.src && _jsx("a", { className: "jini-media-card-placeholder-link", href: vm.src, target: "_blank", rel: "noreferrer", children: "Download original" })] })), vm.onEdit && _jsxs(Button, { className: "jini-media-card-edit", variant: "ghost", attrs: vm.editAttrs, onPress: vm.onEdit, disabled: vm.busy, children: [_jsx(EyeIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "Edit metadata" })] }), vm.canPreview && !vm.imagePreview && _jsxs(Button, { className: "jini-media-card-expand", variant: "ghost", attrs: vm.previewAttrs, onPress: vm.preview, children: [_jsx(ExpandIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "View larger" })] })] });
+    return _jsxs(_Fragment, { children: [previewMedia(vm), vm.onEdit && _jsxs(Button, { className: "jini-media-card-edit", variant: "ghost", attrs: vm.editAttrs, onPress: vm.onEdit, disabled: vm.busy, children: [_jsx(EyeIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "Edit metadata" })] }), vm.canPreview && !vm.imagePreview && _jsxs(Button, { className: "jini-media-card-expand", variant: "ghost", attrs: vm.previewAttrs, onPress: vm.preview, children: [_jsx(ExpandIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "View larger" })] })] });
 }
 /** The lightbox uses the same fallback chain without the grid's metadata and actions. */
 export function MediaPreview(props, _optional = {}) {

package/dist/media/react/hooks/EditMediaPanel.hooks.js

@@ -4,6 +4,14 @@ import { useController } from '../../../core/react/use-controller.js';
 import { createEditMediaController } from '../../controllers/edit-media.controller.js';
 import { canReplaceMedia, mediaEmbedSnippet, parseOptionalPixelSize, safeMediaUrl } from '../../rules.js';
 import { parseMediaHtmlAttributes, describeMediaHtmlAttributeError } from '../../html-attributes.js';
+/** Draft value for an edited field: pixel sizes parse, optional text clears to null when blank. */
+function draftFieldValue(key, value) {
+    if (key === 'width' || key === 'height')
+        return parseOptionalPixelSize({ value });
+    if (key === 'cssClass' || key === 'htmlAttributes')
+        return value.trim() === '' ? null : value;
+    return value;
+}
 export function useEditMediaPanel(props, _optional = {}) {
     const cached = useMediaLibraryQuery({ api: props.api }, { enabled: false });
     const { controller, snapshot } = useController({
@@ -15,8 +23,12 @@ export function useEditMediaPanel(props, _optional = {}) {
     const mounted = useRef(false);
     useEffect(() => {
         mounted.current = true;
-        return () => { mounted.current = false; for (const timer of timers.current.values())
-            clearTimeout(timer); timers.current.clear(); };
+        return () => {
+            mounted.current = false;
+            for (const timer of timers.current.values())
+                clearTimeout(timer);
+            timers.current.clear();
+        };
     }, []);
     const saving = !snapshot || snapshot.saving;
     const titleRef = useRef(null);
@@ -53,9 +65,7 @@ export function useEditMediaPanel(props, _optional = {}) {
             ...(key === 'title' ? { 'data-jini-autofocus': true } : {}),
             ...(key === 'htmlAttributes' ? { 'aria-invalid': !!hint } : {}) },
         onValueChange: ({ value }, _optional = {}) => {
-            const next = key === 'width' || key === 'height' ? parseOptionalPixelSize({ value })
-                : key === 'cssClass' || key === 'htmlAttributes' ? value.trim() === '' ? null : value : value;
-            controller?.setDraft({ patch: { [key]: next } });
+            controller?.setDraft({ patch: { [key]: draftFieldValue(key, value) } });
         },
     }));
     // Server-computed public URL, never the authenticated original route. Trashed assets
@@ -65,6 +75,7 @@ export function useEditMediaPanel(props, _optional = {}) {
     const embed = mediaEmbedSnippet({ slug: props.item.slug });
     // Visible text is the legacy "Copy"/"Copied" on every row; the accessible name keeps
     // the value's noun so three identical buttons stay distinguishable, even mid-feedback.
+    const markCopied = (id, value) => setCopied(current => ({ ...current, [id]: value }));
     const copies = [
         { id: 'url', label: 'File URL', value: publicUrl, noun: 'URL' },
         { id: 'embed', label: 'Embed code', value: embed, noun: 'embed code' },
@@ -78,11 +89,11 @@ export function useEditMediaPanel(props, _optional = {}) {
                 await navigator.clipboard.writeText(row.value);
                 if (!mounted.current)
                     return;
-                setCopied(current => ({ ...current, [row.id]: true }));
+                markCopied(row.id, true);
                 clearTimeout(timers.current.get(row.id));
                 timers.current.set(row.id, setTimeout(() => {
                     timers.current.delete(row.id);
-                    setCopied(current => ({ ...current, [row.id]: false }));
+                    markCopied(row.id, false);
                 }, 1500));
             }
             catch {