@happyvertical/smrt-svelte

Svelte 5 component library for the SMRT framework. Provides UI components, browser AI integration (STT/TTS/LLM with warm cache), a theme system, permission-aware rendering, and module UI registry for agent admin panels.

Installation

pnpm add @happyvertical/smrt-svelte

Usage

Provider Setup

<script>
  import { Provider } from '@happyvertical/smrt-svelte';
  let { children } = $props();
</script>

<Provider user={data.user} permissions={data.permissions}
  ai={{ preload: 'idle', stt: { type: 'whisper-cpp' } }}>
  {@render children()}
</Provider>

Form Components

<script>
  import { TextInput, Select, MoneyInput, DateTimeInput, Toggle } from '@happyvertical/smrt-svelte/forms';
</script>

<TextInput label="Name" bind:value={name} />
<MoneyInput label="Price" bind:value={price} currency="USD" />
<DateTimeInput label="Launch Date" bind:value={date} />
<Toggle label="Active" bind:checked={active} />

UI Components

<script>
  import { Button, Card, Badge, Pagination } from '@happyvertical/smrt-svelte/ui';
  import { DataTable } from '@happyvertical/smrt-svelte';
</script>

<Card>
  <DataTable columns={cols} rows={data} />
  <Pagination total={100} page={1} perPage={20} />
</Card>

Permission-Aware Rendering

<script>
  import { PermissionCheck, permission } from '@happyvertical/smrt-svelte';
</script>

<PermissionCheck requires="admin:write">
  <button>Admin Action</button>
</PermissionCheck>

<!-- Or as a Svelte action -->
<div use:permission={{ slug: 'admin:read', permissions: userPermissions }}>
  Protected content
</div>

Theme System

<script>
  import { ThemeProvider } from '@happyvertical/smrt-svelte/themes';
</script>

<ThemeProvider preset="glass" colorScheme="system">
  {@render children()}
</ThemeProvider>

Workspace Navigation

<script lang="ts">
  import { manifest } from '$lib/smrt-manifest';
  import {
    RoleShell,
    navTreeFromManifest,
  } from '@happyvertical/smrt-svelte/workspace';

  let { children } = $props();

  const sections = navTreeFromManifest(manifest, {
    sectionHints: {
      '@happyvertical/smrt-content': 'Content',
      '@happyvertical/smrt-profiles': 'Profiles',
    },
  });

  const roles = [{ id: 'admin', label: 'Admin', sections }];
</script>

<RoleShell {roles} currentRole="admin" currentPath="/admin/articles">
  {@render children?.()}
</RoleShell>

Filter the same manifest by role permissions when only a subset of resources should be visible:

import { navTreeFromManifest } from '@happyvertical/smrt-svelte/workspace';

const editorSections = navTreeFromManifest(manifest, {
  permittedResources: [
    '@happyvertical/smrt-content:Article',
    '@happyvertical/smrt-content:Document',
  ],
  sectionHints: {
    '@happyvertical/smrt-content': 'Content',
  },
});

Exports

Entry Points

| Import Path | Contents | |-------------|----------| | @happyvertical/smrt-svelte | Provider, DataTable, permission utilities, hooks, state, components | | @happyvertical/smrt-svelte/calendar | Calendar and DayView | | @happyvertical/smrt-svelte/forms | Form inputs (TextInput, Select, MoneyInput, etc.) | | @happyvertical/smrt-svelte/layout | Layout (Container, Grid, Header, Footer, Masthead, etc.) | | @happyvertical/smrt-svelte/ui | UI primitives (Button, Card, Badge, Pagination) | | @happyvertical/smrt-svelte/themes | ThemeProvider, presets (material/glass/studio), CSS generation | | @happyvertical/smrt-svelte/registry | ModuleUIRegistry for agent admin panels | | @happyvertical/smrt-svelte/workspace | WorkspaceShell, RoleShell, NavTree, Breadcrumbs, ToolsDock, and manifest nav helpers | | @happyvertical/smrt-svelte/browser-ai | Browser AI client (STT/TTS/LLM adapters, capability detection) | | @happyvertical/smrt-svelte/browser-ai/svelte | Svelte AI components (VoiceInput, CapabilityGate, etc.) | | @happyvertical/smrt-svelte/styles/tokens.css | Design tokens CSS |

Components by Category

Forms: AddressInput, CheckboxInput, DateRangeInput, DateTimeInput, FileUpload, Form, FormGroup, FormMicButton, Input, MeasurementInput, MoneyInput, NumberInput, PhoneInput, SearchInput, Select, SelectInput, Textarea, TextareaInput, TextInput, Toggle

Layout: Container, EmptyState, Footer, Grid, Header, Masthead, PageHeader, SummaryCard

UI: Badge, Button, Card, Pagination

Display: ConfidenceBadge, CurrencyDisplay, DateDisplay, Icon, StatusBadge

Feedback: ConfirmDialog, LoadingOverlay, Modal, ProgressBar

Navigation: FilterChips, Tabs

Data: DataTable

Permissions: PermissionCheck, RoleBadge, RoleSelector

Other: Calendar, DayView, MembershipCard, MembershipList, ModulePanel

The agent-admin shells (AgentAdminPanel, AgentAdminTabs, AgentSettingsShell) moved to @happyvertical/smrt-agents/svelte (#1589).

Browser AI: AILoadingOverlay, CapabilityGate, DownloadProgress, STTTest, VoiceInput

Hooks

useAuth, useSocket, useAppState, useSTT, useTTS, useLLM, useTheme

Functions & Actions

hasPermission, hasAnyPermission, hasAllPermissions, permission (action), ripple (action)

Cache API

getCachedSTT, getCachedTTS, getCachedLLM, getCacheStats, clearAllCaches

Dependencies

• @happyvertical/smrt-types -- shared type definitions
• Peer: svelte >=5.18.2, @happyvertical/smrt-jobs, @happyvertical/smrt-profiles, @happyvertical/smrt-users (all optional)