@warkypublic/svelix 0.1.38 → 0.1.40

package/dist/components/Gridler/components/GridlerFullWithFormerPreview.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+  import GridlerFull from './GridlerFull.svelte';
+  import FormerDrawer from '../../Former/FormerDrawer.svelte';
+  import TextInputCtrl from '../../FormerControllers/TextInputCtrl.svelte';
+  import NumberInputCtrl from '../../FormerControllers/NumberInputCtrl.svelte';
+  import NativeSelectCtrl from '../../FormerControllers/NativeSelectCtrl.svelte';
+  import type { FormRequestType } from '../../Former/types';
+  import type { GridlerContextMenuItem } from '../types';
+  import IconEdit from '../../Icons/IconEdit.svelte';
+  import IconTrash from '../../Icons/IconTrash.svelte';
+  import { iconAddSvg, iconEditSvg, iconTrashSvg } from '../../Icons/strings';
+
+  interface EmployeeRow {
+    id: number;
+    name: string;
+    email: string;
+    department: string;
+    salary: number;
+    status: string;
+  }
+
+  const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
+  const STATUSES = ['Active', 'Pending', 'Inactive'];
+  const FIRST = ['Alice', 'Bob', 'Carol', 'David', 'Eve', 'Frank', 'Grace', 'Henry'];
+  const LAST = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia'];
+
+  function makeRow(i: number): EmployeeRow {
+    const first = FIRST[i % FIRST.length];
+    const last = LAST[Math.floor(i / FIRST.length) % LAST.length];
+    return {
+      id: i + 1,
+      name: `${first} ${last}`,
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+      department: DEPARTMENTS[i % DEPARTMENTS.length],
+      salary: 40000 + (i % 60) * 1000,
+      status: STATUSES[i % STATUSES.length],
+    };
+  }
+
+  const columns = [
+    { id: 'id', title: 'ID', width: 70 },
+    { id: 'name', title: 'Name', width: 180 },
+    { id: 'email', title: 'Email', width: 220 },
+    { id: 'department', title: 'Department', width: 150 },
+    { id: 'salary', title: 'Salary', width: 110 },
+    { id: 'status', title: 'Status', width: 110 },
+  ];
+
+  const departmentOptions = DEPARTMENTS.map((d) => ({ label: d, value: d }));
+  const statusOptions = STATUSES.map((s) => ({ label: s, value: s }));
+
+  let nextId = 51;
+  let rows = $state<Record<string, unknown>[]>(
+    Array.from({ length: 50 }, (_, i) => makeRow(i) as unknown as Record<string, unknown>),
+  );
+
+  // ── Drawer state ─────────────────────────────────────────────────────────────
+
+  let drawerOpen = $state(false);
+  let formMode = $state<FormRequestType>('update');
+  let formValues = $state<EmployeeRow | undefined>(undefined);
+  let lastSaved = $state<EmployeeRow | undefined>(undefined);
+
+  function openForm(mode: FormRequestType, row?: EmployeeRow) {
+    formMode = mode;
+    formValues = row ? { ...row } : { id: 0, name: '', email: '', department: '', salary: 50000, status: 'Active' };
+    drawerOpen = true;
+  }
+
+  const drawerTitle = $derived(
+    formMode === 'insert' ? 'Add Employee' : formMode === 'delete' ? 'Delete Employee' : 'Edit Employee',
+  );
+
+  // ── Selection tracking ────────────────────────────────────────────────────────
+
+  let selectedItems = $state<Record<string, unknown>[]>([]);
+
+  function firstSelected(): EmployeeRow | undefined {
+    const item = selectedItems[0];
+    return item ? (item as unknown as EmployeeRow) : undefined;
+  }
+
+  // ── Burger menu items ─────────────────────────────────────────────────────────
+
+  const menuItems: GridlerContextMenuItem[] = [
+    { id: 'add', label: 'Add', icon: iconAddSvg, kind: 'item', onselect: () => openForm('insert') },
+    { id: 'sep1', label: '', kind: 'separator' },
+    {
+      id: 'edit',
+      label: 'Edit Selected',
+      icon: iconEditSvg,
+      kind: 'item',
+      onselect: () => {
+        const row = firstSelected();
+        if (row) openForm('update', row);
+      },
+    },
+    {
+      id: 'delete',
+      label: 'Delete Selected',
+      icon: iconTrashSvg,
+      kind: 'item',
+      onselect: () => {
+        const row = firstSelected();
+        if (row) openForm('delete', row);
+      },
+    },
+  ];
+
+  // ── Context menu (right-click on row) ─────────────────────────────────────────
+
+  let ctxVisible = $state(false);
+  let ctxX = $state(0);
+  let ctxY = $state(0);
+  let ctxRow = $state<EmployeeRow | undefined>(undefined);
+  let wrapperEl = $state<HTMLElement | null>(null);
+  let lastMousePos = { x: 0, y: 0 };
+
+  // Capture phase fires before the canvas handler, so lastMousePos is fresh when
+  // onRowContextMenu calls showContextMenu.
+  $effect(() => {
+    if (!wrapperEl) return;
+    const handler = (e: MouseEvent) => { lastMousePos = { x: e.clientX, y: e.clientY }; };
+    wrapperEl.addEventListener('contextmenu', handler, true);
+    return () => wrapperEl?.removeEventListener('contextmenu', handler, true);
+  });
+
+  function showContextMenu(rowData: Record<string, unknown> | undefined) {
+    if (!rowData) return;
+    ctxRow = rowData as unknown as EmployeeRow;
+    ctxX = lastMousePos.x;
+    ctxY = lastMousePos.y;
+    ctxVisible = true;
+
+    const close = () => {
+      ctxVisible = false;
+      document.removeEventListener('click', close, true);
+      document.removeEventListener('keydown', closeOnEsc, true);
+    };
+    const closeOnEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    setTimeout(() => {
+      document.addEventListener('click', close, true);
+      document.addEventListener('keydown', closeOnEsc, true);
+    }, 0);
+  }
+</script>
+
+<div class="p-4 space-y-2" bind:this={wrapperEl}>
+  <p class="text-sm text-surface-600-300-token">
+    Double-click a row to edit · Right-click for context menu · Use ☰ for Add / Edit / Delete
+  </p>
+
+  <GridlerFull
+    {columns}
+    data={rows}
+    height={480}
+    uniqueID="id"
+    rowMarkers="number"
+    {menuItems}
+    onRowDblClick={(_row, rowData) => rowData && openForm('update', rowData as unknown as EmployeeRow)}
+    onRowContextMenu={(_row, rowData) => showContextMenu(rowData)}
+    onSelectedItemsChange={(items) => (selectedItems = items)}
+  />
+
+  <!-- Context menu popup -->
+  {#if ctxVisible}
+    <div
+      role="menu"
+      class="ctx-menu"
+      style="left:{ctxX}px;top:{ctxY}px;"
+    >
+      <button
+        role="menuitem"
+        class="ctx-item"
+        onclick={() => { ctxVisible = false; openForm('update', ctxRow); }}
+      >
+        <IconEdit size={15} />
+        Edit
+      </button>
+      <button
+        role="menuitem"
+        class="ctx-item ctx-item--danger"
+        onclick={() => { ctxVisible = false; openForm('delete', ctxRow); }}
+      >
+        <IconTrash size={15} />
+        Delete
+      </button>
+    </div>
+  {/if}
+
+  <FormerDrawer
+    bind:opened={drawerOpen}
+    bind:values={formValues}
+    request={formMode}
+    uniqueKeyField="id"
+    layout={{ title: drawerTitle, buttonArea: 'bottom' }}
+    onAPICall={async (_mode, _req, data) => {
+      await new Promise((r) => setTimeout(r, 400));
+      return data as EmployeeRow;
+    }}
+    afterSave={(data) => {
+      const saved = data as EmployeeRow;
+      lastSaved = saved;
+      if (formMode === 'insert') {
+        saved.id = nextId++;
+        rows = [...rows, saved as unknown as Record<string, unknown>];
+      } else if (formMode === 'delete') {
+        rows = rows.filter((r) => r['id'] !== saved.id);
+      } else {
+        const rec = saved as unknown as Record<string, unknown>;
+        rows = rows.map((r) => (r['id'] === saved.id ? { ...rec } : r));
+      }
+    }}
+    onClose={() => { drawerOpen = false; }}
+  >
+    {#snippet children(state)}
+      {@const isReadonly = state.request === 'delete'}
+      <div class="p-6 space-y-4">
+        <TextInputCtrl
+          label="Name"
+          name="name"
+          value={state.values?.name ?? ''}
+          required
+          disabled={isReadonly}
+          onchange={(v) => state.setState('values', { ...state.values, name: v })}
+        />
+        <TextInputCtrl
+          label="Email"
+          name="email"
+          type="email"
+          value={state.values?.email ?? ''}
+          required
+          disabled={isReadonly}
+          onchange={(v) => state.setState('values', { ...state.values, email: v })}
+        />
+        <div class="grid grid-cols-2 gap-4">
+          <NativeSelectCtrl
+            label="Department"
+            name="department"
+            value={state.values?.department ?? ''}
+            options={departmentOptions}
+            disabled={isReadonly}
+            onchange={(v) => state.setState('values', { ...state.values, department: v })}
+          />
+          <NativeSelectCtrl
+            label="Status"
+            name="status"
+            value={state.values?.status ?? ''}
+            options={statusOptions}
+            disabled={isReadonly}
+            onchange={(v) => state.setState('values', { ...state.values, status: v })}
+          />
+        </div>
+        <NumberInputCtrl
+          label="Salary"
+          name="salary"
+          value={state.values?.salary}
+          min={0}
+          disabled={isReadonly}
+          onchange={(v) => state.setState('values', { ...state.values, salary: v })}
+        />
+      </div>
+    {/snippet}
+  </FormerDrawer>
+
+  {#if lastSaved}
+    <div class="card p-4">
+      <p class="font-semibold text-sm mb-2">Last saved:</p>
+      <pre class="text-xs overflow-auto">{JSON.stringify(lastSaved, null, 2)}</pre>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ctx-menu {
+    position: fixed;
+    z-index: 9999;
+    min-width: 160px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+    padding: 4px;
+    font-family: system-ui, sans-serif;
+    font-size: 13px;
+  }
+
+  :global(.dark) .ctx-menu {
+    background: #1e293b;
+    border-color: #334155;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  .ctx-item {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    width: 100%;
+    padding: 7px 10px;
+    background: none;
+    border: none;
+    border-radius: 5px;
+    text-align: left;
+    cursor: pointer;
+    color: #1e293b;
+    font-size: inherit;
+    font-family: inherit;
+    transition: background 120ms;
+  }
+
+  :global(.dark) .ctx-item {
+    color: #e2e8f0;
+  }
+
+  .ctx-item:hover {
+    background: #f1f5f9;
+  }
+
+  :global(.dark) .ctx-item:hover {
+    background: #334155;
+  }
+
+  .ctx-item--danger {
+    color: #dc2626;
+  }
+
+  :global(.dark) .ctx-item--danger {
+    color: #f87171;
+  }
+
+  .ctx-item--danger:hover {
+    background: #fef2f2;
+  }
+
+  :global(.dark) .ctx-item--danger:hover {
+    background: #450a0a;
+  }
+</style>

package/dist/components/Gridler/components/GridlerFullWithFormerPreview.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const GridlerFullWithFormerPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type GridlerFullWithFormerPreview = ReturnType<typeof GridlerFullWithFormerPreview>;
+export default GridlerFullWithFormerPreview;

package/dist/components/Gridler/components/GridlerSearch.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   // @ts-nocheck
+  import IconClose from '../../Icons/IconClose.svelte';
   interface Props {
     value: string;
     onValueChange: (v: string) => void;
@@ -35,10 +36,7 @@
       aria-label="Clear search"
       onclick={() => { onValueChange(''); inputRef?.focus(); }}
     >
-      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-        <line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-        <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-      </svg>
+      <IconClose size={10} />
     </button>
   {/if}
 </div>

package/dist/components/Gridler/components/GridlerSearchToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import GridlerSearch from './GridlerSearch.svelte';
+  import IconSearch from '../../Icons/IconSearch.svelte';
 
   interface Props {
     show: boolean;
@@ -19,10 +20,7 @@
   aria-label={show ? "Close search" : "Open search"}
   onclick={onToggle}
 >
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-    <circle cx="5.5" cy="5.5" r="4" stroke="currentColor" stroke-width="1.5" />
-    <line x1="9" y1="9" x2="13" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-  </svg>
+  <IconSearch size={14} />
 </button>
 
 {#if show}

package/dist/components/Gridler/types.d.ts

@@ -152,6 +152,7 @@ export interface GridlerContextMenuItem {
     id: string;
     label: string;
     disabled?: boolean;
+    icon?: string;
     /** Use 'separator' to render a divider line. */
     kind?: 'item' | 'separator';
     onselect?: () => void;

package/dist/components/Icons/IconAdd.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <circle cx="12" cy="12" r="9"/>
+  <path d="M12 8v8M8 12h8"/>
+</svg>

package/dist/components/Icons/IconAdd.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconAdd: import("svelte").Component<Props, {}, "">;
+type IconAdd = ReturnType<typeof IconAdd>;
+export default IconAdd;

package/dist/components/Icons/IconAlertCircle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <circle cx="12" cy="12" r="10"/>
+  <line x1="12" y1="8" x2="12" y2="12"/>
+  <line x1="12" y1="16" x2="12.01" y2="16"/>
+</svg>

package/dist/components/Icons/IconAlertCircle.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconAlertCircle: import("svelte").Component<Props, {}, "">;
+type IconAlertCircle = ReturnType<typeof IconAlertCircle>;
+export default IconAlertCircle;

package/dist/components/Icons/IconAlertTriangle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <path d="m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z"/>
+  <line x1="12" y1="9" x2="12" y2="13"/>
+  <line x1="12" y1="17" x2="12.01" y2="17"/>
+</svg>

package/dist/components/Icons/IconAlertTriangle.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconAlertTriangle: import("svelte").Component<Props, {}, "">;
+type IconAlertTriangle = ReturnType<typeof IconAlertTriangle>;
+export default IconAlertTriangle;

package/dist/components/Icons/IconCamera.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
+  <circle cx="12" cy="13" r="3"/>
+</svg>

package/dist/components/Icons/IconCamera.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconCamera: import("svelte").Component<Props, {}, "">;
+type IconCamera = ReturnType<typeof IconCamera>;
+export default IconCamera;

package/dist/components/Icons/IconClose.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <path d="M18 6 6 18M6 6l12 12"/>
+</svg>

package/dist/components/Icons/IconClose.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconClose: import("svelte").Component<Props, {}, "">;
+type IconClose = ReturnType<typeof IconClose>;
+export default IconClose;

package/dist/components/Icons/IconEdit.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+  <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+</svg>

package/dist/components/Icons/IconEdit.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconEdit: import("svelte").Component<Props, {}, "">;
+type IconEdit = ReturnType<typeof IconEdit>;
+export default IconEdit;

package/dist/components/Icons/IconFilter.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" class={cls} aria-hidden="true">
+  <path d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z"/>
+</svg>

package/dist/components/Icons/IconFilter.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconFilter: import("svelte").Component<Props, {}, "">;
+type IconFilter = ReturnType<typeof IconFilter>;
+export default IconFilter;

package/dist/components/Icons/IconSearch.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <circle cx="11" cy="11" r="7"/>
+  <path d="m21 21-4.35-4.35"/>
+</svg>

package/dist/components/Icons/IconSearch.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconSearch: import("svelte").Component<Props, {}, "">;
+type IconSearch = ReturnType<typeof IconSearch>;
+export default IconSearch;

package/dist/components/Icons/IconSort.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props { direction: 'asc' | 'desc'; size?: number; class?: string; }
+  const { direction, size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" class={cls} aria-hidden="true">
+  {#if direction === 'asc'}
+    <path d="M7 14l5-5 5 5H7z"/>
+  {:else}
+    <path d="M7 10l5 5 5-5H7z"/>
+  {/if}
+</svg>

package/dist/components/Icons/IconSort.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    direction: 'asc' | 'desc';
+    size?: number;
+    class?: string;
+}
+declare const IconSort: import("svelte").Component<Props, {}, "">;
+type IconSort = ReturnType<typeof IconSort>;
+export default IconSort;

package/dist/components/Icons/IconTrash.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  interface Props { size?: number; class?: string; }
+  const { size = 16, class: cls = '' }: Props = $props();
+</script>
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
+  <path d="M3 6h18"/>
+  <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/>
+  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+  <path d="M10 11v6M14 11v6"/>
+</svg>

package/dist/components/Icons/IconTrash.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const IconTrash: import("svelte").Component<Props, {}, "">;
+type IconTrash = ReturnType<typeof IconTrash>;
+export default IconTrash;

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

@@ -0,0 +1,11 @@
+export { default as IconAdd } from './IconAdd.svelte';
+export { default as IconAlertCircle } from './IconAlertCircle.svelte';
+export { default as IconAlertTriangle } from './IconAlertTriangle.svelte';
+export { default as IconCamera } from './IconCamera.svelte';
+export { default as IconClose } from './IconClose.svelte';
+export { default as IconEdit } from './IconEdit.svelte';
+export { default as IconFilter } from './IconFilter.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSort } from './IconSort.svelte';
+export { default as IconTrash } from './IconTrash.svelte';
+export * from './strings';

package/dist/components/Icons/index.js

@@ -0,0 +1,11 @@
+export { default as IconAdd } from './IconAdd.svelte';
+export { default as IconAlertCircle } from './IconAlertCircle.svelte';
+export { default as IconAlertTriangle } from './IconAlertTriangle.svelte';
+export { default as IconCamera } from './IconCamera.svelte';
+export { default as IconClose } from './IconClose.svelte';
+export { default as IconEdit } from './IconEdit.svelte';
+export { default as IconFilter } from './IconFilter.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSort } from './IconSort.svelte';
+export { default as IconTrash } from './IconTrash.svelte';
+export * from './strings';

package/dist/components/Icons/strings.d.ts

@@ -0,0 +1,11 @@
+export declare const iconAddSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 8v8M8 12h8\"/></svg>";
+export declare const iconEditSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>";
+export declare const iconTrashSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M3 6h18\"/><path d=\"M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/></svg>";
+export declare const iconSearchSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.35-4.35\"/></svg>";
+export declare const iconCloseSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>";
+export declare const iconAlertCircleSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/></svg>";
+export declare const iconAlertTriangleSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/></svg>";
+export declare const iconFilterSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z\"/></svg>";
+export declare const iconCameraSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/></svg>";
+export declare const iconSortAscSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M7 14l5-5 5 5H7z\"/></svg>";
+export declare const iconSortDescSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M7 10l5 5 5-5H7z\"/></svg>";

package/dist/components/Icons/strings.js

@@ -0,0 +1,15 @@
+// SVG HTML strings for use with {@html} or the `icon?: string` prop on menu items.
+// Each string renders at 16×16 px and inherits colour via currentColor.
+const S = `width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0" aria-hidden="true"`;
+const F = `width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0" aria-hidden="true"`;
+export const iconAddSvg = `<svg ${S}><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>`;
+export const iconEditSvg = `<svg ${S}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`;
+export const iconTrashSvg = `<svg ${S}><path d="M3 6h18"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>`;
+export const iconSearchSvg = `<svg ${S}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>`;
+export const iconCloseSvg = `<svg ${S}><path d="M18 6 6 18M6 6l12 12"/></svg>`;
+export const iconAlertCircleSvg = `<svg ${S}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+export const iconAlertTriangleSvg = `<svg ${S}><path d="m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+export const iconFilterSvg = `<svg ${F}><path d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z"/></svg>`;
+export const iconCameraSvg = `<svg ${S}><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>`;
+export const iconSortAscSvg = `<svg ${F}><path d="M7 14l5-5 5 5H7z"/></svg>`;
+export const iconSortDescSvg = `<svg ${F}><path d="M7 10l5 5 5-5H7z"/></svg>`;