@happyvertical/smrt-svelte 0.37.9 → 0.37.11

package/dist/components/workspace/admin-shell/ActivityItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../../i18n/strings.workspace.js';
+import type { ShellActivity } from './types.js';
+
+interface Props {
+  activity: ShellActivity;
+}
+
+let { activity }: Props = $props();
+const { t } = useI18n();
+</script>
+
+<article class="smrt-activity-item" data-status={activity.status}>
+  <div class="smrt-activity-item__main">
+    <strong>{activity.label}</strong>
+    <span>{activity.status}</span>
+    {#if activity.message}
+      <p>{activity.message}</p>
+    {/if}
+    {#if typeof activity.progress === 'number'}
+      <progress max="100" value={activity.progress}>
+        {Math.round(activity.progress)}%
+      </progress>
+    {/if}
+  </div>
+  <div class="smrt-activity-item__actions">
+    {#if activity.detailHref}
+      <Button variant="ghost" size="sm" href={activity.detailHref}>
+        {t(M['ui.activity_item.view'])}
+      </Button>
+    {/if}
+    {#if activity.cancel && (activity.status === 'queued' || activity.status === 'running')}
+      <Button variant="ghost" size="sm" onclick={() => activity.cancel?.()}>
+        {t(M['ui.activity_item.cancel'])}
+      </Button>
+    {/if}
+  </div>
+</article>
+
+<style>
+  .smrt-activity-item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3) 0;
+    border-block-end: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .smrt-activity-item__main {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    min-width: 0;
+  }
+
+  .smrt-activity-item strong,
+  .smrt-activity-item span,
+  .smrt-activity-item p {
+    overflow-wrap: anywhere;
+  }
+
+  .smrt-activity-item span {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-small-size);
+    text-transform: uppercase;
+  }
+
+  .smrt-activity-item p {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-activity-item progress {
+    width: min(16rem, 100%);
+  }
+
+  .smrt-activity-item__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+    justify-content: flex-end;
+  }
+</style>

package/dist/components/workspace/admin-shell/ActivityItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ShellActivity } from './types.js';
+interface Props {
+    activity: ShellActivity;
+}
+declare const ActivityItem: import("svelte").Component<Props, {}, "">;
+type ActivityItem = ReturnType<typeof ActivityItem>;
+export default ActivityItem;
+//# sourceMappingURL=ActivityItem.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ActivityItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ActivityItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;CACzB;AA2CD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/workspace/admin-shell/ActivityList.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.workspace.js';
+import ActivityItem from './ActivityItem.svelte';
+import { useAdminShell } from './context.js';
+import type { ShellActivityFilter } from './types.js';
+
+interface Props {
+  filter?: ShellActivityFilter;
+  hideWhenEmpty?: boolean;
+  emptyLabel?: string;
+}
+
+let { filter = {}, hideWhenEmpty = false, emptyLabel }: Props = $props();
+const { t } = useI18n();
+const shell = useAdminShell();
+const activities = $derived(shell.listActivities(filter));
+</script>
+
+{#if activities.length > 0}
+  <div class="smrt-activity-list">
+    {#each activities as activity (activity.id)}
+      <ActivityItem {activity} />
+    {/each}
+  </div>
+{:else if !hideWhenEmpty}
+  <p class="smrt-activity-list__empty">
+    {emptyLabel ?? t(M['ui.activity_list.empty'])}
+  </p>
+{/if}
+
+<style>
+  .smrt-activity-list {
+    display: grid;
+  }
+
+  .smrt-activity-list__empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

package/dist/components/workspace/admin-shell/ActivityList.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ShellActivityFilter } from './types.js';
+interface Props {
+    filter?: ShellActivityFilter;
+    hideWhenEmpty?: boolean;
+    emptyLabel?: string;
+}
+declare const ActivityList: import("svelte").Component<Props, {}, "">;
+type ActivityList = ReturnType<typeof ActivityList>;
+export default ActivityList;
+//# sourceMappingURL=ActivityList.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ActivityList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ActivityList.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA+BD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/workspace/admin-shell/ActivityToasts.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { onDestroy, onMount } from 'svelte';
+import { M } from '../../../i18n/strings.workspace.js';
+import { useAdminShell } from './context.js';
+import type { ShellActivity, ShellActivityEvent } from './types.js';
+
+interface Toast {
+  id: string;
+  activity: ShellActivity;
+  event: ShellActivityEvent['type'];
+}
+
+interface Props {
+  max?: number;
+  /**
+   * Which lifecycle events raise a toast. Defaults to lifecycle-only:
+   * a newly-created activity ("started") or a status transition
+   * (completed / failed / canceled). Progress-only updates keep the same
+   * status and carry a `previous` snapshot, so they never toast — otherwise
+   * a running job spawns one toast per progress tick.
+   */
+  notify?: (event: ShellActivityEvent) => boolean;
+}
+
+let { max = 4, notify = defaultShouldNotify }: Props = $props();
+const { t } = useI18n();
+const shell = useAdminShell();
+let toasts = $state<Toast[]>([]);
+let unwatch: (() => void) | null = null;
+
+function defaultShouldNotify(event: ShellActivityEvent): boolean {
+  if (event.type === 'transition') return true;
+  return event.type === 'upsert' && !event.previous;
+}
+
+function pushToast(event: ShellActivityEvent): void {
+  if (event.type === 'remove' || !notify(event)) return;
+  const toast = {
+    id: `${event.activity.id}:${event.activity.updatedAt ?? Date.now()}`,
+    activity: event.activity,
+    event: event.type,
+  };
+  toasts = [toast, ...toasts].slice(0, max);
+}
+
+function dismiss(id: string): void {
+  toasts = toasts.filter((toast) => toast.id !== id);
+}
+
+onMount(() => {
+  unwatch = shell.watchActivities(pushToast);
+});
+
+onDestroy(() => {
+  unwatch?.();
+});
+</script>
+
+{#if toasts.length > 0}
+  <div class="smrt-activity-toasts" aria-live="polite">
+    {#each toasts as toast (toast.id)}
+      <article class="smrt-activity-toast" data-status={toast.activity.status}>
+        <div>
+          <strong>{toast.activity.label}</strong>
+          <span>{toast.activity.status}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-label={t(M['ui.activity_toasts.dismiss'])}
+          onclick={() => dismiss(toast.id)}
+        >
+          {t(M['ui.activity_toasts.dismiss_action'])}
+        </Button>
+      </article>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .smrt-activity-toasts {
+    position: fixed;
+    inset-block-start: var(--smrt-spacing-4);
+    inset-inline-end: var(--smrt-spacing-4);
+    z-index: var(--smrt-z-index-toast, 1500);
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    inline-size: min(24rem, calc(100vw - var(--smrt-spacing-8)));
+  }
+
+  .smrt-activity-toast {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+    padding: var(--smrt-spacing-3);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .smrt-activity-toast div {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    min-width: 0;
+  }
+
+  .smrt-activity-toast strong,
+  .smrt-activity-toast span {
+    overflow-wrap: anywhere;
+  }
+
+  .smrt-activity-toast span {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-small-size);
+    text-transform: uppercase;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .smrt-activity-toast {
+      animation: smrt-activity-toast-in var(--smrt-duration-short3)
+        var(--smrt-easing-emphasized-decelerate);
+    }
+  }
+
+  @keyframes smrt-activity-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--smrt-spacing-3)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/dist/components/workspace/admin-shell/ActivityToasts.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ShellActivityEvent } from './types.js';
+interface Props {
+    max?: number;
+    /**
+     * Which lifecycle events raise a toast. Defaults to lifecycle-only:
+     * a newly-created activity ("started") or a status transition
+     * (completed / failed / canceled). Progress-only updates keep the same
+     * status and carry a `previous` snapshot, so they never toast — otherwise
+     * a running job spawns one toast per progress tick.
+     */
+    notify?: (event: ShellActivityEvent) => boolean;
+}
+declare const ActivityToasts: import("svelte").Component<Props, {}, "">;
+type ActivityToasts = ReturnType<typeof ActivityToasts>;
+export default ActivityToasts;
+//# sourceMappingURL=ActivityToasts.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ActivityToasts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityToasts.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ActivityToasts.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAiB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AASpE,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,OAAO,CAAC;CACjD;AAiED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}