@harborclient/sdk 1.4.4 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+## 1.5.0 - 2026-08-01
+
+- feat(live-page): introduce live page functionality and refactor related components. (`16f1f304`)
+
+## 1.4.5 - 2026-08-01
+
+- feat(websites): implement Add Live Page modal and import functionality. (`1bdbf8a4`)
+- feat(live-page): refactor live page settings panel and update related functionality. (`6a3dfb3e`)
+- feat(live-server): implement Add Live Server modal and import functionality. (`a36916fb`)
+- feat(live-server): enhance live server and live page management. (`fba086b7`)
+- feat(live-server): add openPathOnStartup configuration for live server. (`039b74dc`)
+
 ## 1.4.4 - 2026-08-01
 
 - refactor(teamHub): introduce soft-connection handling for team hubs. (`5fc744ec`)

package/dist/components/SidebarItem/SidebarWebsiteItem.d.ts

@@ -13,6 +13,10 @@ interface Props {
      * Globe (or other) icon used when no favicon is available.
      */
     fallbackIcon: IconDefinition;
+    /**
+     * Optional connection badge text (e.g. storage location name).
+     */
+    connectionBadge?: string;
     /**
      * Whether this row is part of a multi-selection or is the active open website.
      */
@@ -25,6 +29,10 @@ interface Props {
      * Called when the primary row area is activated.
      */
     onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Called when the primary row area is double-clicked (e.g. open page settings).
+     */
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Called when Enter is pressed on the primary row area.
      */
@@ -42,8 +50,9 @@ interface Props {
  * Renders a website row in the Collections sidebar Websites section.
  *
  * Shows the site favicon when available, otherwise a globe fallback icon, plus
- * the last known page title.
+ * the last known page title and an optional storage-location badge inline with
+ * the name.
  */
-export declare function SidebarWebsiteItem({ name, faviconDataUrl, fallbackIcon, selected, onContextMenu, onClick, onEnter, actions, as }: Props): JSX.Element;
+export declare function SidebarWebsiteItem({ name, faviconDataUrl, fallbackIcon, connectionBadge, selected, onContextMenu, onClick, onDoubleClick, onEnter, actions, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarWebsiteItem.d.ts.map

package/dist/components/SidebarItem/SidebarWebsiteItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarWebsiteItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarWebsiteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,KAAK,GAAG,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAKhG,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,YAAY,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,QAAgB,EAChB,aAAa,EACb,OAAO,EACP,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0DrB"}
+{"version":3,"file":"SidebarWebsiteItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarWebsiteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,KAAK,GAAG,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMhG,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,YAAY,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,eAAe,EACf,QAAgB,EAChB,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkErB"}

package/dist/components/SidebarItem/SidebarWebsiteItem.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useState } from 'react';
 import { FaIcon } from '../FaIcon/index.js';
+import { SidebarBadge } from './SidebarBadge.js';
 import { SidebarItem } from './SidebarItem.js';
 import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders a website row in the Collections sidebar Websites section.
  *
  * Shows the site favicon when available, otherwise a globe fallback icon, plus
- * the last known page title.
+ * the last known page title and an optional storage-location badge inline with
+ * the name.
  */
-export function SidebarWebsiteItem({ name, faviconDataUrl, fallbackIcon, selected = false, onContextMenu, onClick, onEnter, actions, as = 'li' }) {
+export function SidebarWebsiteItem({ name, faviconDataUrl, fallbackIcon, connectionBadge, selected = false, onContextMenu, onClick, onDoubleClick, onEnter, actions, as = 'li' }) {
     const useListboxOption = as === 'li';
     const [brokenFaviconUrl, setBrokenFaviconUrl] = useState(null);
     const showFavicon = Boolean(faviconDataUrl) && brokenFaviconUrl !== faviconDataUrl;
@@ -35,7 +37,8 @@ export function SidebarWebsiteItem({ name, faviconDataUrl, fallbackIcon, selecte
     return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
             ? {
                 onClick,
+                onDoubleClick,
                 onKeyDown: onEnter != null ? handleKeyDown : undefined
             }
-            : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} gap-2 rounded-md px-2 py-1`, children: [showFavicon && faviconDataUrl ? (_jsx("img", { src: faviconDataUrl, alt: "", "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 object-contain", onError: handleFaviconError })) : (_jsx(FaIcon, { icon: fallbackIcon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: name })] }) }));
+            : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} gap-2 rounded-md px-2 py-1`, children: [showFavicon && faviconDataUrl ? (_jsx("img", { src: faviconDataUrl, alt: "", "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 object-contain", onError: handleFaviconError })) : (_jsx(FaIcon, { icon: fallbackIcon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true })), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), connectionBadge != null ? (_jsx(SidebarBadge, { variant: "info", title: `Stored in ${connectionBadge}`, children: connectionBadge })) : null] })] }) }));
 }

package/dist/components/TabBar/index.d.ts

@@ -50,6 +50,16 @@ interface Props<TId extends string | number> {
      * Builds grouped context menu entries when a tab is right-clicked.
      */
     buildContextMenuGroups?: (targetId: TId, orderedIds: TId[]) => MenuItem[][];
+    /**
+     * Awaited before the context menu paints. Hosts use this to prepare overlays
+     * that must sit above native layers (for example Electron WebContentsView).
+     */
+    beforeContextMenuOpen?: () => void | Promise<void>;
+    /**
+     * Called when the tab context menu closes, or when the tab bar unmounts after a
+     * beforeOpen cover may have been applied.
+     */
+    onContextMenuClose?: () => void;
     /**
      * When ArrowDown is pressed on a focused tab, returns true if focus moved into
      * the linked panel (for example request editor content).
@@ -80,7 +90,7 @@ interface Props<TId extends string | number> {
  * Document-style tab bar with drag reorder, keyboard navigation, close animation,
  * optional context menu, and a new-tab control.
  */
-export declare function TabBar<TId extends string | number>({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }: Props<TId>): JSX.Element;
+export declare function TabBar<TId extends string | number>({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, beforeContextMenuOpen, onContextMenuClose, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }: Props<TId>): JSX.Element;
 export type { TabBarItem, TabBarNewTab, TabBarSortableCursor } from './types.js';
 export { TabNewButton } from './TabNewButton.js';
 export { TabContextMenu } from './TabContextMenu.js';

package/dist/components/TabBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAkB,GAAG,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM3D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAgCjF,UAAU,KAAK,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,GAAG,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE5B;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE3B;;OAEG;IACH,SAAS,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,EAAE,CAAC;IAE5E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,SAAS,CAAC;IAEtD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqDD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EAClD,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,EACV,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACV,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO,CAuT1B;AAED,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/TabBar/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { DndContext as DndContextBase, DragOverlay as DragOverlayBase, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { useEffect, useMemo, useState } from '@harborclient/sdk/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { cn, resolveTabListKeyAction } from '../utils.js';
 import { ClosingTabShell } from './ClosingTabShell.js';
 import { TabBarShell } from './TabBarShell.js';
@@ -57,13 +57,60 @@ function resolveFocusedTabIndex(tabs, activeId, tabIdPrefix) {
  * Document-style tab bar with drag reorder, keyboard navigation, close animation,
  * optional context menu, and a new-tab control.
  */
-export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }) {
+export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, beforeContextMenuOpen, onContextMenuClose, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }) {
     const resolvedSortablePrefix = sortablePrefix ?? `${tabIdPrefix}sort:`;
     const [activeDragId, setActiveDragId] = useState(null);
     const [contextMenu, setContextMenu] = useState(null);
+    const contextMenuOpenRequestRef = useRef(0);
+    const beforeContextMenuOpenRef = useRef(beforeContextMenuOpen);
+    const onContextMenuCloseRef = useRef(onContextMenuClose);
+    /**
+     * Keeps context-menu lifecycle callbacks current without rebinding open/close helpers.
+     */
+    useEffect(() => {
+        beforeContextMenuOpenRef.current = beforeContextMenuOpen;
+        onContextMenuCloseRef.current = onContextMenuClose;
+    }, [beforeContextMenuOpen, onContextMenuClose]);
     const getId = useMemo(() => (item) => item.id, []);
     const sortableEnabled = tabs.length >= 2;
     const { completeExit, getExitingBefore, removedIds } = useExitingTabItems(tabs, getId);
+    /**
+     * Closes the tab context menu and notifies the host so overlay covers can release.
+     */
+    const closeContextMenu = useCallback(() => {
+        contextMenuOpenRequestRef.current += 1;
+        setContextMenu(null);
+        onContextMenuCloseRef.current?.();
+    }, []);
+    /**
+     * Opens the tab context menu after awaiting any host preparation (guest cover, etc.).
+     *
+     * @param targetId - Tab that was right-clicked.
+     * @param x - Viewport X for the menu anchor.
+     * @param y - Viewport Y for the menu anchor.
+     */
+    const openContextMenu = useCallback(async (targetId, x, y) => {
+        const requestId = ++contextMenuOpenRequestRef.current;
+        const gate = beforeContextMenuOpenRef.current;
+        if (gate) {
+            await gate();
+            // A newer open or close owns lifecycle; do not uncover here (close already did,
+            // or the in-flight open still needs the host cover).
+            if (requestId !== contextMenuOpenRequestRef.current) {
+                return;
+            }
+        }
+        setContextMenu({ targetId, x, y });
+    }, []);
+    /**
+     * Releases host overlay covers on unmount, including opens still awaiting beforeOpen.
+     */
+    useEffect(() => {
+        return () => {
+            contextMenuOpenRequestRef.current += 1;
+            onContextMenuCloseRef.current?.();
+        };
+    }, []);
     /**
      * Stable sortable ids for open tabs.
      */
@@ -200,11 +247,7 @@ export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPr
                                         nodes.push(_jsx(TabBarShell, { item: tab, tabIndex: 0, sortableId: tabSortableId(resolvedSortablePrefix, tab.id), sortableDisabled: !sortableEnabled, tabIdPrefix: tabIdPrefix, panelIdPrefix: panelIdPrefix, maxTabWidthClass: maxTabWidthClass, sortableCursor: sortableCursor, onSelect: onSelect, onClose: onClose, onContextMenu: buildContextMenuGroups == null
                                                 ? undefined
                                                 : (id, event) => {
-                                                    setContextMenu({
-                                                        targetId: id,
-                                                        x: event.clientX,
-                                                        y: event.clientY
-                                                    });
+                                                    void openContextMenu(id, event.clientX, event.clientY);
                                                 } }, `live-${String(tab.id)}`));
                                         return nodes;
                                     }), getExitingBefore(null).map((exitingTab) => (_jsx(ClosingTabShell, { onComplete: () => completeExit(exitingTab.exitKey), children: renderTabShell(exitingTab.item, {
@@ -215,7 +258,7 @@ export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPr
     const defaultScrollContainer = (row) => (_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", children: row }));
     const scrollContainer = renderScrollContainer ?? defaultScrollContainer;
     const containerClassName = cn('app-no-drag flex shrink-0 items-end bg-sidebar pr-2 pl-0', className);
-    return (_jsxs("div", { className: containerClassName, children: [wrap ? _jsx("div", { className: "min-w-0 flex-1", children: tabRow }) : scrollContainer(tabRow), contextMenu != null && buildContextMenuGroups != null && (_jsx(TabContextMenu, { groups: contextMenuGroups, position: { x: contextMenu.x, y: contextMenu.y }, onClose: () => setContextMenu(null) }))] }));
+    return (_jsxs("div", { className: containerClassName, children: [wrap ? _jsx("div", { className: "min-w-0 flex-1", children: tabRow }) : scrollContainer(tabRow), contextMenu != null && buildContextMenuGroups != null && (_jsx(TabContextMenu, { groups: contextMenuGroups, position: { x: contextMenu.x, y: contextMenu.y }, onClose: closeContextMenu }))] }));
 }
 export { TabNewButton } from './TabNewButton.js';
 export { TabContextMenu } from './TabContextMenu.js';

package/dist/components/VariableInput/index.d.ts

@@ -65,6 +65,15 @@ export interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'
      * @param open - Whether suggestions are open.
      */
     onSuggestionsOpenChange?: (open: boolean) => void;
+    /**
+     * Called after a suggestion is applied via click or keyboard selection.
+     *
+     * Runs after {@link Props.onChange} with the same value so hosts can treat
+     * autocomplete acceptance as a commit (for example navigating a browser).
+     *
+     * @param item - Selected suggestion value.
+     */
+    onSuggestionSelect?: (item: string) => void;
 }
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
@@ -72,5 +81,5 @@ export interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */
-export declare function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className, wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, beforeSuggestionsOpen, onSuggestionsOpenChange, ...props }: Props): JSX.Element;
+export declare function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className, wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, beforeSuggestionsOpen, onSuggestionsOpenChange, onSuggestionSelect, ...props }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/VariableInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAwBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAE5B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnD;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8lBrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAwBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAE5B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnD;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAElD;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAinBrB"}

package/dist/components/VariableInput/index.js

@@ -18,7 +18,7 @@ const TOOLTIP_HIDE_DELAY_MS = 400;
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */
-export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, beforeSuggestionsOpen, onSuggestionsOpenChange, ...props }) {
+export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, beforeSuggestionsOpen, onSuggestionsOpenChange, onSuggestionSelect, ...props }) {
     const safeValue = value ?? '';
     const wrapperRef = useRef(null);
     const inputRef = useRef(null);
@@ -32,14 +32,31 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
     const tooltipEntered = useRef(false);
     const tooltipSourceRef = useRef(null);
     const activeTokenIndexRef = useRef(null);
+    const onSuggestionSelectRef = useRef(onSuggestionSelect);
     const [tooltip, setTooltip] = useState(null);
     const [tooltipSource, setTooltipSource] = useState(null);
     const [activeTokenIndex, setActiveTokenIndex] = useState(null);
     const tooltipId = useId();
+    /**
+     * Keeps the suggestion-select callback current without retriggering autocomplete setup.
+     */
+    useEffect(() => {
+        onSuggestionSelectRef.current = onSuggestionSelect;
+    }, [onSuggestionSelect]);
+    /**
+     * Applies a suggestion to the controlled value, then notifies hosts that accept
+     * autocomplete as a commit action.
+     *
+     * @param item - Selected suggestion value.
+     */
+    function handleSuggestionSelect(item) {
+        onChange(item);
+        onSuggestionSelectRef.current?.(item);
+    }
     const { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
         source,
         value: safeValue,
-        onSelect: onChange,
+        onSelect: handleSuggestionSelect,
         anchorRef: inputRef,
         beforeOpen: beforeSuggestionsOpen,
         onOpenChange: onSuggestionsOpenChange

package/dist/runtime/createBridgedPluginContext.js

@@ -5,9 +5,9 @@ import {
   registerContributionHeaderActions
 } from './contributionRegistry.js';
 import { bridgeInvoke, bridgeOn } from './hcBridge.js';
+import { openLivePage } from './livePageHandle.js';
 import { createPluginDatabaseApi } from './pluginDatabaseApi.js';
 import { setHostReact } from './reactHost.js';
-import { openWebpage } from './webpageHandle.js';
 
 /** @type {Map<string, Set<(...args: unknown[]) => void | Promise<void>>>} */
 const commandHandlers = new Map();
@@ -354,7 +354,7 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
   const assertAi = () => assertPermission('ai');
 
   /**
-   * Asserts browser permission for embedded webpage control.
+   * Asserts browser permission for embedded live page control.
    */
   const assertBrowser = () => assertPermission('browser');
 
@@ -364,43 +364,56 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
   const assertLiveServer = () => assertPermission('live-server');
 
   /**
-   * Invokes a webpage session op on the host renderer via the plugin bridge.
+   * Asserts live-pages permission for saved live page (website) APIs.
+   */
+  const assertLivePages = () => assertPermission('live-pages');
+
+  /**
+   * Invokes a livePage session op on the host renderer via the plugin bridge.
    *
-   * @param {Record<string, unknown>} req - ScriptWebpageRequest-shaped payload.
+   * @param {Record<string, unknown>} req - ScriptLivePageRequest-shaped payload.
    * @returns {Promise<unknown>} Host session result.
    */
-  const callWebpage = async (req) => {
+  const callLivePage = async (req) => {
     const op = String(req.op ?? '');
     switch (op) {
       case 'open':
-        return bridgeInvoke('webpage.open', { url: req.url, reuse: req.reuse });
+        return bridgeInvoke('livePage.open', { url: req.url, reuse: req.reuse });
       case 'focus':
-        return bridgeInvoke('webpage.focus', { tabId: req.tabId });
+        return bridgeInvoke('livePage.focus', { tabId: req.tabId });
       case 'close':
-        return bridgeInvoke('webpage.close', { tabId: req.tabId });
+        return bridgeInvoke('livePage.close', { tabId: req.tabId });
       case 'query':
-        return bridgeInvoke('webpage.query', {
+        return bridgeInvoke('livePage.query', {
           tabId: req.tabId,
           selector: req.selector,
           all: req.all,
           maxElements: req.maxElements
         });
       case 'evaluate':
-        return bridgeInvoke('webpage.evaluate', {
+        return bridgeInvoke('livePage.evaluate', {
           tabId: req.tabId,
           expression: req.expression
         });
       case 'injectScript':
-        return bridgeInvoke('webpage.injectScript', { tabId: req.tabId, source: req.source });
+        return bridgeInvoke('livePage.injectScript', { tabId: req.tabId, source: req.source });
       case 'injectStylesheet':
-        return bridgeInvoke('webpage.injectStylesheet', { tabId: req.tabId, css: req.css });
+        return bridgeInvoke('livePage.injectStylesheet', { tabId: req.tabId, css: req.css });
       case 'screenshot':
-        return bridgeInvoke('webpage.screenshot', {
+        return bridgeInvoke('livePage.screenshot', {
           tabId: req.tabId,
           fullPage: req.fullPage === true
         });
+      case 'goBack':
+        return bridgeInvoke('livePage.goBack', { tabId: req.tabId });
+      case 'goForward':
+        return bridgeInvoke('livePage.goForward', { tabId: req.tabId });
+      case 'reload':
+        return bridgeInvoke('livePage.reload', { tabId: req.tabId });
+      case 'navigate':
+        return bridgeInvoke('livePage.navigate', { tabId: req.tabId, url: req.url });
       default:
-        throw new Error(`Unsupported webpage bridge op: ${op}`);
+        throw new Error(`Unsupported livePage bridge op: ${op}`);
     }
   };
 
@@ -860,6 +873,28 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
           });
         });
       },
+      registerLivePageChromeAction: (action) => {
+        assertManifestContribution('livePageChromeActions', action.id);
+        if (!isAgent) {
+          return noopDisposable();
+        }
+        void bridgeInvoke('registerContribution', {
+          kind: 'livePageChromeActions',
+          contribution: {
+            pluginId,
+            id: action.id,
+            title: action.title,
+            command: action.command,
+            icon: action.icon
+          }
+        });
+        return track(() => {
+          void bridgeInvoke('unregisterContribution', {
+            kind: 'livePageChromeActions',
+            contributionId: action.id
+          });
+        });
+      },
       registerScriptEditorAction: (action) => {
         assertManifestContribution('scriptEditorActions', action.id);
         if (!isAgent) {
@@ -1341,6 +1376,28 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
         });
       }
     },
+    livePages: {
+      list: async () => {
+        assertLivePages();
+        return bridgeInvoke('livePages.list');
+      },
+      get: async (idOrUuid) => {
+        assertLivePages();
+        return bridgeInvoke('livePages.get', { idOrUuid });
+      },
+      create: async (input) => {
+        assertLivePages();
+        return bridgeInvoke('livePages.create', { input });
+      },
+      update: async (input) => {
+        assertLivePages();
+        return bridgeInvoke('livePages.update', { input });
+      },
+      delete: async (id) => {
+        assertLivePages();
+        await bridgeInvoke('livePages.delete', { id });
+      }
+    },
     ai: {
       registerChatPointer: (config) => {
         assertAi();
@@ -1375,13 +1432,13 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
     /**
      * Opens or reuses an embedded browser tab and returns a control handle.
      *
-     * Requires the `browser` permission. Same semantics as request-script `hc.webpage`.
+     * Requires the `browser` permission. Same semantics as request-script `hc.livePage`.
      *
      * @param {string} [url] - Optional URL; omit to bind the active browser tab.
      * @param {{ reuse?: boolean }} [options] - Optional `{ reuse }` (default true).
-     * @returns {Promise<import('../types').PluginWebpageHandle>} Webpage handle.
+     * @returns {Promise<import('../types').PluginLivePageHandle>} Webpage handle.
      */
-    webpage: async (url, options) => {
+    livePage: async (url, options) => {
       assertBrowser();
       /**
        * Writes screenshot PNG bytes via the plugin filesystem bridge.
@@ -1394,11 +1451,11 @@ export function createBridgedPluginContext({ pluginId, mode, contributionId, rea
         assertPermission('filesystem:write');
         const result = await bridgeInvoke('fs.writeBytes', { path, base64: pngBase64 });
         if (typeof result !== 'string' || !result.trim()) {
-          throw new Error('hc.webpage().screenshot failed to resolve write path');
+          throw new Error('hc.livePage().screenshot failed to resolve write path');
         }
         return result;
       };
-      return openWebpage(callWebpage, url, options, writeScreenshotBytes);
+      return openLivePage(callLivePage, url, options, writeScreenshotBytes);
     }
   };
 }

package/dist/runtime/livePageHandle.d.ts

@@ -0,0 +1,50 @@
+import type { PluginLivePageHandle } from '../types';
+
+/**
+ * Throws when a live-page bridge result is an `{ error }` object.
+ *
+ * @param result - Raw bridge result.
+ * @returns The result when it is not an error.
+ * @throws When the bridge returned `{ error: string }`.
+ */
+export function unwrapLivePageBridgeResult(result: unknown): unknown;
+
+/**
+ * Normalizes the optional second argument to `hc.livePage(url, options)`.
+ *
+ * @param options - User-provided options.
+ * @returns Normalized open options.
+ */
+export function normalizeLivePageOpenOptions(options?: unknown): { reuse?: boolean };
+
+/**
+ * Builds a live-page handle whose methods call the host live-page bridge.
+ *
+ * @param tab - Opened tab metadata from the bridge.
+ * @param callLivePage - Bridge transport.
+ * @returns Plain-object handle for the plugin world.
+ */
+export function createLivePageHandle(
+  tab: {
+    tabId: string;
+    url: string;
+    title: string;
+    canGoBack?: boolean;
+    canGoForward?: boolean;
+  },
+  callLivePage: (req: Record<string, unknown>) => Promise<unknown>
+): PluginLivePageHandle;
+
+/**
+ * Opens or reuses an embedded browser tab and returns a control handle.
+ *
+ * @param callLivePage - Bridge transport that accepts ScriptLivePageRequest-shaped payloads.
+ * @param url - Optional URL; omit to bind the active browser tab.
+ * @param openOptions - Optional `{ reuse }` (default true).
+ * @returns Live-page handle.
+ */
+export function openLivePage(
+  callLivePage: (req: Record<string, unknown>) => Promise<unknown>,
+  url?: unknown,
+  openOptions?: unknown
+): Promise<PluginLivePageHandle>;