@happyvertical/smrt-svelte 0.51.39 → 0.52.0

package/dist/components/forms/__tests__/FormScope.test.js

@@ -0,0 +1,39 @@
+import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Fixture from './form-scope.fixture.svelte';
+afterEach(() => {
+    delete document.modelContext;
+});
+describe('FormScope', () => {
+    it('registers a stage-only tool for the smrt-ui controls inside a plain container', async () => {
+        const registered = [];
+        document.modelContext = {
+            async registerTool(tool) {
+                registered.push(tool);
+            },
+        };
+        const registry = createControlInteractionRegistry();
+        const { container, rerender } = render(Fixture, {
+            props: { interactionRegistry: registry },
+        });
+        expect(container.querySelector('form')).toBeNull();
+        await tick();
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
+        const tool = registered.at(-1);
+        expect(tool.name).toBe('new_site_stage_changes');
+        expect(Object.keys(tool.inputSchema.properties).sort()).toEqual([
+            'name',
+            'town',
+        ]);
+        const result = JSON.parse(await tool.execute({ name: 'Lacombe News', key: 'x' }));
+        expect(result).toMatchObject({ ok: true, staged: 1, skipped: ['key'] });
+        expect(screen.getByRole('textbox', { name: 'Site name' })).toHaveValue('');
+        await waitFor(() => expect(screen.getByRole('region', { name: 'Review proposed changes' })).toBeInTheDocument());
+        const before = registered.length;
+        await rerender({ interactionRegistry: registry, showTown: false });
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(before));
+        expect(Object.keys(registered.at(-1).inputSchema.properties)).toEqual(['name']);
+    });
+});

package/dist/components/forms/__tests__/form-scope.fixture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+import {
+  type ControlInteractionRegistry,
+  FormGroup,
+  Input,
+} from '@happyvertical/smrt-ui/forms';
+import FormScope from '../FormScope.svelte';
+
+let {
+  interactionRegistry = undefined,
+  showTown = true,
+}: {
+  interactionRegistry?: ControlInteractionRegistry;
+  showTown?: boolean;
+} = $props();
+let name = $state('');
+let town = $state('');
+let secret = $state('');
+</script>
+
+<FormScope formId="new-site" purpose="Start a new town site" {interactionRegistry}>
+  <div class="wizard">
+    <FormGroup label="Site name" id="site-name"><Input name="name" bind:value={name} /></FormGroup>
+    {#if showTown}
+      <FormGroup label="Town" id="site-town"><Input name="town" bind:value={town} /></FormGroup>
+    {/if}
+    <FormGroup label="Access key" id="site-key"><Input name="key" type="password" bind:value={secret} /></FormGroup>
+    <button type="button">Continue</button>
+  </div>
+</FormScope>

package/dist/components/forms/__tests__/form-scope.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import FormScope from '../FormScope.svelte';
+type $$ComponentProps = {
+    interactionRegistry?: ControlInteractionRegistry;
+    showTown?: boolean;
+};
+declare const FormScope: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormScope = ReturnType<typeof FormScope>;
+export default FormScope;
+//# sourceMappingURL=form-scope.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-scope.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-scope.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-scope.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAGhC,MAAM,8BAA8B,CAAC;AACtC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE3C,KAAK,gBAAgB,GAAI;IACxB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2BF,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+/** Rich Form hosting smrt-ui primitives, native attributes, and `enhance`. */
+import {
+  Combobox,
+  type ControlInteractionRegistry,
+  FormGroup,
+  Input,
+  Select,
+} from '@happyvertical/smrt-ui/forms';
+import type { Attachment } from 'svelte/attachments';
+import Form, { type FormEnhance } from '../Form.svelte';
+import TextInput from '../TextInput.svelte';
+
+let {
+  enhance = undefined,
+  attach = undefined,
+  interactionRegistry = undefined,
+  nameValue = $bindable(''),
+}: {
+  enhance?: FormEnhance;
+  attach?: Attachment<HTMLFormElement>;
+  interactionRegistry?: ControlInteractionRegistry;
+  nameValue?: string;
+} = $props();
+let kind = $state('news');
+let town = $state('lacombe');
+let tagline = $state('');
+</script>
+
+{#if attach}
+  <Form
+    formId="setup-network"
+    webmcp
+    method="POST"
+    action="?/create"
+    enctype="multipart/form-data"
+    novalidate
+    aria-label="Set up your network"
+    data-testid="network-form"
+    {enhance}
+    {interactionRegistry}
+    {@attach attach}
+  >
+    {@render fields()}
+  </Form>
+{:else}
+  <Form
+    formId="setup-network"
+    webmcp
+    method="POST"
+    action="?/create"
+    enctype="multipart/form-data"
+    novalidate
+    aria-label="Set up your network"
+    data-testid="network-form"
+    {enhance}
+    {interactionRegistry}
+  >
+    {@render fields()}
+  </Form>
+{/if}
+
+{#snippet fields()}
+  <FormGroup label="Network name" id="name">
+    <Input name="name" bind:value={nameValue} />
+  </FormGroup>
+  <FormGroup label="Kind of network" id="kind">
+    <Select name="kind" bind:value={kind}>
+      <option value="news">News</option>
+      <option value="aggregator">Roundup</option>
+    </Select>
+  </FormGroup>
+  <Combobox
+    name="town"
+    label="Home town"
+    options={[
+      { value: 'lacombe', label: 'Lacombe' },
+      { value: 'blackfalds', label: 'Blackfalds' },
+    ]}
+    bind:value={town}
+  />
+  <TextInput name="tagline" label="Tagline" bind:value={tagline} />
+  <button type="submit">Create</button>
+{/snippet}

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte.d.ts

@@ -0,0 +1,14 @@
+/** Rich Form hosting smrt-ui primitives, native attributes, and `enhance`. */
+import { type ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import type { Attachment } from 'svelte/attachments';
+import { type FormEnhance } from '../Form.svelte';
+type $$ComponentProps = {
+    enhance?: FormEnhance;
+    attach?: Attachment<HTMLFormElement>;
+    interactionRegistry?: ControlInteractionRegistry;
+    nameValue?: string;
+};
+declare const FormWithUiControls: import("svelte").Component<$$ComponentProps, {}, "nameValue">;
+type FormWithUiControls = ReturnType<typeof FormWithUiControls>;
+export default FormWithUiControls;
+//# sourceMappingURL=form-with-ui-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-with-ui-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-ui-controls.fixture.svelte.ts"],"names":[],"mappings":"AAGA,8EAA8E;AAC9E,OAAO,EAEL,KAAK,0BAA0B,EAIhC,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGvD,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACrC,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,QAAA,MAAM,kBAAkB,+DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/forms/index.d.ts

@@ -16,6 +16,7 @@ export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as FormScope } from './FormScope.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/forms/index.js

@@ -18,6 +18,7 @@ export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as FormScope } from './FormScope.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/workspace/README.md

@@ -31,6 +31,17 @@ restoration at mobile and desktop widths.
 - `ActivityBadge`, `ActivityList`, `ActivityItem`, `ActivityToasts`
 - `AppScopePanel`, `SystemStatusChips`, `SystemScopePanel`
 - `tenantNavFromManifest`
+- Responsive chrome: `ShellNavToggle`, `ShellTitle`, `PhoneTopBar`,
+  `PhoneBottomBar`, the pure `mobile-shell` helpers (`ScrollChrome`,
+  `shellPageTrailFor`, `phoneTopBarFor`, `bottomBarMode`, `keyboardLikelyOpen`, …) and their DOM
+  installers (`installShellViewport`, `installScrollChrome`,
+  `installKeyboardWatcher`, `watchFormActionBar`)
+
+`AdminShell` takes `header`, `phoneTopBar`, `phoneBottomBar` and `overlays`
+snippets plus `phone`, `pinChrome` and `path` props; edges take
+`viewportDefaults`, `phone`, `resizable`, `persist` and `keepMounted`; nav
+items take `attention`. See the package README
+("Responsive chrome and resizable edges") for the contract.
 
 Use `AdminShell`'s `tenantFooter` snippet with `WorkspaceAccountMenu` to keep a
 single-line tenant/account control pinned below scrolling tenant navigation.