windmill-components 1.82.6 → 1.82.7

package/components/apps/svelte-grid/MoveResize.svelte

@@ -15,8 +15,9 @@ export let item;
 export let cols;
 export let nativeContainer;
 export let onTop;
+export let shadow = undefined;
+const divId = `component-${id}`;
 let shadowElement;
-let shadow = undefined;
 let active = false;
 let initX, initY;
 let capturePos = {
@@ -27,7 +28,7 @@ let cordDiff = { x: 0, y: 0 };
 let newSize = { width, height };
 let trans = false;
 let anima;
-const inActivate = () => {
+export function inActivate() {
     if (shadowElement && shadow != undefined) {
         let subgrid = shadowElement.closest('.subgrid');
         let irect = shadowElement.getBoundingClientRect();
@@ -57,18 +58,14 @@ const inActivate = () => {
         clearTimeout(anima);
         anima = setTimeout(() => {
             trans = false;
-        }, 100);
-        dispatch('pointerup', {
-            id
-        });
+        }, 50);
     }
-};
-let repaint = (cb, isPointerUp) => {
+}
+let repaint = (activate, isPointerUp) => {
     dispatch('repaint', {
         id,
-        shadow,
         isPointerUp,
-        onUpdate: cb
+        activate
     });
 };
 // Autoscroll
@@ -78,7 +75,7 @@ let rect;
 let scrollElement;
 const getContainerFrame = (element) => {
     if (element === document.documentElement || !element) {
-        const { height, top, right, bottom, left } = nativeContainer.getBoundingClientRect();
+        const { top, bottom } = nativeContainer.getBoundingClientRect();
         return {
             top: Math.max(0, top),
             bottom: Math.min(window.innerHeight, bottom)
@@ -87,11 +84,13 @@ const getContainerFrame = (element) => {
     return element.getBoundingClientRect();
 };
 const getScroller = (element) => (!element ? document.documentElement : element);
-function computeRect(target) {
-    let gridItem = target.closest('.svlt-grid-item');
+function computeRect() {
+    let gridItem = document.getElementById(divId);
+    if (!gridItem)
+        return;
     let subgrid = gridItem.closest('.subgrid');
     let irect = gridItem.getBoundingClientRect();
-    if (subgrid) {
+    if (subgrid && subgrid.parentElement) {
         let subGridParent = subgrid.parentElement;
         let subGridParentRect = subGridParent.getBoundingClientRect();
         let prect = subgrid.getBoundingClientRect();
@@ -109,25 +108,28 @@ function computeRect(target) {
     }
 }
 let dragClosure = undefined;
-const pointerdown = ({ clientX, clientY, target }) => {
+const pointerdown = ({ clientX, clientY }) => {
     dragClosure = () => {
         dragClosure = undefined;
         initX = clientX;
         initY = clientY;
-        capturePos = { x: left, y: top };
-        shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-        newSize = { width, height };
-        containerFrame = getContainerFrame(container);
-        scrollElement = getScroller(container);
-        cordDiff = { x: 0, y: 0 };
-        active = true;
-        trans = false;
-        computeRect(target);
-        _scrollTop = scrollElement.scrollTop;
+        dispatch('initmove');
     };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
 };
+export function initmove() {
+    computeRect();
+    newSize = { width, height };
+    capturePos = { x: left, y: top };
+    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+    cordDiff = { x: 0, y: 0 };
+    active = true;
+    trans = false;
+    containerFrame = getContainerFrame(container);
+    scrollElement = getScroller(container);
+    _scrollTop = scrollElement.scrollTop;
+}
 let sign = { x: 0, y: 0 };
 let vel = { x: 0, y: 0 };
 let intervalId = undefined;
@@ -138,8 +140,8 @@ const stopAutoscroll = () => {
     vel = { x: 0, y: 0 };
 };
 const update = () => {
-    const _newScrollTop = scrollElement.scrollTop - _scrollTop;
     const boundX = capturePos.x + cordDiff.x;
+    const _newScrollTop = (scrollElement?.scrollTop ?? 0) - (_scrollTop ?? 0);
     const boundY = capturePos.y + (cordDiff.y + _newScrollTop);
     let gridX = Math.round(boundX / xPerPx);
     let gridY = Math.round(boundY / yPerPx);
@@ -147,7 +149,6 @@ const update = () => {
         shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
         shadow.y = Math.max(gridY, 0);
     }
-    repaint(undefined, false);
 };
 const pointermove = (event) => {
     dragClosure && dragClosure();
@@ -155,49 +156,68 @@ const pointermove = (event) => {
     event.stopPropagation();
     event.stopImmediatePropagation();
     const { clientX, clientY } = event;
-    cordDiff = { x: clientX - initX, y: clientY - initY };
+    const cordDiff = { x: clientX - initX, y: clientY - initY };
+    dispatch('move', { cordDiff, clientY });
+};
+export function updateMove(newCoordDiff, clientY) {
+    if (!active) {
+        active = true;
+    }
+    if (trans) {
+        trans = false;
+    }
+    cordDiff = newCoordDiff;
+    // console.log(cordDiff, id, 'B')
     const Y_SENSOR = sensor;
-    let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
-    let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
-    const topSensor = velocityTop > 0 && velocityBottom === 0;
-    const bottomSensor = velocityBottom > 0 && velocityTop === 0;
-    sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
-    vel.y = sign.y === -1 ? velocityTop : velocityBottom;
-    if (vel.y > 0) {
-        if (!intervalId) {
-            // Start scrolling
-            // TODO Use requestAnimationFrame
-            intervalId = setInterval(() => {
-                scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
-                update();
-            }, 10);
+    if (containerFrame) {
+        let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
+        let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
+        const topSensor = velocityTop > 0 && velocityBottom === 0;
+        const bottomSensor = velocityBottom > 0 && velocityTop === 0;
+        sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
+        vel.y = sign.y === -1 ? velocityTop : velocityBottom;
+        if (vel.y > 0) {
+            if (!intervalId) {
+                // Start scrolling
+                // TODO Use requestAnimationFrame
+                intervalId = setInterval(() => {
+                    scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
+                    update();
+                }, 10);
+            }
+        }
+        else if (intervalId) {
+            stopAutoscroll();
+        }
+        else {
+            update();
         }
-    }
-    else if (intervalId) {
-        stopAutoscroll();
     }
     else {
         update();
     }
-};
+}
 const pointerup = (e) => {
-    dragClosure = undefined;
     stopAutoscroll();
     window.removeEventListener('pointerdown', pointerdown);
     window.removeEventListener('pointermove', pointermove);
     window.removeEventListener('pointerup', pointerup);
-    repaint(inActivate, true);
+    if (!dragClosure) {
+        repaint(true, true);
+    }
+    else {
+        dragClosure = undefined;
+    }
 };
-// Resize
 let resizeInitPos = { x: 0, y: 0 };
 let initSize = { width: 0, height: 0 };
 const resizePointerDown = (e) => {
     e.stopPropagation();
-    const { pageX, pageY, target } = e;
+    const { pageX, pageY } = e;
     resizeInitPos = { x: pageX, y: pageY };
     initSize = { width, height };
     cordDiff = { x: 0, y: 0 };
-    computeRect(target);
+    computeRect();
     newSize = { width, height };
     active = true;
     trans = false;
@@ -219,12 +239,12 @@ const resizePointerMove = ({ pageX, pageY }) => {
         // Limit col & row
         shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
         shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
-        repaint(undefined, false);
+        repaint(false, false);
     }
 };
 const resizePointerUp = (e) => {
     e.stopPropagation();
-    repaint(inActivate, true);
+    repaint(true, true);
     window.removeEventListener('pointermove', resizePointerMove);
     window.removeEventListener('pointerup', resizePointerUp);
 };
@@ -234,18 +254,19 @@ const resizePointerUp = (e) => {
 <div
 	draggable="false"
 	on:pointerdown|stopPropagation|preventDefault={pointerdown}
+	id={divId}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active
 		? newSize.height
 		: height}px; {onTop ? 'z-index: 1000;' : ''}
-  {active
+  {active && rect
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
 		: trans
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
 		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
 >
-	<slot movePointerDown={pointerdown} {resizePointerDown} />
+	<slot />
 	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
 </div>
 

package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -16,27 +16,33 @@ declare const __propDef: {
         cols: any;
         nativeContainer: any;
         onTop: any;
+        shadow?: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        } | undefined;
+        inActivate?: (() => void) | undefined;
+        initmove?: (() => void) | undefined;
+        updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;
     };
     events: {
-        pointerup: CustomEvent<any>;
         repaint: CustomEvent<any>;
+        initmove: CustomEvent<any>;
+        move: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            movePointerDown: ({ clientX, clientY, target }: {
-                clientX: any;
-                clientY: any;
-                target: any;
-            }) => void;
-            resizePointerDown: (e: any) => void;
-        };
+        default: {};
     };
 };
 export type MoveResizeProps = typeof __propDef.props;
 export type MoveResizeEvents = typeof __propDef.events;
 export type MoveResizeSlots = typeof __propDef.slots;
 export default class MoveResize extends SvelteComponentTyped<MoveResizeProps, MoveResizeEvents, MoveResizeSlots> {
+    get inActivate(): () => void;
+    get initmove(): () => void;
+    get updateMove(): (newCoordDiff: any, clientY: any) => void;
 }
 export {};

package/components/apps/svelte-grid/utils/helper.d.ts

@@ -1,5 +1,4 @@
 declare const gridHelp: {
-    normalize(items: any, col: any): any;
     adjust(items: any, col: any): import("../types").FilledItem<unknown>[];
     item(obj: any): any;
     findSpace(item: any, items: any, cols: any): {

package/components/apps/svelte-grid/utils/helper.js

@@ -14,9 +14,6 @@ function makeItem(item) {
     };
 }
 const gridHelp = {
-    normalize(items, col) {
-        return normalize(items, col);
-    },
     adjust(items, col) {
         return adjust(items, col);
     },

package/components/apps/types.d.ts

@@ -63,6 +63,7 @@ export type InlineScript = {
         key: string;
     }[];
 };
+export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
@@ -78,7 +79,7 @@ export type App = {
         autoRefresh?: boolean;
         doNotRecomputeOnInputChanged?: boolean;
     }>;
-    css?: Partial<Record<'viewer' | 'grid' | AppComponent['type'], Record<string, ComponentCssProperty>>>;
+    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {
@@ -91,11 +92,14 @@ export type AppViewerContext = {
     worldStore: Writable<World>;
     app: Writable<App>;
     summary: Writable<string>;
-    selectedComponent: Writable<string | undefined>;
+    selectedComponent: Writable<string[] | undefined>;
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
-    runnableComponents: Writable<Record<string, (inlineScript?: InlineScript) => Promise<void>>>;
+    runnableComponents: Writable<Record<string, {
+        autoRefresh: boolean;
+        cb: (inlineScript?: InlineScript) => Promise<void>;
+    }>>;
     staticExporter: Writable<Record<string, () => any>>;
     appPath: string;
     workspace: string;
@@ -121,13 +125,14 @@ export type AppViewerContext = {
         setTab?: (index: number) => void;
     }>>;
     hoverStore: Writable<string | undefined>;
+    allIdsInPath: Writable<string[]>;
 };
 export type AppEditorContext = {
     history: History<App> | undefined;
     pickVariableCallback: Writable<((path: string) => void) | undefined>;
     ontextfocus: Writable<(() => void) | undefined>;
     selectedComponentInEditor: Writable<string | undefined>;
-    movingcomponent: Writable<string | undefined>;
+    movingcomponents: Writable<string[] | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;
@@ -140,7 +145,6 @@ type ComponentID = string;
 export type ContextPanelContext = {
     search: Writable<string>;
     manuallyOpened: Writable<Record<string, boolean>>;
-    expanded: Writable<boolean>;
     hasResult: Writable<Record<string, boolean>>;
 };
 export {};

package/components/apps/utils.d.ts

@@ -2,6 +2,8 @@ import type { Schema } from '../../common';
 import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
+import { type Writable } from 'svelte/store';
+export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;

package/components/apps/utils.js

@@ -1,7 +1,36 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { emptySchema } from '../../utils';
+import { emptySchema, sendUserToast } from '../../utils';
 import { twMerge } from 'tailwind-merge';
+import { get } from 'svelte/store';
+import { findGridItemParentGrid } from './editor/appUtils';
+export function selectId(e, id, selectedComponent, app) {
+    if (e.shiftKey) {
+        selectedComponent.update((old) => {
+            if (old && old?.[0]) {
+                if (findGridItemParentGrid(app, old[0]) != findGridItemParentGrid(app, id)) {
+                    sendUserToast('Cannot multi select items from different grids', true);
+                    return old;
+                }
+            }
+            if (old == undefined) {
+                return [id];
+            }
+            if (old.includes(id)) {
+                return old;
+            }
+            return [...old, id];
+        });
+    }
+    else {
+        if (get(selectedComponent)?.includes(id)) {
+            return;
+        }
+        else {
+            selectedComponent.set([id]);
+        }
+    }
+}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;
@@ -134,6 +163,7 @@ ${hasRows ? 'declare const row: Record<string, any>;' : ''}
 ${goto
         ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
 declare function setTab(id: string, index: string): void;
+declare function recompute(id: string): void;
 `
         : ''}
 declare const state: ${JSON.stringify(state)};

package/components/common/button/ButtonPopup.svelte

@@ -7,6 +7,7 @@ export let color = 'blue';
 export let variant = 'contained';
 export let mainClasses = '';
 export let toggleClasses = '';
+export let listClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
@@ -59,14 +60,16 @@ $: commonProps = {
 {#if ref}
 	<Popup
 		{ref}
+		let:open
+		let:close
 		options={{
 			placement: $$slots.main ? 'bottom-end' : 'bottom',
 			strategy: 'absolute',
 			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
 		}}
 	>
-		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
-			<slot />
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto {listClasses}">
+			<slot {open} {close} />
 		</ul>
 	</Popup>
 {/if}

package/components/common/button/ButtonPopup.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
+        listClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
         target?: ButtonType.Target | undefined;
@@ -24,7 +25,10 @@ declare const __propDef: {
     slots: {
         main: {};
         toggle: {};
-        default: {};
+        default: {
+            open: () => void;
+            close: () => void;
+        };
     };
 };
 export type ButtonPopupProps = typeof __propDef.props;

package/components/common/button/ButtonPopupItem.svelte

@@ -8,6 +8,7 @@ export let target = '_self';
 export let iconOnly = false;
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let wrapperClasses = '';
 const props = getContext(ButtonType.ItemContextKey);
 const iconWidthClass = {
     xs: '!w-[12px]',
@@ -40,7 +41,7 @@ $: buttonProps = {
 };
 </script>
 
-<li class="mt-1">
+<li class="mt-1 {wrapperClasses}">
 	<Button {...buttonProps} on:click>
 		<slot />
 	</Button>

package/components/common/button/ButtonPopupItem.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        wrapperClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/clearableInput/ClearableInput.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let value = '';
+export let placeholder = '';
+export let type = 'text';
+export let inputClass = '';
+export let wrapperClass = '';
+export let buttonClass = '';
+const dispatch = createEventDispatcher();
+$: isNumeric = ['number', 'range'].includes(type);
+$: dispatch('change', value);
+function handleInput(e) {
+    value = isNumeric ? +e.target.value : e.target.value;
+}
+function clear() {
+    value = '';
+}
+</script>
+
+<div class="relative grow {wrapperClass}">
+	{#if type === 'textarea'}
+		<textarea
+			{value}
+			{placeholder}
+			rows="1"
+			class="resize-y duration-200 {inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{:else}
+		<input
+			{type}
+			{value}
+			{placeholder}
+			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{/if}
+	{#if value}
+		<button
+			transition:fade|local={{ duration: 100 }}
+			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			aria-label="Clear"
+			on:click|preventDefault|stopPropagation={clear}
+		>
+			<X size={14} />
+		</button>
+	{/if}
+	<slot />
+</div>

package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        placeholder?: string | undefined;
+        type?: "number" | "text" | "textarea" | undefined;
+        inputClass?: string | undefined;
+        wrapperClass?: string | undefined;
+        buttonClass?: string | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ClearableInputProps = typeof __propDef.props;
+export type ClearableInputEvents = typeof __propDef.events;
+export type ClearableInputSlots = typeof __propDef.slots;
+export default class ClearableInput extends SvelteComponentTyped<ClearableInputProps, ClearableInputEvents, ClearableInputSlots> {
+}
+export {};

package/components/common/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/index.js

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/kbd/Kbd.svelte

@@ -1,7 +1,10 @@
+<script>export let kbdClass = '';
+</script>
+
 <span
 	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
-	<kbd>
+	<kbd class={kbdClass}>
 		<slot />
 	</kbd>
 </span>

package/components/common/kbd/Kbd.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  KbdProps */
-/** @typedef {typeof __propDef.events}  KbdEvents */
-/** @typedef {typeof __propDef.slots}  KbdSlots */
-export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type KbdProps = typeof __propDef.props;
-export type KbdEvents = typeof __propDef.events;
-export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        kbdClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+}
 export {};