@profidev/pleiades 1.8.2 → 1.9.1

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="V extends ZodValidationSchema">
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import { get } from 'svelte/store';
   import {
     defaults,
@@ -14,16 +14,18 @@
   } from 'sveltekit-superforms/adapters';
   import { FormButton } from '../ui/form/index.js';
   import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+  import RotateCCW from '@lucide/svelte/icons/rotate-ccw';
   import type { ButtonVariant } from '../ui/button/index.js';
   import { cn } from '../../utils.js';
   import type { Error, FormEnctype, FormValue } from './types.js';
+  import { toast } from 'svelte-sonner';
 
   interface Props {
     schema: V;
     initialValue?: Partial<FormValue<V>>;
     onsubmit: (
       form: FormValue<V>
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
     children?: Snippet<
       [{ props: { formData: SuperForm<FormValue<V>>; disabled: boolean } }]
     >;
@@ -31,16 +33,27 @@
       [
         {
           defaultBtn: Snippet<
-            [{ className?: string; variant?: ButtonVariant; content: string }?]
+            [
+              {
+                className?: string;
+                variant?: ButtonVariant;
+                content: string;
+                icon?: Component;
+              }
+            ]
           >;
           isLoading: boolean;
+          isError: boolean;
         }
       ]
     >;
     isLoading?: boolean;
-    error?: string;
     class?: string;
     enctype?: FormEnctype;
+    noErrorToast?: boolean;
+    submitText?: string;
+    retryText?: string;
+    submitIcon?: Component;
   }
 
   let {
@@ -50,11 +63,16 @@
     children,
     footer = defaultFooter,
     isLoading = $bindable(false),
-    error = $bindable(''),
     class: className,
-    enctype
+    enctype,
+    noErrorToast,
+    submitText = 'Submit',
+    retryText = 'Retry',
+    submitIcon
   }: Props = $props();
 
+  let isError = $state(false);
+
   let form = superForm(
     defaults(
       initialValue,
@@ -66,7 +84,7 @@
       onUpdate: async ({ form, cancel }) => {
         if (!form.valid) return;
 
-        error = '';
+        isError = false;
         isLoading = true;
 
         let ret = await onsubmit(form.data);
@@ -76,7 +94,12 @@
           if (ret.field) {
             setError(form, ret.field as '', ret.error, undefined);
           } else {
-            if (ret.error !== '') error = ret.error;
+            if (ret.error !== '') {
+              isError = true;
+              if (!noErrorToast) {
+                toast.error(ret.error);
+              }
+            }
             cancel();
           }
         }
@@ -105,21 +128,36 @@
 
 <form method="POST" class={cn('grid gap-3', className)} use:enhance {enctype}>
   {@render children?.({ props: { formData: form, disabled: isLoading } })}
-  {#if error}
-    <span class="text-destructive truncate text-sm">{error}</span>
-  {/if}
-  {@render footer({ defaultBtn: formButton, isLoading })}
+  {@render footer({ defaultBtn: formButton, isLoading, isError })}
 </form>
 
-{#snippet defaultFooter({ defaultBtn }: { defaultBtn: Snippet })}
-  {@render defaultBtn()}
+{#snippet defaultFooter({
+  defaultBtn
+}: {
+  defaultBtn: Snippet<
+    [
+      {
+        className?: string;
+        variant?: ButtonVariant;
+        content: string;
+        icon?: Component;
+      }
+    ]
+  >;
+})}
+  {@render defaultBtn({
+    variant: isError ? 'destructive' : undefined,
+    content: isError ? retryText : submitText,
+    icon: submitIcon
+  })}
 {/snippet}
 
-{#snippet formButton(
-  props:
-    | { className?: string; variant?: ButtonVariant; content: string }
-    | undefined
-)}
+{#snippet formButton(props: {
+  className?: string;
+  variant?: ButtonVariant;
+  content: string;
+  icon?: Component;
+})}
   {@const prop = { ...props }}
   <FormButton
     class={cn('cursor-pointer', prop.className)}
@@ -129,6 +167,10 @@
   >
     {#if isLoading}
       <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+    {:else if isError}
+      <RotateCCW class="mr-2 h-4 w-4" />
+    {:else if prop.icon}
+      <prop.icon class="mr-2 h-4 w-4" />
     {/if}
     {prop.content}
   </FormButton>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import { type SuperForm } from 'sveltekit-superforms';
 import { type ZodValidationSchema } from 'sveltekit-superforms/adapters';
 import type { ButtonVariant } from '../ui/button/index.js';
@@ -7,7 +7,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
     props: {
         schema: V;
         initialValue?: Partial<FormValue<V>>;
-        onsubmit: (form: FormValue<V>) => Error | undefined | void | Promise<Error | undefined | void>;
+        onsubmit: (form: FormValue<V>) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
         children?: Snippet<[{
             props: {
                 formData: SuperForm<FormValue<V>>;
@@ -19,19 +19,24 @@ declare function $$render<V extends ZodValidationSchema>(): {
                 className?: string;
                 variant?: ButtonVariant;
                 content: string;
-            }?]>;
+                icon?: Component;
+            }]>;
             isLoading: boolean;
+            isError: boolean;
         }]>;
         isLoading?: boolean;
-        error?: string;
         class?: string;
         enctype?: FormEnctype;
+        noErrorToast?: boolean;
+        submitText?: string;
+        retryText?: string;
+        submitIcon?: Component;
     };
     exports: {
         setValue: (value: FormValue<V>) => void;
         getValue: () => FormValue<V>;
     };
-    bindings: "error" | "isLoading";
+    bindings: "isLoading";
     slots: {};
     events: {};
 };
@@ -39,7 +44,7 @@ declare class __sveltets_Render<V extends ZodValidationSchema> {
     props(): ReturnType<typeof $$render<V>>['props'];
     events(): ReturnType<typeof $$render<V>>['events'];
     slots(): ReturnType<typeof $$render<V>>['slots'];
-    bindings(): "error" | "isLoading";
+    bindings(): "isLoading";
     exports(): {
         setValue: (value: import("zod/v4").infer<V>) => void;
         getValue: () => import("zod/v4").infer<V>;

package/dist/components/form/form-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="V extends ZodValidationSchema">
   import * as Dialog from '../ui/dialog/index.js';
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import {
     Button,
     type ButtonSize,
@@ -18,7 +18,9 @@
     title: string;
     description?: string;
     confirm: string;
+    retryText?: string;
     confirmVariant?: ButtonVariant;
+    confirmIcon?: Component;
     open?: boolean;
     class?: string;
     isLoading?: boolean;
@@ -33,7 +35,7 @@
     onopen?: () => boolean | Promise<boolean>;
     onsubmit: (
       form: FormValue<V>
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
     children?: Snippet<
       [{ props: { formData: SuperForm<FormValue<V>>; disabled: boolean } }]
     >;
@@ -41,6 +43,7 @@
     schema: V;
     initialValue?: FormValue<V>;
     enctype?: FormEnctype;
+    noErrorToast?: boolean;
   }
 
   let {
@@ -58,11 +61,13 @@
     triggerInner,
     schema,
     initialValue,
-    enctype
+    enctype,
+    retryText = 'Retry',
+    confirmIcon,
+    noErrorToast
   }: Props = $props();
 
   let formComp: BaseForm<V> | undefined = $state();
-  let error = $state('');
   let formSetValue = $derived(formComp?.setValue);
   let formGetValue = $derived(formComp?.getValue);
 
@@ -78,7 +83,6 @@
     isLoading = true;
     if (await onopen()) {
       open = true;
-      error = '';
     }
     isLoading = false;
   };
@@ -120,16 +124,20 @@
     <Form
       bind:this={formComp}
       bind:isLoading
-      bind:error
       {schema}
       {initialValue}
       {enctype}
       onsubmit={submit}
       {children}
+      {noErrorToast}
     >
-      {#snippet footer({ defaultBtn })}
+      {#snippet footer({ defaultBtn, isError })}
         <Dialog.Footer>
-          {@render defaultBtn({ variant: confirmVariant, content: confirm })}
+          {@render defaultBtn({
+            variant: isError ? 'destructive' : confirmVariant,
+            content: isError ? retryText : confirm,
+            icon: confirmIcon
+          })}
         </Dialog.Footer>
       {/snippet}
     </Form>

package/dist/components/form/form-dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import { type ButtonSize, type ButtonVariant } from '../ui/button/index.js';
 import { type SuperForm } from 'sveltekit-superforms';
 import type { Error, FormEnctype, FormValue } from './types.js';
@@ -8,7 +8,9 @@ declare function $$render<V extends ZodValidationSchema>(): {
         title: string;
         description?: string;
         confirm: string;
+        retryText?: string;
         confirmVariant?: ButtonVariant;
+        confirmIcon?: Component;
         open?: boolean;
         class?: string;
         isLoading?: boolean;
@@ -21,7 +23,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
             disabled?: boolean;
         };
         onopen?: () => boolean | Promise<boolean>;
-        onsubmit: (form: FormValue<V>) => Error | undefined | void | Promise<Error | undefined | void>;
+        onsubmit: (form: FormValue<V>) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
         children?: Snippet<[{
             props: {
                 formData: SuperForm<FormValue<V>>;
@@ -32,6 +34,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
         schema: V;
         initialValue?: FormValue<V>;
         enctype?: FormEnctype;
+        noErrorToast?: boolean;
     };
     exports: {
         openFn: () => Promise<void>;

package/dist/components/form/login-other-options.svelte

@@ -17,9 +17,7 @@
     <span class="w-full border-t"></span>
   </div>
   <div class="relative flex justify-center text-xs uppercase">
-    <span class="bg-background text-muted-foreground px-2"
-      >Or continue with
-    </span>
+    <span class="text-muted-foreground px-2">Or continue with </span>
   </div>
 </div>
 {#if passkeyError !== ''}

package/dist/components/form/multistep-form.svelte

@@ -19,7 +19,7 @@
     stages: Stage<T>[];
     onsubmit: (
       data: object
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<any> | undefined | void | Promise<Error<any> | undefined | void>;
     data?: T;
     submitLabel?: string;
     submitIcon?: Component;

package/dist/components/form/multistep-form.svelte.d.ts

@@ -2,7 +2,7 @@ import { type Error, type Stage } from './types';
 import type { Component } from 'svelte';
 interface Props<T> {
     stages: Stage<T>[];
-    onsubmit: (data: object) => Error | undefined | void | Promise<Error | undefined | void>;
+    onsubmit: (data: object) => Error<any> | undefined | void | Promise<Error<any> | undefined | void>;
     data?: T;
     submitLabel?: string;
     submitIcon?: Component;

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

@@ -6,8 +6,8 @@ export type { SuperForm, FormPath, FormPathLeaves } from 'sveltekit-superforms';
 export type { ZodValidationSchema };
 export type FormRecord = Record<string, unknown>;
 export type FormValue<V extends ZodValidationSchema> = z.infer<V>;
-export interface Error {
-    field?: string;
+export interface Error<V extends ZodValidationSchema> {
+    field?: keyof FormValue<V>;
     error: string;
 }
 export type FormEnctype = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | undefined | null;

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

@@ -3,60 +3,71 @@
   import * as Sidebar from '../../ui/sidebar';
   import type {
     NavGroup,
-    NavItem,
     SidebarUserInfo
   } from './types';
 
   interface Props {
     items: NavGroup[];
-    user: SidebarUserInfo;
+    user?: SidebarUserInfo;
   }
 
   const { items, user }: Props = $props();
 
-  let filteredItems = $derived(
+  const filteredItems = (items: NavGroup[], user: SidebarUserInfo) =>
     items
       .map((group) => ({
         ...group,
         items: group.items.filter((item) => {
           if (item.requiredPermission) {
-            return user.permissions.includes(item.requiredPermission);
+            return user?.permissions.includes(item.requiredPermission);
           }
           return true;
         })
       }))
-      .filter((item) => item.items.length > 0)
-  );
+      .filter((item) => item.items.length > 0);
 
-  let current = $derived<NavItem | undefined>(
+  const current = (filteredItems: NavGroup[]) =>
     filteredItems
       .flatMap((group) => group.items)
       .filter((item) => page.url.pathname.startsWith(item.href))
-      .sort((a, b) => b.href.length - a.href.length)[0] ?? undefined
-  );
+      .sort((a, b) => b.href.length - a.href.length)[0] ?? undefined;
 </script>
 
-{#each filteredItems as group}
+{#if !user}
   <Sidebar.Group>
-    <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>
-    <Sidebar.Menu class="gap-1">
-      {#each group.items as item}
+    <Sidebar.GroupLabel>Loading...</Sidebar.GroupLabel>
+    <Sidebar.Menu>
+      {#each Array.from({ length: 3 }) as _}
         <Sidebar.MenuItem>
-          <Sidebar.MenuButton
-            tooltipContent={item.label}
-            class={item.href === current?.href ? 'bg-muted' : ''}
-          >
-            {#snippet child({ props })}
-              <a href={item.href} {...props}>
-                {#if item.icon}
-                  <item.icon />
-                {/if}
-                <span>{item.label}</span>
-              </a>
-            {/snippet}
-          </Sidebar.MenuButton>
+          <Sidebar.MenuSkeleton />
         </Sidebar.MenuItem>
       {/each}
     </Sidebar.Menu>
   </Sidebar.Group>
-{/each}
+{:else}
+  {@const filtered = filteredItems(items, user)}
+  {#each filtered as group}
+    <Sidebar.Group>
+      <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>
+      <Sidebar.Menu class="gap-1">
+        {#each group.items as item}
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltipContent={item.label}
+              class={item.href === current(filtered)?.href ? 'bg-muted' : ''}
+            >
+              {#snippet child({ props })}
+                <a href={item.href} {...props}>
+                  {#if item.icon}
+                    <item.icon />
+                  {/if}
+                  <span>{item.label}</span>
+                </a>
+              {/snippet}
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        {/each}
+      </Sidebar.Menu>
+    </Sidebar.Group>
+  {/each}
+{/if}

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

@@ -1,7 +1,7 @@
 import type { NavGroup, SidebarUserInfo } from './types';
 interface Props {
     items: NavGroup[];
-    user: SidebarUserInfo;
+    user?: SidebarUserInfo;
 }
 declare const SidebarContent: import("svelte").Component<Props, {}, "">;
 type SidebarContent = ReturnType<typeof SidebarContent>;

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

@@ -7,15 +7,16 @@
   import SettingsIcon from '@lucide/svelte/icons/settings';
   import { goto } from '$app/navigation';
   import { disconnectWebsocket } from '../../../backend/updater.svelte';
+  import type { SidebarUserInfo } from './types';
+  import { Skeleton } from '../../ui/skeleton';
 
   interface Props {
-    name: string;
-    email: string;
-    avatar: string;
+    user?: SidebarUserInfo;
+    avatar?: string;
     logout: () => Promise<{ error?: any }>;
   }
 
-  let { name, email, avatar, logout }: Props = $props();
+  let { logout, user, avatar }: Props = $props();
 
   const sidebar = Sidebar.useSidebar();
 </script>
@@ -31,12 +32,17 @@
             {...props}
           >
             <Avatar.Root class="size-8 rounded-lg">
-              <Avatar.Image src={avatar} alt={name} />
-              <Avatar.Fallback class="rounded-lg">?</Avatar.Fallback>
+              <Avatar.Image src={avatar} alt={user?.name} />
+              <Avatar.Fallback class="rounded-full">?</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>
+              {#if !user}
+                <Skeleton class="mb-1 h-4" />
+                <Skeleton class="h-3" />
+              {:else}
+                <span class="truncate font-medium">{user.name}</span>
+                <span class="truncate text-xs">{user.email}</span>
+              {/if}
             </div>
             <ChevronsUpDownIcon class="ms-auto size-4" />
           </Sidebar.MenuButton>
@@ -51,12 +57,17 @@
         <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.Image src={avatar} alt={user?.name} />
+              <Avatar.Fallback class="rounded-full">?</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>
+              {#if !user}
+                <Skeleton class="mb-1 h-4" />
+                <Skeleton class="h-3" />
+              {:else}
+                <span class="truncate font-medium">{user.name}</span>
+                <span class="truncate text-xs">{user.email}</span>
+              {/if}
             </div>
           </div>
         </DropdownMenu.Label>

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

@@ -1,7 +1,7 @@
+import type { SidebarUserInfo } from './types';
 interface Props {
-    name: string;
-    email: string;
-    avatar: string;
+    user?: SidebarUserInfo;
+    avatar?: string;
     logout: () => Promise<{
         error?: any;
     }>;

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

@@ -7,7 +7,8 @@
   import type { NavGroup, SidebarUserInfo } from './types';
 
   interface Props {
-    user: SidebarUserInfo;
+    user?: SidebarUserInfo;
+    avatar?: string;
     children: Snippet;
     version: string;
     app_name: string;
@@ -20,6 +21,7 @@
   const {
     children,
     user,
+    avatar,
     version,
     app_name,
     app_icon,
@@ -38,12 +40,7 @@
       <SidebarContent {items} {user} />
     </Sidebar.Content>
     <Sidebar.Footer>
-      <SidebarUser
-        name={user.name}
-        email={user.email}
-        avatar={`data:image/webp;base64,${user.avatar || ''}`}
-        {logout}
-      />
+      <SidebarUser {avatar} {user} {logout} />
     </Sidebar.Footer>
   </Sidebar.Root>
   <Sidebar.Inset>

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

@@ -2,7 +2,8 @@ import * as Sidebar from '../../ui/sidebar';
 import type { Component, Snippet } from 'svelte';
 import type { NavGroup, SidebarUserInfo } from './types';
 interface Props {
-    user: SidebarUserInfo;
+    user?: SidebarUserInfo;
+    avatar?: string;
     children: Snippet;
     version: string;
     app_name: string;

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

@@ -59,7 +59,7 @@
     createClass?: string;
     editClass?: string;
     errorMappings?: {
-      [key in RequestError]?: Error;
+      [key in RequestError]?: Error<any>;
     };
     columnData: CD;
   }

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

@@ -38,7 +38,7 @@ declare function $$render<CV extends ZodValidationSchema, EV extends ZodValidati
         startEdit?: (item: T) => void | Promise<void>;
         createClass?: string;
         editClass?: string;
-        errorMappings?: { [key in RequestError]?: Error; };
+        errorMappings?: { [key in RequestError]?: Error<any>; };
         columnData: CD;
     };
     exports: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profidev/pleiades",
-  "version": "1.8.2",
+  "version": "1.9.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Profiidev/pleiades"
@@ -796,6 +796,7 @@
     "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@fontsource-variable/inter": "5.2.8",
     "@jsrepo/transform-oxfmt": "^7.0.0",
     "@sveltejs/adapter-auto": "7.0.1",
     "@sveltejs/package": "2.5.7",
@@ -808,6 +809,7 @@
     "oxlint-tsgolint": "0.23.0",
     "prettier-plugin-svelte": "4.0.1",
     "publint": "0.3.21",
+    "shadcn-svelte": "1.2.7",
     "svelte-check": "4.4.8",
     "tailwindcss": "4.3.0",
     "tw-animate-css": "1.4.0",