@happyvertical/smrt-ui 0.53.0 → 0.53.2

package/dist/components/forms/__tests__/control-proposals.test.js

@@ -1,63 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { createControlInteractionRegistry } from '../control-interaction.js';
-import { controlProposalInputSchema, controlProposalToolName, stageControlProposals, } from '../control-proposals.js';
-import Fixture from './composite-registration.fixture.svelte';
-describe('useControlRegistration (public) and control proposals', () => {
-    it('registers a composite as one control with its declared value schema', async () => {
-        const registry = createControlInteractionRegistry();
-        render(Fixture, { props: { registry } });
-        await tick();
-        const ids = registry
-            .list('new-site')
-            .map((snapshot) => snapshot.identity.controlId);
-        expect(ids).toEqual(expect.arrayContaining(['name', 'place', 'password']));
-        const place = registry.get({ formId: 'new-site', controlId: 'place' });
-        expect(place?.metadata.label).toBe('Town location');
-        expect(place?.metadata.valueSchema).toMatchObject({ type: 'object' });
-    });
-    it('builds a proposal schema from every proposable control, never secrets', async () => {
-        const registry = createControlInteractionRegistry();
-        render(Fixture, { props: { registry } });
-        await tick();
-        const schema = controlProposalInputSchema(registry, 'new-site');
-        expect(Object.keys(schema.properties).sort()).toEqual(['name', 'place']);
-        expect(schema.properties.name).toEqual({
-            type: 'string',
-            title: 'Site name',
-        });
-        expect(schema.properties.place).toMatchObject({
-            type: 'object',
-            title: 'Town location',
-        });
-        expect(controlProposalInputSchema(registry, 'new-site', { exclude: ['name'] })).toMatchObject({ properties: { place: expect.any(Object) } });
-    });
-    it('stages proposals for review without changing values', async () => {
-        const registry = createControlInteractionRegistry();
-        render(Fixture, { props: { registry } });
-        await tick();
-        const result = await stageControlProposals(registry, 'new-site', {
-            name: 'Lacombe',
-            place: { name: 'Lacombe', latitude: 52.46, longitude: -113.73 },
-            password: 'hunter2',
-            nope: 1,
-        }, { actorId: 'assistant' });
-        expect(result).toEqual({
-            ok: true,
-            staged: 2,
-            rejected: [],
-            skipped: ['password', 'nope'],
-        });
-        expect(screen.getByTestId('place')).toHaveTextContent('none');
-        const staged = registry.get({ formId: 'new-site', controlId: 'place' });
-        expect(staged?.state.staged?.provenance).toMatchObject({
-            source: 'agent',
-            actorId: 'assistant',
-        });
-    });
-    it('names the tool with tool-safe characters', () => {
-        expect(controlProposalToolName('setup-network')).toBe('setup_network_stage_changes');
-        expect(controlProposalToolName('--')).toBe('form_stage_changes');
-    });
-});

package/dist/components/forms/__tests__/core-controls.fixture.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-import Checkbox from '../Checkbox.svelte';
-import type { ControlInteractionRegistry } from '../control-interaction.js';
-import Form from '../Form.svelte';
-import Radio from '../Radio.svelte';
-import RadioGroup from '../RadioGroup.svelte';
-import RangeSlider from '../RangeSlider.svelte';
-import SegmentedControl from '../SegmentedControl.svelte';
-import Slider from '../Slider.svelte';
-import Switch from '../Switch.svelte';
-import Textarea from '../Textarea.svelte';
-import ToggleButton from '../ToggleButton.svelte';
-
-interface Props {
-  registry: ControlInteractionRegistry;
-  validInitial?: boolean;
-}
-let { registry, validInitial = false }: Props = $props();
-let accepted = $state(false);
-let notifications = $state(false);
-let role = $state('editor');
-let volume = $state(30);
-let range = $state({ min: 20, max: 80 });
-let view = $state<string | number>('grid');
-let notes = $state('valid notes');
-let pinned = $state(false);
-$effect(() => {
-  accepted = validInitial;
-  notifications = validInitial;
-});
-</script>
-
-<Form formId="settings" interactionRegistry={registry} aria-label="Settings">
-  <Checkbox name="accepted" label="Accept terms" required bind:checked={accepted} />
-  <Switch name="notifications" label="Notifications" required bind:checked={notifications} />
-  <RadioGroup name="role" label="Role" bind:value={role}>
-    <Radio value="editor" label="Editor" />
-    <Radio value="viewer" label="Viewer" />
-  </RadioGroup>
-  <Slider name="volume" label="Volume" step={5} bind:value={volume} />
-  <RangeSlider name="price" label="Price" step={5} bind:value={range} />
-  <SegmentedControl
-    name="view"
-    label="View"
-    options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]}
-    bind:value={view}
-  />
-  <Textarea name="notes" aria-label="Notes" required minlength={3} bind:value={notes} />
-  <ToggleButton name="pinned" aria-label="Pinned" bind:pressed={pinned}>Pinned</ToggleButton>
-</Form>

package/dist/components/forms/__tests__/core-controls.fixture.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { ControlInteractionRegistry } from '../control-interaction.js';
-interface Props {
-    registry: ControlInteractionRegistry;
-    validInitial?: boolean;
-}
-declare const CoreControls: import("svelte").Component<Props, {}, "">;
-type CoreControls = ReturnType<typeof CoreControls>;
-export default CoreControls;
-//# sourceMappingURL=core-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/core-controls.fixture.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/core-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAY5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA6CD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/core-controls.test.js

@@ -1,311 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Progress from '../../feedback/Progress.svelte';
-import Spinner from '../../feedback/Spinner.svelte';
-import { createControlInteractionRegistry } from '../control-interaction.js';
-import { snapSteppedNumber, validatesSteppedNumber, } from '../control-value-validation.js';
-import ErrorSummary from '../ErrorSummary.svelte';
-import Fixture from './core-controls.fixture.svelte';
-import DecimalSlidersFixture from './decimal-sliders.fixture.svelte';
-describe('core controls', () => {
-    it('provides distinct checkbox, switch, radio, slider, range, and segmented semantics', async () => {
-        const registry = createControlInteractionRegistry();
-        render(Fixture, { props: { registry } });
-        await userEvent.click(screen.getByRole('checkbox', { name: 'Accept terms' }));
-        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
-        await userEvent.click(screen.getByRole('switch', { name: 'Notifications' }));
-        expect(screen.getByRole('switch', { name: 'Notifications' })).toBeChecked();
-        await userEvent.click(screen.getByRole('radio', { name: 'Viewer' }));
-        expect(screen.getByRole('radio', { name: 'Viewer' })).toBeChecked();
-        expect(screen.getAllByRole('slider')).toHaveLength(3);
-        await userEvent.click(screen.getByRole('radio', { name: 'List' }));
-        expect(screen.getByRole('radio', { name: 'List' })).toHaveAttribute('aria-checked', 'true');
-    });
-    it('registers all controls and keeps agent staging separate from human apply', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { registry } });
-        expect(registry.list('settings').map((item) => item.identity.controlId)).toEqual(expect.arrayContaining([
-            'accepted',
-            'notifications',
-            'role',
-            'volume',
-            'price',
-            'view',
-        ]));
-        await registry.execute({
-            action: 'stage',
-            identity: { formId: 'settings', controlId: 'volume' },
-            value: 55,
-        }, { source: 'agent' });
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('30');
-        await registry.execute({
-            action: 'apply',
-            identity: { formId: 'settings', controlId: 'volume' },
-        }, { source: 'agent', confirmed: true });
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('30');
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
-        await registry.execute({
-            action: 'stage',
-            identity: { formId: 'settings', controlId: 'volume' },
-            value: '',
-        }, { source: 'agent' });
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
-            ?.value).toBe(0);
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('0');
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged).toBeUndefined();
-    });
-    it('canonicalizes scalar proposals before exposing them for review', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { registry } });
-        for (const controlId of ['accepted', 'notes']) {
-            expect(await registry.execute({
-                action: 'stage',
-                identity: { formId: 'settings', controlId },
-                value: { malformed: true },
-            }, { source: 'agent' })).toMatchObject({ ok: false, reason: 'staged_value_invalid' });
-            expect(registry.get({ formId: 'settings', controlId })?.state.staged).toBeUndefined();
-        }
-        await registry.execute({
-            action: 'stage',
-            identity: { formId: 'settings', controlId: 'volume' },
-            value: '55',
-        }, { source: 'agent' });
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
-            ?.value).toBe(55);
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
-    });
-    it('applies decimal-step slider proposals without floating-point drift', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(DecimalSlidersFixture, { props: { registry } });
-        const valueIdentity = { formId: 'decimal', controlId: 'value' };
-        const rangeIdentity = { formId: 'decimal', controlId: 'range' };
-        const tinyIdentity = { formId: 'decimal', controlId: 'tiny' };
-        const microscopicIdentity = {
-            formId: 'decimal',
-            controlId: 'microscopic',
-        };
-        const microscopicRangeIdentity = {
-            formId: 'decimal',
-            controlId: 'microscopic-range',
-        };
-        const decimalDrift = 0.1 + 0.2;
-        const validCases = [
-            { next: 0.3, expected: 0.3, min: 0.1, max: 1, step: 0.2 },
-            { next: decimalDrift, expected: 0.3, min: 0.1, max: 1, step: 0.2 },
-            {
-                next: 3e-16,
-                expected: 3e-16,
-                min: 1e-16,
-                max: 9e-16,
-                step: 2e-16,
-            },
-            {
-                next: 3e-101,
-                expected: 3e-101,
-                min: 1e-101,
-                max: 9e-101,
-                step: 2e-101,
-            },
-            {
-                next: 1.12e-101,
-                expected: 1.12e-101,
-                min: 1e-101,
-                max: 1.9e-101,
-                step: 3e-103,
-            },
-            {
-                next: Number.MIN_VALUE * 3,
-                expected: Number.MIN_VALUE * 3,
-                min: Number.MIN_VALUE,
-                max: Number.MIN_VALUE * 5,
-                step: Number.MIN_VALUE,
-            },
-        ];
-        for (const { next, expected, min, max, step } of validCases) {
-            expect(validatesSteppedNumber(next, min, max, step)).toBe(true);
-            const snapped = snapSteppedNumber(next, min, max, step);
-            expect(snapped).toBe(expected);
-            expect(validatesSteppedNumber(snapped, min, max, step)).toBe(true);
-            expect(snapSteppedNumber(snapped, min, max, step)).toBe(snapped);
-        }
-        for (const { min, max, step } of [
-            { min: 0.1, max: 0.9, step: 0.2 },
-            { min: 1e-16, max: 9e-16, step: 2e-16 },
-            { min: 1e-101, max: 1.9e-101, step: 3e-103 },
-            {
-                min: Number.MIN_VALUE,
-                max: Number.MIN_VALUE * 5,
-                step: Number.MIN_VALUE,
-            },
-        ]) {
-            const lastIndex = Math.round((max - min) / step);
-            for (let index = 0; index <= lastIndex; index += 1) {
-                const validValue = min + index * step;
-                expect(validatesSteppedNumber(validValue, min, max, step)).toBe(true);
-                const canonical = snapSteppedNumber(validValue, min, max, step);
-                expect(validatesSteppedNumber(canonical, min, max, step)).toBe(true);
-                expect(snapSteppedNumber(canonical, min, max, step)).toBe(canonical);
-            }
-        }
-        await registry.execute({ action: 'stage', identity: valueIdentity, value: decimalDrift }, { source: 'agent' });
-        await registry.execute({ action: 'stage', identity: tinyIdentity, value: 3e-16 }, { source: 'agent' });
-        await registry.execute({ action: 'stage', identity: microscopicIdentity, value: 1.12e-101 }, { source: 'agent' });
-        await registry.execute({
-            action: 'stage',
-            identity: microscopicRangeIdentity,
-            value: { min: 1.12e-101, max: 1.9e-101 },
-        }, { source: 'agent' });
-        await registry.execute({
-            action: 'stage',
-            identity: rangeIdentity,
-            value: { min: decimalDrift, max: 0.5 },
-        }, { source: 'agent' });
-        expect(registry.get(valueIdentity)?.state.staged).toMatchObject({
-            value: 0.3,
-            valid: true,
-        });
-        expect(registry.get(rangeIdentity)?.state.staged).toMatchObject({
-            value: { min: 0.3, max: 0.5 },
-            valid: true,
-        });
-        expect(registry.get(tinyIdentity)?.state.staged).toMatchObject({
-            value: 3e-16,
-            valid: true,
-        });
-        expect(registry.get(microscopicIdentity)?.state.staged).toMatchObject({
-            value: 1.12e-101,
-            valid: true,
-        });
-        expect(registry.get(microscopicRangeIdentity)?.state.staged).toMatchObject({
-            value: { min: 1.12e-101, max: 1.9e-101 },
-            valid: true,
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Value' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Range' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Tiny value' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Microscopic value' }));
-        await userEvent.click(screen.getByRole('button', { name: 'Apply Microscopic range' }));
-        expect(registry.get(valueIdentity)?.state).toMatchObject({ value: 0.3 });
-        expect(registry.get(rangeIdentity)?.state).toMatchObject({
-            value: { min: 0.3, max: 0.5 },
-        });
-        expect(registry.get(tinyIdentity)?.state).toMatchObject({ value: 3e-16 });
-        expect(registry.get(microscopicIdentity)?.state).toMatchObject({
-            value: 1.12e-101,
-        });
-        expect(registry.get(microscopicRangeIdentity)?.state).toMatchObject({
-            value: { min: 1.12e-101, max: 1.9e-101 },
-        });
-        expect(registry.get(valueIdentity)?.state.staged).toBeUndefined();
-        expect(registry.get(rangeIdentity)?.state.staged).toBeUndefined();
-        expect(registry.get(tinyIdentity)?.state.staged).toBeUndefined();
-        expect(registry.get(microscopicIdentity)?.state.staged).toBeUndefined();
-        expect(registry.get(microscopicRangeIdentity)?.state.staged).toBeUndefined();
-        expect(screen.getByRole('slider', { name: 'Value' })).toHaveValue('0.3');
-        expect(screen.getByRole('spinbutton', { name: 'Value value' })).toHaveValue(0.3);
-        expect(screen.getByRole('slider', { name: 'Minimum' })).toHaveValue('0.3');
-        expect(screen.getByRole('slider', { name: 'Maximum' })).toHaveValue('0.5');
-        expect(screen.getByRole('slider', { name: 'Tiny value' })).toHaveValue('3e-16');
-        expect(screen.getByRole('slider', { name: 'Microscopic value' })).toHaveValue('1.12e-101');
-        expect(screen.getByRole('slider', { name: 'Microscopic minimum' })).toHaveValue('1.12e-101');
-        expect(screen.getByRole('slider', { name: 'Microscopic maximum' })).toHaveValue('1.9e-101');
-    });
-    it('marks constrained proposals invalid before the first valid-only batch', async () => {
-        const registry = createControlInteractionRegistry({
-            isLocalGesture: () => true,
-        });
-        render(Fixture, { props: { registry, validInitial: true } });
-        const invalid = new Map([
-            ['accepted', false],
-            ['notifications', false],
-            ['role', 'administrator'],
-            ['price', { min: 20, max: 83 }],
-            ['view', 'cards'],
-            ['notes', 'x'],
-            ['pinned', 'yes'],
-        ]);
-        for (const [controlId, value] of invalid) {
-            await registry.execute({
-                action: 'stage',
-                identity: { formId: 'settings', controlId },
-                value,
-            }, { source: 'agent' });
-            expect(registry.get({ formId: 'settings', controlId })?.state.staged?.valid).toBe(false);
-        }
-        await registry.execute({
-            action: 'stage',
-            identity: { formId: 'settings', controlId: 'volume' },
-            value: 12,
-        }, { source: 'agent' });
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
-            ?.valid).toBe(false);
-        await registry.execute({
-            action: 'stage',
-            identity: { formId: 'settings', controlId: 'volume' },
-            value: 55,
-        }, { source: 'agent' });
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
-            ?.valid).toBe(true);
-        expect(await screen.findAllByRole('alert')).toHaveLength(invalid.size);
-        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
-        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
-        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged).toBeUndefined();
-        for (const controlId of invalid.keys()) {
-            expect(registry.get({ formId: 'settings', controlId })?.state.staged?.valid).toBe(false);
-        }
-    });
-    it('is axe-clean as a composed form', async () => {
-        const registry = createControlInteractionRegistry();
-        const { container } = render(Fixture, { props: { registry } });
-        await expectNoA11yViolations(container);
-    });
-    it('focuses the usable control inside an error-summary target', async () => {
-        const { container } = render(ErrorSummary, {
-            props: {
-                errors: [
-                    {
-                        controlId: 'profile-photo',
-                        label: 'Profile photo',
-                        message: 'Choose a file',
-                    },
-                ],
-            },
-        });
-        const wrapper = document.createElement('div');
-        wrapper.dataset.smrtControl = 'profile-photo';
-        wrapper.scrollIntoView = () => undefined;
-        const hidden = document.createElement('input');
-        hidden.type = 'hidden';
-        const file = document.createElement('input');
-        file.type = 'file';
-        wrapper.append(hidden, file);
-        container.append(wrapper);
-        await userEvent.click(screen.getByRole('button', { name: 'Profile photo: Choose a file' }));
-        expect(file).toHaveFocus();
-    });
-});
-describe('progress feedback', () => {
-    it('distinguishes determinate and indeterminate progress', async () => {
-        const { rerender } = render(Progress, {
-            props: { label: 'Import', value: 40, showValue: true },
-        });
-        expect(screen.getByRole('progressbar', { name: 'Import' })).toHaveAttribute('aria-valuenow', '40');
-        await rerender({ label: 'Import', value: undefined });
-        expect(screen.getByRole('progressbar', { name: 'Import' })).not.toHaveAttribute('aria-valuenow');
-    });
-    it('announces a spinner label', () => {
-        render(Spinner, { props: { label: 'Saving changes' } });
-        expect(screen.getByRole('status')).toHaveTextContent('Saving changes');
-    });
-});

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-import type { ControlInteractionRegistry } from '../control-interaction.js';
-import Form from '../Form.svelte';
-import RangeSlider from '../RangeSlider.svelte';
-import Slider from '../Slider.svelte';
-
-interface Props {
-  registry: ControlInteractionRegistry;
-}
-
-let { registry }: Props = $props();
-let value = $state(0.1);
-let range = $state({ min: 0.1, max: 0.5 });
-let tinyValue = $state(1e-16);
-let microscopicValue = $state(1e-101);
-let microscopicRange = $state({ min: 1e-101, max: 1.9e-101 });
-</script>
-
-<Form formId="decimal" interactionRegistry={registry} aria-label="Decimal controls">
-  <Slider name="value" label="Value" min={0.1} max={1} step={0.2} bind:value />
-  <RangeSlider name="range" label="Range" min={0.1} max={1} step={0.2} bind:value={range} />
-  <Slider name="tiny" label="Tiny value" min={1e-16} max={9e-16} step={2e-16} bind:value={tinyValue} />
-  <Slider name="microscopic" label="Microscopic value" min={1e-101} max={1.9e-101} step={3e-103} bind:value={microscopicValue} />
-  <RangeSlider name="microscopic-range" label="Microscopic range" minLabel="Microscopic minimum" maxLabel="Microscopic maximum" min={1e-101} max={1.9e-101} step={3e-103} bind:value={microscopicRange} />
-</Form>

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { ControlInteractionRegistry } from '../control-interaction.js';
-interface Props {
-    registry: ControlInteractionRegistry;
-}
-declare const DecimalSliders: import("svelte").Component<Props, {}, "">;
-type DecimalSliders = ReturnType<typeof DecimalSliders>;
-export default DecimalSliders;
-//# sourceMappingURL=decimal-sliders.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decimal-sliders.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/decimal-sliders.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAM5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AA0BD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}