@happyvertical/smrt-content 0.51.39 → 0.53.0

package/dist/svelte/components/ContentBodyEditor.svelte.d.ts

@@ -1,17 +1,53 @@
 import type { ImageLike } from '@happyvertical/smrt-images/svelte';
+import { type Snippet } from 'svelte';
 import { type ContentBodyFormat, type ContentBodyImage, type ImageAssetLike } from '../../body-format';
 export interface ContentBodyEditorChange {
     body: string;
     bodyFormat: ContentBodyFormat;
     images: ContentBodyImage[];
 }
+/** The person asked to change a picture in the story (see `onRequestImageChange`). */
+export interface ContentBodyImageChangeRequest {
+    /** The picture's index among the body's images. */
+    index: number;
+    /** Its stored asset id, when it has one. */
+    assetId: string | null;
+    /** Its alt text. */
+    alt: string;
+    /** Its source URL as shown in the editor. */
+    src: string;
+    /**
+     * True when it came from pressing and holding the picture: the host opens
+     * its request box already listening for speech.
+     */
+    listen: boolean;
+    /** Where the picture is on screen (viewport pixels), to anchor a popover. */
+    rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+}
 export interface Props {
     /** The body content string being edited, in HTML or the configured format. */
     value: string;
     /** Format of the body content: HTML, Markdown, or auto-detected. */
     format?: ContentBodyFormat | null;
+    /**
+     * Show the "Save as" HTML/Markdown picker in the toolbar. Off by default:
+     * the storage format is a technical choice most editors should not face, so
+     * hosts opt in for technical users. The body keeps its `format` either way.
+     */
+    showFormatPicker?: boolean;
     /** Placeholder text shown when the editor is empty. */
     placeholder?: string;
+    /** DOM id of the editable surface (default `content-body-input`). */
+    id?: string;
+    /** Field name; also the control id agents address (default `body`). */
+    name?: string;
+    /** Accessible and agent-facing label (default "Story"). */
+    label?: string;
     /** Index of the currently selected image in the body, or -1 for none. */
     selectedImageIndex?: number;
     /** Fired when the body content or embedded images change. */
@@ -22,11 +58,42 @@ export interface Props {
     onSelectImage?: (index: number) => void;
     /** Fired when the user sets an image as the content thumbnail. */
     onUseImageAsThumbnail?: (assetId: string) => void;
+    /**
+     * Asset id of the current main picture (thumbnail). The selected image's
+     * "Use as main picture" button shows as pressed when it is this one.
+     */
+    mainImageAssetId?: string | null;
     /** Resolves an image file, asset, or ID to a persisted image URL or object. */
     onResolveImage?: (selected: ImageLike | File | string) => Promise<unknown> | unknown;
+    /**
+     * The image panel (chooser/editor) the toolbar's image button opens. When
+     * provided it renders between the toolbar and the writing surface, sliding
+     * open above the text, and the image button reports `aria-expanded` /
+     * `aria-controls`. Without it the button only fires `onOpenImageChooser`.
+     */
+    imagePanel?: Snippet;
+    /** Whether the image panel is open (controlled by the parent). */
+    imagePanelOpen?: boolean;
+    /** Accessible name of the image panel region (default "Pictures"). */
+    imagePanelLabel?: string;
+    /** Fired when the panel asks to close (Escape inside it). */
+    onCloseImagePanel?: () => void;
+    /**
+     * The person wants a picture changed. With it, a selected or hovered
+     * picture shows a "Change this picture" button, the picture toolbar gets
+     * one too, and pressing and holding a picture (about half a second, without
+     * moving; moving is still a drag) asks with `listen: true`. Without it
+     * none of these show.
+     */
+    onRequestImageChange?: (request: ContentBodyImageChangeRequest) => void;
 }
 declare const ContentBodyEditor: import("svelte").Component<Props, {
     insertImageAsset: (asset: ImageAssetLike | null | undefined) => void;
+    replaceImage: (index: number, asset: (ImageAssetLike & {
+        height?: unknown;
+    }) | null | undefined) => boolean;
+    previewImage: (index: number, src: string | null) => boolean;
+    clearImagePreviews: () => void;
     focusImage: (index: number) => void;
 }, "">;
 type ContentBodyEditor = ReturnType<typeof ContentBodyEditor>;

package/dist/svelte/components/ContentBodyEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBodyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAInE,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAIrB,KAAK,cAAc,EAIpB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,KAAK;IACpB,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CACf,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAChC,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CACjC;AA4lCD,QAAA,MAAM,iBAAiB;8BAzdW,cAAc,GAAG,IAAI,GAAG,SAAS;wBAIvC,MAAM;MAqd6B,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentBodyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyEditor.svelte.ts"],"names":[],"mappings":"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"}

package/dist/svelte/components/ContentBodyRenderer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 import {
   type ContentBodyFormat,
+  renderContentBodyHtml,
   resolveBodyFormat,
-  sanitizeHtml,
 } from '../../body-format';
-import Markdown from './Markdown.svelte';
 
 export interface Props {
   /** The body content to render as HTML or Markdown. */
@@ -13,21 +12,31 @@ export interface Props {
   format?: ContentBodyFormat | null;
   /** CSS class to apply to the rendered container. */
   class?: string;
+  /** Replace the thumbnail block's image URL (see `renderContentBodyHtml`). */
+  thumbnailSrc?: string | null;
 }
 
-let { content, format = null, class: className = '' }: Props = $props();
+let {
+  content,
+  format = null,
+  class: className = '',
+  thumbnailSrc = null,
+}: Props = $props();
 
 const resolvedFormat = $derived(resolveBodyFormat(format, content));
-const safeHtml = $derived(sanitizeHtml(content || ''));
+// Both formats render through the same sanitizer and into the same container,
+// so image placements (header, wrap left/right) look identical whichever
+// format the body was saved in.
+const safeHtml = $derived(
+  renderContentBodyHtml(content || '', resolvedFormat, { thumbnailSrc }),
+);
 </script>
 
-{#if resolvedFormat === 'markdown'}
-  <Markdown {content} class={className} />
-{:else}
-  <div class="content-body-renderer {className}">
-    {@html safeHtml}
-  </div>
-{/if}
+<div
+  class="content-body-renderer {resolvedFormat === 'markdown' ? 'markdown-content' : ''} {className}"
+>
+  {@html safeHtml}
+</div>
 
 <style>
   .content-body-renderer {
@@ -152,4 +161,20 @@ const safeHtml = $derived(sanitizeHtml(content || ''));
   .content-body-renderer :global(img[data-smrt-inline-image][data-smrt-placement='right']) {
     width: min(45%, 22rem);
   }
+
+  .content-body-renderer :global(img[data-smrt-thumbnail][data-smrt-placement='right']) {
+    margin-top: 0.25rem;
+  }
+
+  /* Phones: wrapped images stack full width above the text they sat beside. */
+  @media (max-width: 36rem) {
+    .content-body-renderer :global(figure[data-smrt-placement='left']),
+    .content-body-renderer :global(figure[data-smrt-placement='right']),
+    .content-body-renderer :global(img[data-smrt-placement='left']),
+    .content-body-renderer :global(img[data-smrt-placement='right']) {
+      float: none;
+      width: 100% !important;
+      margin: var(--spacing-md, 0.75rem) 0;
+    }
+  }
 </style>

package/dist/svelte/components/ContentBodyRenderer.svelte.d.ts

@@ -6,6 +6,8 @@ export interface Props {
     format?: ContentBodyFormat | null;
     /** CSS class to apply to the rendered container. */
     class?: string;
+    /** Replace the thumbnail block's image URL (see `renderContentBodyHtml`). */
+    thumbnailSrc?: string | null;
 }
 declare const ContentBodyRenderer: import("svelte").Component<Props, {}, "">;
 type ContentBodyRenderer = ReturnType<typeof ContentBodyRenderer>;

package/dist/svelte/components/ContentBodyRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBodyRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,KAAK;IACpB,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentBodyRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentBodyRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,KAAK;IACpB,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA6BD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentClaimAuditTool.svelte

@@ -320,6 +320,13 @@ async function recheckFactClaims(claimIds: string[]) {
 </div>
 
 <style>
+  /* The tool lays itself out by its own width, not the viewport, so it
+     fits a full page, a side panel, the assistant dock or a phone. */
+  .governance-tool {
+    container-type: inline-size;
+    container-name: governance-tool;
+  }
+
   .governance-tool,
   .tool-list,
   .tool-card-body {
@@ -349,9 +356,10 @@ async function recheckFactClaims(claimIds: string[]) {
   }
 
   .tool-card {
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
+    box-shadow: var(--smrt-card-shadow, none);
     border-radius: 0.65rem;
-    background: var(--smrt-color-surface);
+    background: var(--smrt-card-background, var(--smrt-color-surface));
     padding: 0.75rem;
   }
 
@@ -433,4 +441,39 @@ async function recheckFactClaims(claimIds: string[]) {
     background: color-mix(in srgb, var(--smrt-color-warning) 12%, transparent);
     color: var(--smrt-color-on-warning-container);
   }
+
+  .claim-audit-select {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tool-card summary {
+    min-height: 2.75rem;
+  }
+
+  .tool-card.nested {
+    background: color-mix(in srgb, var(--smrt-color-on-surface) 6%, transparent);
+  }
+
+  @container governance-tool (max-width: 30rem) {
+    .claim-audit-toolbar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .claim-audit-toolbar :global(button),
+    .claim-audit-actions :global(button) {
+      width: 100%;
+    }
+
+    .claim-audit-actions {
+      justify-content: stretch;
+    }
+
+    .tool-card summary {
+      flex-wrap: wrap;
+    }
+  }
 </style>

package/dist/svelte/components/ContentCorrectionsTool.svelte

@@ -254,6 +254,13 @@ async function issueCorrection() {
 </div>
 
 <style>
+  /* The tool lays itself out by its own width, not the viewport, so it
+     fits a full page, a side panel, the assistant dock or a phone. */
+  .governance-tool {
+    container-type: inline-size;
+    container-name: governance-tool;
+  }
+
   .governance-tool,
   .tool-list,
   .workflow-field {
@@ -272,8 +279,9 @@ async function issueCorrection() {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    background: var(--smrt-color-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-card-background, var(--smrt-color-surface));
+    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
+    box-shadow: var(--smrt-card-shadow, none);
     border-radius: 0.75rem;
     padding: 0.85rem;
   }
@@ -340,4 +348,18 @@ async function issueCorrection() {
     background: color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
     color: var(--smrt-color-on-primary-container);
   }
+
+  .checkbox-row {
+    min-height: 2.75rem;
+  }
+
+  @container governance-tool (max-width: 30rem) {
+    .governance-tool > :global(button) {
+      width: 100%;
+    }
+
+    .tool-card-header {
+      flex-wrap: wrap;
+    }
+  }
 </style>

package/dist/svelte/components/ContentEditor.svelte

@@ -43,6 +43,7 @@ import ContentBodyEditor, {
   type ContentBodyEditorChange,
 } from './ContentBodyEditor.svelte';
 import ContentImageChooser from './ContentImageChooser.svelte';
+import type { ContentFieldMode } from './content-field-mode.js';
 
 const { t } = useI18n();
 
@@ -67,6 +68,11 @@ export interface Props {
   hideActions?: boolean;
   /** Hide the AI chat sidebar completely. */
   hideChat?: boolean;
+  /**
+   * Show the body editor's "Save as" HTML/Markdown picker. Off by default:
+   * the storage format is a technical choice most editors should not face.
+   */
+  showBodyFormatPicker?: boolean;
   /** Policy object defining which fields the assistant can modify. */
   assistantFieldAllowList?: ContentEditorAssistantFieldUpdateAllowList;
   /** Fired when the assistant context changes (for session tracking). */
@@ -79,6 +85,12 @@ export interface Props {
   onSave: (data: ContentEditorSavePayload) => void;
   /** Fired when the user cancels editing without saving. */
   onCancel: () => void;
+  /**
+   * `full` (default) shows every field. `simple` is for everyday editors:
+   * Type, State and References are hidden, Metadata becomes a collapsed
+   * "Details" section, and optional fields say so.
+   */
+  mode?: ContentFieldMode;
 }
 
 let {
@@ -92,14 +104,23 @@ let {
   agentChatNotice = null,
   hideActions = false,
   hideChat = false,
+  showBodyFormatPicker = false,
   assistantFieldAllowList = {},
   onAssistantContextChange = undefined,
   onChange = undefined,
   onFactAuditChange = undefined,
   onSave,
   onCancel,
+  mode = 'full',
 }: Props = $props();
 
+const simpleMode = $derived(mode === 'simple');
+function optionalLabel(label: string): string {
+  return simpleMode
+    ? t(M['content.content_fields.optional'], { label })
+    : label;
+}
+
 // Unique per-instance form id so triggerSave() targets THIS editor's form even
 // when multiple ContentEditor / GovernedContentEditor instances are mounted
 // (a hardcoded id + getElementById would resolve to the first match in the DOM).
@@ -906,6 +927,19 @@ function handleImageSelect(selected: ImageLike | File | string) {
   })();
 }
 
+// An attached picture whose file or row is gone is left out of the media
+// list (with a console warning) instead of showing a broken image.
+let brokenAssetImages = $state<Record<string, true>>({});
+
+function hideBrokenAssetImage(assetId: string) {
+  if (!assetId || brokenAssetImages[assetId]) return;
+  console.warn(
+    '[ContentEditor] Leaving out an attached picture that could not be loaded',
+    assetId,
+  );
+  brokenAssetImages = { ...brokenAssetImages, [assetId]: true };
+}
+
 function getAssetImageSource(asset: ContentEditorAsset): string {
   return String(asset?.sourceUri || asset?.url || asset?.src || '');
 }
@@ -1009,8 +1043,9 @@ function removeAsset(id: string) {
       {/if}
       <div class="editor-toolbar">
         <div class="editor-toolbar-left">
+          {#if !simpleMode}
           <div class="mui-field">
-            <Select id="type-select" bind:value={formData.type} class="mui-input">
+            <Select id="type-select" name="type" bind:value={formData.type} class="mui-input">
               <option value="article">Article</option>
               <option value="document">Document</option>
               <option value="mirror">Mirror</option>
@@ -1018,15 +1053,16 @@ function removeAsset(id: string) {
             <label for="type-select">Type</label>
           </div>
           <div class="mui-field">
-            <Select id="state-select" bind:value={formData.state} class="mui-input">
+            <Select id="state-select" name="state" bind:value={formData.state} class="mui-input">
               <option value="active">Active</option>
               <option value="highlighted">Highlighted</option>
               <option value="deprecated">Deprecated</option>
             </Select>
             <label for="state-select">State</label>
           </div>
+          {/if}
           <div class="mui-field">
-            <Select id="status-select" bind:value={formData.status} class="mui-input">
+            <Select id="status-select" name="status" aria-label={t(M['content.content_fields.status'])} bind:value={formData.status} class="mui-input">
               <option value="draft">Draft</option>
               <option value="published">Published</option>
               <option value="archived">Archived</option>
@@ -1034,8 +1070,8 @@ function removeAsset(id: string) {
             <label for="status-select">Status</label>
           </div>
           <div class="mui-field">
-            <Input id="publish-date-input" type="datetime-local" bind:value={formData.publish_date} class="mui-input" />
-            <label for="publish-date-input">{t(M['content.content_editor.publish_date'])}</label>
+            <Input id="publish-date-input" name="publish_date" aria-label={simpleMode ? optionalLabel(t(M['content.content_fields.publish_date'])) : t(M['content.content_editor.publish_date'])} type="datetime-local" bind:value={formData.publish_date} class="mui-input" />
+            <label for="publish-date-input">{simpleMode ? optionalLabel(t(M['content.content_fields.publish_date'])) : t(M['content.content_editor.publish_date'])}</label>
           </div>
         </div>
         {#if showActions}
@@ -1054,6 +1090,8 @@ function removeAsset(id: string) {
 
       <Input
          type="text"
+         name="title"
+         aria-label={t(M['content.content_fields.title'])}
          class="document-title-input"
          bind:value={formData.title}
          placeholder={t(M['content.content_editor.document_title_placeholder'])}
@@ -1085,6 +1123,7 @@ function removeAsset(id: string) {
           bind:this={bodyEditor}
           value={formData.body || ''}
           format={formData.bodyFormat}
+          showFormatPicker={showBodyFormatPicker}
           selectedImageIndex={selectedBodyImageIndex}
           onChange={handleBodyChange}
           onOpenImageChooser={() => showInlineImageUploader = !showInlineImageUploader}
@@ -1139,6 +1178,7 @@ function removeAsset(id: string) {
                   <div class="media-grid">
                     {#each formData.assets as asset, index (asset.id || `asset-${index}`)}
                       {@const assetId = typeof asset.id === 'string' ? asset.id : ''}
+                      {#if !(assetId && brokenAssetImages[assetId])}
                       <div
                         class="media-item"
                         class:is-thumbnail={assetId === formData.thumbnailAssetId}
@@ -1146,7 +1186,12 @@ function removeAsset(id: string) {
                         title={t(M['content.content_editor.drag_into_body'])}
                         ondragstart={(event) => handleAttachedImageDragStart(event, asset)}
                       >
-                        <img class="media-item-image" src={getAssetImageSource(asset)} alt={asset.name || 'Asset image'} />
+                        <img
+                          class="media-item-image"
+                          src={getAssetImageSource(asset)}
+                          alt={asset.name || 'Asset image'}
+                          onerror={() => hideBrokenAssetImage(assetId)}
+                        />
                         <div class="media-item-overlay">
                            {#if assetId && assetId !== formData.thumbnailAssetId}
                              <Button variant="ghost" size="sm" type="button" class="btn-make-thumbnail" aria-label={t(M['content.content_editor.make_thumbnail'])} title={t(M['content.content_editor.make_thumbnail'])} onclick={() => setThumbnail(assetId)}>
@@ -1163,6 +1208,7 @@ function removeAsset(id: string) {
                           <div class="thumbnail-badge">Thumbnail</div>
                         {/if}
                       </div>
+                      {/if}
                     {/each}
                   </div>
                 {:else}
@@ -1193,25 +1239,27 @@ function removeAsset(id: string) {
           </div>
       </details>
 
-      <!-- Metadata Panel -->
-      <details class="editor-drawer" open>
+      <!-- Metadata Panel ("Details", collapsed, in simple mode) -->
+      <details class="editor-drawer" open={!simpleMode}>
         <summary class="editor-drawer-header">
-          Metadata
+          {#if simpleMode}{t(M['content.content_fields.details'])}{:else}Metadata{/if}
           <svg class="drawer-icon" viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
         </summary>
         <div class="editor-drawer-content">
           <label>
-            Author:
-            <Input type="text" bind:value={formData.author} placeholder={t(M['content.content_editor.author_name_placeholder'])} />
+            {simpleMode ? optionalLabel(t(M['content.content_fields.author'])) : 'Author:'}
+            <Input type="text" name="author" aria-label={optionalLabel(t(M['content.content_fields.author']))} bind:value={formData.author} placeholder={t(M['content.content_editor.author_name_placeholder'])} />
           </label>
           <label>
-            Description:
-            <Textarea bind:value={formData.description} rows={2} placeholder={t(M['content.content_editor.brief_summary_placeholder'])}></Textarea>
+            {simpleMode ? optionalLabel(t(M['content.content_fields.summary'])) : 'Description:'}
+            <Textarea name="description" aria-label={simpleMode ? optionalLabel(t(M['content.content_fields.summary'])) : t(M['content.content_fields.description'])} bind:value={formData.description} rows={2} placeholder={t(M['content.content_editor.brief_summary_placeholder'])}></Textarea>
           </label>
           <label>
-            {t(M['content.content_editor.tags_comma_separated'])}
+            {simpleMode ? optionalLabel(t(M['content.content_fields.tags'])) : t(M['content.content_editor.tags_comma_separated'])}
             <Input
               type="text"
+              name="tags"
+              aria-label={optionalLabel(t(M['content.content_fields.tags']))}
               value={(formData.tags || []).join(', ')}
               placeholder={t(M['content.content_editor.tags_placeholder'])}
               oninput={(event) => parseTagsInput((event.currentTarget as HTMLInputElement).value)}
@@ -1220,7 +1268,8 @@ function removeAsset(id: string) {
         </div>
       </details>
 
-      <!-- References Panel -->
+      <!-- References Panel (hidden in simple mode) -->
+      {#if !simpleMode}
       <details class="editor-drawer" open>
           <summary class="editor-drawer-header">
             References
@@ -1427,14 +1476,15 @@ function removeAsset(id: string) {
 
             <label>
               URL:
-              <Input type="url" bind:value={formData.url} />
+              <Input type="url" name="url" aria-label={t(M['content.content_fields.url'])} bind:value={formData.url} />
             </label>
             <label>
               {t(M['content.content_editor.file_key'])}
-              <Input type="text" bind:value={formData.fileKey} />
+              <Input type="text" name="fileKey" aria-label={t(M['content.content_editor.file_key'])} bind:value={formData.fileKey} />
             </label>
           </div>
       </details>
+      {/if}
     </Form>
 
     {#if showChatSidebar}

package/dist/svelte/components/ContentEditor.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ContentEditorAssistantContextChange, ContentEditorAssistantFieldUpdateAllowList } from '../../content-editor-assistant';
 import type { ContentData, FactAuditStateData } from '../../mock-smrt-client';
 import { type ContentEditorSavePayload, getContentEditorSnapshot } from '../content-editor-form';
+import type { ContentFieldMode } from './content-field-mode.js';
 type ContentEditorSnapshot = ReturnType<typeof getContentEditorSnapshot>;
 export interface Props {
     /** Base URL for API requests to load and save content. */
@@ -23,6 +24,11 @@ export interface Props {
     hideActions?: boolean;
     /** Hide the AI chat sidebar completely. */
     hideChat?: boolean;
+    /**
+     * Show the body editor's "Save as" HTML/Markdown picker. Off by default:
+     * the storage format is a technical choice most editors should not face.
+     */
+    showBodyFormatPicker?: boolean;
     /** Policy object defining which fields the assistant can modify. */
     assistantFieldAllowList?: ContentEditorAssistantFieldUpdateAllowList;
     /** Fired when the assistant context changes (for session tracking). */
@@ -35,6 +41,12 @@ export interface Props {
     onSave: (data: ContentEditorSavePayload) => void;
     /** Fired when the user cancels editing without saving. */
     onCancel: () => void;
+    /**
+     * `full` (default) shows every field. `simple` is for everyday editors:
+     * Type, State and References are hidden, Metadata becomes a collapsed
+     * "Details" section, and optional fields say so.
+     */
+    mode?: ContentFieldMode;
 }
 declare const ContentEditor: import("svelte").Component<Props, {
     triggerSave: () => void;

package/dist/svelte/components/ContentEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EACV,WAAW,EAEX,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAKL,KAAK,wBAAwB,EAG7B,wBAAwB,EAEzB,MAAM,wBAAwB,CAAC;AAUhC,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEzE,MAAM,WAAW,KAAK;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,uEAAuE;IACvE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,qEAAqE;IACrE,MAAM,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACjD,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAoxCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EACV,WAAW,EAEX,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAKL,KAAK,wBAAwB,EAG7B,wBAAwB,EAEzB,MAAM,wBAAwB,CAAC;AAQhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEzE,MAAM,WAAW,KAAK;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,uEAAuE;IACvE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,qEAAqE;IACrE,MAAM,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACjD,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAizCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/ContentGovernancePanel.svelte

@@ -1894,6 +1894,8 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
   }
 
   .factual-workflow {
+    container-type: inline-size;
+    container-name: governance-panel;
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
@@ -1904,7 +1906,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     gap: 1.25rem;
   }
 
-  @media (min-width: 900px) {
+  @container governance-panel (min-width: 56rem) {
     .workflow-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -2156,7 +2158,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     gap: 1rem;
   }
 
-  @media (min-width: 900px) {
+  @container governance-panel (min-width: 56rem) {
     .transparency-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }