@warkypublic/svelix 0.1.36 → 0.1.37

package/dist/components/Boxer/Boxer.svelte

@@ -18,6 +18,7 @@
     clearable = true,
     data = [],
     dataSource: dataSourceProp = undefined,
+    debounceMs = 300,
     disablePortal = false,
     disabled,
     error,
@@ -28,10 +29,12 @@
     onAPICall: onAPICallProp = undefined,
     onBufferChange,
     onChange,
+    onResolveValues: onResolveValuesProp = undefined,
     openOnClear,
     pageSize = 50,
     placeholder,
     rightSection,
+    searchColumns,
     selectFirst,
     showAll,
     value = $bindable<any>(undefined),
@@ -41,13 +44,23 @@
   const inputId = `${instanceId}-input`;
   const listboxId = `${instanceId}-listbox`;
 
-  // Derive effective dataSource and onAPICall from adapter when not explicitly provided
+  // Derive effective dataSource, onAPICall, resolver from adapter when not explicitly provided.
   const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
   const onAPICall =
     onAPICallProp ??
     (adapter
-      ? (params: { page: number; pageSize: number; search?: string }) =>
-          adapter!.fetch(params)
+      ? (params: {
+          page: number;
+          pageSize: number;
+          search?: string;
+          signal?: AbortSignal;
+        }) => adapter!.fetch(params)
+      : undefined);
+  const onResolveValues =
+    onResolveValuesProp ??
+    (adapter?.resolveByValue
+      ? (values: any[], signal?: AbortSignal) =>
+          adapter!.resolveByValue!(values, signal)
       : undefined);
 
   // Create store once with initial props
@@ -63,9 +76,11 @@
     onAPICall,
     onBufferChange,
     onChange,
+    onResolveValues,
     openOnClear,
     pageSize,
     placeholder,
+    searchColumns,
     selectFirst,
     showAll,
     value,
@@ -76,6 +91,7 @@
   const storeSearch = $derived($store.search);
   const storeOpened = $derived($store.opened);
   const storeBoxerData = $derived($store.boxerData);
+  const storeSelectedItems = $derived($store.selectedItems);
   const storeInput = $derived($store.input);
   const boxerDataLength = $derived($store.boxerData.length);
 
@@ -145,62 +161,141 @@
     }
   });
 
-  // Debounced search — only reacts to actual search text changes, not unrelated store updates.
+  // Debounced search — only reacts to actual search text changes.
   let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+  let didInitialFetch = false;
 
   $effect(() => {
     const search = storeSearch;
+    // Skip the initial tick: the initial-fetch effect below handles first load.
+    if (!didInitialFetch) return;
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
       if (search !== undefined && storeOpened) {
         store.fetchData(search, true);
+        parentEl?.scrollTo?.({ top: 0 });
       }
-    }, 300);
+    }, debounceMs);
     return () => clearTimeout(searchTimeout);
   });
 
-  // Initial data fetch
+  // Initial data fetch + resolve labels for preloaded value(s).
   $effect(() => {
+    didInitialFetch = true;
     store.fetchData("", true);
+    resolvePreloadedValue(value);
+    return () => {
+      clearTimeout(searchTimeout);
+      store.cancel();
+    };
   });
 
-  // Sync value -> input label
+  let lastResolvedKey: string | null = null;
+  async function resolvePreloadedValue(val: unknown) {
+    if (val == null || val === "" || (Array.isArray(val) && val.length === 0)) return;
+    if (!onResolveValues) return;
+
+    const values = Array.isArray(val) ? val : [val];
+    const key = JSON.stringify(values);
+    if (key === lastResolvedKey) return;
+    lastResolvedKey = key;
+
+    try {
+      const items = await onResolveValues(values);
+      if (!items || items.length === 0) return;
+      if (multiSelect) {
+        store.setSelectedItems(items);
+      } else {
+        store.setSelectedItems(items.slice(0, 1));
+      }
+    } catch (err) {
+      console.error("Boxer resolveByValue error:", err);
+    }
+  }
+
+  // When value prop changes from outside, resolve any new labels we don't yet have.
   $effect(() => {
-    const boxerData = storeBoxerData;
+    void value;
+    untrack(() => {
+      if (value == null) {
+        store.clearSelectedItems();
+        return;
+      }
+      const knownKeys = new Set(
+        $store.selectedItems.map((i) => JSON.stringify(i.value)),
+      );
+      const needed = (Array.isArray(value) ? value : [value]).filter(
+        (v) => !knownKeys.has(JSON.stringify(v)),
+      );
+      if (needed.length === 0) {
+        if (!multiSelect) {
+          // Keep the single-item list in sync with the chosen value.
+          const match = $store.selectedItems.find(
+            (i) => JSON.stringify(i.value) === JSON.stringify(value),
+          );
+          if (match) store.setSelectedItems([match]);
+        } else {
+          // Drop any selected items whose value is no longer in `value`.
+          const keep = new Set((value as any[]).map((v) => JSON.stringify(v)));
+          const filtered = $store.selectedItems.filter((i) =>
+            keep.has(JSON.stringify(i.value)),
+          );
+          if (filtered.length !== $store.selectedItems.length) {
+            store.setSelectedItems(filtered);
+          }
+        }
+        return;
+      }
+      // Fall back to boxerData, then to the resolver.
+      const fromBoxer = $store.boxerData.filter((i) =>
+        needed.some((v) => JSON.stringify(v) === JSON.stringify(i.value)),
+      );
+      fromBoxer.forEach((i) => store.addSelectedItem(i));
+      const stillMissing = needed.filter(
+        (v) => !fromBoxer.some((i) => JSON.stringify(i.value) === JSON.stringify(v)),
+      );
+      if (stillMissing.length > 0) resolvePreloadedValue(stillMissing);
+    });
+  });
+
+  // Sync displayed input + emit onBufferChange from selectedItems (single source of truth).
+  $effect(() => {
+    const selected = storeSelectedItems;
     const opened = storeOpened;
     const currentInput = storeInput;
 
     if (multiSelect) {
-      const labels = boxerData
-        .filter(
-          (item: BoxerItem) =>
-            Array.isArray(value) && value.includes(item.value),
-        )
-        .map((item: BoxerItem) => item.label)
-        .join(", ");
-      if (!opened && currentInput !== labels) {
-        store.setInput(labels);
-      }
+      const labels = selected.map((i) => i.label).join(", ");
+      if (!opened && currentInput !== labels) store.setInput(labels);
+      onBufferChange?.(selected);
     } else {
-      const found = boxerData.find((item: BoxerItem) => item.value === value);
-      if (found && currentInput !== found.label && !opened) {
-        store.setInput(found.label);
-      } else if (!value && !opened && currentInput !== "") {
+      const item = selected[0] ?? null;
+      if (item && currentInput !== item.label && !opened) {
+        store.setInput(item.label);
+      } else if (!item && !opened && currentInput !== "") {
         store.setInput("");
       }
+      onBufferChange?.(item);
     }
+  });
 
-    // Buffer change
-    if (multiSelect) {
-      const buffer = boxerData.filter(
-        (item: BoxerItem) => Array.isArray(value) && value.includes(item.value),
+  // When data arrives, opportunistically enrich selectedItems for multiselect
+  // (adds labels for items that just loaded).
+  $effect(() => {
+    const boxerData = storeBoxerData;
+    if (!multiSelect || !Array.isArray(value) || value.length === 0) return;
+    untrack(() => {
+      const known = new Set(
+        $store.selectedItems.map((i) => JSON.stringify(i.value)),
       );
-      onBufferChange?.(buffer);
-    } else {
-      const buffer =
-        boxerData.find((item: BoxerItem) => item.value === value) ?? null;
-      onBufferChange?.(buffer);
-    }
+      for (const v of value as any[]) {
+        if (known.has(JSON.stringify(v))) continue;
+        const match = boxerData.find(
+          (i) => JSON.stringify(i.value) === JSON.stringify(v),
+        );
+        if (match) store.addSelectedItem(match);
+      }
+    });
   });
 
   // Select first
@@ -220,17 +315,17 @@
     if (multiSelect) {
       const currentValues = Array.isArray(value) ? value : [];
       const isSelected = currentValues.includes(option.value);
-      const newValues = isSelected
-        ? currentValues.filter((v: unknown) => v !== option.value)
-        : [...currentValues, option.value];
-      value = newValues;
-      onChange?.(newValues);
-      const newBuffer = $store.boxerData.filter((item: BoxerItem) =>
-        newValues.includes(item.value),
-      );
-      onBufferChange?.(newBuffer);
+      if (isSelected) {
+        value = currentValues.filter((v: unknown) => v !== option.value);
+        store.removeSelectedItem(option.value);
+      } else {
+        value = [...currentValues, option.value];
+        store.addSelectedItem(option);
+      }
+      onChange?.(value);
     } else {
       value = option.value;
+      store.setSelectedItems([option]);
       onChange?.(option.value);
       store.setSearch("");
       store.setInput(option.label);
@@ -244,6 +339,7 @@
       onOptionSubmit(0);
     } else {
       value = multiSelect ? [] : null;
+      store.clearSelectedItems();
       onChange?.(value);
       store.setSearch("");
       store.setInput("");
@@ -256,8 +352,11 @@
   }
 
   function focusDropdownItem(index: number) {
-    const clamped = Math.max(0, Math.min(index, $store.boxerData.length - 1));
+    const length = $store.boxerData.length;
+    if (length === 0) return;
+    const clamped = Math.max(0, Math.min(index, length - 1));
     activeOptionIndex = clamped;
+    rawVirtualizer?.scrollToIndex(clamped, { align: "auto" });
     requestAnimationFrame(() => {
       const el = parentEl?.querySelector<HTMLDivElement>(
         `[data-index="${clamped}"]`,
@@ -314,10 +413,13 @@
   }
 
   function onDropdownItemKeydown(e: KeyboardEvent, index: number) {
+    const length = $store.boxerData.length;
+    const pageSizeNav = Math.max(1, Math.floor(mah / 36));
+
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        if (index < $store.boxerData.length - 1) focusDropdownItem(index + 1);
+        if (index < length - 1) focusDropdownItem(index + 1);
         break;
       case "ArrowUp":
         e.preventDefault();
@@ -328,6 +430,22 @@
           focusDropdownItem(index - 1);
         }
         break;
+      case "Home":
+        e.preventDefault();
+        focusDropdownItem(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusDropdownItem(length - 1);
+        break;
+      case "PageDown":
+        e.preventDefault();
+        focusDropdownItem(Math.min(length - 1, index + pageSizeNav));
+        break;
+      case "PageUp":
+        e.preventDefault();
+        focusDropdownItem(Math.max(0, index - pageSizeNav));
+        break;
       case "Enter":
       case " ":
         e.preventDefault();
@@ -402,9 +520,13 @@
     return value;
   }
   export function open() {
+    if (disabled) return;
     store.setOpened(true);
     activeOptionIndex = null;
   }
+  export function refetch() {
+    return store.refetch();
+  }
   export function setValue(val: unknown) {
     value = val;
     onChange?.(val);
@@ -504,7 +626,7 @@
     {clearable}
     controlsId={listboxId}
     {disabled}
-    {error}
+    error={error ?? $store.error ?? undefined}
     expanded={$store.opened}
     {inputId}
     {label}
@@ -555,7 +677,23 @@
         style:left={!effectiveDisablePortal ? `${popupLeft}px` : undefined}
         style:width={!effectiveDisablePortal ? `${popupWidth}px` : undefined}
       >
-        {#if $store.boxerData.length > 0}
+        {#if $store.error}
+          <div
+            aria-live="polite"
+            class="px-3 py-2 text-sm text-error-500 flex items-center justify-between gap-2"
+            data-testid="boxer-error"
+            role="alert"
+          >
+            <span>{$store.error}</span>
+            <button
+              class="btn btn-sm preset-tonal"
+              type="button"
+              onclick={() => store.refetch()}
+            >
+              retry
+            </button>
+          </div>
+        {:else if $store.boxerData.length > 0}
           <div
             bind:this={parentEl}
             class="overflow-auto"
@@ -603,6 +741,15 @@
               </div>
             </div>
           </div>
+        {:else if $store.isFetching}
+          <div
+            aria-live="polite"
+            class="px-3 py-2 text-sm text-surface-500"
+            data-testid="boxer-loading"
+            role="status"
+          >
+            loading...
+          </div>
         {:else}
           <div
             aria-live="polite"

package/dist/components/Boxer/Boxer.svelte.d.ts

@@ -5,6 +5,7 @@ declare const Boxer: import("svelte").Component<BoxerProps, {
     focus: () => void;
     getValue: () => any;
     open: () => void;
+    refetch: () => Promise<void>;
     setValue: (val: unknown) => void;
 }, "value">;
 type Boxer = ReturnType<typeof Boxer>;

package/dist/components/Boxer/BoxerBaseAdapter.d.ts

@@ -0,0 +1,31 @@
+import type { Options } from '@warkypublic/resolvespec-js';
+import type { BoxerAdapterConfig, BoxerFetchParams, BoxerItem, BoxerServerAdapter } from './types.js';
+type ReadFn = (schema: string, entity: string, id: undefined, options: Options) => Promise<any>;
+interface ResolvedAdapterConfig extends BoxerAdapterConfig {
+    labelField: string;
+    valueField: string;
+    searchOperator: string;
+}
+/**
+ * Shared implementation for server-backed adapters. Subclasses plug in a
+ * concrete resolvespec client by providing a `read` function.
+ */
+export declare abstract class BoxerBaseAdapter implements BoxerServerAdapter {
+    protected readonly config: ResolvedAdapterConfig;
+    constructor(config: BoxerAdapterConfig);
+    protected abstract read: ReadFn;
+    fetch({ page, pageSize, search, signal }: BoxerFetchParams): Promise<{
+        data: BoxerItem[];
+        total: number;
+    }>;
+    resolveByValue(values: any[], signal?: AbortSignal): Promise<BoxerItem[]>;
+    private resolveColumns;
+    /**
+     * Each search column is emitted with `logic_operator: 'OR'` so the backend
+     * treats them as a single OR group, AND-combined with any base filters.
+     * This matches the convention used elsewhere in the project (see SvarkGrid).
+     */
+    private buildSearchFilters;
+    private mapRow;
+}
+export {};

package/dist/components/Boxer/BoxerBaseAdapter.js

@@ -0,0 +1,83 @@
+/**
+ * Shared implementation for server-backed adapters. Subclasses plug in a
+ * concrete resolvespec client by providing a `read` function.
+ */
+export class BoxerBaseAdapter {
+    config;
+    constructor(config) {
+        this.config = {
+            labelField: 'label',
+            valueField: 'id',
+            searchOperator: 'ilike',
+            ...config,
+        };
+    }
+    async fetch({ page, pageSize, search, signal }) {
+        signal?.throwIfAborted?.();
+        const { schema, entity, labelField, valueField, columns, sort, filters, searchColumns, searchOperator, mapItem } = this.config;
+        const cols = this.resolveColumns(columns, labelField, valueField);
+        const searchFilters = this.buildSearchFilters(search, labelField, searchColumns, searchOperator);
+        const options = {
+            columns: cols,
+            sort: sort ?? [],
+            filters: [...(filters ?? []), ...searchFilters],
+            limit: pageSize,
+            offset: page * pageSize,
+        };
+        const response = await this.read(schema, entity, undefined, options);
+        signal?.throwIfAborted?.();
+        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
+        const total = response?.metadata?.total ?? rows.length;
+        return {
+            data: rows.map((row) => this.mapRow(row, labelField, valueField, mapItem)),
+            total,
+        };
+    }
+    async resolveByValue(values, signal) {
+        if (!values || values.length === 0)
+            return [];
+        signal?.throwIfAborted?.();
+        const { schema, entity, labelField, valueField, columns, filters, mapItem } = this.config;
+        const cols = this.resolveColumns(columns, labelField, valueField);
+        const response = await this.read(schema, entity, undefined, {
+            columns: cols,
+            filters: [
+                ...(filters ?? []),
+                { column: valueField, operator: 'in', value: values },
+            ],
+            limit: values.length,
+            offset: 0,
+        });
+        signal?.throwIfAborted?.();
+        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
+        return rows.map((row) => this.mapRow(row, labelField, valueField, mapItem));
+    }
+    resolveColumns(columns, labelField, valueField) {
+        if (!columns)
+            return undefined;
+        return [...new Set([...columns, labelField, valueField])];
+    }
+    /**
+     * Each search column is emitted with `logic_operator: 'OR'` so the backend
+     * treats them as a single OR group, AND-combined with any base filters.
+     * This matches the convention used elsewhere in the project (see SvarkGrid).
+     */
+    buildSearchFilters(search, labelField, searchColumns, searchOperator) {
+        const trimmed = search?.trim();
+        if (!trimmed)
+            return [];
+        const cols = searchColumns?.length ? searchColumns : [labelField];
+        const value = searchOperator === 'ilike' || searchOperator === 'like' ? `%${trimmed}%` : trimmed;
+        return cols.map((column) => ({
+            column,
+            operator: searchOperator,
+            value,
+            logic_operator: 'OR',
+        }));
+    }
+    mapRow(row, labelField, valueField, mapItem) {
+        if (mapItem)
+            return mapItem(row);
+        return { ...row, label: String(row[labelField] ?? ''), value: row[valueField] };
+    }
+}

package/dist/components/Boxer/BoxerResolveSpecAdapter.d.ts

@@ -1,17 +1,8 @@
-import type { BoxerAdapterConfig, BoxerItem, BoxerServerAdapter } from './types.js';
-export declare class BoxerResolveSpecAdapter implements BoxerServerAdapter {
+import type { Options } from '@warkypublic/resolvespec-js';
+import { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
+import type { BoxerAdapterConfig } from './types.js';
+export declare class BoxerResolveSpecAdapter extends BoxerBaseAdapter {
     private readonly client;
-    private readonly config;
     constructor(config: BoxerAdapterConfig);
-    fetch({ page, pageSize, search }: {
-        page: number;
-        pageSize: number;
-        search?: string;
-    }): Promise<{
-        data: BoxerItem[];
-        total: number;
-    }>;
-    private resolveColumns;
-    private buildSearchFilters;
-    private mapRow;
+    protected read: (schema: string, entity: string, id: undefined, options: Options) => Promise<any>;
 }

package/dist/components/Boxer/BoxerResolveSpecAdapter.js

@@ -1,56 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ResolveSpecClient } from '@warkypublic/resolvespec-js';
-export class BoxerResolveSpecAdapter {
+import { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
+export class BoxerResolveSpecAdapter extends BoxerBaseAdapter {
     client;
-    config;
     constructor(config) {
+        super(config);
         this.client = new ResolveSpecClient({ baseUrl: config.baseUrl, token: config.token });
-        this.config = {
-            labelField: 'label',
-            valueField: 'id',
-            searchOperator: 'ilike',
-            ...config,
-        };
-    }
-    async fetch({ page, pageSize, search }) {
-        const { schema, entity, labelField, valueField, columns, sort, filters, searchColumns, searchOperator, mapItem } = this.config;
-        const cols = this.resolveColumns(columns, labelField, valueField);
-        const searchFilters = this.buildSearchFilters(search, labelField, searchColumns, searchOperator);
-        const options = {
-            columns: cols,
-            sort: sort ?? [],
-            filters: [...(filters ?? []), ...searchFilters],
-            limit: pageSize,
-            offset: page * pageSize,
-        };
-        const response = await this.client.read(schema, entity, undefined, options);
-        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
-        const total = response?.metadata?.total ?? rows.length;
-        return {
-            data: rows.map((row) => this.mapRow(row, labelField, valueField, mapItem)),
-            total,
-        };
-    }
-    resolveColumns(columns, labelField, valueField) {
-        if (!columns)
-            return undefined;
-        return [...new Set([...columns, labelField, valueField])];
-    }
-    buildSearchFilters(search, labelField, searchColumns, searchOperator) {
-        const trimmed = search?.trim();
-        if (!trimmed)
-            return [];
-        const cols = searchColumns?.length ? searchColumns : [labelField];
-        return cols.map((column, index) => ({
-            column,
-            operator: searchOperator,
-            value: `%${trimmed}%`,
-            logic_operator: index === 0 ? 'AND' : 'OR',
-        }));
-    }
-    mapRow(row, labelField, valueField, mapItem) {
-        if (mapItem)
-            return mapItem(row);
-        return { ...row, label: String(row[labelField] ?? ''), value: row[valueField] };
     }
+    read = (schema, entity, id, options) => {
+        return this.client.read(schema, entity, id, options);
+    };
 }

package/dist/components/Boxer/BoxerRestHeaderSpecAdapter.d.ts

@@ -1,17 +1,8 @@
-import type { BoxerAdapterConfig, BoxerItem, BoxerServerAdapter } from './types.js';
-export declare class BoxerRestHeaderSpecAdapter implements BoxerServerAdapter {
+import type { Options } from '@warkypublic/resolvespec-js';
+import { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
+import type { BoxerAdapterConfig } from './types.js';
+export declare class BoxerRestHeaderSpecAdapter extends BoxerBaseAdapter {
     private readonly client;
-    private readonly config;
     constructor(config: BoxerAdapterConfig);
-    fetch({ page, pageSize, search }: {
-        page: number;
-        pageSize: number;
-        search?: string;
-    }): Promise<{
-        data: BoxerItem[];
-        total: number;
-    }>;
-    private resolveColumns;
-    private buildSearchFilters;
-    private mapRow;
+    protected read: (schema: string, entity: string, id: undefined, options: Options) => Promise<any>;
 }

package/dist/components/Boxer/BoxerRestHeaderSpecAdapter.js

@@ -1,56 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HeaderSpecClient } from '@warkypublic/resolvespec-js';
-export class BoxerRestHeaderSpecAdapter {
+import { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
+export class BoxerRestHeaderSpecAdapter extends BoxerBaseAdapter {
     client;
-    config;
     constructor(config) {
+        super(config);
         this.client = new HeaderSpecClient({ baseUrl: config.baseUrl, token: config.token });
-        this.config = {
-            labelField: 'label',
-            valueField: 'id',
-            searchOperator: 'ilike',
-            ...config,
-        };
-    }
-    async fetch({ page, pageSize, search }) {
-        const { schema, entity, labelField, valueField, columns, sort, filters, searchColumns, searchOperator, mapItem } = this.config;
-        const cols = this.resolveColumns(columns, labelField, valueField);
-        const searchFilters = this.buildSearchFilters(search, labelField, searchColumns, searchOperator);
-        const options = {
-            columns: cols,
-            sort: sort ?? [],
-            filters: [...(filters ?? []), ...searchFilters],
-            limit: pageSize,
-            offset: page * pageSize,
-        };
-        const response = await this.client.read(schema, entity, undefined, options);
-        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
-        const total = response?.metadata?.total ?? rows.length;
-        return {
-            data: rows.map((row) => this.mapRow(row, labelField, valueField, mapItem)),
-            total,
-        };
-    }
-    resolveColumns(columns, labelField, valueField) {
-        if (!columns)
-            return undefined;
-        return [...new Set([...columns, labelField, valueField])];
-    }
-    buildSearchFilters(search, labelField, searchColumns, searchOperator) {
-        const trimmed = search?.trim();
-        if (!trimmed)
-            return [];
-        const cols = searchColumns?.length ? searchColumns : [labelField];
-        return cols.map((column, index) => ({
-            column,
-            operator: searchOperator,
-            value: `%${trimmed}%`,
-            logic_operator: index === 0 ? 'AND' : 'OR',
-        }));
-    }
-    mapRow(row, labelField, valueField, mapItem) {
-        if (mapItem)
-            return mapItem(row);
-        return { ...row, label: String(row[labelField] ?? ''), value: row[valueField] };
     }
+    read = (schema, entity, id, options) => {
+        return this.client.read(schema, entity, id, options);
+    };
 }