@happyvertical/smrt-content 0.30.0

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    apiBaseUrl?: string;
+    contents: any[];
+    type?: string;
+    defaultViewMode?: 'grid' | 'detailed' | 'compact';
+    onEdit: (content: any) => void;
+    onDelete: (content: any) => void;
+    onAdd: () => void;
+    controls?: Snippet;
+    getViewHref?: (content: any) => string | null;
+};
+declare const ContentList: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContentList = ReturnType<typeof ContentList>;
+export default ContentList;
+//# sourceMappingURL=ContentList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA6VF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ContentMetadataFields.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.editor.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  data: Record<string, any>;
+  onChange?: (change: Record<string, unknown>) => void;
+}
+
+let { data, onChange = undefined }: Props = $props();
+
+const tagsValue = $derived(
+  Array.isArray(data.tags) ? data.tags.join(', ') : String(data.tags || ''),
+);
+
+function updateField(key: string, value: unknown) {
+  onChange?.({ [key]: value });
+}
+
+function updateTags(value: string) {
+  updateField(
+    'tags',
+    value
+      .split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean),
+  );
+}
+</script>
+
+<div class="content-metadata-fields">
+  <label>
+    <span>Author</span>
+    <input
+      type="text"
+      value={data.author || ''}
+      oninput={(event) => updateField('author', event.currentTarget.value)}
+    />
+  </label>
+  <label>
+    <span>Description</span>
+    <textarea
+      rows="4"
+      value={data.description || ''}
+      oninput={(event) => updateField('description', event.currentTarget.value)}
+    ></textarea>
+  </label>
+  <label>
+    <span>Tags</span>
+    <input
+      type="text"
+      value={tagsValue}
+      placeholder={t(M['content.content_metadata_fields.tags_placeholder'])}
+      oninput={(event) => updateTags(event.currentTarget.value)}
+    />
+  </label>
+  <label>
+    <span>URL</span>
+    <input
+      type="url"
+      value={data.url || ''}
+      oninput={(event) => updateField('url', event.currentTarget.value)}
+    />
+  </label>
+  <label>
+    <span>{t(M['content.content_metadata_fields.file_key'])}</span>
+    <input
+      type="text"
+      value={data.fileKey || ''}
+      oninput={(event) => updateField('fileKey', event.currentTarget.value)}
+    />
+  </label>
+</div>
+
+<style>
+  .content-metadata-fields {
+    display: grid;
+    gap: 1rem;
+  }
+
+  label {
+    display: grid;
+    gap: 0.45rem;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  input,
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    padding: 0.75rem 0.875rem;
+  }
+
+  textarea {
+    min-height: 7rem;
+    resize: vertical;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+export interface Props {
+    data: Record<string, any>;
+    onChange?: (change: Record<string, unknown>) => void;
+}
+declare const ContentMetadataFields: import("svelte").Component<Props, {}, "">;
+type ContentMetadataFields = ReturnType<typeof ContentMetadataFields>;
+export default ContentMetadataFields;
+//# sourceMappingURL=ContentMetadataFields.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAwDD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ContentReferencesPanel.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import type { ContentEditorReference } from '../content-editor-form';
+import { M } from '../i18n.editor.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  referenceIds?: string[];
+  references?: ContentEditorReference[];
+  onReferenceIdsChange?: (referenceIds: string[]) => void;
+  /**
+   * Optional snippet rendered inside the panel beneath the references list
+   * and the "add reference by ID" input. Host applications use this to inject
+   * a richer picker (browsing a tenant asset pool, searching an external
+   * archive, etc.) without forking the component. The snippet is responsible
+   * for calling `onReferenceIdsChange` (or otherwise mutating the parent
+   * state) when the user selects an entry.
+   */
+  children?: Snippet;
+}
+
+let {
+  referenceIds = [],
+  references = [],
+  onReferenceIdsChange = undefined,
+  children = undefined,
+}: Props = $props();
+
+let newReferenceId = $state('');
+
+const visibleReferences = $derived(
+  references.length
+    ? references
+    : referenceIds.map((id) => ({ id, title: id })),
+);
+
+function getReferenceLabel(reference: ContentEditorReference): string {
+  return String(
+    reference?.title ||
+      reference?.name ||
+      reference?.url ||
+      reference?.source ||
+      reference?.id ||
+      'Reference',
+  );
+}
+
+function getReferenceUrl(reference: ContentEditorReference): string {
+  return String(
+    reference?.url || reference?.originalUrl || reference?.source || '',
+  );
+}
+
+function getSafeReferenceUrl(reference: ContentEditorReference): string {
+  const url = getReferenceUrl(reference).trim();
+  if (!url) {
+    return '';
+  }
+
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+      ? parsed.href
+      : '';
+  } catch {
+    return '';
+  }
+}
+
+function addReference() {
+  const id = newReferenceId.trim();
+  if (!id || referenceIds.includes(id)) {
+    return;
+  }
+  onReferenceIdsChange?.([...referenceIds, id]);
+  newReferenceId = '';
+}
+
+function removeReference(id: string) {
+  onReferenceIdsChange?.(
+    referenceIds.filter((referenceId) => referenceId !== id),
+  );
+}
+</script>
+
+<div class="content-references-panel">
+  {#if visibleReferences.length}
+    <div class="reference-list">
+      {#each visibleReferences as reference, index (reference.id || getSafeReferenceUrl(reference) || `${getReferenceLabel(reference)}-${index}`)}
+        {@const safeUrl = getSafeReferenceUrl(reference)}
+        {@const referenceId = typeof reference.id === 'string' ? reference.id : ''}
+        <div class="reference-row">
+          <div class="reference-copy">
+            <strong>{getReferenceLabel(reference)}</strong>
+            {#if safeUrl}
+              <a href={safeUrl} target="_blank" rel="noreferrer">{safeUrl}</a>
+            {/if}
+          </div>
+          {#if referenceId}
+            <button type="button" onclick={() => removeReference(referenceId)}>Remove</button>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <p class="empty-state">{t(M['content.content_references_panel.no_references'])}</p>
+  {/if}
+
+  <div class="reference-input-row">
+    <input
+      type="text"
+      aria-label={t(M['content.content_references_panel.add_reference_by_id_or_url'])}
+      placeholder={t(M['content.content_references_panel.reference_id_or_url_placeholder'])}
+      bind:value={newReferenceId}
+      onkeydown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          addReference();
+        }
+      }}
+    />
+    <button type="button" onclick={addReference}>Add</button>
+  </div>
+
+  {#if children}
+    <div class="reference-extras">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .content-references-panel {
+    display: grid;
+    gap: 0.875rem;
+    padding: 1rem;
+    border: 1px dashed color-mix(in srgb, var(--smrt-color-outline) 45%, transparent);
+    border-radius: 0.5rem;
+  }
+
+  .empty-state {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-style: italic;
+  }
+
+  .reference-list {
+    display: grid;
+    gap: 0.65rem;
+  }
+
+  .reference-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 28%, transparent);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-low);
+  }
+
+  .reference-copy {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+  }
+
+  .reference-copy strong,
+  .reference-copy a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .reference-copy strong {
+    color: var(--smrt-color-on-surface);
+    font-size: var(--smrt-typography-title-small-size, 0.875rem);
+  }
+
+  .reference-copy a {
+    color: var(--smrt-color-primary);
+    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
+    text-decoration: none;
+  }
+
+  .reference-input-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.5rem;
+  }
+
+  .reference-extras {
+    display: grid;
+    gap: 0.65rem;
+  }
+
+  input,
+  button {
+    min-height: 2.5rem;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    padding: 0.55rem 0.875rem;
+  }
+
+  button {
+    background: var(--smrt-color-surface-container);
+    cursor: pointer;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  button:hover {
+    background: var(--smrt-color-surface-container-high);
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ContentEditorReference } from '../content-editor-form';
+export interface Props {
+    referenceIds?: string[];
+    references?: ContentEditorReference[];
+    onReferenceIdsChange?: (referenceIds: string[]) => void;
+    /**
+     * Optional snippet rendered inside the panel beneath the references list
+     * and the "add reference by ID" input. Host applications use this to inject
+     * a richer picker (browsing a tenant asset pool, searching an external
+     * archive, etc.) without forking the component. The snippet is responsible
+     * for calling `onReferenceIdsChange` (or otherwise mutating the parent
+     * state) when the user selects an entry.
+     */
+    children?: Snippet;
+}
+declare const ContentReferencesPanel: import("svelte").Component<Props, {}, "">;
+type ContentReferencesPanel = ReturnType<typeof ContentReferencesPanel>;
+export default ContentReferencesPanel;
+//# sourceMappingURL=ContentReferencesPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentReferencesPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReferencesPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsHD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentReviewStatusTray.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+export type ContentReviewStatusTone =
+  | 'neutral'
+  | 'danger'
+  | 'warning'
+  | 'success';
+export type ContentReviewStatusIcon = 'content' | 'facts' | 'safety' | 'custom';
+
+export interface ContentReviewStatusTrayItem {
+  id: string;
+  icon: ContentReviewStatusIcon;
+  label: string;
+  tone: ContentReviewStatusTone;
+  status: string;
+}
+
+export interface Props {
+  items?: ContentReviewStatusTrayItem[];
+  activeId?: string | null;
+  open?: boolean;
+  label?: string;
+  onSelect?: (item: ContentReviewStatusTrayItem) => void;
+}
+
+let {
+  items = [],
+  activeId = null,
+  open = false,
+  label = 'Review status',
+  onSelect = undefined,
+}: Props = $props();
+</script>
+
+{#snippet trayIcon(icon: ContentReviewStatusIcon)}
+  {#if icon === 'content'}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 11l2 2 4-4"></path>
+      <path d="M8 5h8"></path>
+      <path d="M8 19h8"></path>
+      <path d="M5 7h14"></path>
+      <path d="M5 17h14"></path>
+    </svg>
+  {:else if icon === 'facts'}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path>
+      <path d="M14 2v6h6"></path>
+      <path d="M9 15h6"></path>
+      <path d="M9 11h2"></path>
+    </svg>
+  {:else if icon === 'safety'}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path>
+      <path d="m9 12 2 2 4-4"></path>
+    </svg>
+  {:else}
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="m12 3 1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8Z"></path>
+      <path d="m5 15 .9 2.1L8 18l-2.1.9L5 21l-.9-2.1L2 18l2.1-.9Z"></path>
+      <path d="m19 14 .9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9Z"></path>
+    </svg>
+  {/if}
+{/snippet}
+
+{#if items.length > 0}
+  <div class="content-review-status-tray" role="group" aria-label={label}>
+    {#each items as item (item.id)}
+      <button
+        type="button"
+        aria-pressed={activeId === item.id && open}
+        class={`tray-button tray-button--${item.tone}`}
+        class:active={activeId === item.id && open}
+        title={`${item.label}: ${item.status}`}
+        onclick={() => onSelect?.(item)}
+      >
+        {@render trayIcon(item.icon)}
+        <span class="tray-button__indicator" aria-hidden="true"></span>
+        <span class="sr-only">{item.label}: {item.status}</span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .content-review-status-tray {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-height: 2.5rem;
+  }
+
+  .tray-button {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 0.55rem;
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .tray-button:hover,
+  .tray-button.active {
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .tray-button svg {
+    width: 1.15rem;
+    height: 1.15rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.9;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .tray-button__indicator {
+    position: absolute;
+    right: 0.35rem;
+    bottom: 0.35rem;
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-outline);
+  }
+
+  .tray-button--danger .tray-button__indicator {
+    background: var(--smrt-color-error);
+  }
+
+  .tray-button--warning .tray-button__indicator {
+    background: var(--smrt-color-tertiary, #d97706);
+  }
+
+  .tray-button--success .tray-button__indicator {
+    background: var(--smrt-color-primary);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+export type ContentReviewStatusTone = 'neutral' | 'danger' | 'warning' | 'success';
+export type ContentReviewStatusIcon = 'content' | 'facts' | 'safety' | 'custom';
+export interface ContentReviewStatusTrayItem {
+    id: string;
+    icon: ContentReviewStatusIcon;
+    label: string;
+    tone: ContentReviewStatusTone;
+    status: string;
+}
+export interface Props {
+    items?: ContentReviewStatusTrayItem[];
+    activeId?: string | null;
+    open?: boolean;
+    label?: string;
+    onSelect?: (item: ContentReviewStatusTrayItem) => void;
+}
+declare const ContentReviewStatusTray: import("svelte").Component<Props, {}, "">;
+type ContentReviewStatusTray = ReturnType<typeof ContentReviewStatusTray>;
+export default ContentReviewStatusTray;
+//# sourceMappingURL=ContentReviewStatusTray.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentReviewStatusTray.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReviewStatusTray.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,uBAAuB,GAC/B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;CACxD;AA8DD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/ContentStatusFields.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.editor.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  data: Record<string, any>;
+  onChange?: (change: Record<string, unknown>) => void;
+}
+
+let { data, onChange = undefined }: Props = $props();
+
+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>
+
+<style>
+  .content-status-fields {
+    display: flex;
+    align-items: end;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  label {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 8.5rem;
+    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);
+  }
+
+  select,
+  input {
+    min-height: 2.5rem;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    padding: 0.55rem 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+export interface Props {
+    data: Record<string, any>;
+    onChange?: (change: Record<string, unknown>) => void;
+}
+declare const ContentStatusFields: import("svelte").Component<Props, {}, "">;
+type ContentStatusFields = ReturnType<typeof ContentStatusFields>;
+export default ContentStatusFields;
+//# sourceMappingURL=ContentStatusFields.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAoDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}