sh3-core 0.13.1 → 0.13.2

package/dist/primitives/widgets/IconToggleGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { CommitOnlyEvents } from './_contract';
 type Option = {
     value: string;
     icon: Snippet;
@@ -6,12 +7,11 @@ type Option = {
 };
 type $$ComponentProps = {
     options: Option[];
-    value: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     disabled?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: string | string[]) => void;
-};
+} & CommitOnlyEvents<string | string[]>;
 declare const IconToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
 type IconToggleGroup = ReturnType<typeof IconToggleGroup>;
 export default IconToggleGroup;

package/dist/primitives/widgets/IconToggleGroup.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/primitives/widgets/IconToggleGroup.svelte.test.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import IconToggleGroup from './IconToggleGroup.svelte';
+const blank = createRawSnippet(() => ({ render: () => '<span/>' }));
+const options = [
+    { value: 'b', icon: blank, tooltip: 'Bold' },
+    { value: 'i', icon: blank, tooltip: 'Italic' },
+    { value: 'u', icon: blank, tooltip: 'Under' },
+];
+describe('IconToggleGroup event contract', () => {
+    it('fires onchange on click in single mode', async () => {
+        const onchange = vi.fn();
+        const { getByLabelText } = render(IconToggleGroup, {
+            props: { options, value: 'b', onchange },
+        });
+        await fireEvent.click(getByLabelText('Italic'));
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('i');
+    });
+    it('defaults to first option in single mode', () => {
+        const { getByLabelText } = render(IconToggleGroup, { props: { options } });
+        const bold = getByLabelText('Bold');
+        expect(bold.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('defaults to empty array in multi mode', () => {
+        const { getByLabelText } = render(IconToggleGroup, { props: { options, multiple: true } });
+        expect(getByLabelText('Bold').getAttribute('aria-pressed')).toBe('false');
+        expect(getByLabelText('Italic').getAttribute('aria-pressed')).toBe('false');
+    });
+    it('toggles individual items in multi mode', async () => {
+        const onchange = vi.fn();
+        const { getByLabelText } = render(IconToggleGroup, {
+            props: { options, multiple: true, onchange },
+        });
+        await fireEvent.click(getByLabelText('Bold'));
+        await fireEvent.click(getByLabelText('Italic'));
+        expect(onchange).toHaveBeenLastCalledWith(['b', 'i']);
+    });
+});

package/dist/primitives/widgets/NumberInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { clamp, applyStep, formatNumber } from './NumberInput';
+  import type { LiveInputEvents } from './_contract';
+  import { clamp, applyStep } from './NumberInput';
 
   let {
     value = $bindable(0),
@@ -14,6 +15,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    oninput,
     onchange,
   }: {
     value?: number;
@@ -27,18 +29,18 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: number) => void;
-  } = $props();
-
-  const display = $derived(formatNumber(value, precision));
+  } & LiveInputEvents<number> = $props();
 
   function commit(next: number) {
     if (Number.isNaN(next)) return;
-    value = clamp(applyStep(next, { min, step }), min, max);
+    let v = clamp(applyStep(next, { min, step }), min, max);
+    if (precision !== undefined) v = Number(v.toFixed(precision));
+    value = v;
   }
 
   function bump(direction: 1 | -1) {
     commit(value + direction * step);
+    oninput?.(value);
   }
 
   let holdTimer: ReturnType<typeof setTimeout> | null = null;
@@ -82,9 +84,17 @@
       {step}
       {disabled}
       aria-invalid={invalid || undefined}
-      value={display}
-      oninput={(e) => commit(parseFloat((e.currentTarget as HTMLInputElement).value))}
-      onblur={() => onchange?.(value)}
+      value={value}
+      oninput={(e) => {
+        const raw = (e.currentTarget as HTMLInputElement).valueAsNumber;
+        if (Number.isNaN(raw)) return;
+        value = raw;
+        oninput?.(raw);
+      }}
+      onblur={() => {
+        commit(value);
+        onchange?.(value);
+      }}
     />
     {#if suffix}<span class="sh3-num__affix">{@render suffix()}</span>{/if}
     <span class="sh3-num__steppers">

package/dist/primitives/widgets/NumberInput.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { LiveInputEvents } from './_contract';
 type $$ComponentProps = {
     value?: number;
     min?: number;
@@ -11,8 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: number) => void;
-};
+} & LiveInputEvents<number>;
 declare const NumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

package/dist/primitives/widgets/NumberInput.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/primitives/widgets/NumberInput.svelte.test.js

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import NumberInput from './NumberInput.svelte';
+describe('NumberInput event contract', () => {
+    it('does not snap mid-typing when step=1', async () => {
+        const oninput = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 1, oninput } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '5' } });
+        await fireEvent.input(input, { target: { value: '5.5' } });
+        expect(oninput).toHaveBeenCalledTimes(2);
+        expect(oninput).toHaveBeenNthCalledWith(1, 5);
+        expect(oninput).toHaveBeenNthCalledWith(2, 5.5);
+    });
+    it('swallows partial parses (NaN does not call oninput)', async () => {
+        const oninput = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 1, oninput } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '' } });
+        expect(oninput).not.toHaveBeenCalled();
+    });
+    it('commits applyStep on blur and fires onchange once', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 1, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '5.5' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(6);
+    });
+    it('clamps to max on blur', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, max: 10, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '999' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledWith(10);
+    });
+    it('rounds to precision on blur', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 0.01, precision: 2, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '1.23456' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange.mock.calls[0][0]).toBeCloseTo(1.23, 5);
+    });
+});

package/dist/primitives/widgets/PickerList.d.ts

@@ -0,0 +1,24 @@
+export interface PickerItem {
+    id: string;
+    label: string;
+    /** Optional secondary line shown beneath the label in muted style. */
+    sublabel?: string;
+}
+export interface PickerListProps {
+    items: PickerItem[];
+    value: string[];
+    onchange?: (next: string[]) => void;
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    /** Empty-state message when items.length === 0 and not loading/error. */
+    emptyText?: string;
+    /** Search input is rendered when items.length >= this value. Default: 8. */
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+}
+/** Case-insensitive substring match over label, id, and sublabel. */
+export declare function filterItems(items: PickerItem[], query: string): PickerItem[];
+/** Toggle the given id in or out of value, returning a NEW array. */
+export declare function toggle(value: string[], id: string): string[];

package/dist/primitives/widgets/PickerList.js

@@ -0,0 +1,21 @@
+/** Case-insensitive substring match over label, id, and sublabel. */
+export function filterItems(items, query) {
+    if (!query)
+        return items;
+    const q = query.toLowerCase();
+    return items.filter((it) => {
+        if (it.label.toLowerCase().includes(q))
+            return true;
+        if (it.id.toLowerCase().includes(q))
+            return true;
+        if (it.sublabel && it.sublabel.toLowerCase().includes(q))
+            return true;
+        return false;
+    });
+}
+/** Toggle the given id in or out of value, returning a NEW array. */
+export function toggle(value, id) {
+    if (value.includes(id))
+        return value.filter((v) => v !== id);
+    return [...value, id];
+}

package/dist/primitives/widgets/PickerList.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import { filterItems, toggle, type PickerItem } from './PickerList';
+
+  let {
+    items,
+    value = $bindable<string[]>([]),
+    loading = false,
+    error = null,
+    onRetry,
+    emptyText = 'No items.',
+    searchThreshold = 8,
+    disabled = false,
+    size = 'md',
+    onchange,
+  }: {
+    items: PickerItem[];
+    value?: string[];
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    emptyText?: string;
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } & CommitOnlyEvents<string[]> = $props();
+
+  let query = $state('');
+  const showSearch = $derived(items.length >= searchThreshold);
+  const filtered = $derived(filterItems(items, query));
+  const totalCount = $derived(items.length);
+  const selectedCount = $derived(value.length);
+
+  function toggleId(id: string) {
+    if (disabled) return;
+    const next = toggle(value, id);
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class="sh3-picker" class:sh3-picker--sm={size === 'sm'} class:sh3-picker--disabled={disabled}>
+  {#if showSearch}
+    <input
+      type="search"
+      class="sh3-picker__search"
+      placeholder="Filter…"
+      bind:value={query}
+      {disabled}
+    />
+  {/if}
+
+  <div class="sh3-picker__list">
+    {#if loading}
+      <p class="sh3-picker__status">Loading…</p>
+    {:else if error}
+      <p class="sh3-picker__status sh3-picker__status--error">{error}</p>
+      {#if onRetry}
+        <button type="button" class="sh3-picker__retry" onclick={() => onRetry?.()}>Retry</button>
+      {/if}
+    {:else if items.length === 0}
+      <p class="sh3-picker__status">{emptyText}</p>
+    {:else}
+      {#each filtered as item (item.id)}
+        <label class="sh3-picker__row">
+          <input
+            type="checkbox"
+            checked={value.includes(item.id)}
+            {disabled}
+            onchange={() => toggleId(item.id)}
+          />
+          <span class="sh3-picker__row-text">
+            <span class="sh3-picker__row-label">{item.label}</span>
+            {#if item.sublabel}
+              <span class="sh3-picker__row-sub">{item.sublabel}</span>
+            {/if}
+          </span>
+        </label>
+      {/each}
+    {/if}
+  </div>
+
+  <p class="sh3-picker__footer">{selectedCount} of {totalCount} selected</p>
+</div>
+
+<style>
+  .sh3-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px;
+    background: var(--shell-bg-elevated);
+  }
+  .sh3-picker__search {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--shell-bg);
+    color: var(--shell-fg);
+    font: inherit;
+    font-size: 12px;
+  }
+  .sh3-picker__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .sh3-picker__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 6px;
+    cursor: pointer;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-picker__row:hover { background: var(--shell-bg); }
+  .sh3-picker__row-text { display: flex; flex-direction: column; gap: 0; }
+  .sh3-picker__row-label { font-size: 13px; }
+  .sh3-picker__row-sub { font-size: 11px; color: var(--shell-fg-muted); }
+  .sh3-picker__status {
+    margin: 0;
+    padding: 8px 6px;
+    color: var(--shell-fg-muted);
+    font-size: 12px;
+  }
+  .sh3-picker__status--error { color: var(--shell-error, #c33); }
+  .sh3-picker__retry {
+    align-self: flex-start;
+    margin: 0 6px 8px;
+    background: var(--shell-bg);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 2px 8px;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .sh3-picker__footer {
+    margin: 0;
+    font-size: 11px;
+    color: var(--shell-fg-muted);
+    text-align: right;
+  }
+  .sh3-picker--disabled .sh3-picker__row { cursor: not-allowed; opacity: 0.6; }
+</style>

package/dist/primitives/widgets/PickerList.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CommitOnlyEvents } from './_contract';
+import { type PickerItem } from './PickerList';
+type $$ComponentProps = {
+    items: PickerItem[];
+    value?: string[];
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    emptyText?: string;
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+} & CommitOnlyEvents<string[]>;
+declare const PickerList: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PickerList = ReturnType<typeof PickerList>;
+export default PickerList;

package/dist/primitives/widgets/PickerList.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/primitives/widgets/PickerList.svelte.test.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import PickerList from './PickerList.svelte';
+const items = [
+    { id: '1', label: 'One' },
+    { id: '2', label: 'Two' },
+    { id: '3', label: 'Three' },
+];
+describe('PickerList event contract', () => {
+    it('fires onchange with updated array when row toggled', async () => {
+        const onchange = vi.fn();
+        const { container } = render(PickerList, { props: { items, value: [], onchange } });
+        const checkboxes = container.querySelectorAll('input[type=checkbox]');
+        await fireEvent.click(checkboxes[1]);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(['2']);
+    });
+    it('renders loading state', () => {
+        const { getByText } = render(PickerList, { props: { items: [], loading: true } });
+        expect(getByText('Loading…')).toBeInTheDocument();
+    });
+    it('renders error state with retry button when provided', async () => {
+        const onRetry = vi.fn();
+        const { getByText } = render(PickerList, {
+            props: { items: [], error: 'Boom', onRetry },
+        });
+        expect(getByText('Boom')).toBeInTheDocument();
+        await fireEvent.click(getByText('Retry'));
+        expect(onRetry).toHaveBeenCalled();
+    });
+});

package/dist/primitives/widgets/PickerList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/primitives/widgets/PickerList.test.js

@@ -0,0 +1,218 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+import PickerList from './PickerList.svelte';
+import { filterItems, toggle } from './PickerList';
+let host;
+let cmp = null;
+beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+});
+afterEach(() => {
+    if (cmp) {
+        unmount(cmp);
+        cmp = null;
+    }
+    host.remove();
+});
+describe('filterItems', () => {
+    const items = [
+        { id: 'notes', label: 'Notes', sublabel: 'note-taking' },
+        { id: 'files', label: 'Files' },
+        { id: 'tasks', label: 'Task Manager' },
+    ];
+    it('returns everything when query is empty', () => {
+        expect(filterItems(items, '')).toEqual(items);
+    });
+    it('matches by label case-insensitively', () => {
+        expect(filterItems(items, 'note').map((i) => i.id)).toEqual(['notes']);
+        expect(filterItems(items, 'TASK').map((i) => i.id)).toEqual(['tasks']);
+    });
+    it('matches by id', () => {
+        expect(filterItems(items, 'fil').map((i) => i.id)).toEqual(['files']);
+    });
+    it('matches by sublabel', () => {
+        expect(filterItems(items, 'taking').map((i) => i.id)).toEqual(['notes']);
+    });
+    it('returns empty when nothing matches', () => {
+        expect(filterItems(items, 'zzz')).toEqual([]);
+    });
+});
+describe('toggle', () => {
+    it('adds an id when missing', () => {
+        expect(toggle(['a'], 'b')).toEqual(['a', 'b']);
+    });
+    it('removes an id when present', () => {
+        expect(toggle(['a', 'b'], 'a')).toEqual(['b']);
+    });
+    it('returns a new array (does not mutate)', () => {
+        const v = ['a'];
+        const next = toggle(v, 'b');
+        expect(v).toEqual(['a']);
+        expect(next).not.toBe(v);
+    });
+});
+describe('PickerList — rendering', () => {
+    function makeItems(n) {
+        return Array.from({ length: n }, (_, i) => ({ id: `id-${i}`, label: `Item ${i}` }));
+    }
+    it('renders one checkbox row per item', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(3), value: [] },
+        });
+        await tick();
+        const rows = host.querySelectorAll('.sh3-picker__row');
+        expect(rows.length).toBe(3);
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks.length).toBe(3);
+        expect(Array.from(checks).every((c) => !c.checked)).toBe(true);
+    });
+    it('reflects value as checked rows', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(3), value: ['id-1'] },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks[0].checked).toBe(false);
+        expect(checks[1].checked).toBe(true);
+        expect(checks[2].checked).toBe(false);
+    });
+    it('hides the search input when items.length < threshold (default 8)', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(7), value: [] },
+        });
+        await tick();
+        expect(host.querySelector('.sh3-picker__search')).toBeNull();
+    });
+    it('shows the search input when items.length >= threshold', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(8), value: [] },
+        });
+        await tick();
+        expect(host.querySelector('.sh3-picker__search')).not.toBeNull();
+    });
+    it('shows "Loading…" and hides the list when loading=true', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(2), value: [], loading: true },
+        });
+        await tick();
+        expect(host.textContent).toContain('Loading');
+        expect(host.querySelectorAll('.sh3-picker__row').length).toBe(0);
+    });
+    it('shows the error message and a Retry button when error is set', async () => {
+        let retried = false;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: [],
+                value: [],
+                error: 'boom',
+                onRetry: () => { retried = true; },
+            },
+        });
+        await tick();
+        expect(host.textContent).toContain('boom');
+        const retryBtn = host.querySelector('.sh3-picker__retry');
+        expect(retryBtn).not.toBeNull();
+        retryBtn.click();
+        expect(retried).toBe(true);
+    });
+    it('shows emptyText when items is empty and not loading/erroring', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: [], value: [], emptyText: 'No widgets.' },
+        });
+        await tick();
+        expect(host.textContent).toContain('No widgets.');
+    });
+    it('shows the selected count in the footer', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(4), value: ['id-0', 'id-2'] },
+        });
+        await tick();
+        expect(host.textContent).toMatch(/2 of 4 selected/);
+    });
+});
+describe('PickerList — interaction', () => {
+    function makeItems(n) {
+        return Array.from({ length: n }, (_, i) => ({ id: `id-${i}`, label: `Item ${i}` }));
+    }
+    it('clicking a row fires onchange with the new array', async () => {
+        let received = null;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(3),
+                value: [],
+                onchange: (next) => { received = next; },
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        checks[1].click();
+        await tick();
+        expect(received).toEqual(['id-1']);
+    });
+    it('toggling an already-selected row removes it', async () => {
+        let received = null;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(3),
+                value: ['id-1'],
+                onchange: (next) => { received = next; },
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        checks[1].click();
+        await tick();
+        expect(received).toEqual([]);
+    });
+    it('disabled blocks input', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(2),
+                value: [],
+                disabled: true,
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks[0].disabled).toBe(true);
+    });
+    it('typing in the search input filters the rendered rows but keeps value', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: [
+                    { id: 'notes', label: 'Notes' },
+                    { id: 'files', label: 'Files' },
+                    { id: 'tasks', label: 'Tasks' },
+                    { id: 'photos', label: 'Photos' },
+                    { id: 'mail', label: 'Mail' },
+                    { id: 'maps', label: 'Maps' },
+                    { id: 'calc', label: 'Calculator' },
+                    { id: 'paint', label: 'Paint' },
+                ],
+                value: ['mail'],
+            },
+        });
+        await tick();
+        const search = host.querySelector('.sh3-picker__search');
+        expect(search).not.toBeNull();
+        search.value = 'note';
+        search.dispatchEvent(new Event('input', { bubbles: true }));
+        await tick();
+        const rows = host.querySelectorAll('.sh3-picker__row');
+        expect(rows.length).toBe(1);
+        expect(rows[0].textContent).toContain('Notes');
+    });
+});