@happyvertical/smrt-ui 0.55.0 → 0.55.16

package/dist/components/permissions/PermissionPicker.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+import Checkbox from '../forms/Checkbox.svelte';
+import Input from '../forms/Input.svelte';
+
+export interface PermissionPickerItem {
+  id?: string;
+  slug: string;
+  name?: string;
+  description?: string;
+  category?: string;
+}
+
+export interface Props {
+  /** Permission catalog the host has authorized this actor to assign. */
+  permissions: readonly PermissionPickerItem[];
+  /** Permission slugs checked on first render or a server-validation retry. */
+  selected?: readonly string[];
+  /** Repeated native form field name. */
+  name?: string;
+  /** Visible label for the catalog. */
+  label?: string;
+  /** Supporting text below the label. */
+  description?: string;
+  /** Accessible label and placeholder for the progressive search. */
+  searchLabel?: string;
+  /** Prevents changes and native form submission while retaining readable state. */
+  disabled?: boolean;
+}
+
+interface PermissionGroup {
+  id: string;
+  label: string;
+  items: readonly PermissionPickerItem[];
+}
+
+let {
+  permissions,
+  selected = [],
+  name = 'permission',
+  label = 'Permissions',
+  description,
+  searchLabel = 'Search permissions',
+  disabled = false,
+}: Props = $props();
+
+let query = $state('');
+let localSelection = $state.raw<{
+  source: readonly string[];
+  slugs: Set<string>;
+} | null>(null);
+const instanceId = $props.id();
+const labelId = `permission-picker-label-${instanceId}`;
+const selectedSlugs = $derived(new Set(selected));
+const currentSelectedSlugs = $derived(
+  localSelection?.source === selected ? localSelection.slugs : selectedSlugs,
+);
+const normalizedQuery = $derived(normalize(query));
+const groups = $derived(groupPermissions(permissions));
+const visibleCount = $derived(
+  groups.reduce(
+    (count, group) =>
+      count +
+      group.items.filter((permission) => matches(permission, group.label))
+        .length,
+    0,
+  ),
+);
+
+function updateSelection(slug: string, checked: boolean): void {
+  const next = new Set(currentSelectedSlugs);
+  if (checked) next.add(slug);
+  else next.delete(slug);
+  localSelection = { source: selected, slugs: next };
+}
+
+function normalize(value: string): string {
+  return value.trim().replace(/\s+/g, ' ').toLocaleLowerCase();
+}
+
+function words(value: string): string {
+  const spaced = value
+    .replace(/[._-]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2');
+  return spaced
+    ? spaced.charAt(0).toLocaleUpperCase() + spaced.slice(1)
+    : 'Other';
+}
+
+function categoryOf(permission: PermissionPickerItem): string {
+  const category = permission.category?.trim();
+  if (category) return category;
+  return words(permission.slug.split('.')[0] ?? '');
+}
+
+function groupPermissions(
+  catalog: readonly PermissionPickerItem[],
+): PermissionGroup[] {
+  const byCategory = new Map<string, PermissionPickerItem[]>();
+  for (const permission of catalog) {
+    const category = categoryOf(permission);
+    const group = byCategory.get(category) ?? [];
+    group.push(permission);
+    byCategory.set(category, group);
+  }
+  return [...byCategory.entries()]
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([category, items], index) => ({
+      id: `permission-group-${index}`,
+      label: category,
+      items: [...items].sort((left, right) =>
+        left.slug.localeCompare(right.slug),
+      ),
+    }));
+}
+
+function displayName(permission: PermissionPickerItem): string {
+  return permission.name?.trim() || words(permission.slug);
+}
+
+function matches(permission: PermissionPickerItem, category: string): boolean {
+  if (!normalizedQuery) return true;
+  return normalize(
+    [
+      displayName(permission),
+      permission.slug,
+      permission.description ?? '',
+      category,
+    ].join(' '),
+  ).includes(normalizedQuery);
+}
+</script>
+
+<section class="permission-picker" aria-labelledby={labelId}>
+  <div class="heading">
+    <div>
+      <h2 id={labelId}>{label}</h2>
+      {#if description}<p>{description}</p>{/if}
+    </div>
+    <label class="search">
+      <span>{searchLabel}</span>
+      <Input
+        type="search"
+        value={query}
+        oninput={(event) => (query = event.currentTarget.value)}
+        placeholder={searchLabel}
+        autocomplete="off"
+      />
+    </label>
+  </div>
+
+  {#key selected}
+  <fieldset {disabled}>
+    <legend class="visually-hidden">{label}</legend>
+    <div class="groups">
+      {#each groups as group (group.label)}
+        {@const groupVisible = group.items.some((permission) => matches(permission, group.label))}
+        {@const selectedCount = group.items.filter((permission) => currentSelectedSlugs.has(permission.slug)).length}
+        <details class="group" open={normalizedQuery ? groupVisible : undefined} hidden={!groupVisible}>
+          <summary id={group.id}>
+            <span>{group.label}</span>
+            <span class="selected-count">{selectedCount} selected</span>
+          </summary>
+          <div class="choices">
+            {#each group.items as permission (permission.id ?? permission.slug)}
+              <div class="choice" hidden={!matches(permission, group.label)}>
+                <Checkbox
+                  {name}
+                  value={permission.slug}
+                  checked={selectedSlugs.has(permission.slug)}
+                  onchange={(event) => updateSelection(permission.slug, event.currentTarget.checked)}
+                  label={displayName(permission)}
+                  {disabled}
+                />
+                <code>{permission.slug}</code>
+                {#if permission.description}<p>{permission.description}</p>{/if}
+              </div>
+            {/each}
+          </div>
+        </details>
+      {/each}
+    </div>
+  </fieldset>
+  {/key}
+
+  {#if normalizedQuery && visibleCount === 0}
+    <p class="no-results" role="status">No permissions match “{query.trim()}”.</p>
+  {/if}
+</section>
+
+<style>
+  .permission-picker { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; }
+  .heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--smrt-spacing-4); }
+  h2, p { margin: 0; }
+  h2 { color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-large-font); }
+  .heading p, .choice p, code, .no-results { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-body-small-font); }
+  .heading p { margin-block-start: var(--smrt-spacing-1); }
+  .search { display: grid; flex: 1 1 16rem; max-inline-size: 28rem; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-medium-font); }
+  fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
+  .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--smrt-spacing-4); align-items: start; }
+  .group { min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
+  summary { display: flex; min-block-size: 2.75rem; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-medium-font); cursor: pointer; }
+  summary:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .selected-count { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
+  .choices { display: grid; gap: var(--smrt-spacing-4); padding: 0 var(--smrt-spacing-4) var(--smrt-spacing-4); border-block-start: 1px solid var(--smrt-color-outline-variant); padding-block-start: var(--smrt-spacing-4); }
+  .choice { display: grid; min-inline-size: 0; gap: var(--smrt-spacing-1); }
+  .choice :global(.checkbox) { min-inline-size: 0; }
+  .choice :global(.checkbox__label), code, .choice p { overflow-wrap: anywhere; }
+  code { padding-inline-start: calc(1.125rem + var(--smrt-spacing-2)); }
+  .choice p { padding-inline-start: calc(1.125rem + var(--smrt-spacing-2)); }
+  .no-results { padding: var(--smrt-spacing-4); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface-container-low); }
+  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  [hidden] { display: none; }
+</style>

package/dist/components/permissions/PermissionPicker.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface PermissionPickerItem {
+    id?: string;
+    slug: string;
+    name?: string;
+    description?: string;
+    category?: string;
+}
+export interface Props {
+    /** Permission catalog the host has authorized this actor to assign. */
+    permissions: readonly PermissionPickerItem[];
+    /** Permission slugs checked on first render or a server-validation retry. */
+    selected?: readonly string[];
+    /** Repeated native form field name. */
+    name?: string;
+    /** Visible label for the catalog. */
+    label?: string;
+    /** Supporting text below the label. */
+    description?: string;
+    /** Accessible label and placeholder for the progressive search. */
+    searchLabel?: string;
+    /** Prevents changes and native form submission while retaining readable state. */
+    disabled?: boolean;
+}
+declare const PermissionPicker: import("svelte").Component<Props, {}, "">;
+type PermissionPicker = ReturnType<typeof PermissionPicker>;
+export default PermissionPicker;
+//# sourceMappingURL=PermissionPicker.svelte.d.ts.map

package/dist/components/permissions/PermissionPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/permissions/PermissionPicker.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,WAAW,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC7C,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+JD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/currency.d.ts

@@ -0,0 +1,3 @@
+/** ISO 4217 currency metadata shared by domain packages and UI components. */
+export { ISO_4217_MINOR_UNITS } from './components/display/currency-metadata.js';
+//# sourceMappingURL=currency.d.ts.map

package/dist/currency.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency.d.ts","sourceRoot":"","sources":["../src/currency.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC"}

package/dist/currency.js

@@ -0,0 +1,2 @@
+/** ISO 4217 currency metadata shared by domain packages and UI components. */
+export { ISO_4217_MINOR_UNITS } from './components/display/currency-metadata.js';

package/dist/i18n/strings.ui.d.ts

@@ -44,7 +44,13 @@ export declare const M: {
     readonly 'ui.form_action_bar.label': "ui.form_action_bar.label";
     readonly 'ui.dictation.start': "ui.dictation.start";
     readonly 'ui.dictation.start_hint': "ui.dictation.start_hint";
+    readonly 'ui.dictation.start_hands_free': "ui.dictation.start_hands_free";
     readonly 'ui.dictation.stop': "ui.dictation.stop";
+    readonly 'ui.dictation.listening_hands_free': "ui.dictation.listening_hands_free";
+    readonly 'ui.dictation.listening_short': "ui.dictation.listening_short";
+    readonly 'ui.dictation.hearing': "ui.dictation.hearing";
+    readonly 'ui.dictation.sending': "ui.dictation.sending";
+    readonly 'ui.dictation.paused_speaking': "ui.dictation.paused_speaking";
     readonly 'ui.dictation.starting': "ui.dictation.starting";
     readonly 'ui.dictation.listening': "ui.dictation.listening";
     readonly 'ui.dictation.unsupported': "ui.dictation.unsupported";
@@ -57,6 +63,7 @@ export declare const M: {
     readonly 'ui.dictation.too_long': "ui.dictation.too_long";
     readonly 'ui.dictation.not_transcribed': "ui.dictation.not_transcribed";
     readonly 'ui.dictation.unavailable': "ui.dictation.unavailable";
+    readonly 'ui.dictation.model_missing': "ui.dictation.model_missing";
     readonly 'ui.dictation.forbidden': "ui.dictation.forbidden";
     readonly 'ui.progress_bar.label': "ui.progress_bar.label";
     readonly 'ui.progress_bar.over_by': "ui.progress_bar.over_by";

package/dist/i18n/strings.ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKZ,CAAC"}
+{"version":3,"file":"strings.ui.d.ts","sourceRoot":"","sources":["../../src/i18n/strings.ui.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6KZ,CAAC"}

package/dist/i18n/strings.ui.js

@@ -53,7 +53,13 @@ export const M = defineMessages({
     // forms/DictationButton.svelte, forms/DictationStatus.svelte
     'ui.dictation.start': 'Speak instead of typing',
     'ui.dictation.start_hint': 'Speak instead of typing. You can also press and hold the text box.',
+    'ui.dictation.start_hands_free': 'Speak instead of typing, hands-free. It writes each sentence down when you pause.',
     'ui.dictation.stop': 'Stop listening',
+    'ui.dictation.listening_hands_free': 'Listening. Just talk; I write it down when you pause. Tap the microphone when you are done.',
+    'ui.dictation.listening_short': 'Listening',
+    'ui.dictation.hearing': 'Hearing you…',
+    'ui.dictation.sending': 'Sending…',
+    'ui.dictation.paused_speaking': 'Paused while the assistant speaks',
     'ui.dictation.starting': 'Getting the microphone ready…',
     'ui.dictation.listening': 'Listening. Tap the microphone when you are done.',
     'ui.dictation.unsupported': "Speech recognition isn't available in this browser. Brave blocks it; try Chrome, Edge or Safari, or type instead.",
@@ -66,6 +72,7 @@ export const M = defineMessages({
     'ui.dictation.too_long': 'That was too long to write down. Try a shorter message, or type instead.',
     'ui.dictation.not_transcribed': "Couldn't write that down. Tap the microphone to try again, or type instead.",
     'ui.dictation.unavailable': "Speaking isn't set up here yet. Please type instead.",
+    'ui.dictation.model_missing': "The speech model isn't downloaded yet. Download it first, or type instead.",
     'ui.dictation.forbidden': "You can't use speaking here. Please type instead.",
     // feedback/ProgressBar.svelte
     'ui.progress_bar.label': 'Progress',

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as MembershipCard } from './components/memberships/MembershipCa
 export { default as MembershipList } from './components/memberships/MembershipList.svelte';
 export * from './components/nav/index.js';
 export { default as PermissionCheck } from './components/permissions/PermissionCheck.svelte';
+export { default as PermissionPicker } from './components/permissions/PermissionPicker.svelte';
 export { default as RoleBadge } from './components/roles/RoleBadge.svelte';
 export { default as RoleSelector } from './components/roles/RoleSelector.svelte';
 export * from './components/ui/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAE3F,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAE7F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,cAAc,0BAA0B,CAAC;AAEzC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,WAAW,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElE,mBAAmB,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAE3F,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AAE/F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,cAAc,0BAA0B,CAAC;AAEzC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,WAAW,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAElE,mBAAmB,oBAAoB,CAAC"}

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as MembershipList } from './components/memberships/MembershipLi
 export * from './components/nav/index.js';
 // Permission components
 export { default as PermissionCheck } from './components/permissions/PermissionCheck.svelte';
+export { default as PermissionPicker } from './components/permissions/PermissionPicker.svelte';
 // Role components (domain-agnostic — typed against smrt-types contracts)
 export { default as RoleBadge } from './components/roles/RoleBadge.svelte';
 export { default as RoleSelector } from './components/roles/RoleSelector.svelte';

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -13,6 +13,7 @@ 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 RelationInput from '../../components/forms/RelationInput.svelte';
 import SegmentedControl from '../../components/forms/SegmentedControl.svelte';
 import Slider from '../../components/forms/Slider.svelte';
 import Switch from '../../components/forms/Switch.svelte';
@@ -27,6 +28,26 @@ const countries = [
   { value: 'us', label: 'United States' },
   { value: 'mx', label: 'Mexico' },
 ];
+// RelationInput demo: a caller-supplied lookup standing in for a REST search.
+const demoCustomers = [
+  { id: 'cus_001', label: 'Acme Corp', detail: 'acme@example.com' },
+  { id: 'cus_002', label: 'Globex', detail: 'billing@globex.example' },
+  { id: 'cus_003', label: 'Initech', detail: 'ap@initech.example' },
+  { id: 'cus_004', label: 'Umbrella Ltd' },
+];
+async function searchCustomers(query: string) {
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  const q = query.toLowerCase();
+  return demoCustomers.filter(
+    (c) =>
+      c.label.toLowerCase().includes(q) ||
+      (c.detail ?? '').toLowerCase().includes(q),
+  );
+}
+async function resolveCustomer(id: string) {
+  return demoCustomers.find((c) => c.id === id) ?? null;
+}
+let customerId = $state('');
 let accepted = $state(true);
 let notifications = $state(true);
 let pinned = $state(false);
@@ -83,6 +104,7 @@ const identity = (controlId: string) => ({
 
     <section><h5>Structured input</h5><div class="grid">
       <Combobox name="country" label="Country" options={countries} bind:value={country} />
+      <RelationInput name="customerId" label="Customer" description="Search by name or email" search={searchCustomers} resolve={resolveCustomer} bind:value={customerId} />
       <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" />

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

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

package/dist/svelte/playground/PermissionPickerPreview.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import PermissionPicker from '../../components/permissions/PermissionPicker.svelte';
+
+const permissions = [
+  { slug: 'projects.read', name: 'View projects', category: 'Projects' },
+  { slug: 'projects.update', name: 'Update projects', category: 'Projects' },
+  {
+    slug: 'tenant.settings.read',
+    name: 'View workspace settings',
+    description: 'Review the active workspace configuration.',
+    category: 'Workspace',
+  },
+  {
+    slug: 'tenant.settings.manage',
+    name: 'Manage workspace settings',
+    category: 'Workspace',
+  },
+];
+</script>
+
+<form>
+  <PermissionPicker
+    {permissions}
+    selected={['projects.read', 'tenant.settings.read']}
+    description="Choose the capabilities assigned to this role."
+  />
+</form>

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

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PermissionPickerPreview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PermissionPickerPreview = InstanceType<typeof PermissionPickerPreview>;
+export default PermissionPickerPreview;
+//# sourceMappingURL=PermissionPickerPreview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionPickerPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/PermissionPickerPreview.svelte.ts"],"names":[],"mappings":"AA+BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,uBAAuB;;kBAA+E,CAAC;AAC3F,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC9E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/playground.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAUA,wBA+FE"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,wBAyGE"}

package/dist/svelte/playground.js

@@ -5,11 +5,21 @@ const loadFeedback = () => import('./playground/FeedbackPreview.svelte');
 const loadCollections = () => import('./playground/CollectionsPreview.svelte');
 const loadCalendar = () => import('./playground/CalendarPreview.svelte');
 const loadCapture = () => import('./playground/CapturePreview.svelte');
+const loadPermissionPicker = () => import('./playground/PermissionPickerPreview.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: 'permission-picker',
+            title: 'Permission Picker',
+            description: 'Grouped, searchable native-form permission grants with retained server retry selections.',
+            loadComponent: loadPermissionPicker,
+            order: 9,
+            tags: ['forms', 'permissions', 'roles', 'search'],
+            modes: { mock: { label: 'Interactive' } },
+        },
         {
             id: 'code-selectors',
             title: 'Currency, Country & Province',

package/dist/themes/README.md

@@ -55,6 +55,7 @@ export { brandTheme };
 <!-- +layout.svelte -->
 <script>
   import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
+  import '@happyvertical/smrt-ui/themes/styles/base.css';
   import '@happyvertical/smrt-ui/themes/styles/all.css';
   import '$lib/themes/brand'; // Import to register
 </script>
@@ -244,6 +245,7 @@ Best for static sites or when you want minimal JavaScript overhead.
 <!-- +layout.svelte -->
 <script>
   // Import only the theme you need
+  import '@happyvertical/smrt-ui/themes/styles/base.css';
   import '@happyvertical/smrt-ui/themes/styles/material.css';
 </script>
 
@@ -276,6 +278,9 @@ For maximum performance, use CSS only with media queries:
 Import the theme styles in your app entry point:
 
 ```ts
+// Recommended application sizing, surface, and typography defaults
+import '@happyvertical/smrt-ui/themes/styles/base.css';
+
 // Import all themes (for runtime switching)
 import '@happyvertical/smrt-ui/themes/styles/all.css';
 

package/dist/themes/index.d.ts

@@ -21,13 +21,8 @@ export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext,
 export type { CreateThemeOptions } from './create-theme.js';
 export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
 export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
-export { glassTheme } from './glass/index.js';
-export { happyverticalTheme } from './happyvertical/index.js';
-export { materialTheme } from './material/index.js';
-export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, glassTheme, happyverticalTheme, isValidPreset, materialTheme, smrtTheme, studioTheme, type ThemePresetSummary, themePresets, themes, } from './presets.js';
 export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
-export { smrtTheme } from './smrt/index.js';
-export { studioTheme } from './studio/index.js';
 export { default as ThemeProvider } from './ThemeProvider.svelte';
 export { type ThemeScriptOptions, themeScript } from './theme-script.js';
 export type { BorderRadius, BorderRadiusScale, ColorPalette, ColorScheme, CSSVariableOptions, DurationScale, EasingScale, ElevationScale, GlassEffects, ResolvedScheme, SpacingScale, Theme, ThemeConfig, ThemeContext, ThemePreset, ThemeState, TypographyScale, TypographyToken, } from './types.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,KAAK,kBAAkB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,kBAAkB,EACvB,YAAY,EACZ,MAAM,GACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,KAAK,kBAAkB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/themes/index.js

@@ -24,16 +24,10 @@ export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext,
 export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
 // CSS generation
 export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
-export { glassTheme } from './glass/index.js';
-export { happyverticalTheme } from './happyvertical/index.js';
-// Theme definitions
-export { materialTheme } from './material/index.js';
-// Registry
-export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+// Preset data and registry (single source: ./presets.ts, Node-safe)
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, glassTheme, happyverticalTheme, isValidPreset, materialTheme, smrtTheme, studioTheme, themePresets, themes, } from './presets.js';
 // Shared tokens (if needed for custom themes)
 export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
-export { smrtTheme } from './smrt/index.js';
-export { studioTheme } from './studio/index.js';
 // Main components
 export { default as ThemeProvider } from './ThemeProvider.svelte';
 // Pre-paint bootstrap script

package/dist/themes/presets.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Theme presets: ids, labels, and palettes only.
+ *
+ * Node-safe subpath (`@happyvertical/smrt-ui/themes/presets`): it imports no
+ * `.svelte` file and no browser global, so a CLI, server, or build script can
+ * list the presets without a Svelte toolchain. `@happyvertical/smrt-ui/themes`
+ * re-exports everything here, so the preset data has exactly one source.
+ */
+export { glassTheme } from './glass/index.js';
+export { happyverticalTheme } from './happyvertical/index.js';
+export { materialTheme } from './material/index.js';
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+export { smrtTheme } from './smrt/index.js';
+export { studioTheme } from './studio/index.js';
+export type { ColorPalette, ColorScheme, ResolvedScheme, Theme, ThemePreset, } from './types.js';
+import type { ColorPalette, ThemePreset } from './types.js';
+/** A built-in preset reduced to its identity and palettes. */
+export interface ThemePresetSummary {
+    id: ThemePreset;
+    label: string;
+    light: ColorPalette;
+    dark: ColorPalette;
+}
+/** Built-in presets in display order: id, label, and light/dark colors. */
+export declare const themePresets: readonly ThemePresetSummary[];
+//# sourceMappingURL=presets.d.ts.map

package/dist/themes/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/themes/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,KAAK,EACL,WAAW,GACZ,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5D,8DAA8D;AAC9D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,WAAW,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,2EAA2E;AAC3E,eAAO,MAAM,YAAY,EAAE,SAAS,kBAAkB,EAOrD,CAAC"}

package/dist/themes/presets.js

@@ -0,0 +1,22 @@
+/**
+ * Theme presets: ids, labels, and palettes only.
+ *
+ * Node-safe subpath (`@happyvertical/smrt-ui/themes/presets`): it imports no
+ * `.svelte` file and no browser global, so a CLI, server, or build script can
+ * list the presets without a Svelte toolchain. `@happyvertical/smrt-ui/themes`
+ * re-exports everything here, so the preset data has exactly one source.
+ */
+export { glassTheme } from './glass/index.js';
+export { happyverticalTheme } from './happyvertical/index.js';
+export { materialTheme } from './material/index.js';
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+export { smrtTheme } from './smrt/index.js';
+export { studioTheme } from './studio/index.js';
+import { availablePresets, themes } from './registry.js';
+/** Built-in presets in display order: id, label, and light/dark colors. */
+export const themePresets = availablePresets.map((id) => ({
+    id,
+    label: themes[id].name,
+    light: themes[id].light,
+    dark: themes[id].dark,
+}));