@happyvertical/smrt-svelte 0.30.0

package/dist/browser-ai/ui.js

@@ -0,0 +1,67 @@
+/**
+ * Browser AI Module UI Slot Declarations
+ *
+ * This file defines the UI extension points for the browser-ai module.
+ * UI components are implemented in the ./svelte subpath.
+ */
+/**
+ * Browser AI module UI slots
+ */
+export const BROWSER_AI_UI_SLOTS = {
+    'ai-loading-overlay': {
+        id: 'ai-loading-overlay',
+        label: 'AI Loading Overlay',
+        description: 'Loading overlay for AI operations',
+        icon: 'loader',
+        category: 'display',
+        order: 1,
+        propsInterface: 'AILoadingOverlayProps',
+    },
+    'capability-gate': {
+        id: 'capability-gate',
+        label: 'Capability Gate',
+        description: 'Conditionally render content based on AI capabilities',
+        icon: 'shield',
+        category: 'action',
+        order: 2,
+        propsInterface: 'CapabilityGateProps',
+    },
+    'download-progress': {
+        id: 'download-progress',
+        label: 'Download Progress',
+        description: 'Progress indicator for model downloads',
+        icon: 'download',
+        category: 'display',
+        order: 3,
+        propsInterface: 'DownloadProgressProps',
+    },
+    'stt-test': {
+        id: 'stt-test',
+        label: 'STT Test',
+        description: 'Speech-to-text testing component',
+        icon: 'mic',
+        category: 'form',
+        order: 4,
+        propsInterface: 'STTTestProps',
+    },
+    'voice-input': {
+        id: 'voice-input',
+        label: 'Voice Input',
+        description: 'Voice input component with STT',
+        icon: 'mic',
+        category: 'form',
+        order: 5,
+        propsInterface: 'VoiceInputProps',
+    },
+};
+/**
+ * Browser AI module metadata
+ */
+export const BROWSER_AI_MODULE_META = {
+    name: '@happyvertical/smrt-svelte/browser-ai',
+    displayName: 'Browser AI',
+    description: 'Browser AI capabilities: STT, TTS, LLM with adapter pattern',
+    uiSlots: BROWSER_AI_UI_SLOTS,
+    models: [],
+    collections: [],
+};

package/dist/components/admin/AgentAdminPanel.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+import type {
+  AdminPanelBaseProps,
+  AgentUIComponentRegistry,
+  AgentUISlot,
+} from '@happyvertical/smrt-agents/ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.workspace.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** The registry to look up components from */
+  registry: AgentUIComponentRegistry;
+  /** The agent class name (e.g., 'Praeco') */
+  agentClass: string;
+  /** The slot ID to render */
+  slotId: string;
+  /** The slot definition */
+  slot: AgentUISlot;
+  /** The current configuration for this slot */
+  config: unknown;
+  /** Callback when config is saved */
+  onSave?: (config: unknown) => Promise<void>;
+  /** Whether the panel is read-only */
+  readonly?: boolean;
+  /** File-based config defaults */
+  fileConfig?: unknown;
+  /** Database-persisted config overrides */
+  dbConfig?: unknown;
+}
+
+const {
+  registry,
+  agentClass,
+  slotId,
+  slot,
+  config,
+  onSave,
+  readonly = false,
+  fileConfig,
+  dbConfig,
+}: Props = $props();
+
+const Component = $derived(registry.get(agentClass, slotId));
+
+async function handleSave(newConfig: unknown) {
+  await onSave?.(newConfig);
+}
+</script>
+
+{#if Component}
+	<Component
+		{config}
+		onSave={handleSave}
+		{readonly}
+		{fileConfig}
+		{dbConfig}
+	/>
+{:else}
+	<div class="no-panel">
+		<div class="no-panel-icon">⚙️</div>
+		<p class="no-panel-message">
+			{t(M['ui.agent_admin_panel.no_panel_message'])} <code>{agentClass}.{slotId}</code>
+		</p>
+		<p class="no-panel-hint">
+			{t(M['ui.agent_admin_panel.no_panel_hint'])}
+		</p>
+	</div>
+{/if}
+
+<style>
+	.no-panel {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 3rem 2rem;
+		text-align: center;
+		background: var(--smrt-color-surface-container-low, #f8fafc);
+		border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
+		border-radius: var(--smrt-radius-medium, 8px);
+		min-height: 200px;
+	}
+
+	.no-panel-icon {
+		font-size: var(--smrt-typography-display-medium-size, 2.5rem);
+		margin-bottom: 1rem;
+		opacity: 0.5;
+	}
+
+	.no-panel-message {
+		margin: 0 0 0.5rem 0;
+		font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+	}
+
+	.no-panel-message code {
+		background: var(--smrt-color-surface-container-high, #e2e8f0);
+		padding: var(--smrt-spacing-1, 0.125rem) var(--smrt-spacing-2, 0.375rem);
+		border-radius: var(--smrt-radius-small, 4px);
+		font-family: var(--smrt-font-family-mono, 'SF Mono', Monaco, Consolas, monospace);
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+	}
+
+	.no-panel-hint {
+		margin: 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
+		color: var(--smrt-color-on-surface-variant, #94a3b8);
+	}
+</style>

package/dist/components/admin/AgentAdminPanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AgentUIComponentRegistry, AgentUISlot } from '@happyvertical/smrt-agents/ui';
+export interface Props {
+    /** The registry to look up components from */
+    registry: AgentUIComponentRegistry;
+    /** The agent class name (e.g., 'Praeco') */
+    agentClass: string;
+    /** The slot ID to render */
+    slotId: string;
+    /** The slot definition */
+    slot: AgentUISlot;
+    /** The current configuration for this slot */
+    config: unknown;
+    /** Callback when config is saved */
+    onSave?: (config: unknown) => Promise<void>;
+    /** Whether the panel is read-only */
+    readonly?: boolean;
+    /** File-based config defaults */
+    fileConfig?: unknown;
+    /** Database-persisted config overrides */
+    dbConfig?: unknown;
+}
+declare const AgentAdminPanel: import("svelte").Component<Props, {}, "">;
+type AgentAdminPanel = ReturnType<typeof AgentAdminPanel>;
+export default AgentAdminPanel;
+//# sourceMappingURL=AgentAdminPanel.svelte.d.ts.map

package/dist/components/admin/AgentAdminPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAdminPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AgentAdminPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,wBAAwB,EACxB,WAAW,EACZ,MAAM,+BAA+B,CAAC;AAKvC,MAAM,WAAW,KAAK;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,wBAAwB,CAAC;IACnC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/admin/AgentAdminTabs.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+import type {
+  AgentUIComponentRegistry,
+  AgentUISlots,
+} from '@happyvertical/smrt-agents/ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.workspace.js';
+import AgentAdminPanel from './AgentAdminPanel.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** The registry to look up components from */
+  registry: AgentUIComponentRegistry;
+  /** The agent class name (e.g., 'Praeco') */
+  agentClass: string;
+  /** UI slots declared by the agent */
+  slots: AgentUISlots;
+  /** Config data for each slot (keyed by slotId) */
+  configs: Record<string, unknown>;
+  /** Callback when a slot config is saved */
+  onSave?: (slotId: string, config: unknown) => Promise<void>;
+  /** Whether all panels are read-only */
+  readonly?: boolean;
+  /** File-based configs for each slot */
+  fileConfigs?: Record<string, unknown>;
+  /** Database configs for each slot */
+  dbConfigs?: Record<string, unknown>;
+}
+
+const {
+  registry,
+  agentClass,
+  slots,
+  configs,
+  onSave,
+  readonly = false,
+  fileConfigs = {},
+  dbConfigs = {},
+}: Props = $props();
+
+// Sort slots by order, then by label
+const sortedSlots = $derived(
+  Object.entries(slots).sort(([, a], [, b]) => {
+    const orderA = a.order ?? 99;
+    const orderB = b.order ?? 99;
+    if (orderA !== orderB) return orderA - orderB;
+    return a.label.localeCompare(b.label);
+  }),
+);
+
+let activeSlotId = $state<string | null>(null);
+let tablistEl: HTMLElement | null = $state(null);
+
+// Initialize active slot to first sorted slot
+$effect(() => {
+  if (activeSlotId === null && sortedSlots.length > 0) {
+    activeSlotId = sortedSlots[0][0];
+  }
+});
+
+function handleSlotClick(slotId: string) {
+  activeSlotId = slotId;
+}
+
+/**
+ * Handle keyboard navigation for accessibility
+ */
+function handleKeydown(event: KeyboardEvent, currentSlotId: string) {
+  const enabledSlots = sortedSlots;
+  const currentIndex = enabledSlots.findIndex(([id]) => id === currentSlotId);
+
+  if (currentIndex === -1) return;
+
+  let nextIndex: number | null = null;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      event.preventDefault();
+      nextIndex = (currentIndex + 1) % enabledSlots.length;
+      break;
+    case 'ArrowLeft':
+      event.preventDefault();
+      nextIndex =
+        (currentIndex - 1 + enabledSlots.length) % enabledSlots.length;
+      break;
+    case 'Home':
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      nextIndex = enabledSlots.length - 1;
+      break;
+  }
+
+  if (nextIndex !== null && nextIndex !== currentIndex) {
+    const [nextSlotId] = enabledSlots[nextIndex];
+    activeSlotId = nextSlotId;
+    // Focus the next tab after DOM update
+    requestAnimationFrame(() => {
+      const tabButton = tablistEl?.querySelector(
+        `[data-tab-id="${CSS.escape(nextSlotId)}"]`,
+      ) as HTMLElement;
+      tabButton?.focus();
+    });
+  }
+}
+
+async function handleSave(config: unknown) {
+  if (activeSlotId && onSave) {
+    await onSave(activeSlotId, config);
+  }
+}
+</script>
+
+<div class="agent-admin-tabs">
+	<div class="tabs-nav" role="tablist" aria-label={t(M['ui.agent_admin_tabs.tablist_label'])} bind:this={tablistEl}>
+		{#each sortedSlots as [slotId, slot]}
+			<button
+				class="tab-button"
+				class:active={activeSlotId === slotId}
+				role="tab"
+				aria-selected={activeSlotId === slotId}
+				aria-controls="panel-{slotId}"
+				id="tab-{slotId}"
+				data-tab-id={slotId}
+				tabindex={activeSlotId === slotId ? 0 : -1}
+				onclick={() => handleSlotClick(slotId)}
+				onkeydown={(e) => handleKeydown(e, slotId)}
+			>
+				{#if slot.icon}
+					<span class="tab-icon" aria-hidden="true">{slot.icon}</span>
+				{/if}
+				<span class="tab-label">{slot.label}</span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="tab-content">
+		{#if activeSlotId && slots[activeSlotId]}
+			{@const activeSlot = slots[activeSlotId]}
+			<div
+				id="panel-{activeSlotId}"
+				class="tab-panel"
+				role="tabpanel"
+				aria-labelledby="tab-{activeSlotId}"
+			>
+				{#if activeSlot.description}
+					<p class="slot-description">{activeSlot.description}</p>
+				{/if}
+
+				<AgentAdminPanel
+					{registry}
+					{agentClass}
+					slotId={activeSlotId}
+					slot={activeSlot}
+					config={configs[activeSlotId] ?? {}}
+					onSave={handleSave}
+					{readonly}
+					fileConfig={fileConfigs[activeSlotId]}
+					dbConfig={dbConfigs[activeSlotId]}
+				/>
+			</div>
+		{:else}
+			<div class="no-slots">
+				<p>{t(M['ui.agent_admin_tabs.no_slots'])}</p>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.agent-admin-tabs {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.tabs-nav {
+		display: flex;
+		gap: 0.25rem;
+		border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+		padding-bottom: 0;
+	}
+
+	.tab-button {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: none;
+		background: transparent;
+		color: var(--smrt-color-on-surface-variant, #64748b);
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-medium, 500);
+		cursor: pointer;
+		border-bottom: 2px solid transparent;
+		margin-bottom: -1px;
+		transition:
+			color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease),
+			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+	}
+
+	.tab-button:hover:not(:disabled) {
+		color: var(--smrt-color-on-surface, #334155);
+	}
+
+	.tab-button.active {
+		color: var(--smrt-color-primary, #3b82f6);
+		border-bottom-color: var(--smrt-color-primary, #3b82f6);
+	}
+
+	.tab-button:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+
+	.tab-button:focus-visible {
+		outline: 2px solid var(--smrt-color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.tab-icon {
+		font-size: var(--smrt-typography-title-medium-size, 1rem);
+		opacity: 0.8;
+	}
+
+	.tab-label {
+		white-space: nowrap;
+	}
+
+	.tab-content {
+		min-height: 300px;
+	}
+
+	.tab-panel {
+		animation: fadeIn var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-out);
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tab-panel {
+			animation: none;
+		}
+	}
+
+	.slot-description {
+		margin: 0 0 1rem 0;
+		padding: 0.75rem 1rem;
+		background: var(--smrt-color-primary-container, #f0f9ff);
+		border-left: 3px solid var(--smrt-color-primary, #3b82f6);
+		border-radius: 0 var(--smrt-radius-md, 8px) var(--smrt-radius-md, 8px) 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		color: var(--smrt-color-on-primary-container, #1e40af);
+	}
+
+	.no-slots {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		color: var(--smrt-color-on-surface-variant, #64748b);
+		font-size: var(--smrt-typography-body-medium-size, 0.9375rem);
+	}
+
+	.no-slots p {
+		margin: 0;
+	}
+</style>

package/dist/components/admin/AgentAdminTabs.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { AgentUIComponentRegistry, AgentUISlots } from '@happyvertical/smrt-agents/ui';
+export interface Props {
+    /** The registry to look up components from */
+    registry: AgentUIComponentRegistry;
+    /** The agent class name (e.g., 'Praeco') */
+    agentClass: string;
+    /** UI slots declared by the agent */
+    slots: AgentUISlots;
+    /** Config data for each slot (keyed by slotId) */
+    configs: Record<string, unknown>;
+    /** Callback when a slot config is saved */
+    onSave?: (slotId: string, config: unknown) => Promise<void>;
+    /** Whether all panels are read-only */
+    readonly?: boolean;
+    /** File-based configs for each slot */
+    fileConfigs?: Record<string, unknown>;
+    /** Database configs for each slot */
+    dbConfigs?: Record<string, unknown>;
+}
+declare const AgentAdminTabs: import("svelte").Component<Props, {}, "">;
+type AgentAdminTabs = ReturnType<typeof AgentAdminTabs>;
+export default AgentAdminTabs;
+//# sourceMappingURL=AgentAdminTabs.svelte.d.ts.map

package/dist/components/admin/AgentAdminTabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAdminTabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AgentAdminTabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,wBAAwB,EACxB,YAAY,EACb,MAAM,+BAA+B,CAAC;AAMvC,MAAM,WAAW,KAAK;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,wBAAwB,CAAC;IACnC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,YAAY,CAAC;IACpB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAkID,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}