@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Misc/TableSidebar.svelte

@@ -1,183 +1,164 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import Button from '../../Button.svelte';
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Side } from '../../../Types/Internal/Side.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
-	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-	import ColumnPanel from './ColumnPanel.svelte';
-	import FilterPanel from './FilterPanel.svelte';
-	import SidePanel from './SidePanel.svelte';
-	import ToolboxPanel from './ToolboxPanel.svelte';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const panels = {
-		[ExpandedPanel.None]: null,
-		[ExpandedPanel.Column]: ColumnPanel,
-		[ExpandedPanel.Filter]: FilterPanel,
-		[ExpandedPanel.Toolbox]: ToolboxPanel,
-	};
-
-	let expandedPanel = $state<ExpandedPanel | null>(null);
-
-	$effect(() => {
-		tableContext.limitFooter = !!expandedPanel;
-	});
-
-	let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
-
-	function handleClickOutside(e: MouseEvent) {
-		if (
-			(e.target as HTMLElement).isConnected &&
-			(e.target as HTMLElement).closest('.side-content') == null &&
-			(e.target as HTMLElement).closest('.sidebar') == null
-		) {
-			expandedPanel = null;
-		}
-	}
-
-	function handleEscKey(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			expandedPanel = null;
-		}
-	}
-</script>
-
-<svelte:window
-	onclick={handleClickOutside}
-	onkeydown={handleEscKey}
-/>
-
-{#if ExpandedPanelElement != null}
-	<SidePanel toolbarPosition={tableContext.toolbarPosition}>
-		<ExpandedPanelElement />
-	</SidePanel>
-{/if}
-<div class="sidebar">
-	<!-- TODO may have to disable the sidebar class when it is not toggled -->
-
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		onclick={() => {
-			tableContext.toggleQuickFiltering();
-		}}
-		toggled={tableContext.showQuickFiltering}
-		disabled={!tableContext.allowQuickFiltering}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'assessment',
-			size: Size.Medium,
-		}}
-		label="Quick Filter"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		disabled={!tableContext.allowAdvancedFiltering}
-		toggled={expandedPanel === ExpandedPanel.Filter}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'filter-bars',
-			size: Size.Medium,
-		}}
-		label="Advanced Filter"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
-		}}
-		variant={Variant.Toolbar}
-		toggled={expandedPanel === ExpandedPanel.Column}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'columns',
-			size: Size.Medium,
-		}}
-		label="Modify Columns"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'category',
-			size: Size.Medium,
-		}}
-		label="My Tool Box"
-	/>
-
-	{#if tableContext.paginationRepo?.reload}
-		<Button
-			side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-			onclick={() => {
-				tableContext.paginationRepo?.reload?.().catch(devCatch);
-			}}
-			disabled={!tableContext.allowQuickFiltering}
-			variant={Variant.Toolbar}
-			toggled={tableContext.dataRepo.isLoading}
-			iconTop={{
-				// colour: Colour.$alt,
-				name: 'refresh',
-				size: Size.Medium,
-			}}
-			label="Refresh"
-		/>
-	{/if}
-
-	<div class="filler"></div>
-	<!-- <Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'database-download',
-			size: Size.Medium
-		}}
-		label="Export Records"
-	/>
-	<Button
-		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={(e) => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			// colour: Colour.$alt,
-			name: 'setting-cog',
-			size: Size.Medium
-		}}
-		label="Table Configuration"
-	/> -->
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
+	import { Side } from '../../../Types/Internal/Side.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
+	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+	import ColumnPanel from './ColumnPanel.svelte';
+	import FilterPanel from './FilterPanel.svelte';
+	import SidePanel from './SidePanel.svelte';
+	import ToolboxPanel from './ToolboxPanel.svelte';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const panels = {
+		[ExpandedPanel.Column]: ColumnPanel,
+		[ExpandedPanel.Filter]: FilterPanel,
+		[ExpandedPanel.Toolbox]: ToolboxPanel,
+	} as const;
+
+	let expandedPanel = $state<ExpandedPanel | null>(null);
+
+	$effect(() => {
+		tableContext.limitFooter = !!expandedPanel;
+	});
+
+	let ExpandedPanelElement = $derived(
+		expandedPanel && expandedPanel !== ExpandedPanel.None ? panels[expandedPanel] : null
+	);
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (!target.isConnected) {
+			return;
+		}
+		// A click landing inside the side-panel or the toolbar
+		// sidebar should keep the panel open.
+		if (target.closest('.side-content') != null) {
+			return;
+		}
+		if (target.closest('.sidebar') != null) {
+			return;
+		}
+		// A click landing inside a teleported select dropdown (see
+		// `Helpers/dropdownPortal.ts`) is a logical extension of the
+		// trigger that lives inside the side-panel, so it must not
+		// close the panel. The marker attribute is set by the portal
+		// helper while the dropdown is teleported to `document.body`.
+		if (target.closest('[data-scoria-portal-dropdown]') != null) {
+			return;
+		}
+		expandedPanel = null;
+	}
+
+	function handleEscKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			expandedPanel = null;
+		}
+	}
+</script>
+
+<svelte:window
+	onclick={handleClickOutside}
+	onkeydown={handleEscKey}
+/>
+
+{#if ExpandedPanelElement != null}
+	<SidePanel toolbarPosition={tableContext.toolbarPosition}>
+		<ExpandedPanelElement />
+	</SidePanel>
+{/if}
+<div class="sidebar">
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		onclick={() => {
+			tableContext.toggleQuickFiltering();
+		}}
+		toggled={tableContext.showQuickFiltering}
+		disabled={!tableContext.allowQuickFiltering}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'assessment',
+			size: Size.Medium,
+		}}
+		label="Quick Filter"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		disabled={!tableContext.allowAdvancedFiltering}
+		toggled={expandedPanel === ExpandedPanel.Filter}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'filter-bars',
+			size: Size.Medium,
+		}}
+		label="Advanced Filter"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
+		}}
+		variant={Variant.Toolbar}
+		toggled={expandedPanel === ExpandedPanel.Column}
+		iconTop={{
+			name: 'columns',
+			size: Size.Medium,
+		}}
+		label="Modify Columns"
+	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'category',
+			size: Size.Medium,
+		}}
+		label="My Tool Box"
+	/>
+
+	{#if tableContext.paginationRepo?.reload}
+		<Button
+			side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+			onclick={() => {
+				tableContext.paginationRepo?.reload?.().catch(devCatch);
+			}}
+			disabled={!tableContext.allowQuickFiltering}
+			variant={Variant.Toolbar}
+			toggled={tableContext.dataRepo.isLoading}
+			iconTop={{
+				name: 'refresh',
+				size: Size.Medium,
+			}}
+			label="Refresh"
+		/>
+	{/if}
+
+	<div class="filler"></div>
+</div>
+
 <style>.sidebar {
   flex-flow: column nowrap;
   text-orientation: sideways;
   align-self: stretch;
-  box-shadow: 0px 0px 0px 3px #d5dbe0 inset;
+  box-shadow: 0px 0px 0px 3px #cbd4da inset;
   display: flex;
   justify-content: start;
   gap: 1px;
@@ -191,4 +172,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>

package/dist/Components/Table/Misc/TableSidebar.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableSidebar: $$IsomorphicComponent;
-type TableSidebar<T extends object> = InstanceType<typeof TableSidebar<T>>;
+type TableSidebar<T extends object, IdType extends Primitive> = InstanceType<typeof TableSidebar<T, IdType>>;
 export default TableSidebar;

package/dist/Components/Table/Misc/ToolboxPanel.svelte

@@ -1,84 +1,150 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T extends object">
-	import Checkbox from '../../Checkbox.svelte';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event) => {
-		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
-	};
-
-	const onSingleCLickChange = (e: Event) => {
-		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
-	};
-
-	const onAlternateRowColoursChange = (e: Event) => {
-		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
-	};
-
-	const onChangeColourOnHoverChange = (e: Event) => {
-		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
-	};
-
-	const onCopyWithHeadersChange = (e: Event) => {
-		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
-	};
-
-	const onCommaSeparatedCopyChange = (e: Event) => {
-		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
-	};
-</script>
-
-<div class="column-panel">
-	<h3>Settings</h3>
-	<Checkbox
-		label="Compact"
-		id={`is-compact-${tableContext.tableName}`}
-		value={tableContext.isCompact}
-		onchange={onCompactChange}
-	/>
-	<Checkbox
-		label="Single Click Editing"
-		id={`single-click-editing-${tableContext.tableName}`}
-		value={tableContext.singleClickEditing}
-		onchange={onSingleCLickChange}
-	/>
-	<Checkbox
-		label="Alternate Row Colours"
-		id={`alternate-row-colours-${tableContext.tableName}`}
-		value={tableContext.alternateRowColours}
-		onchange={onAlternateRowColoursChange}
-	/>
-	<Checkbox
-		label="Change Colour on Hover"
-		id={`change-colour-on-hover-${tableContext.tableName}`}
-		value={tableContext.changeColourOnHover}
-		onchange={onChangeColourOnHoverChange}
-	/>
-	{#if tableContext.allowCopy}
-		<Checkbox
-			label="Include Headers When Copying"
-			id={`copy-with-headers-${tableContext.tableName}`}
-			value={tableContext.copyWithHeaders}
-			onchange={onCopyWithHeadersChange}
-		/>
-		<Checkbox
-			label="Copy as Comma Separated Values"
-			id={`comma-separated-copy-${tableContext.tableName}`}
-			value={tableContext.commaSeparatedCopy}
-			onchange={onCommaSeparatedCopyChange}
-		/>
-	{/if}
-</div>
-
-<style>div.column-panel {
-  padding: 0.5rem;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Checkbox from '../../Checkbox.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
+	};
+
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
+	};
+
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
+	};
+
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
+	};
+
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
+	};
+
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
+	};
+</script>
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Settings</h2>
+	</header>
+	<div class="side-panel-body">
+		<Checkbox
+			label="Compact"
+			size={Size.MediumSmall}
+			id={`is-compact-${tableContext.tableName}`}
+			value={tableContext.isCompact}
+			onchange={onCompactChange}
+		/>
+		<Checkbox
+			label="Single Click Editing"
+			size={Size.MediumSmall}
+			id={`single-click-editing-${tableContext.tableName}`}
+			value={tableContext.singleClickEditing}
+			onchange={onSingleClickChange}
+		/>
+		<Checkbox
+			label="Alternate Row Colours"
+			size={Size.MediumSmall}
+			id={`alternate-row-colours-${tableContext.tableName}`}
+			value={tableContext.alternateRowColours}
+			onchange={onAlternateRowColoursChange}
+		/>
+		<Checkbox
+			label="Change Colour on Hover"
+			size={Size.MediumSmall}
+			id={`change-colour-on-hover-${tableContext.tableName}`}
+			value={tableContext.changeColourOnHover}
+			onchange={onChangeColourOnHoverChange}
+		/>
+		{#if tableContext.allowCopy}
+			<Checkbox
+				label="Include Headers When Copying"
+				size={Size.MediumSmall}
+				id={`copy-with-headers-${tableContext.tableName}`}
+				value={tableContext.copyWithHeaders}
+				onchange={onCopyWithHeadersChange}
+			/>
+			<Checkbox
+				label="Copy as Comma Separated Values"
+				size={Size.MediumSmall}
+				id={`comma-separated-copy-${tableContext.tableName}`}
+				value={tableContext.commaSeparatedCopy}
+				onchange={onCommaSeparatedCopyChange}
+			/>
+		{/if}
+	</div>
+</section>
+
+<style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
-  gap: 0.5rem;
-  background-color: #ffffff;
   height: 100%;
-}</style>
+  width: 100%;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.side-panel-header {
+  flex-shrink: 0;
+  padding: 1.25rem 1.25rem 0.875rem;
+  border-bottom: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.side-panel-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #3a4952;
+  line-height: 1.25;
+}
+
+.side-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.side-panel-footer {
+  flex-shrink: 0;
+  padding: 0.875rem 1.25rem;
+  border-top: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.75rem;
+  align-items: center;
+  box-sizing: border-box;
+}</style>

package/dist/Components/Table/Misc/ToolboxPanel.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ToolboxPanel: $$IsomorphicComponent;
-type ToolboxPanel<T extends object> = InstanceType<typeof ToolboxPanel<T>>;
+type ToolboxPanel<T extends object, IdType extends Primitive> = InstanceType<typeof ToolboxPanel<T, IdType>>;
 export default ToolboxPanel;