rune-lab 0.3.0 → 0.4.0

package/dist/ui/features/config/CurrencySelector.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import {
-        getCurrencyStore,
-        type Currency,
-    } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
+    import ResourceSelector from "./ResourceSelector.svelte";
+    import { getCurrencyStore } from "@internal/state";
 
     const currencyStore = getCurrencyStore();
 
@@ -18,36 +13,15 @@
         current?: string;
         onchange?: (value: string) => void;
     } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getLabel(currency: Currency): string {
-        const key = String(currency.code);
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return String(currency.code);
-    }
-
-    let active = $derived(
-        currencyStore.get(currencyStore.current) ?? currencyStore.available[0],
-    );
-
-    let available = $derived(
-        codes.length > 0
-            ? currencyStore.available.filter((c) => codes.includes(c.code))
-            : currencyStore.available,
-    );
 </script>
 
-<AppSettingSelector
-    value={active}
-    options={available}
-    tooltip={getLabel(active)}
+<ResourceSelector
+    store={currencyStore}
+    idKey="code"
+    filterKeys={codes}
+    {onchange}
 >
-    {#snippet triggerLabel()}
+    {#snippet triggerLabel(active)}
         <span class="font-bold">{active.symbol}</span>
     {/snippet}
 
@@ -61,7 +35,7 @@
             }}
         >
             <span class="badge badge-sm badge-ghost w-8">{c.symbol}</span>
-            <span>{getLabel(c)}</span>
+            <span>{c.code}</span>
         </button>
     {/snippet}
-</AppSettingSelector>
+</ResourceSelector>

package/dist/ui/features/config/LanguageSelector.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getLanguageStore, type Language } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
+    import ResourceSelector from "./ResourceSelector.svelte";
+    import { getLanguageStore } from "@internal/state";
     import { setLocale } from "../../paraglide/runtime";
 
     const languageStore = getLanguageStore();
@@ -16,36 +14,15 @@
         current?: string;
         onchange?: (value: string) => void;
     } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getLabel(lang: Language): string {
-        const key = lang.code;
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return lang.code.toUpperCase();
-    }
-
-    let active = $derived(
-        languageStore.get(languageStore.current) ?? languageStore.available[0],
-    );
-
-    let available = $derived(
-        languageStore.available.filter((l) =>
-            allowedLocales.includes(l.code as any),
-        ),
-    );
 </script>
 
-<AppSettingSelector
-    value={active}
-    options={available}
-    tooltip={getLabel(active)}
+<ResourceSelector
+    store={languageStore}
+    idKey="code"
+    filterKeys={[...allowedLocales]}
+    {onchange}
 >
-    {#snippet triggerLabel()}
+    {#snippet triggerLabel(active)}
         <span class="text-lg">{active.flag}</span>
     {/snippet}
 
@@ -60,7 +37,7 @@
             }}
         >
             <span class="text-lg">{l.flag}</span>
-            <span>{getLabel(l)}</span>
+            <span>{l.code.toUpperCase()}</span>
         </button>
     {/snippet}
-</AppSettingSelector>
+</ResourceSelector>

package/dist/ui/features/config/ResourceSelector.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import AppSettingSelector from "./AppSettingSelector.svelte";
+    import type { ConfigStore } from "@internal/state";
+    import * as rlMessages from "../../paraglide/messages.js";
+    import { getContext, type Snippet } from "svelte";
+
+    /**
+     * ResourceSelector — Generic configuration picker.
+     * Wraps AppSettingSelector with automatic label resolution and store binding.
+     *
+     * @example
+     * ```svelte
+     * <ResourceSelector store={themeStore} idKey="name">
+     *   {#snippet triggerLabel(item)}<span>{item.icon}</span>{/snippet}
+     *   {#snippet item(t)}<button onclick={() => store.set(t.name)}>{t.name}</button>{/snippet}
+     * </ResourceSelector>
+     * ```
+     */
+    let {
+        store,
+        idKey,
+        filterKeys = [],
+        triggerLabel,
+        item,
+        onchange,
+        direction = "bottom",
+        responsive = true,
+    }: {
+        /** ConfigStore instance to bind to */
+        store: ConfigStore<any>;
+        /** Key to use as identifier (e.g., "name", "code") */
+        idKey: string;
+        /** Optional subset of IDs to show */
+        filterKeys?: string[];
+        /** Snippet to render the trigger button content */
+        triggerLabel: Snippet<[any]>;
+        /** Snippet to render each option in the dropdown */
+        item: Snippet<[any]>;
+        /** Callback when selection changes */
+        onchange?: (value: string) => void;
+        /** Dropdown direction */
+        direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+        /** Whether to show responsive mobile modal */
+        responsive?: boolean;
+    } = $props();
+
+    const userDictionary =
+        getContext<Record<string, any>>("rl:dictionary") ?? {};
+
+    /**
+     * Resolve a label for an item through the message chain:
+     * 1. User-provided dictionary
+     * 2. Paraglide messages
+     * 3. Raw key fallback
+     */
+    export function resolveLabel(item: any): string {
+        const key = String(item[idKey]);
+        if (typeof userDictionary[key] === "function")
+            return userDictionary[key]();
+        if (typeof (rlMessages as any)[key] === "function")
+            return (rlMessages as any)[key]();
+        return key;
+    }
+
+    let active = $derived(
+        store.get(store.current) ?? store.available[0],
+    );
+
+    let available = $derived(
+        filterKeys.length > 0
+            ? store.available.filter((item: any) =>
+                  filterKeys.includes(String(item[idKey])),
+              )
+            : store.available,
+    );
+</script>
+
+<AppSettingSelector
+    value={active}
+    options={available}
+    tooltip={resolveLabel(active)}
+    {direction}
+    {responsive}
+>
+    {#snippet triggerLabel(value)}
+        {@render triggerLabel(value)}
+    {/snippet}
+
+    {#snippet item(option)}
+        {@render item(option)}
+    {/snippet}
+</AppSettingSelector>

package/dist/ui/features/config/ResourceSelector.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ConfigStore } from "@internal/state";
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** ConfigStore instance to bind to */
+    store: ConfigStore<any>;
+    /** Key to use as identifier (e.g., "name", "code") */
+    idKey: string;
+    /** Optional subset of IDs to show */
+    filterKeys?: string[];
+    /** Snippet to render the trigger button content */
+    triggerLabel: Snippet<[any]>;
+    /** Snippet to render each option in the dropdown */
+    item: Snippet<[any]>;
+    /** Callback when selection changes */
+    onchange?: (value: string) => void;
+    /** Dropdown direction */
+    direction?: "top" | "bottom" | "left" | "right" | "end" | "auto";
+    /** Whether to show responsive mobile modal */
+    responsive?: boolean;
+};
+declare const ResourceSelector: import("svelte").Component<$$ComponentProps, {
+    resolveLabel: (item: any) => string;
+}, "">;
+type ResourceSelector = ReturnType<typeof ResourceSelector>;
+export default ResourceSelector;

package/dist/ui/features/config/ThemeSelector.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-    import AppSettingSelector from "./AppSettingSelector.svelte";
-    import { getThemeStore, type Theme } from "rune-lab/state";
-    import * as rlMessages from "../../paraglide/messages.js";
-    import { getContext } from "svelte";
+    import ResourceSelector from "./ResourceSelector.svelte";
+    import { getThemeStore, type Theme } from "@internal/state";
 
     const themeStore = getThemeStore();
 
@@ -15,37 +13,16 @@
         current?: string;
         onchange?: (value: string) => void;
     } = $props();
-
-    const userDictionary =
-        getContext<Record<string, any>>("rl:dictionary") ?? {};
-
-    function getThemeLabel(theme: Theme): string {
-        const key = theme.name;
-        if (typeof userDictionary[key] === "function")
-            return userDictionary[key]();
-        if (typeof (rlMessages as any)[key] === "function")
-            return (rlMessages as any)[key]();
-        return theme.name;
-    }
-
-    let activeTheme = $derived(
-        themeStore.get(themeStore.current) ?? themeStore.available[0],
-    );
-
-    let available = $derived(
-        themes.length > 0
-            ? themeStore.available.filter((t) => themes.includes(t.name))
-            : themeStore.available,
-    );
 </script>
 
-<AppSettingSelector
-    value={activeTheme}
-    options={available}
-    tooltip={getThemeLabel(activeTheme)}
+<ResourceSelector
+    store={themeStore}
+    idKey="name"
+    filterKeys={themes}
+    {onchange}
 >
-    {#snippet triggerLabel()}
-        <span class="text-lg">{activeTheme.icon}</span>
+    {#snippet triggerLabel(active)}
+        <span class="text-lg">{active.icon}</span>
     {/snippet}
 
     {#snippet item(t)}
@@ -66,8 +43,8 @@
             />
             <span class="text-lg">{t.icon}</span>
             <span class="capitalize">
-                {getThemeLabel(t)}
+                {t.name}
             </span>
         </button>
     {/snippet}
-</AppSettingSelector>
+</ResourceSelector>

package/dist/ui/features/shortcuts/ShortcutBinder.svelte

@@ -0,0 +1,17 @@
+<!--
+  ShortcutBinder — Declarative shortcut registration component.
+  No visual output — purely a lifecycle binder.
+  
+  Usage:
+    <ShortcutBinder shortcuts={[
+      { id: "save:doc", keys: "ctrl+s", handler: save, label: "Save" },
+    ]} />
+-->
+<script lang="ts">
+    import type { ShortcutConfig } from "@internal/core";
+    import { useShortcuts } from "@internal/state";
+
+    let { shortcuts }: { shortcuts: ShortcutConfig[] } = $props();
+
+    useShortcuts(shortcuts);
+</script>

package/dist/ui/features/shortcuts/ShortcutBinder.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ShortcutConfig } from "@internal/core";
+type $$ComponentProps = {
+    shortcuts: ShortcutConfig[];
+};
+declare const ShortcutBinder: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShortcutBinder = ReturnType<typeof ShortcutBinder>;
+export default ShortcutBinder;

package/dist/ui/features/shortcuts/ShortcutPalette.svelte

@@ -1,13 +1,13 @@
 <!-- src/lib/features/shortcuts/ShortcutPalette.svelte -->
 <script lang="ts">
     import { tick } from "svelte";
-    import type { ShortcutEntry } from "rune-lab/state";
+    import type { ShortcutEntry } from "@internal/state";
     import {
         getAppStore,
         getShortcutStore,
         LAYOUT_SHORTCUTS,
-    } from "rune-lab/state";
-    import { Icon } from "rune-lab/ui";
+    } from "@internal/state";
+    import { Icon } from "@internal/ui";
 
     const appStore = getAppStore();
     const shortcutStore = getShortcutStore();

package/dist/ui/index.d.ts

@@ -1,4 +1,4 @@
-export { portal } from "./actions/portal.js";
+export { portal } from "./actions/portal.ts";
 export { default as RuneProvider } from "./components/RuneProvider.svelte";
 export { default as Icon } from "./components/Icon.svelte";
 export { default as Toaster } from "./components/Toaster.svelte";
@@ -6,7 +6,10 @@ export { default as ApiMonitor } from "./components/ApiMonitor.svelte";
 export { default as Kyntharil } from "./components/Kyntharil.svelte";
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
+export { default as ShortcutBinder } from "./features/shortcuts/ShortcutBinder.svelte";
 export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+export { default as ResourceSelector } from "./features/config/ResourceSelector.svelte";
+export { APP_CONFIGURATIONS, type ConfigDimension, } from "./features/config/APP_CONFIGURATIONS.ts";
 export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
 export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
 export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
@@ -17,6 +20,7 @@ export { default as ContentArea } from "./layout/ContentArea.svelte";
 export { default as DetailPanel } from "./layout/DetailPanel.svelte";
 export { default as ConnectedNavigationPanel } from "./layout/ConnectedNavigationPanel.svelte";
 export { default as ConnectedWorkspaceStrip } from "./layout/ConnectedWorkspaceStrip.svelte";
+export { createNavigationConnection, createWorkspaceConnection, type NavigationConnection, type WorkspaceConnection, } from "./layout/connection-factory.ts";
 export { default as DatePicker } from "./primitives/DatePicker.svelte";
 export { default as UserAvatar } from "./components/user/UserAvatar.svelte";
 export { default as UserProfile } from "./components/user/UserProfile.svelte";

package/dist/ui/index.js

@@ -1,6 +1,6 @@
 // All components, actions, and layout primitives
 // ── Actions ───────────────────────────────────────────────────────────────────
-export { portal } from "./actions/portal.js";
+export { portal } from "./actions/portal.ts";
 // ── Core Components ───────────────────────────────────────────────────────────
 export { default as RuneProvider } from "./components/RuneProvider.svelte";
 export { default as Icon } from "./components/Icon.svelte";
@@ -10,8 +10,11 @@ export { default as Kyntharil } from "./components/Kyntharil.svelte";
 // ── Features ──────────────────────────────────────────────────────────────────
 export { default as CommandPalette } from "./features/command-palette/CommandPalette.svelte";
 export { default as ShortcutPalette } from "./features/shortcuts/ShortcutPalette.svelte";
+export { default as ShortcutBinder } from "./features/shortcuts/ShortcutBinder.svelte";
 // Setting Selectors
 export { default as AppSettingSelector } from "./features/config/AppSettingSelector.svelte";
+export { default as ResourceSelector } from "./features/config/ResourceSelector.svelte";
+export { APP_CONFIGURATIONS, } from "./features/config/APP_CONFIGURATIONS.ts";
 export { default as ThemeSelector } from "./features/config/ThemeSelector.svelte";
 export { default as LanguageSelector } from "./features/config/LanguageSelector.svelte";
 export { default as CurrencySelector } from "./features/config/CurrencySelector.svelte";
@@ -24,6 +27,8 @@ export { default as DetailPanel } from "./layout/DetailPanel.svelte";
 // ── Connected (Smart) Components ──────────────────────────────────────────────
 export { default as ConnectedNavigationPanel } from "./layout/ConnectedNavigationPanel.svelte";
 export { default as ConnectedWorkspaceStrip } from "./layout/ConnectedWorkspaceStrip.svelte";
+// ── Connection Factory (Phase 3) ──────────────────────────────────────────────
+export { createNavigationConnection, createWorkspaceConnection, } from "./layout/connection-factory.ts";
 // ── Primitives ────────────────────────────────────────────────────────────────
 export { default as DatePicker } from "./primitives/DatePicker.svelte";
 // ── User Components ───────────────────────────────────────────────────────────
@@ -37,5 +42,5 @@ export { default as MoneyInput } from "./components/money/MoneyInput.svelte";
 // ── Paraglide messages ────────────────────────────────────────────────────────
 export * as sdkMessages from "./paraglide/messages.js";
 // // Consumers shouldn't need rune-lab/state just to get cookieDriver, stores, etc.
-// export * from "rune-lab/state";
-// export * from "rune-lab/core";
+// export * from "@internal/state";
+// export * from "@internal/core";

package/dist/ui/layout/ConnectedNavigationPanel.svelte

@@ -1,7 +1,8 @@
 <!-- src/lib/features/layout/smart/ConnectedNavigationPanel.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type NavigationSection } from "rune-lab/state";
+    import { getLayoutStore, type NavigationSection } from "@internal/state";
     import NavigationPanel from "./NavigationPanel.svelte";
+    import { createNavigationConnection } from "./connection-factory.ts";
     import type { Snippet } from "svelte";
 
     let { sections, header, footer } = $props<{
@@ -11,17 +12,15 @@
     }>();
 
     const layoutStore = getLayoutStore();
+    const connection = createNavigationConnection(layoutStore);
 </script>
 
 <NavigationPanel
     {sections}
     {header}
     {footer}
-    activeId={layoutStore.activeNavItemId}
-    collapsedIds={layoutStore.collapsedSections}
-    onSelect={(item) => layoutStore.navigate(item.id!)}
-    onToggle={(id, isOpen) =>
-        isOpen
-            ? layoutStore.expandSection(id)
-            : layoutStore.collapseSection(id)}
+    activeId={connection.activeId}
+    collapsedIds={connection.collapsedIds}
+    onSelect={connection.onSelect}
+    onToggle={connection.onToggle}
 />

package/dist/ui/layout/ConnectedNavigationPanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type NavigationSection } from "rune-lab/state";
+import { type NavigationSection } from "@internal/state";
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     sections: NavigationSection[];

package/dist/ui/layout/ConnectedWorkspaceStrip.svelte

@@ -1,7 +1,8 @@
 <!-- src/lib/features/layout/smart/ConnectedWorkspaceStrip.svelte -->
 <script lang="ts">
-    import { getLayoutStore, type WorkspaceItem } from "rune-lab/state";
+    import { getLayoutStore, type WorkspaceItem } from "@internal/state";
     import WorkspaceStrip from "./WorkspaceStrip.svelte";
+    import { createWorkspaceConnection } from "./connection-factory.ts";
     import type { Snippet } from "svelte";
 
     let { items, globalActions } = $props<{
@@ -10,11 +11,12 @@
     }>();
 
     const layoutStore = getLayoutStore();
+    const connection = createWorkspaceConnection(layoutStore);
 </script>
 
 <WorkspaceStrip
     {items}
     {globalActions}
-    activeId={layoutStore.activeWorkspaceId}
-    onSelect={(id) => layoutStore.activateWorkspace(id)}
+    activeId={connection.activeId}
+    onSelect={connection.onSelect}
 />

package/dist/ui/layout/ConnectedWorkspaceStrip.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WorkspaceItem } from "rune-lab/state";
+import { type WorkspaceItem } from "@internal/state";
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     items: WorkspaceItem[];

package/dist/ui/layout/NavigationPanel.svelte

@@ -4,7 +4,7 @@
     import type {
         NavigationItem,
         NavigationSection,
-    } from "rune-lab/state";
+    } from "@internal/state";
 
     let {
         header,

package/dist/ui/layout/NavigationPanel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { NavigationItem, NavigationSection } from "rune-lab/state";
+import type { NavigationItem, NavigationSection } from "@internal/state";
 type $$ComponentProps = {
     header?: Snippet;
     sections: NavigationSection[];

package/dist/ui/layout/WorkspaceLayout.svelte

@@ -1,6 +1,7 @@
 <!-- src/lib/layout/WorkspaceLayout.svelte -->
 <script module lang="ts">
     import type { Snippet } from "svelte";
+    import type { LayoutConfig } from "@internal/core";
 
     export interface WorkspaceLayoutProps {
         /** Content for the far-left vertical strip */
@@ -13,6 +14,13 @@
         detailPanel?: Snippet;
         namespace?: string;
 
+        /**
+         * Declarative layout configuration.
+         * When provided, zones can be rendered from config entries.
+         * Snippet props take priority when both are provided.
+         */
+        config?: LayoutConfig;
+
         /** Width of the left workspace strip */
         stripWidth?: string;
         /** Width of the navigation tree panel */
@@ -34,7 +42,7 @@
         getLanguageStore,
         shortcutListener,
         LAYOUT_SHORTCUTS,
-    } from "rune-lab/state";
+    } from "@internal/state";
     import { onMount } from "svelte";
 
     /**

package/dist/ui/layout/WorkspaceLayout.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { LayoutConfig } from "@internal/core";
 export interface WorkspaceLayoutProps {
     /** Content for the far-left vertical strip */
     workspaceStrip?: Snippet;
@@ -9,6 +10,12 @@ export interface WorkspaceLayoutProps {
     /** Right-side contextual detail panel */
     detailPanel?: Snippet;
     namespace?: string;
+    /**
+     * Declarative layout configuration.
+     * When provided, zones can be rendered from config entries.
+     * Snippet props take priority when both are provided.
+     */
+    config?: LayoutConfig;
     /** Width of the left workspace strip */
     stripWidth?: string;
     /** Width of the navigation tree panel */

package/dist/ui/layout/WorkspaceStrip.svelte

@@ -1,7 +1,7 @@
 <!-- src/lib/layout/WorkspaceStrip.svelte -->
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { WorkspaceItem } from "rune-lab/state";
+    import type { WorkspaceItem } from "@internal/state";
 
     let {
         items = [],

package/dist/ui/layout/WorkspaceStrip.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { WorkspaceItem } from "rune-lab/state";
+import type { WorkspaceItem } from "@internal/state";
 type $$ComponentProps = {
     items: WorkspaceItem[];
     globalActions?: Snippet;

package/dist/ui/layout/connection-factory.d.ts

@@ -0,0 +1,50 @@
+import type { LayoutStore } from "@internal/state";
+/**
+ * Reactive prop binding for the NavigationPanel component.
+ */
+export interface NavigationConnection {
+    /** Currently active navigation item ID */
+    readonly activeId: string | null;
+    /** Set of collapsed section IDs */
+    readonly collapsedIds: Set<string>;
+    /** Handler for when a navigation item is selected */
+    onSelect: (item: {
+        id?: string;
+    }) => void;
+    /** Handler for when a section is toggled */
+    onToggle: (id: string, isOpen: boolean) => void;
+}
+/**
+ * Reactive prop binding for the WorkspaceStrip component.
+ */
+export interface WorkspaceConnection {
+    /** Currently active workspace ID */
+    readonly activeId: string | null;
+    /** Handler for when a workspace is selected */
+    onSelect: (id: string) => void;
+}
+/**
+ * Creates reactive prop bindings for connecting NavigationPanel to LayoutStore.
+ * Returns an object with getter properties that track LayoutStore state.
+ *
+ * @param layoutStore - The LayoutStore instance from context
+ * @returns Prop bindings compatible with NavigationPanel
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   const layoutStore = getLayoutStore();
+ *   const nav = createNavigationConnection(layoutStore);
+ * </script>
+ * <NavigationPanel {sections} activeId={nav.activeId} collapsedIds={nav.collapsedIds}
+ *   onSelect={nav.onSelect} onToggle={nav.onToggle} />
+ * ```
+ */
+export declare function createNavigationConnection(layoutStore: LayoutStore): NavigationConnection;
+/**
+ * Creates reactive prop bindings for connecting WorkspaceStrip to LayoutStore.
+ *
+ * @param layoutStore - The LayoutStore instance from context
+ * @returns Prop bindings compatible with WorkspaceStrip
+ */
+export declare function createWorkspaceConnection(layoutStore: LayoutStore): WorkspaceConnection;