@krak-stack/registry 0.1.0 → 0.1.2

package/dist/components/ui/data-table.d.ts

@@ -18,7 +18,7 @@ export declare const TableSearchSchema: Schema.Struct<{
     }>>, Schema.String, never, never>, never, never>>;
     readonly grouping: Schema.optional<Schema.$Array<Schema.String>>;
 }>;
-export declare const TableSearchSchemaStandard: ReturnType<typeof Schema.toStandardSchemaV1>;
+export declare const TableSearchSchemaStandard: ReturnType<typeof Schema.toStandardSchemaV1<typeof TableSearchSchema>>;
 export type TableParams = Schema.Schema.Type<typeof TableSearchSchema>;
 export type DataTableMessages = PaginationMessages & {
     actions: string;

package/dist/components/ui/effect-form.d.ts

@@ -51,9 +51,10 @@ export type SubmitForm<A, E> = {
     lastSubmittedValues: Atom.Atom<Option.Option<unknown>>;
     submit: Atom.AtomResultFn<void, A, E>;
 };
-export declare const SubmitButton: <A, E>({ children, form, }: {
+export declare const SubmitButton: <A, E>({ children, form, onSubmit, }: {
     children?: ReactNode;
     form: SubmitForm<A, E>;
+    onSubmit?: () => void;
 }) => JSX.Element;
 type TextFieldOptions = FieldOptions & Omit<ComponentProps<"input">, "children" | "defaultValue" | "id" | "name" | "onBlur" | "onChange" | "value"> & {
     errorMessage?: string;

package/dist/components/ui/effect-form.js

@@ -287,6 +287,13 @@ function AttachmentAction({
     ...props
   }, undefined, false, undefined, this);
 }
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "data-slot": "attachment-group",
+    className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
 
 // ../../src/components/ui/input.tsx
 import { Input as InputPrimitive } from "@base-ui/react/input";
@@ -735,15 +742,19 @@ var messages = {
   en: {
     accepts: (accepts) => `Accepts: ${accepts}`,
     chooseFile: "Choose file",
+    chooseFiles: "Choose files",
     deleteFile: "Delete",
     dropFile: "Drag and drop a file here",
+    dropFiles: "Drag and drop files here",
     replaceFile: "Replace file"
   },
   fr: {
     accepts: (accepts) => `Accepte : ${accepts}`,
     chooseFile: "Choisir un fichier",
+    chooseFiles: "Choisir des fichiers",
     deleteFile: "Supprimer",
     dropFile: "Glissez-déposez un fichier ici",
+    dropFiles: "Glissez-déposez des fichiers ici",
     replaceFile: "Remplacer le fichier"
   }
 };
@@ -768,14 +779,17 @@ var FilePicker = ({
   accept = "",
   canClear = false,
   file,
+  files = [],
   id,
   image,
   invalid = false,
   messages: messages2,
+  multiple = false,
   name,
   onBlur,
   onChange,
   onClear,
+  onFilesChange,
   required,
   title
 }) => {
@@ -791,17 +805,23 @@ var FilePicker = ({
   }, [objectUrl]);
   const imageUrl = objectUrl ?? image?.src;
   const selected = Boolean(file || imageUrl);
-  const selectFile = (nextFile) => {
-    if (nextFile)
-      onChange(nextFile);
+  const selectFiles = (nextFiles) => {
+    const selectedFiles = Array.from(nextFiles);
+    if (multiple) {
+      const uniqueFiles = new Map([...files, ...selectedFiles].map((selectedFile) => [
+        `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`,
+        selectedFile
+      ]));
+      onFilesChange?.(Array.from(uniqueFiles.values()));
+    } else if (selectedFiles[0]) {
+      onChange?.(selectedFiles[0]);
+    }
   };
   const handleDrop = (event) => {
     event.preventDefault();
     dragDepthRef.current = 0;
     setDragging(false);
-    if (inputRef.current)
-      inputRef.current.files = event.dataTransfer.files;
-    selectFile(event.dataTransfer.files[0]);
+    selectFiles(event.dataTransfer.files);
     onBlur?.();
   };
   const clear = () => {
@@ -816,11 +836,101 @@ var FilePicker = ({
     name,
     type: "file",
     accept,
-    required,
+    multiple,
+    required: required && (!multiple || files.length === 0),
     onBlur,
-    onChange: (event) => selectFile(event.target.files?.[0]),
+    onChange: (event) => {
+      if (event.target.files)
+        selectFiles(event.target.files);
+      if (multiple)
+        event.target.value = "";
+    },
     "aria-invalid": invalid
   }, undefined, false, undefined, this);
+  if (multiple) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "grid min-w-0 gap-3",
+      children: [
+        /* @__PURE__ */ jsxDEV5("div", {
+          className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",
+          "data-dragging": dragging,
+          onDragEnter: (event) => {
+            event.preventDefault();
+            dragDepthRef.current += 1;
+            setDragging(true);
+          },
+          onDragLeave: (event) => {
+            event.preventDefault();
+            dragDepthRef.current -= 1;
+            if (dragDepthRef.current <= 0) {
+              dragDepthRef.current = 0;
+              setDragging(false);
+            }
+          },
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxDEV5(CloudUpload, {
+              className: "text-muted-foreground size-6"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5("div", {
+              className: "max-w-full min-w-0",
+              children: [
+                /* @__PURE__ */ jsxDEV5("p", {
+                  className: "text-sm font-medium",
+                  children: labels.dropFiles
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("p", {
+                  className: "text-muted-foreground max-w-full text-xs [overflow-wrap:anywhere]",
+                  children: labels.accepts(accept)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Button, {
+              type: "button",
+              variant: "outline",
+              onClick: () => inputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsxDEV5(FileUp, {
+                  "data-icon": "inline-start"
+                }, undefined, false, undefined, this),
+                labels.chooseFiles
+              ]
+            }, undefined, true, undefined, this),
+            input
+          ]
+        }, undefined, true, undefined, this),
+        files.length > 0 ? /* @__PURE__ */ jsxDEV5(AttachmentGroup, {
+          children: files.map((selectedFile) => /* @__PURE__ */ jsxDEV5(Attachment, {
+            state: invalid ? "error" : "idle",
+            children: [
+              /* @__PURE__ */ jsxDEV5(AttachmentMedia, {
+                children: /* @__PURE__ */ jsxDEV5(FileIcon, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5(AttachmentContent, {
+                children: [
+                  /* @__PURE__ */ jsxDEV5(AttachmentTitle, {
+                    children: selectedFile.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5(AttachmentDescription, {
+                    children: fileDescription(selectedFile)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(AttachmentActions, {
+                children: /* @__PURE__ */ jsxDEV5(AttachmentAction, {
+                  type: "button",
+                  "aria-label": `${labels.deleteFile} ${selectedFile.name}`,
+                  onClick: () => onFilesChange?.(files.filter((candidate) => candidate !== selectedFile)),
+                  children: /* @__PURE__ */ jsxDEV5(Trash2, {}, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`, true, undefined, this))
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this);
+  }
   if (!selected) {
     return /* @__PURE__ */ jsxDEV5("div", {
       className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",
@@ -1615,7 +1725,8 @@ var SubmitError = ({
 };
 var SubmitButton = ({
   children,
-  form
+  form,
+  onSubmit
 }) => {
   const submit = useAtomSet(form.submit);
   const submitResult = useAtomValue(form.submit);
@@ -1627,7 +1738,10 @@ var SubmitButton = ({
     type: "button",
     disabled: !hasPendingChanges || submitResult.waiting,
     className: "self-start",
-    onClick: () => submit(),
+    onClick: () => {
+      onSubmit?.();
+      submit();
+    },
     children: [
       submitResult.waiting && /* @__PURE__ */ jsxDEV14(Loader2, {
         "data-icon": "inline-start",

package/dist/components/ui/file-picker.d.ts

@@ -2,8 +2,10 @@ import { type ReactNode } from "react";
 export type FilePickerMessages = {
     accepts: (accepts: string) => string;
     chooseFile: string;
+    chooseFiles: string;
     deleteFile: string;
     dropFile: string;
+    dropFiles: string;
     replaceFile: string;
 };
 export type FilePickerMessageOverrides = Partial<FilePickerMessages>;
@@ -11,6 +13,7 @@ export type FilePickerProps = {
     accept?: string;
     canClear?: boolean;
     file?: File;
+    files?: readonly File[];
     id: string;
     image?: {
         alt: string;
@@ -20,11 +23,13 @@ export type FilePickerProps = {
     };
     invalid?: boolean;
     messages?: FilePickerMessageOverrides;
+    multiple?: boolean;
     name: string;
     onBlur?: () => void;
-    onChange: (file: File) => void;
+    onChange?: (file: File) => void;
     onClear: () => void;
+    onFilesChange?: (files: File[]) => void;
     required?: boolean;
     title: ReactNode;
 };
-export declare const FilePicker: ({ accept, canClear, file, id, image, invalid, messages, name, onBlur, onChange, onClear, required, title, }: FilePickerProps) => import("react").JSX.Element;
+export declare const FilePicker: ({ accept, canClear, file, files, id, image, invalid, messages, multiple, name, onBlur, onChange, onClear, onFilesChange, required, title, }: FilePickerProps) => import("react").JSX.Element;

package/dist/components/ui/file-picker.js

@@ -170,6 +170,13 @@ function AttachmentAction({
     ...props
   }, undefined, false, undefined, this);
 }
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    "data-slot": "attachment-group",
+    className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
 
 // ../../src/components/ui/input.tsx
 import { Input as InputPrimitive } from "@base-ui/react/input";
@@ -618,15 +625,19 @@ var messages = {
   en: {
     accepts: (accepts) => `Accepts: ${accepts}`,
     chooseFile: "Choose file",
+    chooseFiles: "Choose files",
     deleteFile: "Delete",
     dropFile: "Drag and drop a file here",
+    dropFiles: "Drag and drop files here",
     replaceFile: "Replace file"
   },
   fr: {
     accepts: (accepts) => `Accepte : ${accepts}`,
     chooseFile: "Choisir un fichier",
+    chooseFiles: "Choisir des fichiers",
     deleteFile: "Supprimer",
     dropFile: "Glissez-déposez un fichier ici",
+    dropFiles: "Glissez-déposez des fichiers ici",
     replaceFile: "Remplacer le fichier"
   }
 };
@@ -651,14 +662,17 @@ var FilePicker = ({
   accept = "",
   canClear = false,
   file,
+  files = [],
   id,
   image,
   invalid = false,
   messages: messages2,
+  multiple = false,
   name,
   onBlur,
   onChange,
   onClear,
+  onFilesChange,
   required,
   title
 }) => {
@@ -674,17 +688,23 @@ var FilePicker = ({
   }, [objectUrl]);
   const imageUrl = objectUrl ?? image?.src;
   const selected = Boolean(file || imageUrl);
-  const selectFile = (nextFile) => {
-    if (nextFile)
-      onChange(nextFile);
+  const selectFiles = (nextFiles) => {
+    const selectedFiles = Array.from(nextFiles);
+    if (multiple) {
+      const uniqueFiles = new Map([...files, ...selectedFiles].map((selectedFile) => [
+        `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`,
+        selectedFile
+      ]));
+      onFilesChange?.(Array.from(uniqueFiles.values()));
+    } else if (selectedFiles[0]) {
+      onChange?.(selectedFiles[0]);
+    }
   };
   const handleDrop = (event) => {
     event.preventDefault();
     dragDepthRef.current = 0;
     setDragging(false);
-    if (inputRef.current)
-      inputRef.current.files = event.dataTransfer.files;
-    selectFile(event.dataTransfer.files[0]);
+    selectFiles(event.dataTransfer.files);
     onBlur?.();
   };
   const clear = () => {
@@ -699,11 +719,101 @@ var FilePicker = ({
     name,
     type: "file",
     accept,
-    required,
+    multiple,
+    required: required && (!multiple || files.length === 0),
     onBlur,
-    onChange: (event) => selectFile(event.target.files?.[0]),
+    onChange: (event) => {
+      if (event.target.files)
+        selectFiles(event.target.files);
+      if (multiple)
+        event.target.value = "";
+    },
     "aria-invalid": invalid
   }, undefined, false, undefined, this);
+  if (multiple) {
+    return /* @__PURE__ */ jsxDEV4("div", {
+      className: "grid min-w-0 gap-3",
+      children: [
+        /* @__PURE__ */ jsxDEV4("div", {
+          className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",
+          "data-dragging": dragging,
+          onDragEnter: (event) => {
+            event.preventDefault();
+            dragDepthRef.current += 1;
+            setDragging(true);
+          },
+          onDragLeave: (event) => {
+            event.preventDefault();
+            dragDepthRef.current -= 1;
+            if (dragDepthRef.current <= 0) {
+              dragDepthRef.current = 0;
+              setDragging(false);
+            }
+          },
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxDEV4(CloudUpload, {
+              className: "text-muted-foreground size-6"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("div", {
+              className: "max-w-full min-w-0",
+              children: [
+                /* @__PURE__ */ jsxDEV4("p", {
+                  className: "text-sm font-medium",
+                  children: labels.dropFiles
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV4("p", {
+                  className: "text-muted-foreground max-w-full text-xs [overflow-wrap:anywhere]",
+                  children: labels.accepts(accept)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV4(Button, {
+              type: "button",
+              variant: "outline",
+              onClick: () => inputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsxDEV4(FileUp, {
+                  "data-icon": "inline-start"
+                }, undefined, false, undefined, this),
+                labels.chooseFiles
+              ]
+            }, undefined, true, undefined, this),
+            input
+          ]
+        }, undefined, true, undefined, this),
+        files.length > 0 ? /* @__PURE__ */ jsxDEV4(AttachmentGroup, {
+          children: files.map((selectedFile) => /* @__PURE__ */ jsxDEV4(Attachment, {
+            state: invalid ? "error" : "idle",
+            children: [
+              /* @__PURE__ */ jsxDEV4(AttachmentMedia, {
+                children: /* @__PURE__ */ jsxDEV4(FileIcon, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(AttachmentContent, {
+                children: [
+                  /* @__PURE__ */ jsxDEV4(AttachmentTitle, {
+                    children: selectedFile.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(AttachmentDescription, {
+                    children: fileDescription(selectedFile)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4(AttachmentActions, {
+                children: /* @__PURE__ */ jsxDEV4(AttachmentAction, {
+                  type: "button",
+                  "aria-label": `${labels.deleteFile} ${selectedFile.name}`,
+                  onClick: () => onFilesChange?.(files.filter((candidate) => candidate !== selectedFile)),
+                  children: /* @__PURE__ */ jsxDEV4(Trash2, {}, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`, true, undefined, this))
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this);
+  }
   if (!selected) {
     return /* @__PURE__ */ jsxDEV4("div", {
       className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",

package/dist/components/ui/form.js

@@ -444,6 +444,13 @@ function AttachmentAction({
     ...props
   }, undefined, false, undefined, this);
 }
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    "data-slot": "attachment-group",
+    className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
 
 // ../../src/paraglide/runtime.js
 import"@inlang/paraglide-js/urlpattern-polyfill";
@@ -880,15 +887,19 @@ var messages = {
   en: {
     accepts: (accepts) => `Accepts: ${accepts}`,
     chooseFile: "Choose file",
+    chooseFiles: "Choose files",
     deleteFile: "Delete",
     dropFile: "Drag and drop a file here",
+    dropFiles: "Drag and drop files here",
     replaceFile: "Replace file"
   },
   fr: {
     accepts: (accepts) => `Accepte : ${accepts}`,
     chooseFile: "Choisir un fichier",
+    chooseFiles: "Choisir des fichiers",
     deleteFile: "Supprimer",
     dropFile: "Glissez-déposez un fichier ici",
+    dropFiles: "Glissez-déposez des fichiers ici",
     replaceFile: "Remplacer le fichier"
   }
 };
@@ -913,14 +924,17 @@ var FilePicker = ({
   accept = "",
   canClear = false,
   file,
+  files = [],
   id,
   image,
   invalid = false,
   messages: messages2,
+  multiple = false,
   name,
   onBlur,
   onChange,
   onClear,
+  onFilesChange,
   required,
   title
 }) => {
@@ -936,17 +950,23 @@ var FilePicker = ({
   }, [objectUrl]);
   const imageUrl = objectUrl ?? image?.src;
   const selected = Boolean(file || imageUrl);
-  const selectFile = (nextFile) => {
-    if (nextFile)
-      onChange(nextFile);
+  const selectFiles = (nextFiles) => {
+    const selectedFiles = Array.from(nextFiles);
+    if (multiple) {
+      const uniqueFiles = new Map([...files, ...selectedFiles].map((selectedFile) => [
+        `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`,
+        selectedFile
+      ]));
+      onFilesChange?.(Array.from(uniqueFiles.values()));
+    } else if (selectedFiles[0]) {
+      onChange?.(selectedFiles[0]);
+    }
   };
   const handleDrop = (event) => {
     event.preventDefault();
     dragDepthRef.current = 0;
     setDragging(false);
-    if (inputRef.current)
-      inputRef.current.files = event.dataTransfer.files;
-    selectFile(event.dataTransfer.files[0]);
+    selectFiles(event.dataTransfer.files);
     onBlur?.();
   };
   const clear = () => {
@@ -961,11 +981,101 @@ var FilePicker = ({
     name,
     type: "file",
     accept,
-    required,
+    multiple,
+    required: required && (!multiple || files.length === 0),
     onBlur,
-    onChange: (event) => selectFile(event.target.files?.[0]),
+    onChange: (event) => {
+      if (event.target.files)
+        selectFiles(event.target.files);
+      if (multiple)
+        event.target.value = "";
+    },
     "aria-invalid": invalid
   }, undefined, false, undefined, this);
+  if (multiple) {
+    return /* @__PURE__ */ jsxDEV7("div", {
+      className: "grid min-w-0 gap-3",
+      children: [
+        /* @__PURE__ */ jsxDEV7("div", {
+          className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",
+          "data-dragging": dragging,
+          onDragEnter: (event) => {
+            event.preventDefault();
+            dragDepthRef.current += 1;
+            setDragging(true);
+          },
+          onDragLeave: (event) => {
+            event.preventDefault();
+            dragDepthRef.current -= 1;
+            if (dragDepthRef.current <= 0) {
+              dragDepthRef.current = 0;
+              setDragging(false);
+            }
+          },
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxDEV7(CloudUpload, {
+              className: "text-muted-foreground size-6"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV7("div", {
+              className: "max-w-full min-w-0",
+              children: [
+                /* @__PURE__ */ jsxDEV7("p", {
+                  className: "text-sm font-medium",
+                  children: labels.dropFiles
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV7("p", {
+                  className: "text-muted-foreground max-w-full text-xs [overflow-wrap:anywhere]",
+                  children: labels.accepts(accept)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV7(Button, {
+              type: "button",
+              variant: "outline",
+              onClick: () => inputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsxDEV7(FileUp, {
+                  "data-icon": "inline-start"
+                }, undefined, false, undefined, this),
+                labels.chooseFiles
+              ]
+            }, undefined, true, undefined, this),
+            input
+          ]
+        }, undefined, true, undefined, this),
+        files.length > 0 ? /* @__PURE__ */ jsxDEV7(AttachmentGroup, {
+          children: files.map((selectedFile) => /* @__PURE__ */ jsxDEV7(Attachment, {
+            state: invalid ? "error" : "idle",
+            children: [
+              /* @__PURE__ */ jsxDEV7(AttachmentMedia, {
+                children: /* @__PURE__ */ jsxDEV7(FileIcon, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7(AttachmentContent, {
+                children: [
+                  /* @__PURE__ */ jsxDEV7(AttachmentTitle, {
+                    children: selectedFile.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV7(AttachmentDescription, {
+                    children: fileDescription(selectedFile)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7(AttachmentActions, {
+                children: /* @__PURE__ */ jsxDEV7(AttachmentAction, {
+                  type: "button",
+                  "aria-label": `${labels.deleteFile} ${selectedFile.name}`,
+                  onClick: () => onFilesChange?.(files.filter((candidate) => candidate !== selectedFile)),
+                  children: /* @__PURE__ */ jsxDEV7(Trash2, {}, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, `${selectedFile.name}:${selectedFile.size}:${selectedFile.lastModified}`, true, undefined, this))
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this);
+  }
   if (!selected) {
     return /* @__PURE__ */ jsxDEV7("div", {
       className: "bg-muted/30 data-[dragging=true]:bg-muted flex min-h-32 flex-col items-center justify-center gap-3 rounded-xl border border-dashed p-6 text-center transition-colors",

package/dist/components/ui/sidebar-layout.d.ts

@@ -10,6 +10,9 @@ type NavGroup = {
     items: NavItem[];
 };
 export type { NavItem, NavGroup };
+export declare const useSidebarLayout: () => {
+    isMobile: boolean;
+};
 type SidebarPageHeaderProps = {
     title: string;
     description?: string;
@@ -20,10 +23,12 @@ type SidebarPageHeaderProps = {
     actions?: React.ReactNode;
 };
 export declare function SidebarPageHeader({ title, description, badge, actions, }: SidebarPageHeaderProps): import("react").JSX.Element;
-export declare function SidebarLayout({ groups, children, sidebarFooter, sidebarHeader, headerActions, }: {
+export declare function SidebarLayout({ groups, children, sidebarFooter, sidebarHeader, headerActions, contentClassName, fullPage, }: {
     groups: NavGroup[];
     children?: React.ReactNode;
     sidebarFooter?: React.ReactNode;
     sidebarHeader?: React.ReactNode;
     headerActions?: React.ReactNode;
+    contentClassName?: string;
+    fullPage?: boolean;
 }): import("react").JSX.Element;

package/dist/components/ui/sidebar-layout.js

@@ -613,6 +613,10 @@ var sidebarOpenAtom = Atom.kvs({
   schema: Schema.Boolean,
   defaultValue: () => true
 });
+var useSidebarLayout = () => {
+  const { isMobile } = useSidebar();
+  return { isMobile };
+};
 function AppSidebar({ footer, groups, header }) {
   const { isMobile, setOpenMobile } = useSidebar();
   const pathname = useRouterState({
@@ -715,12 +719,15 @@ function SidebarLayout({
   children,
   sidebarFooter,
   sidebarHeader,
-  headerActions
+  headerActions,
+  contentClassName,
+  fullPage = false
 }) {
   const [sidebarOpen, setSidebarOpen] = useAtom(sidebarOpenAtom);
   return /* @__PURE__ */ jsxDEV8(SidebarProvider, {
     open: sidebarOpen,
     onOpenChange: setSidebarOpen,
+    className: cn(fullPage && "xl:h-svh xl:min-h-0 xl:overflow-hidden"),
     children: [
       /* @__PURE__ */ jsxDEV8(AppSidebar, {
         footer: sidebarFooter,
@@ -728,7 +735,7 @@ function SidebarLayout({
         header: sidebarHeader
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV8(SidebarInset, {
-        className: "min-w-0 overflow-x-hidden",
+        className: cn("min-w-0 overflow-x-hidden", fullPage && "xl:h-svh xl:min-h-0 xl:overflow-hidden"),
         children: [
           /* @__PURE__ */ jsxDEV8("header", {
             className: "bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b px-4 backdrop-blur",
@@ -741,7 +748,7 @@ function SidebarLayout({
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV8("div", {
-            className: "flex flex-col gap-6 px-5 py-6 md:px-8",
+            className: contentClassName ?? "flex flex-col gap-6 px-5 py-6 md:px-8",
             children: children ?? /* @__PURE__ */ jsxDEV8(Outlet, {}, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
@@ -750,6 +757,7 @@ function SidebarLayout({
   }, undefined, true, undefined, this);
 }
 export {
+  useSidebarLayout,
   SidebarPageHeader,
   SidebarLayout
 };

package/dist/services/notification/index.d.ts

@@ -11,5 +11,6 @@ export declare class NotificationService extends NotificationService_base {
     static readonly layer: Layer.Layer<NotificationService, never, NotificationChannelRegistry>;
     static readonly makeLayer: (channels: ReadonlyArray<NotificationChannelShape>) => Layer.Layer<NotificationService, never, never>;
     static readonly noopLayer: Layer.Layer<NotificationService, never, never>;
+    static readonly localLayer: Layer.Layer<NotificationService, never, never>;
 }
 export {};

package/dist/services/notification/index.js

@@ -61,6 +61,12 @@ class NotificationService extends Context2.Service()("NotificationService", {
   static noopLayer = Layer2.succeed(this, {
     send: () => Effect2.void
   });
+  static localLayer = this.makeLayer([
+    {
+      key: "email",
+      send: (payload) => Effect2.logInfo("[fake email]", payload)
+    }
+  ]);
 }
 export {
   NotificationService

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {