@happyvertical/smrt-content 0.51.39 → 0.53.0

package/dist/svelte/components/ContentStatusFields.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-import { Input, Select } from '@happyvertical/smrt-ui/forms';
+import { FormGroup, Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
+import {
+  type ContentFieldMode,
+  type ContentStatusFieldName,
+  FULL_STATUS_FIELDS,
+  resolveContentFields,
+  SIMPLE_STATUS_FIELDS,
+} from './content-field-mode.js';
 
 const { t } = useI18n();
 
@@ -16,52 +23,84 @@ export interface ContentStatusFieldData {
 export interface Props {
   /** Current status field values. */
   data: ContentStatusFieldData;
+  /**
+   * `full` (default) shows Type, State, Status and Published; `simple` shows
+   * Status and an optional Publish date with plain labels.
+   */
+  mode?: ContentFieldMode;
+  /** Explicit allow-list of fields; overrides the mode's choice. */
+  fields?: readonly ContentStatusFieldName[];
+  /** Prefix for field DOM ids, unique per editor on the page (default `content`). */
+  idPrefix?: string;
   /** Invoked when the user modifies any status field. */
   onChange?: (change: Record<string, unknown>) => void;
 }
 
-let { data, onChange = undefined }: Props = $props();
+let {
+  data,
+  mode = 'full',
+  fields = undefined,
+  idPrefix = 'content',
+  onChange = undefined,
+}: Props = $props();
+
+const simple = $derived(mode === 'simple');
+const shown = $derived(
+  resolveContentFields(mode, fields, SIMPLE_STATUS_FIELDS, FULL_STATUS_FIELDS),
+);
+const publishLabel = $derived(
+  simple
+    ? t(M['content.content_fields.optional'], {
+        label: t(M['content.content_fields.publish_date']),
+      })
+    : t(M['content.content_fields.published']),
+);
 
 function updateField(key: string, value: unknown) {
   onChange?.({ [key]: value });
 }
 </script>
 
-<div class="content-status-fields">
-  <label>
-    <span>Type</span>
-    <Select value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
-      <option value="article">Article</option>
-      <option value="document">Document</option>
-      <option value="mirror">Mirror</option>
-      <option value="video-segment">{t(M['content.content_status_fields.video_segment'])}</option>
-    </Select>
-  </label>
-  <label>
-    <span>State</span>
-    <Select value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
-      <option value="active">Active</option>
-      <option value="highlighted">Highlighted</option>
-      <option value="deprecated">Deprecated</option>
-    </Select>
-  </label>
-  <label>
-    <span>Status</span>
-    <Select value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
-      <option value="draft">Draft</option>
-      <option value="review">Review</option>
-      <option value="published">Published</option>
-      <option value="archived">Archived</option>
-    </Select>
-  </label>
-  <label>
-    <span>Published</span>
-    <Input
-      type="datetime-local"
-      value={data.publish_date || ''}
-      onchange={(event) => updateField('publish_date', event.currentTarget.value)}
-    />
-  </label>
+<div class="content-status-fields" class:simple>
+  {#if shown.has('type')}
+    <FormGroup label={t(M['content.content_fields.type'])} id="{idPrefix}-type">
+      <Select name="type" value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
+        <option value="article">Article</option>
+        <option value="document">Document</option>
+        <option value="mirror">Mirror</option>
+        <option value="video-segment">{t(M['content.content_status_fields.video_segment'])}</option>
+      </Select>
+    </FormGroup>
+  {/if}
+  {#if shown.has('state')}
+    <FormGroup label={t(M['content.content_fields.state'])} id="{idPrefix}-state">
+      <Select name="state" value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
+        <option value="active">Active</option>
+        <option value="highlighted">Highlighted</option>
+        <option value="deprecated">Deprecated</option>
+      </Select>
+    </FormGroup>
+  {/if}
+  {#if shown.has('status')}
+    <FormGroup label={t(M['content.content_fields.status'])} id="{idPrefix}-status">
+      <Select name="status" value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
+        <option value="draft">{t(M['content.content_fields.status_draft'])}</option>
+        <option value="review">{t(M['content.content_fields.status_review'])}</option>
+        <option value="published">{t(M['content.content_fields.status_published'])}</option>
+        <option value="archived">{t(M['content.content_fields.status_archived'])}</option>
+      </Select>
+    </FormGroup>
+  {/if}
+  {#if shown.has('publish_date')}
+    <FormGroup label={publishLabel} id="{idPrefix}-publish-date">
+      <Input
+        name="publish_date"
+        type="datetime-local"
+        value={data.publish_date || ''}
+        onchange={(event) => updateField('publish_date', event.currentTarget.value)}
+      />
+    </FormGroup>
+  {/if}
 </div>
 
 <style>
@@ -72,13 +111,21 @@ function updateField(key: string, value: unknown) {
     gap: 0.75rem;
   }
 
-  label {
+  .content-status-fields :global(.form-group) {
     display: grid;
     gap: 0.35rem;
     min-width: 8.5rem;
+    margin: 0;
+  }
+
+  .content-status-fields :global(.form-label) {
+    margin: 0;
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
+  .content-status-fields.simple :global(.form-label) {
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
 </style>

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

@@ -1,3 +1,4 @@
+import { type ContentFieldMode, type ContentStatusFieldName } from './content-field-mode.js';
 export interface ContentStatusFieldData {
     type?: string;
     state?: string;
@@ -8,6 +9,15 @@ export interface ContentStatusFieldData {
 export interface Props {
     /** Current status field values. */
     data: ContentStatusFieldData;
+    /**
+     * `full` (default) shows Type, State, Status and Published; `simple` shows
+     * Status and an optional Publish date with plain labels.
+     */
+    mode?: ContentFieldMode;
+    /** Explicit allow-list of fields; overrides the mode's choice. */
+    fields?: readonly ContentStatusFieldName[];
+    /** Prefix for field DOM ids, unique per editor on the page (default `content`). */
+    idPrefix?: string;
     /** Invoked when the user modifies any status field. */
     onChange?: (change: Record<string, unknown>) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,mCAAmC;IACnC,IAAI,EAAE,sBAAsB,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAsDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAI5B,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,mCAAmC;IACnC,IAAI,EAAE,sBAAsB,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AA6ED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentTitleField.svelte

@@ -1,5 +1,19 @@
 <script lang="ts">
-import { Input } from '@happyvertical/smrt-ui/forms';
+/**
+ * ContentTitleField - a content item's title as a headline-style text field.
+ *
+ * The title wraps like a heading (a one-row textarea that grows with its
+ * text) but stays one line of text: Enter never adds a newline, and pasted
+ * line breaks become spaces. It is a labelled control (`label`, default
+ * "Title"), so it can sit inside the page's `<h1>` (smrt-ui PageHeader's
+ * `titleField`): the heading is then named by the title and the field keeps
+ * its own label. Inside a heading it takes the heading's type.
+ *
+ * Give it a `name` (or `id`) so a surrounding agent-operable form registers
+ * it like any smrt-ui control. Validation messages belong outside a heading:
+ * render the message beside it and point `describedBy` at it.
+ */
+import { Textarea } from '@happyvertical/smrt-ui/forms';
 
 export interface Props {
   /** Current title text value. */
@@ -8,6 +22,18 @@ export interface Props {
   placeholder?: string;
   /** Whether the title field must be filled before submission. */
   required?: boolean;
+  /** Accessible name of the field. */
+  label?: string;
+  /** Form field name; also its identity for agent-operable forms. */
+  name?: string;
+  /** Element id. */
+  id?: string;
+  /** Marks the field invalid (e.g. an empty required title). */
+  invalid?: boolean;
+  /** Id(s) of the element(s) describing the field, e.g. its error message. */
+  describedBy?: string;
+  /** Whether the field is disabled. */
+  disabled?: boolean;
   /** Invoked when the user modifies the title text. */
   onChange?: (value: string) => void;
 }
@@ -16,27 +42,80 @@ let {
   value = '',
   placeholder = 'Title',
   required = false,
+  label = 'Title',
+  name = undefined,
+  id = undefined,
+  invalid = false,
+  describedBy = undefined,
+  disabled = false,
   onChange = undefined,
 }: Props = $props();
+
+let field = $state<ReturnType<typeof Textarea> | null>(null);
+
+function fitHeight() {
+  const element = field?.getElement();
+  if (!element) return;
+  element.style.height = 'auto';
+  element.style.height = `${element.scrollHeight}px`;
+}
+
+$effect(() => {
+  void value;
+  fitHeight();
+});
+
+function handleKeydown(event: KeyboardEvent) {
+  // One line of text: Enter neither adds a newline nor submits.
+  if (event.key === 'Enter' && !event.isComposing) event.preventDefault();
+}
+
+function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }) {
+  const element = event.currentTarget;
+  const text = element.value.replace(/[\r\n]+/g, ' ');
+  if (text !== element.value) {
+    const caret = element.selectionStart;
+    element.value = text;
+    if (caret !== null) element.setSelectionRange(caret, caret);
+  }
+  fitHeight();
+  onChange?.(text);
+}
 </script>
 
-<div class="content-title-field-shell">
-  <Input
+<svelte:window onresize={fitHeight} />
+
+<span class="content-title-field-shell">
+  <Textarea
+    bind:this={field}
     class="content-title-field"
-    type="text"
+    rows={1}
+    {id}
+    {name}
     {placeholder}
     {required}
+    {disabled}
+    aria-label={label}
+    aria-invalid={invalid ? 'true' : undefined}
+    aria-describedby={describedBy}
     value={value || ''}
-    oninput={(event) => onChange?.(event.currentTarget.value)}
+    onkeydown={handleKeydown}
+    oninput={handleInput}
   />
-</div>
+</span>
 
 <style>
+  .content-title-field-shell {
+    display: block;
+  }
+
   .content-title-field-shell :global(.content-title-field) {
+    display: block;
     width: 100%;
+    min-height: 0;
     box-sizing: border-box;
     border: 0;
-    border-radius: 0;
+    border-radius: var(--smrt-radius-sm, 4px);
     background: transparent;
     color: var(--smrt-color-on-surface);
     font: inherit;
@@ -44,19 +123,37 @@ let {
     font-weight: var(--smrt-typography-weight-bold, 720);
     line-height: 1.12;
     letter-spacing: 0;
-    padding: 0;
+    padding: 0.1em 0.2em;
+    margin-inline: -0.2em;
+    resize: none;
+    overflow: hidden;
+    field-sizing: content;
+    transition: background-color 150ms;
+  }
+
+  /* Inside a heading, look like that heading. */
+  :global(:is(h1, h2, h3)) > .content-title-field-shell :global(.content-title-field) {
+    font: inherit;
+    letter-spacing: inherit;
   }
 
   .content-title-field-shell :global(.content-title-field)::placeholder {
     color: color-mix(in srgb, var(--smrt-color-on-surface-variant) 70%, transparent);
   }
 
-  .content-title-field-shell :global(.content-title-field):focus {
-    outline: none;
+  /* Editable on hover and focus: a quiet field background, then an outline. */
+  .content-title-field-shell :global(.content-title-field):hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-low, rgb(0 0 0 / 4%));
   }
 
-  .content-title-field-shell :global(.content-title-field):focus-visible {
+  .content-title-field-shell :global(.content-title-field):focus {
     outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 0.35rem;
+    outline-offset: 2px;
+    background: var(--smrt-color-surface-container-low, rgb(0 0 0 / 4%));
+  }
+
+  .content-title-field-shell :global(.content-title-field[aria-invalid='true']) {
+    outline: 2px solid var(--smrt-color-error, #b3261e);
+    outline-offset: 2px;
   }
 </style>

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

@@ -5,6 +5,18 @@ export interface Props {
     placeholder?: string;
     /** Whether the title field must be filled before submission. */
     required?: boolean;
+    /** Accessible name of the field. */
+    label?: string;
+    /** Form field name; also its identity for agent-operable forms. */
+    name?: string;
+    /** Element id. */
+    id?: string;
+    /** Marks the field invalid (e.g. an empty required title). */
+    invalid?: boolean;
+    /** Id(s) of the element(s) describing the field, e.g. its error message. */
+    describedBy?: string;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
     /** Invoked when the user modifies the title text. */
     onChange?: (value: string) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA6DD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/ContentTransparencyReport.svelte

@@ -216,6 +216,8 @@ function getFactLabel(fact: {
 
 <style>
   .transparency-report {
+    container-type: inline-size;
+    container-name: transparency-report;
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -269,7 +271,7 @@ function getFactLabel(fact: {
     gap: 1rem;
   }
 
-  @media (min-width: 900px) {
+  @container transparency-report (min-width: 56rem) {
     .transparency-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }

package/dist/svelte/components/ContentTransparencyTool.svelte

@@ -223,6 +223,13 @@ async function loadTransparency(contentIdToLoad = savedContentId) {
 </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-list-section,
@@ -235,14 +242,15 @@ async function loadTransparency(contentIdToLoad = savedContentId) {
   .transparency-stats {
     display: grid;
     gap: 0.75rem;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
   }
 
   .transparency-stat,
   .transparency-card,
   .transparency-list-item {
-    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;
   }
 
@@ -265,6 +273,7 @@ async function loadTransparency(contentIdToLoad = savedContentId) {
   }
 
   .transparency-list-item {
+    background: color-mix(in srgb, var(--smrt-color-on-surface) 6%, transparent);
     padding: 0.7rem 0.8rem;
     display: flex;
     flex-direction: column;
@@ -316,4 +325,10 @@ async function loadTransparency(contentIdToLoad = savedContentId) {
     color: var(--smrt-color-on-error-container);
     font-size: var(--smrt-typography-body-medium-size, 0.9rem);
   }
+
+  @container governance-tool (max-width: 30rem) {
+    .tool-card-header {
+      flex-wrap: wrap;
+    }
+  }
 </style>

package/dist/svelte/components/ContentVersionsTool.svelte

@@ -241,6 +241,13 @@ async function restoreVersion(versionNumber: number) {
 />
 
 <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 {
@@ -263,8 +270,9 @@ async function restoreVersion(versionNumber: number) {
   }
 
   .tool-card {
-    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;
   }
@@ -309,4 +317,20 @@ async function restoreVersion(versionNumber: number) {
     background: color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
     color: var(--smrt-color-on-primary-container);
   }
+
+  @container governance-tool (max-width: 30rem) {
+    .tool-toolbar {
+      justify-content: stretch;
+    }
+
+    .tool-toolbar :global(button),
+    .tool-card-footer :global(button) {
+      width: 100%;
+    }
+
+    .tool-card-footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
 </style>

package/dist/svelte/components/content-field-mode.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Simple vs full editor fields.
+ *
+ * `full` (the default) keeps every field and the long-standing labels.
+ * `simple` is for everyday editors — a title, the story, images, author,
+ * summary and tags: it hides Type, State, URL, File key (and, in
+ * ContentEditor, references), collapses the Details section, uses plain
+ * labels, and marks optional fields "(optional)". A `fields` allow-list
+ * overrides either mode's choice of fields.
+ */
+export type ContentFieldMode = 'simple' | 'full';
+export type ContentStatusFieldName = 'type' | 'state' | 'status' | 'publish_date';
+export type ContentMetadataFieldName = 'author' | 'description' | 'tags' | 'url' | 'fileKey';
+export declare const SIMPLE_STATUS_FIELDS: readonly ContentStatusFieldName[];
+export declare const FULL_STATUS_FIELDS: readonly ContentStatusFieldName[];
+export declare const SIMPLE_METADATA_FIELDS: readonly ContentMetadataFieldName[];
+export declare const FULL_METADATA_FIELDS: readonly ContentMetadataFieldName[];
+/** The fields to render: an explicit allow-list wins over the mode. */
+export declare function resolveContentFields<T extends string>(mode: ContentFieldMode, fields: readonly T[] | undefined, simple: readonly T[], full: readonly T[]): Set<T>;
+//# sourceMappingURL=content-field-mode.d.ts.map

package/dist/svelte/components/content-field-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-field-mode.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/content-field-mode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,OAAO,GACP,QAAQ,GACR,cAAc,CAAC;AACnB,MAAM,MAAM,wBAAwB,GAChC,QAAQ,GACR,aAAa,GACb,MAAM,GACN,KAAK,GACL,SAAS,CAAC;AAEd,eAAO,MAAM,oBAAoB,EAAE,SAAS,sBAAsB,EAGjE,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,SAAS,sBAAsB,EAK/D,CAAC;AACF,eAAO,MAAM,sBAAsB,EAAE,SAAS,wBAAwB,EAIrE,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,SAAS,wBAAwB,EAMnE,CAAC;AAEF,uEAAuE;AACvE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EACnD,IAAI,EAAE,gBAAgB,EACtB,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,EAChC,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,GAAG,CAAC,CAAC,CAAC,CAER"}

package/dist/svelte/components/content-field-mode.js

@@ -0,0 +1,26 @@
+export const SIMPLE_STATUS_FIELDS = [
+    'status',
+    'publish_date',
+];
+export const FULL_STATUS_FIELDS = [
+    'type',
+    'state',
+    'status',
+    'publish_date',
+];
+export const SIMPLE_METADATA_FIELDS = [
+    'author',
+    'description',
+    'tags',
+];
+export const FULL_METADATA_FIELDS = [
+    'author',
+    'description',
+    'tags',
+    'url',
+    'fileKey',
+];
+/** The fields to render: an explicit allow-list wins over the mode. */
+export function resolveContentFields(mode, fields, simple, full) {
+    return new Set(fields ?? (mode === 'simple' ? simple : full));
+}

package/dist/svelte/content-editor-media.d.ts

@@ -9,4 +9,18 @@ export declare function createContentEditorImageRecord(apiBaseUrl: string, input
     mimeType: string;
 }): Promise<ContentEditorAsset | null>;
 export declare function resolveContentEditorImageSelection(apiBaseUrl: string, selected: ImageLike | File | string): Promise<ContentEditorAsset | null>;
+/** Natural pixel size of an image, as used to choose a thumbnail placement. */
+export interface ContentEditorImageDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * The size of an attached image: from the asset's own `width`/`height` (or
+ * `metadata.width`/`metadata.height`) when recorded, otherwise by loading
+ * `src` in the browser. Resolves `null` when neither is available (no DOM,
+ * load error, or `timeoutMs` elapsed).
+ */
+export declare function resolveContentEditorImageDimensions(asset: Record<string, unknown> | null | undefined, src: string, options?: {
+    timeoutMs?: number;
+}): Promise<ContentEditorImageDimensions | null>;
 //# sourceMappingURL=content-editor-media.d.ts.map

package/dist/svelte/content-editor-media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-editor-media.d.ts","sourceRoot":"","sources":["../../src/svelte/content-editor-media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClD,MAAM,CAUR;AAED,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAO1E;AAED,wBAAgB,gCAAgC,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAmBzE;AAWD,wBAAsB,8BAA8B,CAClD,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE;IACL,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAgBpC;AAED,wBAAsB,kCAAkC,CACtD,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAClC,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CA6BpC"}
+{"version":3,"file":"content-editor-media.d.ts","sourceRoot":"","sources":["../../src/svelte/content-editor-media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClD,MAAM,CAUR;AAED,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAO1E;AAED,wBAAgB,gCAAgC,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAmBzE;AAWD,wBAAsB,8BAA8B,CAClD,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE;IACL,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,GACA,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAgBpC;AAED,wBAAsB,kCAAkC,CACtD,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAClC,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CA6BpC;AAED,+EAA+E;AAC/E,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAOD;;;;;GAKG;AACH,wBAAsB,mCAAmC,CACvD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,GAAG,EAAE,MAAM,EACX,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GACnC,OAAO,CAAC,4BAA4B,GAAG,IAAI,CAAC,CAmC9C"}

package/dist/svelte/content-editor-media.js

@@ -82,3 +82,44 @@ export async function resolveContentEditorImageSelection(apiBaseUrl, selected) {
     }
     return null;
 }
+function positiveDimension(value) {
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number : null;
+}
+/**
+ * The size of an attached image: from the asset's own `width`/`height` (or
+ * `metadata.width`/`metadata.height`) when recorded, otherwise by loading
+ * `src` in the browser. Resolves `null` when neither is available (no DOM,
+ * load error, or `timeoutMs` elapsed).
+ */
+export async function resolveContentEditorImageDimensions(asset, src, options = {}) {
+    const metadata = asset?.metadata && typeof asset.metadata === 'object'
+        ? asset.metadata
+        : {};
+    const width = positiveDimension(asset?.width ?? metadata.width);
+    const height = positiveDimension(asset?.height ?? metadata.height);
+    if (width && height) {
+        return { width, height };
+    }
+    const ImageConstructor = globalThis.Image;
+    if (!src || typeof ImageConstructor !== 'function') {
+        return null;
+    }
+    return new Promise((resolve) => {
+        const image = new ImageConstructor();
+        const timer = setTimeout(() => resolve(null), options.timeoutMs ?? 8000);
+        image.onload = () => {
+            clearTimeout(timer);
+            const naturalWidth = positiveDimension(image.naturalWidth);
+            const naturalHeight = positiveDimension(image.naturalHeight);
+            resolve(naturalWidth && naturalHeight
+                ? { width: naturalWidth, height: naturalHeight }
+                : null);
+        };
+        image.onerror = () => {
+            clearTimeout(timer);
+            resolve(null);
+        };
+        image.src = src;
+    });
+}

package/dist/svelte/content-editor-state.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ImageLike } from '@happyvertical/smrt-images/svelte';
+import { type ContentMainPicture } from '../body-format.js';
 import { type ContentEditorAsset, type ContentEditorFormData, type ContentEditorInitialContent } from './content-editor-form.js';
 export interface CreateContentEditorStateOptions {
     content?: ContentEditorInitialContent | null;
@@ -9,6 +10,7 @@ export declare class ContentEditorState {
     private _fieldUndoStack;
     private _lastAppliedFields;
     private _showUndoBanner;
+    private _bodyImageSignature;
     constructor(options?: CreateContentEditorStateOptions);
     get form(): ContentEditorFormData;
     get snapshot(): {
@@ -30,6 +32,21 @@ export declare class ContentEditorState {
     addAsset(asset: ContentEditorAsset | ImageLike | Record<string, unknown>): void;
     removeAsset(assetId: string): void;
     setThumbnailAsset(assetId: string | null): void;
+    /**
+     * The main picture (thumbnail) as the story decides it: the picture the
+     * person chose, else the first picture in the story (see
+     * `resolveBodyMainPicture`).
+     */
+    get mainPicture(): ContentMainPicture;
+    /**
+     * Apply the main-picture rule after the story changed: the first picture
+     * in the story becomes the thumbnail unless one was chosen. Runs only
+     * when the story's pictures (or the choice) changed since the last call
+     * or `reset`, so editing text never replaces a thumbnail that was set
+     * some other way. A story without pictures keeps the current thumbnail.
+     * Returns true when the thumbnail changed.
+     */
+    syncMainPictureFromBody(): boolean;
 }
 export declare function createContentEditorState(options?: CreateContentEditorStateOptions): ContentEditorState;
 //# sourceMappingURL=content-editor-state.svelte.d.ts.map