@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/svelte/playground/CollectionsPreview.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+import CollectionList from '../../components/data/CollectionList.svelte';
+import CollectionToolbar from '../../components/data/CollectionToolbar.svelte';
+import Button from '../../components/ui/Button.svelte';
+
+interface Article {
+  id: string;
+  title: string;
+  description: string;
+  status: string;
+}
+const articles: Article[] = [
+  {
+    id: 'one',
+    title: 'Agent-ready form controls',
+    description: 'Stable identity and consent-aware updates.',
+    status: 'Published',
+  },
+  {
+    id: 'two',
+    title: 'A complete interaction layer',
+    description: 'Overlays, progress, menus, and disclosure.',
+    status: 'Draft',
+  },
+  {
+    id: 'three',
+    title: 'Collection patterns',
+    description: 'Lists and grids without application-specific markup.',
+    status: 'Review',
+  },
+];
+let search = $state('');
+let view = $state<'list' | 'grid' | 'table'>('list');
+let selected = $state<Set<string | number>>(new Set());
+const filtered = $derived(
+  articles.filter((article) =>
+    article.title.toLowerCase().includes(search.toLowerCase()),
+  ),
+);
+</script>
+
+<div class="workbench">
+  <header><p class="eyebrow">Reusable content pattern</p><h4>Collection list and toolbar</h4><p>Search, switch between list and grid views, select items, and use item actions across empty and loading states.</p></header>
+  <CollectionToolbar bind:search bind:view resultCount={filtered.length} selectedCount={selected.size} onsearchchange={(value) => search = value}>
+    {#snippet actions()}<Button size="sm">New article</Button>{/snippet}
+    {#snippet bulkActions()}<Button size="sm" variant="ghost" onclick={() => selected = new Set()}>Clear</Button>{/snippet}
+  </CollectionToolbar>
+  <CollectionList items={filtered} itemKey="id" title="title" description="description" layout={view === 'grid' ? 'grid' : 'list'} selectable bind:selected>
+    {#snippet actions({ item })}<span class="status">{item.status}</span><Button size="sm" variant="ghost">Open</Button>{/snippet}
+    {#snippet empty()}<div><strong>No matching content</strong><p>Try a broader search.</p></div>{/snippet}
+  </CollectionList>
+</div>
+
+<style>
+  .workbench { display: grid; gap: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
+  header { padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
+  .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
+  .status { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); font: var(--smrt-typography-label-small-font); }
+</style>

package/dist/svelte/playground/CollectionsPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const CollectionsPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type CollectionsPreview = ReturnType<typeof CollectionsPreview>;
+export default CollectionsPreview;
+//# sourceMappingURL=CollectionsPreview.svelte.d.ts.map

package/dist/svelte/playground/CollectionsPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/CollectionsPreview.svelte.ts"],"names":[],"mappings":"AAgEA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/playground/DataTablePreview.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+import DataTable from '../../components/data/DataTable.svelte';
+import type {
+  DataTableColumn,
+  SortState,
+} from '../../components/data/types.js';
+import Toggle from '../../components/forms/Toggle.svelte';
+import Badge from '../../components/ui/Badge.svelte';
+import Button from '../../components/ui/Button.svelte';
+
+interface WorkspaceUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+  lastSeen: string;
+}
+
+const users: WorkspaceUser[] = [
+  {
+    id: 'user-ada',
+    name: 'Ada Lovelace',
+    email: 'ada@example.com',
+    role: 'Admin',
+    status: 'Active',
+    lastSeen: '2 min ago',
+  },
+  {
+    id: 'user-grace',
+    name: 'Grace Hopper',
+    email: 'grace@example.com',
+    role: 'Editor',
+    status: 'Active',
+    lastSeen: '18 min ago',
+  },
+  {
+    id: 'user-alan',
+    name: 'Alan Turing',
+    email: 'alan@example.com',
+    role: 'Viewer',
+    status: 'Pending',
+    lastSeen: 'Yesterday',
+  },
+  {
+    id: 'user-margaret',
+    name: 'Margaret Hamilton',
+    email: 'margaret@example.com',
+    role: 'Editor',
+    status: 'Active',
+    lastSeen: 'Yesterday',
+  },
+  {
+    id: 'user-katherine',
+    name: 'Katherine Johnson',
+    email: 'katherine@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    lastSeen: '4 days ago',
+  },
+];
+
+const columns: DataTableColumn<WorkspaceUser>[] = [
+  { id: 'name', label: 'Name', sortable: true, minWidth: '10rem' },
+  { id: 'email', label: 'Email', sortable: true, minWidth: '13rem' },
+  { id: 'role', label: 'Role', sortable: true },
+  { id: 'status', label: 'Status', sortable: true },
+  { id: 'lastSeen', label: 'Last seen', sortable: true, align: 'right' },
+];
+
+let selected = $state<Set<string | number>>(new Set());
+let sort = $state<SortState>({ columnId: null, direction: null });
+let loading = $state(false);
+let dense = $state(false);
+
+function clearSelection() {
+  selected = new Set();
+}
+</script>
+
+<div class="workbench">
+  <div class="workbench__header">
+    <div>
+      <p class="eyebrow">Interactive data</p>
+      <h4>Workspace users</h4>
+      <p class="supporting">
+        Sort columns, select rows, and toggle the loading or dense states.
+      </p>
+    </div>
+    <div class="summary" aria-live="polite">
+      <Badge variant={selected.size > 0 ? 'primary' : 'default'}>
+        {selected.size} selected
+      </Badge>
+      <Button
+        variant="ghost"
+        size="sm"
+        disabled={selected.size === 0}
+        onclick={clearSelection}
+      >
+        Clear
+      </Button>
+    </div>
+  </div>
+
+  <div class="table-controls" aria-label="Table display controls">
+    <Toggle label="Dense rows" size="sm" bind:checked={dense} />
+    <Toggle label="Loading state" size="sm" bind:checked={loading} />
+    <span>
+      Sort: {sort.columnId ? `${sort.columnId} ${sort.direction}` : 'none'}
+    </span>
+  </div>
+
+  <div class="table-frame">
+    <DataTable
+      data={users}
+      {columns}
+      rowKey="id"
+      selectable
+      sortable
+      striped
+      hoverable
+      stickyHeader
+      {loading}
+      {dense}
+      bind:selected
+      bind:sort
+      caption="Workspace users"
+    />
+  </div>
+
+  <div class="empty-state">
+    <div>
+      <strong>Empty state</strong>
+      <span>The same columns with no records.</span>
+    </div>
+    <div class="table-frame">
+      <DataTable
+        data={[]}
+        columns={columns.slice(0, 3)}
+        rowKey="id"
+        dense
+        caption="Empty workspace users"
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .workbench {
+    display: grid;
+    gap: var(--smrt-spacing-5);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .workbench__header,
+  .summary,
+  .table-controls,
+  .empty-state > div:first-child {
+    display: flex;
+    align-items: center;
+  }
+
+  .workbench__header {
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+    padding-bottom: var(--smrt-spacing-4);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  h4,
+  p {
+    margin: 0;
+  }
+
+  h4 {
+    font: var(--smrt-typography-headline-small-font);
+  }
+
+  .eyebrow {
+    margin-bottom: var(--smrt-spacing-1);
+    color: var(--smrt-color-primary);
+    font: var(--smrt-typography-label-small-font);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .supporting {
+    margin-top: var(--smrt-spacing-1);
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-body-medium-font);
+  }
+
+  .summary,
+  .table-controls {
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .table-controls {
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container-low);
+  }
+
+  .table-controls > span {
+    margin-left: auto;
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-body-small-font);
+  }
+
+  .table-frame {
+    overflow: auto;
+    max-width: 100%;
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
+  }
+
+  .empty-state {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding-top: var(--smrt-spacing-4);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .empty-state > div:first-child {
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .empty-state span {
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-body-small-font);
+  }
+
+  @media (max-width: 760px) {
+    .workbench__header,
+    .empty-state > div:first-child {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .table-controls > span {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+</style>

package/dist/svelte/playground/DataTablePreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const DataTablePreview: import("svelte").Component<Record<string, never>, {}, "">;
+type DataTablePreview = ReturnType<typeof DataTablePreview>;
+export default DataTablePreview;
+//# sourceMappingURL=DataTablePreview.svelte.d.ts.map

package/dist/svelte/playground/DataTablePreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/DataTablePreview.svelte.ts"],"names":[],"mappings":"AAuIA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/playground/FeedbackPreview.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+import Alert from '../../components/feedback/Alert.svelte';
+import Drawer from '../../components/feedback/Drawer.svelte';
+import Meter from '../../components/feedback/Meter.svelte';
+import Progress from '../../components/feedback/Progress.svelte';
+import Spinner from '../../components/feedback/Spinner.svelte';
+import ToastViewport from '../../components/feedback/ToastViewport.svelte';
+import { createToaster } from '../../components/feedback/toast.js';
+import Accordion from '../../components/ui/Accordion.svelte';
+import AccordionItem from '../../components/ui/AccordionItem.svelte';
+import Button from '../../components/ui/Button.svelte';
+import Disclosure from '../../components/ui/Disclosure.svelte';
+import Dropdown from '../../components/ui/Dropdown.svelte';
+import Popover from '../../components/ui/Popover.svelte';
+
+const toaster = createToaster();
+let progress = $state(42);
+let drawerOpen = $state(false);
+const menu = [
+  { id: 'edit', label: 'Edit' },
+  { id: 'duplicate', label: 'Duplicate' },
+  { id: 'archive', label: 'Archive' },
+];
+</script>
+
+<div class="workbench">
+  <header><div><p class="eyebrow">Feedback and disclosure</p><h4>Status, progress, overlays, and layered interaction</h4></div><div class="actions"><Button size="sm" onclick={() => toaster.success('Settings saved', { duration: 0 })}>Show toast</Button><Button size="sm" variant="secondary" onclick={() => drawerOpen = true}>Open drawer</Button></div></header>
+
+  <section><h5>Alerts</h5><div class="stack"><Alert title="Information">The index will refresh in the background.</Alert><Alert variant="success" title="Published">Your changes are live.</Alert><Alert variant="warning" title="Review needed">Two fields use inherited defaults.</Alert><Alert variant="error" title="Connection lost" dismissible>Reconnect before submitting.</Alert></div></section>
+
+  <section><h5>Progress and measurement</h5><div class="progress-grid"><div><span>Determinate</span><Progress label="Upload progress" value={progress} showValue /></div><div><span>Indeterminate</span><Progress label="Preparing files" /></div><div><span>Circular</span><Progress label="Analysis progress" value={68} variant="circular" showValue /></div><div><span>Meter</span><Meter label="Storage used" value={72} low={45} high={80} optimum={25} showValue /></div><Spinner label="Synchronizing" /></div></section>
+
+  <section><h5>Layered interaction</h5><div class="interaction-row"><Popover label="Filter options"><strong>Quick filters</strong><p>Use a popover for lightweight contextual controls.</p></Popover><Dropdown label="Actions" items={menu} /><Disclosure title="Disclosure details"><p>Native details semantics for independent content.</p></Disclosure></div><Accordion><AccordionItem value="behavior" title="Behavior"><p>Single-open accordion by default.</p></AccordionItem><AccordionItem value="accessibility" title="Accessibility"><p>Keyboard controls, labelled regions, and reduced-motion support.</p></AccordionItem></Accordion></section>
+
+  <div class="slider"><label for="progress-demo">Progress value <output>{progress}%</output></label><input id="progress-demo" type="range" min="0" max="100" bind:value={progress} /></div>
+  <ToastViewport {toaster} />
+  <Drawer bind:open={drawerOpen} title="Workspace details"><p>Drawers share the modal focus and dismissal contract.</p>{#snippet footer()}<Button onclick={() => drawerOpen = false}>Done</Button>{/snippet}</Drawer>
+</div>
+
+<style>
+  .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
+  header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
+  .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
+  .stack { display: grid; gap: var(--smrt-spacing-2); }
+  .progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-5); align-items: center; }
+  .progress-grid > div { display: grid; gap: var(--smrt-spacing-2); } .progress-grid span, .slider label { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
+  .interaction-row { flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--smrt-spacing-3); }
+  .slider { display: grid; max-width: 24rem; gap: var(--smrt-spacing-2); } .slider label { display: flex; justify-content: space-between; } input { accent-color: var(--smrt-color-primary); }
+  @media (max-width: 760px) { header { align-items: flex-start; flex-direction: column; } .progress-grid { grid-template-columns: 1fr; } }
+</style>

package/dist/svelte/playground/FeedbackPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const FeedbackPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type FeedbackPreview = ReturnType<typeof FeedbackPreview>;
+export default FeedbackPreview;
+//# sourceMappingURL=FeedbackPreview.svelte.d.ts.map

package/dist/svelte/playground/FeedbackPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/FeedbackPreview.svelte.ts"],"names":[],"mappings":"AA4DA,QAAA,MAAM,eAAe,2DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+import Checkbox from '../../components/forms/Checkbox.svelte';
+import Combobox from '../../components/forms/Combobox.svelte';
+import {
+  type ControlCommand,
+  createControlInteractionRegistry,
+} from '../../components/forms/control-interaction.js';
+import DatePicker from '../../components/forms/DatePicker.svelte';
+import FilePicker from '../../components/forms/FilePicker.svelte';
+import Form from '../../components/forms/Form.svelte';
+import Listbox from '../../components/forms/Listbox.svelte';
+import MultiSelect from '../../components/forms/MultiSelect.svelte';
+import Radio from '../../components/forms/Radio.svelte';
+import RadioGroup from '../../components/forms/RadioGroup.svelte';
+import RangeSlider from '../../components/forms/RangeSlider.svelte';
+import SegmentedControl from '../../components/forms/SegmentedControl.svelte';
+import Slider from '../../components/forms/Slider.svelte';
+import Switch from '../../components/forms/Switch.svelte';
+import TagsInput from '../../components/forms/TagsInput.svelte';
+import TimePicker from '../../components/forms/TimePicker.svelte';
+import ToggleButton from '../../components/forms/ToggleButton.svelte';
+import Button from '../../components/ui/Button.svelte';
+
+const registry = createControlInteractionRegistry();
+const countries = [
+  { value: 'ca', label: 'Canada' },
+  { value: 'us', label: 'United States' },
+  { value: 'mx', label: 'Mexico' },
+];
+let accepted = $state(true);
+let notifications = $state(true);
+let pinned = $state(false);
+let role = $state('editor');
+let volume = $state(35);
+let budget = $state({ min: 25, max: 75 });
+let view = $state<string | number>('grid');
+let country = $state('ca');
+let channels = $state<Array<string | number>>(['email']);
+let tags = $state(['svelte', 'agents']);
+let region = $state<string | number>('west');
+let status = $state('Controls are ready for direct use or agent guidance.');
+
+async function command(command: ControlCommand, confirmed = false) {
+  const result = await registry.execute(command, {
+    source: 'agent',
+    confirmed,
+  });
+  status = result.ok
+    ? `${command.action} completed for ${command.identity.controlId}.`
+    : (result.reason ?? 'Command denied.');
+}
+
+const identity = (controlId: string) => ({
+  formId: 'foundation-demo',
+  controlId,
+});
+</script>
+
+<div class="workbench">
+  <header>
+    <div><p class="eyebrow">Addressable controls</p><h4>Interactive form foundation</h4><p>Every control exposes stable identity, capability, state, and consent-aware mutation hooks.</p></div>
+    <div class="agent-actions">
+      <Button size="sm" variant="secondary" onclick={() => command({ action: 'highlight', identity: identity('country') })}>Highlight country</Button>
+      <Button size="sm" variant="secondary" onclick={() => command({ action: 'stage', identity: identity('volume'), value: 72 })}>Stage volume 72</Button>
+      <Button size="sm" onclick={() => command({ action: 'apply', identity: identity('volume') }, true)}>Confirm staged value</Button>
+    </div>
+  </header>
+  <p class="agent-status" aria-live="polite">Agent: {status}</p>
+
+  <Form formId="foundation-demo" interactionRegistry={registry} aria-label="Foundation controls">
+    <section><h5>Choice and state</h5><div class="grid compact">
+      <Checkbox name="accepted" label="Accept terms" bind:checked={accepted} />
+      <Switch name="notifications" label="Notifications" bind:checked={notifications} />
+      <ToggleButton name="pinned" bind:pressed={pinned}>Pin workspace</ToggleButton>
+      <RadioGroup name="role" label="Role" bind:value={role}><Radio value="editor" label="Editor" /><Radio value="viewer" label="Viewer" /></RadioGroup>
+      <SegmentedControl name="view" label="View mode" options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }, { value: 'table', label: 'Table' }]} bind:value={view} />
+      <Listbox name="region" label="Region" options={[{ value: 'west', label: 'West' }, { value: 'central', label: 'Central' }, { value: 'east', label: 'East' }]} bind:value={region} />
+    </div></section>
+
+    <section><h5>Ranges</h5><div class="grid">
+      <Slider name="volume" label="Volume" unit="%" bind:value={volume} />
+      <RangeSlider name="budget" label="Budget range" unit="%" bind:value={budget} />
+    </div></section>
+
+    <section><h5>Structured input</h5><div class="grid">
+      <Combobox name="country" label="Country" options={countries} bind:value={country} />
+      <MultiSelect name="channels" label="Channels" options={[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'SMS' }, { value: 'push', label: 'Push' }]} bind:values={channels} />
+      <TagsInput name="topics" label="Topics" bind:values={tags} />
+      <DatePicker name="date" label="Publish date" />
+      <TimePicker name="time" label="Publish time" />
+      <FilePicker name="assets" label="Assets" accept="image/*" multiple />
+    </div></section>
+  </Form>
+</div>
+
+<style>
+  .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
+  header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
+  header p:not(.eyebrow) { max-width: 40rem; color: var(--smrt-color-on-surface-variant); }
+  .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
+  .agent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--smrt-spacing-2); }
+  .agent-status { padding: var(--smrt-spacing-3); border-inline-start: 3px solid var(--smrt-color-tertiary); background: var(--smrt-color-surface-container-low); color: var(--smrt-color-on-surface-variant); }
+  :global(form) { display: grid; gap: var(--smrt-spacing-6); }
+  section { min-width: 0; }
+  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-5); align-items: start; }
+  .grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  @media (max-width: 900px) { header { flex-direction: column; } .agent-actions { justify-content: flex-start; } .grid, .grid.compact { grid-template-columns: 1fr; } }
+</style>

package/dist/svelte/playground/InteractiveControlsPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const InteractiveControlsPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type InteractiveControlsPreview = ReturnType<typeof InteractiveControlsPreview>;
+export default InteractiveControlsPreview;
+//# sourceMappingURL=InteractiveControlsPreview.svelte.d.ts.map

package/dist/svelte/playground/InteractiveControlsPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveControlsPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/InteractiveControlsPreview.svelte.ts"],"names":[],"mappings":"AAyHA,QAAA,MAAM,0BAA0B,2DAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/svelte/playground.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    packageName: string;
+    displayName: string;
+    description: string;
+    entries: {
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./playground/BaseControlsPreview.svelte")>;
+        order: number;
+        tags: string[];
+        modes: {
+            mock: {
+                label: string;
+            };
+        };
+    }[];
+};
+export default _default;
+//# sourceMappingURL=playground.d.ts.map

package/dist/svelte/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAQA,wBAiEE"}

package/dist/svelte/playground.js

@@ -0,0 +1,65 @@
+const loadBaseControls = () => import('./playground/BaseControlsPreview.svelte');
+const loadDataTable = () => import('./playground/DataTablePreview.svelte');
+const loadInteractiveControls = () => import('./playground/InteractiveControlsPreview.svelte');
+const loadFeedback = () => import('./playground/FeedbackPreview.svelte');
+const loadCollections = () => import('./playground/CollectionsPreview.svelte');
+export default {
+    packageName: '@happyvertical/smrt-ui',
+    displayName: 'UI Foundation',
+    description: 'Provider-free controls and data primitives rendered in the active s-m-r-t theme.',
+    entries: [
+        {
+            id: 'base-controls',
+            title: 'Base Controls',
+            description: 'Inputs, select, textarea, toggle, form grouping, buttons, and status badges.',
+            loadComponent: loadBaseControls,
+            order: 1,
+            tags: ['forms', 'inputs', 'buttons', 'badges'],
+            modes: {
+                mock: {
+                    label: 'Interactive',
+                },
+            },
+        },
+        {
+            id: 'interactive-controls',
+            title: 'Interactive Controls',
+            description: 'Checkboxes, switches, radios, sliders, ranges, segmented choices, comboboxes, multiselect, tags, date/time, files, and agent interaction.',
+            loadComponent: loadInteractiveControls,
+            order: 2,
+            tags: ['forms', 'sliders', 'choices', 'agent-interaction'],
+            modes: { mock: { label: 'Interactive' } },
+        },
+        {
+            id: 'feedback-overlays',
+            title: 'Feedback & Overlays',
+            description: 'Alerts, toasts, progress, meters, spinners, popovers, menus, disclosure, accordions, and drawers.',
+            loadComponent: loadFeedback,
+            order: 3,
+            tags: ['feedback', 'progress', 'overlays'],
+            modes: { mock: { label: 'Interactive' } },
+        },
+        {
+            id: 'collections',
+            title: 'Collections & Content Lists',
+            description: 'Reusable collection toolbar and selectable list/grid pattern for content-heavy applications.',
+            loadComponent: loadCollections,
+            order: 4,
+            tags: ['content', 'list', 'grid', 'search'],
+            modes: { mock: { label: 'Interactive' } },
+        },
+        {
+            id: 'data-table',
+            title: 'Data Table',
+            description: 'Sortable and selectable tabular data with loading, density, and empty states.',
+            loadComponent: loadDataTable,
+            order: 5,
+            tags: ['data', 'table', 'grid'],
+            modes: {
+                mock: {
+                    label: 'Interactive',
+                },
+            },
+        },
+    ],
+};

package/dist/theme/index.d.ts

@@ -1,7 +1,9 @@
 /**
- * Theme system exports
+ * @deprecated Import from `@happyvertical/smrt-ui/themes`.
+ *
+ * This compatibility path now forwards to the canonical preset-aware theme
+ * system so `/theme`, `/themes`, and root imports share one context and one
+ * ThemeProvider implementation.
  */
-export { getThemeContext, setThemeContext, THEME_KEY, type ThemeContext, type ThemeState, tryGetThemeContext, } from './context.js';
-export { default as ThemeProvider } from './ThemeProvider.svelte';
-export { borderRadius, type ColorScheme, darkColors, defaultThemeConfig, duration, easing, elevation, generateColorVariables, generateThemeVariables, lightColors, spacing, type ThemeConfig, typography, } from './tokens.js';
+export * from '../themes/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EACL,YAAY,EACZ,KAAK,WAAW,EAChB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,sBAAsB,EACtB,sBAAsB,EACtB,WAAW,EACX,OAAO,EACP,KAAK,WAAW,EAChB,UAAU,GACX,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,cAAc,oBAAoB,CAAC"}

package/dist/theme/index.js

@@ -1,9 +1,8 @@
 /**
- * Theme system exports
+ * @deprecated Import from `@happyvertical/smrt-ui/themes`.
+ *
+ * This compatibility path now forwards to the canonical preset-aware theme
+ * system so `/theme`, `/themes`, and root imports share one context and one
+ * ThemeProvider implementation.
  */
-// Context
-export { getThemeContext, setThemeContext, THEME_KEY, tryGetThemeContext, } from './context.js';
-// Components
-export { default as ThemeProvider } from './ThemeProvider.svelte';
-// Tokens
-export { borderRadius, darkColors, defaultThemeConfig, duration, easing, elevation, generateColorVariables, generateThemeVariables, lightColors, spacing, typography, } from './tokens.js';
+export * from '../themes/index.js';

package/dist/themes/context.svelte.js

@@ -22,7 +22,7 @@ export function setThemeContext(context) {
 export function getThemeContext() {
     const context = getContext(THEME_CONTEXT_KEY);
     if (!context) {
-        throw new Error('Theme context not found. Make sure to wrap your app with <ThemeProvider> from @smrt/svelte/themes');
+        throw new Error('Theme context not found. Make sure to wrap your app with <ThemeProvider> from @happyvertical/smrt-ui/themes');
     }
     return context;
 }

package/dist/themes/index.d.ts

@@ -7,7 +7,7 @@
  * @example
  * ```svelte
  * <script>
- *   import { ThemeProvider } from '@smrt/svelte/themes';
+ *   import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
  * </script>
  *
  * <ThemeProvider preset="glass" colorScheme="system">