@profidev/pleiades 1.7.0

package/dist/components/nav/sidebar/sidebar-user.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import * as Sidebar from '../../ui/sidebar';
+  import * as DropdownMenu from '../../ui/dropdown-menu';
+  import * as Avatar from '../../ui/avatar';
+  import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+  import LogOutIcon from '@lucide/svelte/icons/log-out';
+  import SettingsIcon from '@lucide/svelte/icons/settings';
+  import { goto } from '$app/navigation';
+  import { disconnectWebsocket } from '../../../backend/updater.svelte';
+
+  interface Props {
+    name: string;
+    email: string;
+    avatar: string;
+    logout: () => Promise<{ error?: any }>;
+  }
+
+  let { name, email, avatar, logout }: Props = $props();
+
+  const sidebar = Sidebar.useSidebar();
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Sidebar.MenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer"
+            {...props}
+          >
+            <Avatar.Root class="size-8 rounded-lg">
+              <Avatar.Image src={avatar} alt={name} />
+              <Avatar.Fallback class="rounded-lg">?</Avatar.Fallback>
+            </Avatar.Root>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">{name}</span>
+              <span class="truncate text-xs">{email}</span>
+            </div>
+            <ChevronsUpDownIcon class="ms-auto size-4" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+        side={sidebar.isMobile ? 'bottom' : 'right'}
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenu.Label class="p-0 font-normal">
+          <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+            <Avatar.Root class="size-8 rounded-lg">
+              <Avatar.Image src={avatar} alt={name} />
+              <Avatar.Fallback class="rounded-lg">?</Avatar.Fallback>
+            </Avatar.Root>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">{name}</span>
+              <span class="truncate text-xs">{email}</span>
+            </div>
+          </div>
+        </DropdownMenu.Label>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Group>
+          <DropdownMenu.Item class="cursor-pointer">
+            {#snippet child({ props })}
+              <a href="/account" {...props}>
+                <SettingsIcon />
+                Account
+              </a>
+            {/snippet}
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item
+          class="cursor-pointer"
+          onclick={async () => {
+            if (!(await logout()).error) {
+              disconnectWebsocket();
+              goto('/login?skip=true');
+            }
+          }}
+        >
+          <LogOutIcon />
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/nav/sidebar/sidebar-user.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    name: string;
+    email: string;
+    avatar: string;
+    logout: () => Promise<{
+        error?: any;
+    }>;
+}
+declare const SidebarUser: import("svelte").Component<Props, {}, "">;
+type SidebarUser = ReturnType<typeof SidebarUser>;
+export default SidebarUser;

package/dist/components/nav/sidebar/sidebar.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import * as Sidebar from '../../ui/sidebar';
+  import SidebarHeader from './sidebar-header.svelte';
+  import SidebarContent from './sidebar-content.svelte';
+  import SidebarUser from './sidebar-user.svelte';
+  import type { Component, Snippet } from 'svelte';
+  import type { NavGroup, SidebarUserInfo } from './types';
+
+  interface Props {
+    user: SidebarUserInfo;
+    children: Snippet;
+    version: string;
+    app_name: string;
+    app_icon?: Component;
+    items: NavGroup[];
+    logout: () => Promise<{ error?: any }>;
+  }
+
+  const { children, user, version, app_name, app_icon, items, logout }: Props =
+    $props();
+</script>
+
+<Sidebar.Provider>
+  <Sidebar.Root collapsible="icon" variant="floating">
+    <Sidebar.Header>
+      <SidebarHeader {app_name} {app_icon} {version} />
+    </Sidebar.Header>
+    <Sidebar.Content>
+      <SidebarContent {items} {user} />
+    </Sidebar.Content>
+    <Sidebar.Footer>
+      <SidebarUser
+        name={user.name}
+        email={user.email}
+        avatar={`data:image/webp;base64,${user.avatar || ''}`}
+        {logout}
+      />
+    </Sidebar.Footer>
+  </Sidebar.Root>
+  <Sidebar.Inset>
+    <Sidebar.Trigger
+      class="absolute top-5 left-3 flex cursor-pointer md:hidden"
+    />
+    {@render children()}
+  </Sidebar.Inset>
+</Sidebar.Provider>

package/dist/components/nav/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,17 @@
+import * as Sidebar from '../../ui/sidebar';
+import type { Component, Snippet } from 'svelte';
+import type { NavGroup, SidebarUserInfo } from './types';
+interface Props {
+    user: SidebarUserInfo;
+    children: Snippet;
+    version: string;
+    app_name: string;
+    app_icon?: Component;
+    items: NavGroup[];
+    logout: () => Promise<{
+        error?: any;
+    }>;
+}
+declare const Sidebar: Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/nav/sidebar/types.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+export interface NavGroup {
+    label: string;
+    items: NavItem[];
+}
+export interface NavItem {
+    label: string;
+    href: string;
+    icon?: Component;
+    requiredPermission?: string;
+}
+export interface SidebarUserInfo {
+    permissions: string[];
+    name: string;
+    email: string;
+    avatar?: string | undefined | null;
+}

package/dist/components/nav/sidebar/types.js

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

package/dist/components/nav/simple-sidebar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { cn } from '../../utils.js';
+  import { crossfade } from 'svelte/transition';
+  import Button from '../ui/button/button.svelte';
+  import { cubicInOut } from 'svelte/easing';
+
+  interface Props {
+    class: string | undefined;
+    items: { href: string; title: string }[];
+  }
+
+  const { class: className = undefined, items }: Props = $props();
+
+  const [send, receive] = crossfade({
+    duration: 250,
+    easing: cubicInOut
+  });
+</script>
+
+<nav
+  class={cn('flex space-x-2 lg:flex-col lg:space-y-1 lg:space-x-0', className)}
+>
+  {#each items as item}
+    {@const isActive = page.url.pathname + page.url.search === item.href}
+
+    <Button
+      href={item.href}
+      variant="ghost"
+      class={cn(
+        !isActive && 'hover:underline',
+        'relative cursor-pointer justify-start hover:bg-transparent'
+      )}
+      data-sveltekit-noscroll
+    >
+      {#if isActive}
+        <div
+          class="bg-muted absolute inset-0 rounded-md"
+          in:send={{ key: 'active-sidebar-tab' }}
+          out:receive={{ key: 'active-sidebar-tab' }}
+        ></div>
+      {/if}
+      <div class="relative">
+        {item.title}
+      </div>
+    </Button>
+  {/each}
+</nav>

package/dist/components/nav/simple-sidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class: string | undefined;
+    items: {
+        href: string;
+        title: string;
+    }[];
+}
+declare const SimpleSidebar: import("svelte").Component<Props, {}, "">;
+type SimpleSidebar = ReturnType<typeof SimpleSidebar>;
+export default SimpleSidebar;

package/dist/components/table/actions.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Trash from '@lucide/svelte/icons/trash';
+  import Pencil from '@lucide/svelte/icons/pencil';
+  import { Button } from '../ui/button/index.js';
+
+  interface Props {
+    edit_disabled: boolean;
+    delete_disabled: boolean;
+    edit?: (() => void) | string;
+    remove: () => void;
+  }
+
+  let { edit_disabled, delete_disabled, edit, remove }: Props = $props();
+</script>
+
+<div class="flex w-full space-x-4">
+  <Button
+    size="icon"
+    variant="secondary"
+    onclick={typeof edit === 'function' ? edit : undefined}
+    href={typeof edit === 'string' ? edit : undefined}
+    disabled={edit_disabled}
+    class="ml-auto cursor-pointer"
+  >
+    <Pencil />
+  </Button>
+  <Button
+    size="icon"
+    variant="destructive"
+    onclick={remove}
+    disabled={delete_disabled}
+    class="cursor-pointer"
+  >
+    <Trash />
+  </Button>
+</div>

package/dist/components/table/actions.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    edit_disabled: boolean;
+    delete_disabled: boolean;
+    edit?: (() => void) | string;
+    remove: () => void;
+}
+declare const Actions: import("svelte").Component<Props, {}, "">;
+type Actions = ReturnType<typeof Actions>;
+export default Actions;

package/dist/components/table/base-table.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import * as Table from '../ui/table/index.js';
+  import * as Dropdown from '../ui/dropdown-menu/index.js';
+  import { FlexRender } from '../ui/data-table/index.js';
+  import { Input } from '../ui/input/index.js';
+  import { ScrollArea } from '../ui/scroll-area/index.js';
+  import type { Table as TableType } from '@tanstack/table-core';
+  import { Button } from '../ui/button/index.js';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  type T = $$Generic;
+
+  interface Props {
+    table: TableType<T>;
+    children?: Snippet;
+    filterColumn: string;
+    class?: string;
+    hideFilter?: boolean;
+    isLoading?: boolean;
+  }
+
+  let {
+    table,
+    children,
+    filterColumn,
+    class: className,
+    hideFilter,
+    isLoading
+  }: Props = $props();
+</script>
+
+<div class={cn('flex w-full flex-col', className)}>
+  {#if hideFilter}
+    <div class="flex items-center py-4">
+      <Input
+        placeholder="Filter entries"
+        value={(table.getColumn(filterColumn)?.getFilterValue() as string) ??
+          ''}
+        oninput={(e) =>
+          table.getColumn(filterColumn)?.setFilterValue(e.currentTarget.value)}
+        onchange={(e) =>
+          table.getColumn(filterColumn)?.setFilterValue(e.currentTarget.value)}
+        class="mr-2 max-w-full"
+      />
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="outline">
+              Columns
+              <ChevronDown class="ml-2 size-4" />
+            </Button>
+          {/snippet}
+        </Dropdown.Trigger>
+        <Dropdown.Content align="end">
+          {#each table
+            .getAllColumns()
+            .filter((col) => col.getCanHide()) as column}
+            <Dropdown.CheckboxItem
+              class="capitalize"
+              bind:checked={() => column.getIsVisible(), () => {}}
+              onCheckedChange={(value) => column.toggleVisibility(!!value)}
+            >
+              {column.id}
+            </Dropdown.CheckboxItem>
+          {/each}
+        </Dropdown.Content>
+      </Dropdown.Root>
+      {@render children?.()}
+    </div>
+  {/if}
+  <ScrollArea class="grid min-h-0 flex-1 rounded-md border" orientation="both">
+    <Table.Root
+      class={`min-w-[${table.getHeaderGroups()[0].headers.length * 100}px]`}
+    >
+      <Table.Header>
+        {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+          <Table.Row>
+            {#each headerGroup.headers as header (header.id)}
+              <Table.Head>
+                {#if !header.isPlaceholder}
+                  <FlexRender
+                    content={header.column.columnDef.header}
+                    context={header.getContext()}
+                  />
+                {/if}
+              </Table.Head>
+            {/each}
+          </Table.Row>
+        {/each}
+      </Table.Header>
+      <Table.Body>
+        {#each table.getRowModel().rows as row (row.id)}
+          <Table.Row data-state={row.getIsSelected() && 'selected'}>
+            {#each row.getVisibleCells() as cell (cell.id)}
+              <Table.Cell class="group">
+                <div
+                  class="last-group:justify-end last-group:text-center last-group:h-full group-last:flex"
+                >
+                  <FlexRender
+                    content={cell.column.columnDef.cell}
+                    context={cell.getContext()}
+                  />
+                </div>
+              </Table.Cell>
+            {/each}
+          </Table.Row>
+        {:else}
+          <Table.Row>
+            <Table.Cell
+              colspan={table.getAllColumns().length}
+              class="h-24 text-center"
+            >
+              {isLoading ? 'Loading...' : 'No results.'}
+            </Table.Cell>
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </ScrollArea>
+</div>

package/dist/components/table/base-table.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Table as TableType } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        table: TableType<T>;
+        children?: Snippet;
+        filterColumn: string;
+        class?: string;
+        hideFilter?: boolean;
+        isLoading?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BaseTable: $$IsomorphicComponent;
+type BaseTable<T> = InstanceType<typeof BaseTable<T>>;
+export default BaseTable;

package/dist/components/table/clean-table.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" generics="T, CD">
+  import { createTable } from './helpers.svelte';
+  import type { ColumnDef } from '@tanstack/table-core';
+  import BaseTable from './base-table.svelte';
+
+  type Props = {
+    data?: T[] | Promise<T[] | undefined>;
+    class?: string;
+  } & (
+    | {
+        columns: (columnData: CD) => ColumnDef<T>[];
+        columnData: CD;
+      }
+    | {
+        columns: () => ColumnDef<T>[];
+        columnData?: undefined;
+      }
+  );
+
+  let { class: className, data, columns, columnData }: Props = $props();
+
+  let rows = $state<T[]>([]);
+  let isLoading = $state(true);
+
+  $effect(() => {
+    if (data instanceof Promise) {
+      isLoading = true;
+      data.then((d) => {
+        rows = d || [];
+        isLoading = false;
+      });
+    } else if (data) {
+      rows = data;
+      isLoading = false;
+    }
+  });
+
+  let table = $derived(
+    createTable(rows, columns(columnData as any), () => true)
+  );
+</script>
+
+<BaseTable {table} filterColumn="" hideFilter {isLoading} class={className} />

package/dist/components/table/clean-table.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ColumnDef } from '@tanstack/table-core';
+declare function $$render<T, CD>(): {
+    props: {
+        data?: T[] | Promise<T[] | undefined>;
+        class?: string;
+    } & ({
+        columns: (columnData: CD) => ColumnDef<T>[];
+        columnData: CD;
+    } | {
+        columns: () => ColumnDef<T>[];
+        columnData?: undefined;
+    });
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, CD> {
+    props(): ReturnType<typeof $$render<T, CD>>['props'];
+    events(): ReturnType<typeof $$render<T, CD>>['events'];
+    slots(): ReturnType<typeof $$render<T, CD>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, CD>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, CD>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, CD>['props']>, ReturnType<__sveltets_Render<T, CD>['events']>, ReturnType<__sveltets_Render<T, CD>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, CD>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, CD>['exports']>;
+    <T, CD>(internal: unknown, props: ReturnType<__sveltets_Render<T, CD>['props']> & {}): ReturnType<__sveltets_Render<T, CD>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const CleanTable: $$IsomorphicComponent;
+type CleanTable<T, CD> = InstanceType<typeof CleanTable<T, CD>>;
+export default CleanTable;

package/dist/components/table/helpers.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ColumnDef, type Row, type Table } from '@tanstack/table-core';
+export declare const createColumnHeader: <C>(key: string, title: string) => ColumnDef<C>;
+export declare const createColumnCell: <T, C>(key: string, formatter?: (value: T) => string) => ColumnDef<C>;
+export declare const createColumn: <T, C>(key: string, title: string, formatter?: (value: T) => string) => ColumnDef<C>;
+export declare const createTable: <C>(data: C[], columns: ColumnDef<C>[], filterFn: (row: Row<C>, id: string, filterValues: any) => boolean) => Table<C>;

package/dist/components/table/helpers.svelte.js

@@ -0,0 +1,86 @@
+import { getCoreRowModel, getFilteredRowModel, getSortedRowModel } from '@tanstack/table-core';
+import { createSvelteTable, renderComponent, renderSnippet } from '../ui/data-table/index.js';
+import { createRawSnippet } from 'svelte';
+import TableHead from './table-head.svelte';
+export const createColumnHeader = (key, title) => ({
+    accessorKey: key,
+    header: ({ column }) => renderComponent(TableHead, {
+        onclick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+        title
+    })
+});
+// oxlint-disable-next-line no-unnecessary-type-parameters
+export const createColumnCell = (key, formatter) => ({
+    accessorKey: key,
+    cell: ({ row }) => {
+        const value_raw = row.getValue(key);
+        const valueSnippet = createRawSnippet(() => {
+            let value = '';
+            if (formatter) {
+                value = formatter(value_raw);
+            }
+            else {
+                // oxlint-disable-next-line no-unsafe-type-assertion
+                value = value_raw;
+            }
+            return {
+                render: () => `<div class="ml-4 truncate h-full w-full text-wrap">${value}</div>`
+            };
+        });
+        return renderSnippet(valueSnippet);
+    }
+});
+// oxlint-disable-next-line no-unnecessary-type-parameters
+export const createColumn = (key, title, formatter) => ({
+    ...createColumnHeader(key, title),
+    ...createColumnCell(key, formatter)
+});
+let columnVisibility = $state({});
+let sorting = $state([]);
+let columnFilters = $state([]);
+export const createTable = (data, columns, filterFn) => createSvelteTable({
+    columns,
+    data,
+    defaultColumn: {
+        enableSorting: true,
+        filterFn
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: (updater) => {
+        if (typeof updater === 'function') {
+            columnFilters = updater(columnFilters);
+        }
+        else {
+            columnFilters = updater;
+        }
+    },
+    onColumnVisibilityChange: (updater) => {
+        if (typeof updater === 'function') {
+            columnVisibility = updater(columnVisibility);
+        }
+        else {
+            columnVisibility = updater;
+        }
+    },
+    onSortingChange: (updater) => {
+        if (typeof updater === 'function') {
+            sorting = updater(sorting);
+        }
+        else {
+            sorting = updater;
+        }
+    },
+    state: {
+        get columnFilters() {
+            return columnFilters;
+        },
+        get columnVisibility() {
+            return columnVisibility;
+        },
+        get sorting() {
+            return sorting;
+        }
+    }
+});