@happyvertical/smrt-content 0.30.0

package/dist/svelte/components/ContentTitleField.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  required?: boolean;
+  onChange?: (value: string) => void;
+}
+
+let {
+  value = '',
+  placeholder = 'Title',
+  required = false,
+  onChange = undefined,
+}: Props = $props();
+</script>
+
+<input
+  class="content-title-field"
+  type="text"
+  {placeholder}
+  {required}
+  value={value || ''}
+  oninput={(event) => onChange?.(event.currentTarget.value)}
+/>
+
+<style>
+  .content-title-field {
+    width: 100%;
+    box-sizing: border-box;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
+    font-weight: var(--smrt-typography-weight-bold, 720);
+    line-height: 1.12;
+    letter-spacing: 0;
+    padding: 0;
+  }
+
+  .content-title-field::placeholder {
+    color: color-mix(in srgb, var(--smrt-color-on-surface-variant) 70%, transparent);
+  }
+
+  .content-title-field:focus {
+    outline: none;
+  }
+
+  .content-title-field:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 0.35rem;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+export interface Props {
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (value: string) => void;
+}
+declare const ContentTitleField: import("svelte").Component<Props, {}, "">;
+type ContentTitleField = ReturnType<typeof ContentTitleField>;
+export default ContentTitleField;
+//# sourceMappingURL=ContentTitleField.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkBD,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

@@ -0,0 +1,322 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { ContentTransparencyData } from '../../mock-smrt-client';
+import { M } from '../i18n.tools.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  transparency?: ContentTransparencyData | null;
+  title?: string;
+  emptyCopy?: string;
+}
+
+let {
+  transparency = null,
+  title = 'Transparency report',
+  emptyCopy = 'No transparency snapshot is available.',
+}: Props = $props();
+
+function formatTimestamp(value: string | null | undefined) {
+  if (!value) {
+    return 'Unknown';
+  }
+
+  return new Date(value).toLocaleString();
+}
+
+function getReferenceLabel(reference: {
+  title?: string | null;
+  url?: string | null;
+}) {
+  return reference.title || reference.url || 'Untitled reference';
+}
+
+function getFactLabel(fact: {
+  textRefined?: string | null;
+  textRaw?: string | null;
+  id?: string | null;
+}) {
+  return fact.textRefined || fact.textRaw || fact.id || 'Untitled fact';
+}
+</script>
+
+<section class="transparency-report">
+  <div class="transparency-report__header">
+    <div>
+      <h3>{title}</h3>
+      {#if transparency}
+        <p>
+          {transparency.snapshotKind} snapshot
+          {#if transparency.publicationVersion?.version !== null && transparency.publicationVersion?.version !== undefined}
+            · v{transparency.publicationVersion.version}
+          {/if}
+          · updated {formatTimestamp(transparency.generatedAt)}
+        </p>
+      {/if}
+    </div>
+    {#if transparency}
+      <div class="transparency-report__badges">
+        <span class="badge">{transparency.factsUsed.length} {t(M['content.transparency_report.facts_used'])}</span>
+        <span class="badge">{transparency.references.length} {t(M['content.transparency_report.references'])}</span>
+        <span class="badge">{transparency.corrections.length} {t(M['content.transparency_report.corrections'])}</span>
+      </div>
+    {/if}
+  </div>
+
+  {#if !transparency}
+    <p class="empty-copy">{emptyCopy}</p>
+  {:else}
+    <div class="transparency-grid">
+      <article class="panel">
+        <h4>Generation</h4>
+        <p>
+          {#if transparency.generation.aiAssisted}
+            {t(M['content.transparency_report.ai_assisted'])}
+          {:else}
+            {t(M['content.transparency_report.authored_without_disclosure'])}
+          {/if}
+          {#if transparency.generation.model}
+            · {transparency.generation.model}
+          {/if}
+        </p>
+        {#if transparency.generation.publicPrompt}
+          <pre class="prompt">{transparency.generation.publicPrompt}</pre>
+        {:else}
+          <p class="empty-copy">{t(M['content.transparency_report.no_public_prompt_attached'])}</p>
+        {/if}
+      </article>
+
+      <article class="panel">
+        <h4>{t(M['content.transparency_report.facts_used_heading'])}</h4>
+        {#if transparency.factsUsed.length === 0}
+          <p class="empty-copy">{t(M['content.transparency_report.no_explicit_facts'])}</p>
+        {:else}
+          <div class="item-list">
+            {#each transparency.factsUsed as fact (fact.id ?? fact.textRefined ?? fact.textRaw)}
+              <div class="item-card">
+                <strong>{getFactLabel(fact)}</strong>
+                <span>
+                  {fact.relationship || 'linked'}
+                  {#if fact.sources && fact.sources.length > 0}
+                    · {fact.sources.length} source(s)
+                  {/if}
+                </span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </article>
+    </div>
+
+    <article class="panel">
+      <h4>{t(M['content.transparency_report.source_material'])}</h4>
+      {#if transparency.references.length === 0}
+        <p class="empty-copy">{t(M['content.transparency_report.no_public_references'])}</p>
+      {:else}
+        <div class="item-list">
+          {#each transparency.references as reference (reference.id ?? reference.url ?? reference.title)}
+            <div class="item-card">
+              <div class="item-card__header">
+                <strong>{getReferenceLabel(reference)}</strong>
+                <span>{reference.usedFactIds.length} used · {reference.extractedFacts.length} extracted</span>
+              </div>
+              {#if reference.url}
+                <a href={reference.url} target="_blank" rel="noreferrer">{reference.url}</a>
+              {/if}
+              {#if reference.extractedFacts.length > 0}
+                <div class="pill-list">
+                  {#each reference.extractedFacts as fact (fact.id ?? fact.textRefined ?? fact.textRaw)}
+                    <span class:used={fact.usedInArticle}>{getFactLabel(fact)}</span>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </article>
+
+    {#if transparency.otherExtractedFacts.length > 0}
+      <article class="panel">
+        <h4>{t(M['content.transparency_report.other_extracted_facts'])}</h4>
+        <div class="pill-list">
+          {#each transparency.otherExtractedFacts as fact (fact.id ?? fact.textRefined ?? fact.textRaw)}
+            <span>{getFactLabel(fact)}</span>
+          {/each}
+        </div>
+      </article>
+    {/if}
+
+    <div class="transparency-grid">
+      <article class="panel">
+        <h4>Reviews</h4>
+        {#if transparency.reviews.length === 0}
+          <p class="empty-copy">{t(M['content.transparency_report.no_reviews_captured'])}</p>
+        {:else}
+          <div class="item-list">
+            {#each transparency.reviews as review (`${review.id ?? review.policyKey}-${review.createdAt ?? ''}`)}
+              <div class="item-card">
+                <div class="item-card__header">
+                  <strong>{review.policyKey || review.kind || 'review'}</strong>
+                  <span>{review.status || 'pending'}</span>
+                </div>
+                <p>{review.summary || 'No summary provided.'}</p>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </article>
+
+      <article class="panel">
+        <h4>Corrections</h4>
+        {#if transparency.corrections.length === 0}
+          <p class="empty-copy">{t(M['content.transparency_report.no_public_corrections'])}</p>
+        {:else}
+          <div class="item-list">
+            {#each transparency.corrections as correction (`${correction.id ?? correction.summary}-${correction.publishedAt ?? ''}`)}
+              <div class="item-card">
+                <div class="item-card__header">
+                  <strong>{correction.summary || 'Correction'}</strong>
+                  <span>{formatTimestamp(correction.publishedAt)}</span>
+                </div>
+                {#if correction.publicNote}
+                  <p>{correction.publicNote}</p>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </article>
+    </div>
+
+    <article class="panel">
+      <h4>{t(M['content.transparency_report.version_history'])}</h4>
+      {#if transparency.versionHistory.length === 0}
+        <p class="empty-copy">{t(M['content.transparency_report.no_version_history'])}</p>
+      {:else}
+        <div class="item-list">
+          {#each transparency.versionHistory as version (`${version.id ?? version.version}-${version.createdAt ?? ''}`)}
+            <div class="item-card">
+              <div class="item-card__header">
+                <strong>v{version.version ?? '?'}</strong>
+                <span>{version.kind || 'manual'} · {formatTimestamp(version.createdAt)}</span>
+              </div>
+              <p>{version.summary || 'No summary provided.'}</p>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </article>
+  {/if}
+</section>
+
+<style>
+  .transparency-report {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .transparency-report__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .transparency-report__header h3,
+  .panel h4 {
+    margin: 0;
+  }
+
+  .transparency-report__header p,
+  .panel p {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .transparency-report__badges,
+  .pill-list {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .badge,
+  .pill-list span {
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+    padding: 0.25rem 0.65rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.8rem);
+  }
+
+  .pill-list span.used {
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-primary) 16%,
+      var(--smrt-color-surface-container-high)
+    );
+  }
+
+  .transparency-grid {
+    display: grid;
+    gap: 1rem;
+  }
+
+  @media (min-width: 900px) {
+    .transparency-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  .panel {
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 1rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .item-card {
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: 0.85rem;
+    background: var(--smrt-color-surface-container-low);
+    padding: 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .item-card__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .prompt {
+    margin: 0;
+    white-space: pre-wrap;
+    font-family: inherit;
+    background: var(--smrt-color-surface-container-high);
+    border-radius: 0.85rem;
+    padding: 0.85rem;
+    color: var(--smrt-color-on-surface);
+  }
+
+  .empty-copy {
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { ContentTransparencyData } from '../../mock-smrt-client';
+export interface Props {
+    transparency?: ContentTransparencyData | null;
+    title?: string;
+    emptyCopy?: string;
+}
+declare const ContentTransparencyReport: import("svelte").Component<Props, {}, "">;
+type ContentTransparencyReport = ReturnType<typeof ContentTransparencyReport>;
+export default ContentTransparencyReport;
+//# sourceMappingURL=ContentTransparencyReport.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTransparencyReport.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTransparencyReport.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiND,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}