firstly 0.2.0 → 0.2.1

package/esm/internals/index.d.ts

@@ -18,20 +18,19 @@ import { default as Link } from '../ui/link/Link.svelte';
 import { default as LinkPlus } from '../ui/link/LinkPlus.svelte';
 import { default as Loading } from '../ui/Loading.svelte';
 import { default as Tooltip } from '../ui/Tooltip.svelte';
-import type { BaseEnum, BaseItem, FF_Icon } from './BaseEnum.js';
-import type { CellsInput as CellsInput_ForExport } from './cellsBuildor.js';
+import type { BaseEnum, BaseItem, BaseItemLight, FF_Icon } from './BaseEnum.js';
+import type { CellsInput } from './cellsBuildor.js';
 import { FF_Role } from './common.js';
-import { storeItem } from './storeItem.js';
+import { storeItem, type StoreItem } from './storeItem.js';
 import { storeList } from './storeList.js';
 export { Field, FormEditAction, Grid, Grid2, GridPaginate, GridPaginate2, FieldGroup, Icon, Link, LinkPlus, Loading, Button, Tooltip, DialogManagement, FieldContainer, SelectMelt, Clipboardable, };
 export type { BaseEnumOptions } from './BaseEnum.js';
-export type { BaseItem };
-export type BaseItemLight = Partial<BaseItem>;
+export type { BaseItem, BaseItemLight };
 export type { DialogMetaDataInternal } from '../ui/dialog/dialog.js';
-export type CellsInput<entityType> = CellsInput_ForExport<entityType>;
+export type { CellsInput };
 export type { Cell, VisibilityMode } from './cellsBuildor.js';
 export type { FF_FindOptions } from './storeList.js';
-export type StoreItem<T> = ReturnType<typeof storeItem<T>>;
+export type { StoreItem };
 export type StoreList<T> = ReturnType<typeof storeList<T>>;
 export type { ResolvedType, UnArray, RecursivePartial } from '../utils/types.js';
 export { FF_Fields } from './FF_Fields.js';

package/esm/internals/storeItem.d.ts

@@ -1,4 +1,5 @@
 import type { ErrorInfo, FindOptions, Repository } from 'remult';
+export type StoreItem<T> = ReturnType<typeof storeItem<T>>;
 type TheStoreItem<T> = {
     item: T | undefined;
     loading?: boolean;

package/esm/mail/server/index.d.ts

@@ -29,8 +29,14 @@ export type MailOptions = GlobalEasyOptions & {
         defaults?: DefaultOptions;
     };
 };
-declare let transporter: ReturnType<typeof typeNodemailer.createTransport>;
 export type SendMail = typeof sendMail;
+export type SendMailResult = {
+    data: SMTPTransport.SentMessageInfo;
+    error?: undefined;
+} | {
+    error: any;
+    data?: undefined;
+};
 export declare const sendMail: (
 /** usefull for logs, it has NO impact on the mail itself */
 topic: string, easyOptions: GlobalEasyOptions & {
@@ -46,6 +52,6 @@ topic: string, easyOptions: GlobalEasyOptions & {
     }[];
 }, options?: {
     nodemailer?: MailOptions['nodemailer'];
-}) => ReturnType<typeof transporter.sendMail>;
+}) => Promise<SendMailResult>;
 export declare const mail: (o?: MailOptions) => Module<unknown>;
 export {};

package/esm/mail/server/index.js

@@ -99,10 +99,10 @@ export const sendMail = async (topic, easyOptions, options) => {
     }
     try {
         if (!globalOptions?.nodemailer?.transport) {
-            const info = await transporter.sendMail({ ...nodemailerOptions.defaults });
+            const data = await transporter.sendMail({ ...nodemailerOptions.defaults });
             log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
 		We are still nice and generated you an email preview link (the mail we not really sent): 
-		👉 ${cyan(String(nodemailer.getTestMessageUrl(info)))}
+		👉 ${cyan(String(nodemailer.getTestMessageUrl(data)))}
 			
 		To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
       `);
@@ -113,10 +113,10 @@ export const sendMail = async (topic, easyOptions, options) => {
                 topic,
                 metadata,
             });
-            return info;
+            return { data };
         }
         else {
-            const info = await transporter.sendMail({ ...nodemailerOptions.defaults });
+            const data = await transporter.sendMail({ ...nodemailerOptions.defaults });
             log.success(`${magenta(`[${topic}]`)} - Sent to ${typeof nodemailerOptions.defaults?.to === 'string' ? green(nodemailerOptions.defaults?.to) : nodemailerOptions.defaults?.to}`);
             await repo(mailEntities.Mail).insert({
                 status: 'sent',
@@ -125,7 +125,7 @@ export const sendMail = async (topic, easyOptions, options) => {
                 topic,
                 metadata,
             });
-            return info;
+            return { data };
         }
     }
     catch (error) {
@@ -138,15 +138,43 @@ ${cyan(JSON.stringify(globalOptions?.nodemailer?.transport, null, 2))}
         else {
             log.error(`${magenta(`[${topic}]`)} - Error`, error);
         }
+        // TODO
+        // Build comprehensive error info for JSON storage
+        const errorInfoJSON = {
+            message: error instanceof Error ? error.message : String(error),
+            name: error instanceof Error ? error.name : 'Unknown',
+            // stack: error instanceof Error ? error.stack : undefined,
+            code: error?.code,
+            errno: error?.errno,
+            syscall: error?.syscall,
+            hostname: error?.hostname,
+            port: error?.port,
+            address: error?.address,
+            response: error?.response,
+            responseCode: error?.responseCode,
+            command: error?.command,
+            // Capture any other enumerable properties
+            ...Object.getOwnPropertyNames(error).reduce((acc, key) => {
+                if (!['message', 'name', 'stack'].includes(key)) {
+                    try {
+                        acc[key] = error[key];
+                    }
+                    catch (e) {
+                        // Ignore properties that can't be accessed
+                    }
+                }
+                return acc;
+            }, {}),
+        };
         await repo(mailEntities.Mail).insert({
             status: 'error',
-            errorInfo: JSON.stringify(error),
+            errorInfo: JSON.stringify(errorInfoJSON),
             to: JSON.stringify(to),
             html: easyOptionsToUse.saveHtml ? html : '',
             topic,
             metadata,
         });
-        throw error;
+        return { error };
     }
 };
 const mailModule = new Module({

package/esm/server/index.d.ts

@@ -27,7 +27,7 @@ export declare class ModuleFF {
     modulesFF?: ModuleFF[];
     constructor(input: ModuleInput);
 }
-type Options = RemultServerOptions<RequestEvent<Partial<Record<string, string>>, string | null>> & {
+type Options = RemultServerOptions<RequestEvent<Partial<Record<string, string>>, any>> & {
     /** @deprecated use `remult` modules instead */
     modulesFF?: ModuleFF[] | undefined;
 };

package/esm/svelte/FF_Cell.svelte

@@ -13,10 +13,11 @@
 		cell: CellMetadata<valueType, entityType>
 		r?: FF_Repo<entityType>
 		class?: string
+		value?: valueType
+		error?: string
 	}
 
-	// eslint-disable-next-line svelte/no-unused-props
-	let props: Props<valueType, entityType> = $props()
+	let { value = $bindable(), error, ...props }: Props<valueType, entityType> = $props()
 
 	// let classes = $derived(getClasses('field', props.classes))
 
@@ -25,9 +26,6 @@
 	let hint = $derived(props.cell.field?.options.ui?.hint ?? props.cell.ui?.hint)
 	// @ts-ignore
 	let ui = $derived(deepMerge(props.cell.field?.options.ui ?? {}, props.cell.ui ?? {}))
-
-	let error = ''
-	let value: any = $state('')
 </script>
 
 <!-- Snippets sections -->

package/esm/svelte/FF_Cell.svelte.d.ts

@@ -4,11 +4,13 @@ interface Props<valueType = unknown, entityType = unknown> {
     cell: CellMetadata<valueType, entityType>;
     r?: FF_Repo<entityType>;
     class?: string;
+    value?: valueType;
+    error?: string;
 }
 declare function $$render<valueType = unknown, entityType = unknown>(): {
     props: Props<valueType, entityType>;
     exports: {};
-    bindings: "";
+    bindings: "value";
     slots: {};
     events: {};
 };
@@ -16,7 +18,7 @@ declare class __sveltets_Render<valueType = unknown, entityType = unknown> {
     props(): ReturnType<typeof $$render<valueType, entityType>>['props'];
     events(): ReturnType<typeof $$render<valueType, entityType>>['events'];
     slots(): ReturnType<typeof $$render<valueType, entityType>>['slots'];
-    bindings(): "";
+    bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/esm/svelte/FF_Form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="entityType = unknown">
 	import { EntityError, getEntityRef } from 'remult'
 
-	import { FF_Field, getClasses } from './'
+	import { FF_Cell, getClasses } from './'
 	import type { FF_Repo, FieldGroup, FormTheme } from './'
 
 	const default_uid = $props.id()
@@ -91,11 +91,10 @@
 				{/if}
 				<div data-ff-form-fields class="{classes?.fields} {group.class}">
 					{#each group.fields as field}
-						<FF_Field
-							uid="{ToUse}-{field.key}"
-							{field}
+						<FF_Cell
+							cell={{ field, mode: 'edit' }}
 							bind:value={valuesToUse[field.key as keyof entityType]}
-							error={errors[field.key]}
+							error={errors[field.key ?? '']}
 						/>
 					{/each}
 				</div>

package/esm/svelte/FF_Grid.svelte

@@ -3,7 +3,7 @@
 
 	import Icon from '../ui/Icon.svelte'
 	import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit } from '../ui/LibIcon'
-	import { dialog, FF_Display, FF_Repo, getClasses, type GridTheme } from './'
+	import { dialog, FF_Cell_Display, FF_Repo, getClasses, type GridTheme } from './'
 
 	interface Props<entityType> {
 		// uid?: string
@@ -100,7 +100,7 @@
 			<tr data-ff-grid-row class={classes?.row}>
 				{#each fields as f (f.key)}
 					<td data-ff-grid-row-cell class="{classes?.rowCell} td-{f.inputType}">
-						<FF_Display field={f} value={item[f.key as keyof entityType]}></FF_Display>
+						<FF_Cell_Display field={f} value={item[f.key as keyof entityType]}></FF_Cell_Display>
 					</td>
 				{/each}
 				{#if showActions}

package/esm/svelte/FF_Layout.svelte

@@ -28,7 +28,7 @@
 {:else if layoutToUse.type === 'grid'}
 	<FF_Grid {r}></FF_Grid>
 {:else if layoutToUse.type === 'tab'}
-	<div role="tablist" class="tabs tabs-lifted">
+	<div role="tablist" class="tabs-lift tabs">
 		{#each layoutToUse.groups ?? [] as group (group.key)}
 			<input
 				type="radio"
@@ -39,14 +39,14 @@
 				onchange={() => (selectedThing = group.key)}
 				aria-label={group.caption}
 			/>
-			<div role="tabpanel" class="tab-content rounded-box border-base-300 bg-base-100 p-6">
+			<div role="tabpanel" class="tab-content border-base-300 bg-base-100 p-6">
 				<FF_Form {r} groups={[group]} show={{ title: false }}></FF_Form>
 			</div>
 		{/each}
 	</div>
 {:else if layoutToUse.type === 'accordion'}
 	{#each layoutToUse.groups ?? [] as group (group.key)}
-		<div class="collapse bg-base-100">
+		<div class="collapse-arrow collapse bg-base-100">
 			<input
 				type="radio"
 				name="my-accordion"

package/esm/svelte/dialog/DialogManagement.svelte

@@ -16,7 +16,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+				<Button class="text-white" onclick={() => dialog.close(toShow.id, { success: true })}
 					>Confirmer</Button
 				>
 			</svelte:fragment>
@@ -29,10 +29,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button
-					class="btn-outline btn-error"
-					on:click={() => dialog.close(toShow.id, { success: true })}
-				>
+				<Button class="btn-error" onclick={() => dialog.close(toShow.id, { success: true })}>
 					Confirmer
 				</Button>
 			</svelte:fragment>

package/esm/svelte/dialog/DialogPrimitive.svelte

@@ -91,8 +91,7 @@
 		inset: 0;
 		z-index: 40;
 		background-color: var(--ff-dialog-overlay);
-		-webkit-backdrop-filter: blur(2px);
-		        backdrop-filter: blur(2px);
+		backdrop-filter: blur(2px);
 	}
 
 	[data-ff-dialog-content] {

package/esm/svelte/dialog/dialog.js

@@ -18,7 +18,7 @@ const createDialogManagement = () => {
         confirm: (topic, text, icon) => {
             const detail = {
                 detail: {
-                    caption: 'Confirmez',
+                    caption: 'A Confirmer',
                     icon: { data: icon },
                 },
                 children: `
@@ -34,7 +34,7 @@ const createDialogManagement = () => {
         confirmDelete: (topic) => {
             const detail = {
                 detail: {
-                    caption: 'Supprimer',
+                    caption: 'A Supprimer',
                     icon: { data: LibIcon_Delete },
                 },
                 children: topic

package/esm/svelte/ff_Config.svelte.js

@@ -40,8 +40,8 @@ export const daisyTheme = {
     },
     edit: {
         checkbox: 'checkbox',
-        input: 'input input-bordered',
-        select: 'select select-bordered',
+        input: 'input',
+        select: 'select',
     },
     grid: {
         root: 'table',

package/esm/svelte/index.d.ts

@@ -1,18 +1,13 @@
 import type { CellMetadata, getLayout } from './customField';
+import { default as FF_Cell_Display } from './FF_Cell_Display.svelte';
 import { default as FF_Cell } from './FF_Cell.svelte';
 import { default as FF_Config } from './FF_Config.svelte';
-import { default as FF_Display } from './FF_Display.svelte';
-import { default as FF_Edit } from './FF_Edit.svelte';
-import { default as FF_Error } from './FF_Error.svelte';
-import { default as FF_Field } from './FF_Field.svelte';
 import { default as FF_Form } from './FF_Form.svelte';
 import { default as FF_Grid } from './FF_Grid.svelte';
-import { default as FF_Hint } from './FF_Hint.svelte';
-import { default as FF_Label } from './FF_Label.svelte';
 import { default as FF_Layout } from './FF_Layout.svelte';
 export type { FieldTheme, FormTheme, GridTheme, Theme, EditTheme, DisplayTheme, } from './ff_Config.svelte.js';
 export { getDynamicCustomField, getTheme, setDynamicCustomField, setTheme, getClasses, daisyTheme, defaultTheme, emptyTheme, FF_Theme, } from './ff_Config.svelte.js';
-export { FF_Grid, FF_Form, FF_Field, FF_Edit, FF_Config, FF_Display, FF_Label, FF_Error, FF_Hint, FF_Layout, FF_Cell, };
+export { FF_Grid, FF_Form, FF_Config, FF_Layout, FF_Cell, FF_Cell_Display };
 export type { DynamicCustomField, FieldGroup } from './customField';
 export { FF_Repo } from './FF_Repo.svelte.js';
 export { tryCatch, tryCatchSync } from './tryCatch';

package/esm/svelte/index.js

@@ -1,16 +1,11 @@
+import { default as FF_Cell_Display } from './FF_Cell_Display.svelte';
 import { default as FF_Cell } from './FF_Cell.svelte';
 import { default as FF_Config } from './FF_Config.svelte';
-import { default as FF_Display } from './FF_Display.svelte';
-import { default as FF_Edit } from './FF_Edit.svelte';
-import { default as FF_Error } from './FF_Error.svelte';
-import { default as FF_Field } from './FF_Field.svelte';
 import { default as FF_Form } from './FF_Form.svelte';
 import { default as FF_Grid } from './FF_Grid.svelte';
-import { default as FF_Hint } from './FF_Hint.svelte';
-import { default as FF_Label } from './FF_Label.svelte';
 import { default as FF_Layout } from './FF_Layout.svelte';
 export { getDynamicCustomField, getTheme, setDynamicCustomField, setTheme, getClasses, daisyTheme, defaultTheme, emptyTheme, FF_Theme, } from './ff_Config.svelte.js';
-export { FF_Grid, FF_Form, FF_Field, FF_Edit, FF_Config, FF_Display, FF_Label, FF_Error, FF_Hint, FF_Layout, FF_Cell, };
+export { FF_Grid, FF_Form, FF_Config, FF_Layout, FF_Cell, FF_Cell_Display };
 export { FF_Repo } from './FF_Repo.svelte.js';
 export { tryCatch, tryCatchSync } from './tryCatch';
 export { overwriteOptions, deepMerge, isOfType } from './helpers';

package/esm/ui/Button.svelte

@@ -7,24 +7,40 @@
 
 	import { BaseEnum, tw } from '../internals'
 
-	export let isLoading = false
-	let className: string | undefined | null = undefined
-	export { className as class }
+	// TODO: extend HTMLButtonAttributes ?
+	interface Props {
+		isLoading?: boolean
+		permission?: BaseEnum[] | BaseEnum | undefined
+		tooltip?: import('svelte').Snippet
+		class?: string
+		children?: import('svelte').Snippet
+		disabled?: boolean | null
+		[key: string]: any
+	}
 
-	export let permission: BaseEnum[] | BaseEnum | undefined = undefined
+	let {
+		isLoading = false,
+		class: className = '',
+		permission = undefined,
+		children,
+		tooltip,
+		disabled: disabledProp,
+		...rest
+	}: Props = $props()
 
-	let permissionDisabled = false
-	$: disabled = $$restProps.disabled || permissionDisabled || isLoading
+	let permissionDisabled = $state(false)
+	let disabled = $derived(disabledProp || permissionDisabled || isLoading)
 
 	// let's trigger the annimation if it's more than 200ms
-	let triggerAnnimation = false
-	$: isLoading &&
-		setTimeout(() => {
-			if (isLoading) {
-				// eslint-disable-next-line
-				triggerAnnimation = true
-			}
-		}, 200)
+	let triggerAnnimation = $state(false)
+	$effect(() => {
+		isLoading &&
+			setTimeout(() => {
+				if (isLoading) {
+					triggerAnnimation = true
+				}
+			}, 200)
+	})
 
 	let updates = (param: { permission: BaseEnum[] | BaseEnum | undefined }) => {
 		if (param && param.permission) {
@@ -42,7 +58,7 @@
 		}
 	}
 
-	let disabledWhy = ''
+	let disabledWhy = $state('')
 	const isAllowed: Action<HTMLElement, { permission: BaseEnum[] | BaseEnum | undefined }> = (
 		node,
 		param,
@@ -81,14 +97,14 @@
 
 <button
 	{...$trigger}
+	use:trigger
 	use:isAllowed={{ permission }}
-	on:click
-	{...$$restProps}
-	class={tw(['btn text-white', disabled ? '' : 'btn-primary', className])}
+	{...rest}
+	class={tw(['btn', className])}
 	{disabled}
 >
 	<!-- btn-outline -->
-	<slot />
+	{@render children?.()}
 	{#if triggerAnnimation && isLoading}
 		<div in:fly={{ x: -20 }}>
 			<span class="loading loading-spinner"></span>
@@ -96,7 +112,7 @@
 	{/if}
 </button>
 
-{#if $open && (disabledWhy || $$slots.tooltip)}
+{#if $open && (disabledWhy || tooltip)}
 	<div
 		{...$content}
 		use:content
@@ -105,8 +121,8 @@
 	>
 		<div {...$arrow} use:arrow></div>
 		<div class="px-4 py-1">
-			{#if $$slots.tooltip}
-				<slot name="tooltip" />
+			{#if tooltip}
+				{@render tooltip?.()}
 			{:else}
 				{disabledWhy}
 			{/if}

package/esm/ui/Button.svelte.d.ts

@@ -1,37 +1,13 @@
 import { BaseEnum } from '../internals';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    isLoading?: boolean;
+    permission?: BaseEnum[] | BaseEnum | undefined;
+    tooltip?: import('svelte').Snippet;
+    class?: string;
+    children?: import('svelte').Snippet;
+    disabled?: boolean | null;
+    [key: string]: any;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    isLoading?: boolean | undefined;
-    class?: string | undefined | null | undefined;
-    permission?: BaseEnum<any> | BaseEnum<any>[] | undefined;
-}, {
-    default: {};
-    tooltip: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    tooltip: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/esm/ui/Clipboardable.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-	/**
-	 * @param value to set in the clipboard if not null.
-	 *
-	 * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
-	 */
-	export let value: string | null
-	export { extraClass as class }
+	interface Props {
+		/**
+		 * @param value to set in the clipboard if not null.		 *
+		 * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
+		 */
+		value: string | null
+		class?: string
+		children?: import('svelte').Snippet
+	}
 
-	let extraClass = ''
+	let { value, class: extraClass = '', children }: Props = $props()
 
 	async function clip(_value: string | null) {
 		if (_value) {
@@ -18,12 +20,6 @@
 	}
 </script>
 
-<span
-	role="button"
-	tabindex="0"
-	on:keyup={() => {}}
-	on:click={() => clip(value)}
-	class={`${value ? 'cursor-copy' : ''} ${extraClass}`}
->
-	<slot />
-</span>
+<button onclick={() => clip(value)} class={`text-left ${value ? 'cursor-copy' : ''} ${extraClass}`}>
+	{@render children?.()}
+</button>

package/esm/ui/Clipboardable.svelte.d.ts

@@ -1,36 +1,12 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Clipboardable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     /**
-         * @param value to set in the clipboard if not null.
-         *
-         * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
-         */ value: string | null;
+     * @param value to set in the clipboard if not null.		 *
+     * Don't put this on an input, if not, when a user will select the input via the mouse, this clipboard will be copied (usually you wanted to paste)!
+     */
+    value: string | null;
     class?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    class: string;
-}, string>;
-type Clipboardable = InstanceType<typeof Clipboardable>;
+    children?: import('svelte').Snippet;
+}
+declare const Clipboardable: import("svelte").Component<Props, {}, "">;
+type Clipboardable = ReturnType<typeof Clipboardable>;
 export default Clipboardable;