@cloudvoyant/helical-svelte 0.20.1 → 0.21.1

package/dist/which-key/context.svelte.d.ts

@@ -0,0 +1,57 @@
+import { type JumpAction, type KeybindingPreset, type KeymapCommandContext, type KeymapMode, type WhichKeyController, type WhichKeyNode, type WhichKeyState } from '@cloudvoyant/helical-ui';
+export declare const WHICH_KEY_CONTEXT_KEY: unique symbol;
+export interface ReactiveWhichKeyContext {
+    readonly controller: WhichKeyController;
+    readonly state: WhichKeyState;
+}
+export declare function setWhichKeyContext(ctx: ReactiveWhichKeyContext): void;
+export declare function getOptionalWhichKeyContext(): ReactiveWhichKeyContext | null;
+export declare function useOptionalWhichKeyController(): WhichKeyController | null;
+export declare function useWhichKeyController(): WhichKeyController;
+export interface UseWhichKeyReturn extends WhichKeyState {
+    readonly state: WhichKeyState;
+    readonly controller: WhichKeyController;
+    setPreset: (preset: KeybindingPreset) => void;
+    setMode: (mode: KeymapMode) => void;
+    setJumpAction: (action: JumpAction) => void;
+    openExplorer: () => void;
+    closeExplorer: () => void;
+    setExplorerQuery: (query: string) => void;
+    openPrefix: (path: string[], options?: {
+        sticky?: boolean;
+    }) => void;
+    closePrefix: () => void;
+    stepBackPrefix: () => boolean;
+    triggerKey: (key: string) => boolean;
+    focusPane: (paneIdOrIndex: string | number) => boolean;
+    startJumpMode: (action?: JumpAction) => void;
+    cancelJumpMode: () => void;
+    jumpBack: () => boolean;
+    jumpForward: () => boolean;
+    executeCommand: (commandId: string, partialCtx?: Partial<KeymapCommandContext>) => boolean;
+}
+export declare function useWhichKey(): UseWhichKeyReturn;
+export declare function useKeymap(nodes: Record<string, WhichKeyNode>, options?: {
+    scope?: string;
+    enabled?: boolean;
+}): void;
+export declare function useKeymapScope(scopeId: string, nodes: Record<string, WhichKeyNode>, enabled?: boolean): void;
+export interface UsePaneRegistrationOptions {
+    paneId?: string;
+    paneTitle?: string;
+    paneDisabled?: boolean;
+    paneOrder?: number;
+    defaultTitle: string;
+}
+export interface UsePaneRegistrationResult {
+    readonly paneId: string;
+    readonly isActive: boolean;
+    readonly dataAttributes: {
+        'data-pane-id'?: string;
+        'data-pane-title'?: string;
+        'data-pane-order'?: string;
+        'data-pane-active'?: 'true' | 'false';
+    };
+}
+export declare function useOptionalPaneRegistration(getElement: () => HTMLElement | null | undefined, getOptions: () => UsePaneRegistrationOptions): UsePaneRegistrationResult;
+export type { JumpAction, KeybindingPreset, KeymapCommandContext, KeymapMode, WhichKeyNode, WhichKeyState };

package/dist/which-key/context.svelte.js

@@ -0,0 +1,177 @@
+// libs/helical-svelte/src/which-key/context.svelte.ts
+import { getContext, hasContext, setContext } from 'svelte';
+export const WHICH_KEY_CONTEXT_KEY = Symbol('helical-ui.which-key');
+export function setWhichKeyContext(ctx) {
+    setContext(WHICH_KEY_CONTEXT_KEY, ctx);
+}
+export function getOptionalWhichKeyContext() {
+    if (!hasContext(WHICH_KEY_CONTEXT_KEY))
+        return null;
+    return getContext(WHICH_KEY_CONTEXT_KEY) ?? null;
+}
+export function useOptionalWhichKeyController() {
+    return getOptionalWhichKeyContext()?.controller ?? null;
+}
+export function useWhichKeyController() {
+    const controller = useOptionalWhichKeyController();
+    if (!controller) {
+        throw new Error('useWhichKey must be used within a <WhichKeyProvider>.');
+    }
+    return controller;
+}
+export function useWhichKey() {
+    const ctx = getOptionalWhichKeyContext();
+    if (!ctx) {
+        throw new Error('useWhichKey must be used within a <WhichKeyProvider>.');
+    }
+    const { controller } = ctx;
+    return {
+        get state() {
+            return ctx.state;
+        },
+        get preset() {
+            return ctx.state.preset;
+        },
+        get mode() {
+            return ctx.state.mode;
+        },
+        get leaderKey() {
+            return ctx.state.leaderKey;
+        },
+        get activePath() {
+            return ctx.state.activePath;
+        },
+        get breadcrumb() {
+            return ctx.state.breadcrumb;
+        },
+        get title() {
+            return ctx.state.title;
+        },
+        get items() {
+            return ctx.state.items;
+        },
+        get isOpen() {
+            return ctx.state.isOpen;
+        },
+        get sticky() {
+            return ctx.state.sticky;
+        },
+        get countBuffer() {
+            return ctx.state.countBuffer;
+        },
+        get explorerOpen() {
+            return ctx.state.explorerOpen;
+        },
+        get explorerQuery() {
+            return ctx.state.explorerQuery;
+        },
+        get explorerEntries() {
+            return ctx.state.explorerEntries;
+        },
+        get panes() {
+            return ctx.state.panes;
+        },
+        get activePaneId() {
+            return ctx.state.activePaneId;
+        },
+        get jumpQuery() {
+            return ctx.state.jumpQuery;
+        },
+        get jumpAction() {
+            return ctx.state.jumpAction;
+        },
+        get jumpTargets() {
+            return ctx.state.jumpTargets;
+        },
+        get statusMessage() {
+            return ctx.state.statusMessage;
+        },
+        get controller() {
+            return controller;
+        },
+        setPreset: controller.setPreset,
+        setMode: controller.setMode,
+        setJumpAction: controller.setJumpAction,
+        openExplorer: controller.openExplorer,
+        closeExplorer: controller.closeExplorer,
+        setExplorerQuery: controller.setExplorerQuery,
+        openPrefix: controller.openPrefix,
+        closePrefix: controller.closePrefix,
+        stepBackPrefix: controller.stepBackPrefix,
+        triggerKey: controller.triggerKey,
+        focusPane: controller.focusPane,
+        startJumpMode: controller.startJumpMode,
+        cancelJumpMode: controller.cancelJumpMode,
+        jumpBack: controller.jumpBack,
+        jumpForward: controller.jumpForward,
+        executeCommand: controller.executeCommand,
+    };
+}
+let keymapCounter = 0;
+export function useKeymap(nodes, options) {
+    const ctx = getOptionalWhichKeyContext();
+    const layerId = `svelte-keymap-${++keymapCounter}`;
+    $effect(() => {
+        if (!ctx || options?.enabled === false)
+            return;
+        return ctx.controller.registerKeymap(layerId, nodes, options);
+    });
+}
+export function useKeymapScope(scopeId, nodes, enabled = true) {
+    useKeymap(nodes, { scope: scopeId, enabled });
+}
+let autoPaneCounter = 0;
+export function useOptionalPaneRegistration(getElement, getOptions) {
+    const ctx = getOptionalWhichKeyContext();
+    const fallbackId = `pane-svelte-${++autoPaneCounter}`;
+    $effect(() => {
+        const el = getElement();
+        const opts = getOptions();
+        if (!ctx || opts.paneDisabled || !el)
+            return;
+        const resolvedId = opts.paneId ?? fallbackId;
+        const resolvedTitle = opts.paneTitle ?? opts.defaultTitle;
+        return ctx.controller.registerPane({
+            id: resolvedId,
+            title: resolvedTitle,
+            element: el,
+            disabled: opts.paneDisabled,
+            order: opts.paneOrder,
+        });
+    });
+    return {
+        get paneId() {
+            return getOptions().paneId ?? fallbackId;
+        },
+        get isActive() {
+            const opts = getOptions();
+            if (!ctx || opts.paneDisabled)
+                return false;
+            const resolvedId = opts.paneId ?? fallbackId;
+            return ctx.state.activePaneId === resolvedId;
+        },
+        get dataAttributes() {
+            const opts = getOptions();
+            if (opts.paneDisabled)
+                return {};
+            const resolvedId = opts.paneId ?? fallbackId;
+            const resolvedTitle = opts.paneTitle ?? opts.defaultTitle;
+            if (!ctx) {
+                return opts.paneId
+                    ? {
+                        'data-pane-id': opts.paneId,
+                        'data-pane-title': resolvedTitle,
+                        ...(opts.paneOrder !== undefined ? { 'data-pane-order': String(opts.paneOrder) } : {}),
+                    }
+                    : {};
+            }
+            const isActive = ctx.state.activePaneId === resolvedId;
+            return {
+                'data-pane-id': resolvedId,
+                'data-pane-title': resolvedTitle,
+                ...(opts.paneOrder !== undefined ? { 'data-pane-order': String(opts.paneOrder) } : {}),
+                'data-pane-active': isActive ? 'true' : 'false',
+            };
+        },
+    };
+}

package/dist/which-key/index.d.ts

@@ -0,0 +1,7 @@
+export { default as WhichKey } from './WhichKey.svelte';
+export { default as WhichKeyMode } from './WhichKeyMode.svelte';
+export { default as WhichKeyExplorer } from './WhichKeyExplorer.svelte';
+export { default as WhichKeyProvider } from './WhichKeyProvider.svelte';
+export { default as Pane } from './Pane.svelte';
+export { WHICH_KEY_CONTEXT_KEY, setWhichKeyContext, getOptionalWhichKeyContext, useOptionalWhichKeyController, useWhichKeyController, useWhichKey, useKeymap, useKeymapScope, useOptionalPaneRegistration, type ReactiveWhichKeyContext, type UseWhichKeyReturn, type UsePaneRegistrationOptions, type UsePaneRegistrationResult, } from './context.svelte';
+export type { JumpAction, JumpTarget, KeybindingPreset, KeymapCommandContext, KeymapExplorerEntry, KeymapHandler, KeymapMode, ModalEditorTarget, PaneProps, PaneRegistration, WhichKeyController, WhichKeyControllerOptions, WhichKeyExplorerProps, WhichKeyModeProps, WhichKeyNode, WhichKeyProps, WhichKeyState, WhichKeyVariant, } from '@cloudvoyant/helical-ui';

package/dist/which-key/index.js

@@ -0,0 +1,7 @@
+// libs/helical-svelte/src/which-key/index.ts
+export { default as WhichKey } from './WhichKey.svelte';
+export { default as WhichKeyMode } from './WhichKeyMode.svelte';
+export { default as WhichKeyExplorer } from './WhichKeyExplorer.svelte';
+export { default as WhichKeyProvider } from './WhichKeyProvider.svelte';
+export { default as Pane } from './Pane.svelte';
+export { WHICH_KEY_CONTEXT_KEY, setWhichKeyContext, getOptionalWhichKeyContext, useOptionalWhichKeyController, useWhichKeyController, useWhichKey, useKeymap, useKeymapScope, useOptionalPaneRegistration, } from './context.svelte';

package/dist/window/Window.svelte

@@ -9,15 +9,41 @@
     FloatingPanelContent,
     type FloatingPanelRootProps,
   } from '@ark-ui/svelte/floating-panel';
-  import { windowPositionerBase, windowContentBase, cn } from '@cloudvoyant/helical-ui';
+  import {
+    windowPositionerBase,
+    windowContentBase,
+    cn,
+    type WindowPaneRegistrationProps,
+  } from '@cloudvoyant/helical-ui';
+  import { useOptionalPaneRegistration } from '../which-key/context.svelte';
 
-  interface Props extends FloatingPanelRootProps {
+  interface Props extends FloatingPanelRootProps, WindowPaneRegistrationProps {
     class?: string;
     positionerClass?: string;
     children?: Snippet;
   }
 
-  let { class: className = '', positionerClass = '', children, ...rest }: Props = $props();
+  let {
+    class: className = '',
+    positionerClass = '',
+    paneId,
+    paneTitle,
+    paneDisabled,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let contentRef: Element | null = $state(null);
+
+  const pane = useOptionalPaneRegistration(
+    () => (contentRef instanceof HTMLElement ? contentRef : null),
+    () => ({
+      paneId,
+      paneTitle,
+      paneDisabled: paneDisabled || rest.open === false,
+      defaultTitle: 'Window',
+    }),
+  );
 
   const positionerClasses = $derived(cn(windowPositionerBase, positionerClass));
   const contentClasses = $derived(cn(windowContentBase, className));
@@ -26,7 +52,7 @@
 <FloatingPanelRoot {...rest}>
   <Portal>
     <FloatingPanelPositioner class={positionerClasses}>
-      <FloatingPanelContent class={contentClasses}>
+      <FloatingPanelContent bind:ref={contentRef} {...pane.dataAttributes} class={contentClasses}>
         {@render children?.()}
       </FloatingPanelContent>
     </FloatingPanelPositioner>

package/dist/window/Window.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import { type FloatingPanelRootProps } from '@ark-ui/svelte/floating-panel';
-interface Props extends FloatingPanelRootProps {
+import { type WindowPaneRegistrationProps } from '@cloudvoyant/helical-ui';
+interface Props extends FloatingPanelRootProps, WindowPaneRegistrationProps {
     class?: string;
     positionerClass?: string;
     children?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helical-svelte",
-  "version": "0.20.1",
+  "version": "0.21.1",
   "description": "helical-ui Svelte UI components",
   "license": "MIT",
   "type": "module",
@@ -39,12 +39,15 @@
   "dependencies": {
     "@ark-ui/svelte": "^5.23.1",
     "@tanstack/charts": "^0.16.0",
+    "@tanstack/svelte-hotkeys": "^0.20.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
+    "@zag-js/dismissable": "1.43.1",
+    "@zag-js/dom-query": "1.43.1",
     "lucide-svelte": "^0.577.0",
     "lowlight": "^3.3.0",
     "svelte-tiptap": "^3.0.1",
-    "@cloudvoyant/helical-ui": "0.20.1"
+    "@cloudvoyant/helical-ui": "0.21.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",