@happyvertical/smrt-content 0.30.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentImageBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIjE,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+GD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentImageChooser.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import {
+  type ContentBodyFormat,
+  extractBodyImages,
+  resolveBodyFormat,
+} from '../../body-format';
+import { M } from '../i18n.editor.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  body: string;
+  format?: ContentBodyFormat | null;
+  selectedIndex?: number;
+  onSelect?: (index: number) => void;
+}
+
+let {
+  body,
+  format = null,
+  selectedIndex = 0,
+  onSelect = undefined,
+}: Props = $props();
+
+const resolvedFormat = $derived(resolveBodyFormat(format, body));
+const images = $derived(extractBodyImages(body || '', resolvedFormat));
+const normalizedIndex = $derived(
+  images.length === 0
+    ? -1
+    : Math.min(Math.max(selectedIndex, 0), images.length - 1),
+);
+const activeImage = $derived(
+  normalizedIndex >= 0 ? images[normalizedIndex] : null,
+);
+const hasMultiple = $derived(images.length > 1);
+
+function cycle(delta: number) {
+  if (!hasMultiple) {
+    return;
+  }
+
+  const nextIndex = (normalizedIndex + delta + images.length) % images.length;
+  onSelect?.(nextIndex);
+}
+</script>
+
+{#if activeImage}
+  <div class="content-image-chooser" aria-label={t(M['content.content_image_chooser.body_images'])}>
+    {#if hasMultiple}
+      <button
+        type="button"
+        class="chooser-arrow"
+        aria-label={t(M['content.content_image_chooser.previous_body_image'])}
+        onclick={() => cycle(-1)}
+      >
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+    {/if}
+
+    <button
+      type="button"
+      class="chooser-preview"
+      aria-label={t(M['content.content_image_chooser.focus_selected_body_image'])}
+      onclick={() => onSelect?.(normalizedIndex)}
+    >
+      <img src={activeImage.src} alt={activeImage.alt || 'Body image'} />
+      <span>{normalizedIndex + 1} / {images.length}</span>
+    </button>
+
+    {#if hasMultiple}
+      <button
+        type="button"
+        class="chooser-arrow"
+        aria-label={t(M['content.content_image_chooser.next_body_image'])}
+        onclick={() => cycle(1)}
+      >
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .content-image-chooser {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 2.75rem;
+  }
+
+  .chooser-arrow,
+  .chooser-preview {
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+    border-radius: var(--smrt-radius-full, 9999px);
+    cursor: pointer;
+  }
+
+  .chooser-arrow {
+    width: 2.25rem;
+    height: 2.25rem;
+    display: grid;
+    place-items: center;
+    padding: 0;
+  }
+
+  .chooser-arrow:disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+
+  .chooser-preview {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.25rem 0.65rem 0.25rem 0.3rem;
+    font-size: var(--smrt-typography-label-large-size, 0.82rem);
+    font-weight: var(--smrt-typography-weight-bold, 650);
+  }
+
+  .chooser-preview img {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    object-fit: cover;
+    background: var(--smrt-color-surface-container-high);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import { type ContentBodyFormat } from '../../body-format';
+export interface Props {
+    body: string;
+    format?: ContentBodyFormat | null;
+    selectedIndex?: number;
+    onSelect?: (index: number) => void;
+}
+declare const ContentImageChooser: import("svelte").Component<Props, {}, "">;
+type ContentImageChooser = ReturnType<typeof ContentImageChooser>;
+export default ContentImageChooser;
+//# sourceMappingURL=ContentImageChooser.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentImageChooser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageChooser.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}