@harborclient/sdk 1.4.5 → 1.5.1

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+## 1.5.1 - 2026-08-02
+
+- feat(theme): add page header color variables and update related styles. (`577ab426`)
+- feat(theme): introduce header color variable and update related styles. (`6b6637e3`)
+- feat(VariableInput): portal tooltip to document body for improved positioning. (`65430293`)
+
+## 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`)

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

@@ -22,6 +22,9 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  * Full-bleed page header with a bordered bottom edge, title block on the left,
  * and optional action controls on the right. Sticks to the top of its nearest
  * scroll ancestor so title and actions stay visible while page content scrolls.
+ *
+ * Colors come from the `page-header`, `page-header-text`, and `page-header-muted`
+ * theme tokens (`--mac-page-header*`).
  */
 export declare function PageHeader({ title, description, icon, children, className, ...props }: Props): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BrB"}

package/dist/components/PageHeader/index.js

@@ -5,7 +5,10 @@ import { cn } from '../utils.js';
  * Full-bleed page header with a bordered bottom edge, title block on the left,
  * and optional action controls on the right. Sticks to the top of its nearest
  * scroll ancestor so title and actions stay visible while page content scrolls.
+ *
+ * Colors come from the `page-header`, `page-header-text`, and `page-header-muted`
+ * theme tokens (`--mac-page-header*`).
  */
 export function PageHeader({ title, description, icon, children, className, ...props }) {
-    return (_jsxs("div", { ...props, className: cn('hc-page-header sticky top-0 z-10 -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator bg-surface px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
+    return (_jsxs("div", { ...props, className: cn('hc-page-header sticky top-0 z-10 -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator bg-page-header px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-page-header-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-page-header-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-page-header-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
 }

package/dist/components/Resizable/ResizeHandle.d.ts

@@ -36,6 +36,9 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria
 }
 /**
  * Draggable separator handle for resizable panels.
+ *
+ * Track and edge colors use the `resize-separator` theme token; the inner grip
+ * uses `resize-handle` (`--mac-resize-separator` / `--mac-resize-handle`).
  */
 export declare function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, formatValueText, className, ...props }: Props): JSX.Element;
 export {};

package/dist/components/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EACH,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,gBAAgB,CACnG;IACC;;OAEG;IACH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,GAAG,UAAU,KAAK,MAAM,CAAC;CACrF;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsCrB"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EACH,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,gBAAgB,CACnG;IACC;;OAEG;IACH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,GAAG,UAAU,KAAK,MAAM,CAAC;CACrF;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsCrB"}

package/dist/components/Resizable/ResizeHandle.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { cn } from '../utils.js';
 /**
  * Draggable separator handle for resizable panels.
+ *
+ * Track and edge colors use the `resize-separator` theme token; the inner grip
+ * uses `resize-handle` (`--mac-resize-separator` / `--mac-resize-handle`).
  */
 export function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, formatValueText, className, ...props }) {
     const isHorizontal = orientation === 'horizontal';
@@ -9,9 +12,9 @@ export function ResizeHandle({ orientation, value, min, max, onResizeStart, onKe
     const valueText = formatValueText
         ? formatValueText(value, orientation)
         : `${dimension} ${Math.round(value)} pixels`;
-    return (_jsx("div", { ...props, role: "separator", tabIndex: 0, className: cn('hc-resize-handle font-inherit app-no-drag m-0 flex shrink-0 items-center justify-center bg-control p-0 text-inherit hover:bg-selection/60', isHorizontal
-            ? 'h-1.5 w-full cursor-row-resize border-b border-separator'
-            : 'h-full w-1.5 cursor-col-resize border-r border-separator', className), onMouseDown: onResizeStart, onKeyDown: onKeyboardResize, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": Math.round(max), "aria-valuetext": valueText, children: _jsx("div", { className: isHorizontal
-                ? 'hc-resize-handle-grip h-0.5 w-8 rounded-full bg-muted/50'
-                : 'hc-resize-handle-grip h-8 w-0.5 rounded-full bg-muted/50', "aria-hidden": true }) }));
+    return (_jsx("div", { ...props, role: "separator", tabIndex: 0, className: cn('hc-resize-handle font-inherit app-no-drag m-0 flex shrink-0 items-center justify-center bg-resize-separator p-0 text-inherit hover:bg-selection/60', isHorizontal
+            ? 'h-1.5 w-full cursor-row-resize border-b border-resize-separator'
+            : 'h-full w-1.5 cursor-col-resize border-r border-resize-separator', className), onMouseDown: onResizeStart, onKeyDown: onKeyboardResize, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": Math.round(max), "aria-valuetext": valueText, children: _jsx("div", { className: isHorizontal
+                ? 'hc-resize-handle-grip h-0.5 w-8 rounded-full bg-resize-handle'
+                : 'hc-resize-handle-grip h-8 w-0.5 rounded-full bg-resize-handle', "aria-hidden": true }) }));
 }

package/dist/components/Sidebar/index.js

@@ -17,7 +17,7 @@ export function Sidebar({ side, ariaLabel, header, children, scroll = true, scro
         storageKey
     };
     const { size: width, minSize: sidebarMinSize, maxSize: sidebarMaxSize, onResizeStart, onKeyboardResize } = useResizable(resizableOptions);
-    const handle = (_jsx(ResizeHandle, { orientation: "vertical", value: width, min: sidebarMinSize, max: sidebarMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: resizeAriaLabel ?? 'Resize sidebar', className: cn(side === 'right' && 'border-r-0 border-l border-separator', resizeHandleClassName) }));
+    const handle = (_jsx(ResizeHandle, { orientation: "vertical", value: width, min: sidebarMinSize, max: sidebarMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: resizeAriaLabel ?? 'Resize sidebar', className: cn(side === 'right' && 'border-r-0 border-l border-resize-separator', resizeHandleClassName) }));
     /**
      * Stretch wrapper so short body content (e.g. centered empty states) fills the
      * scroll viewport height while still allowing overflow scroll when content grows.

package/dist/components/SidebarSection/SectionItem.js

@@ -15,7 +15,7 @@ const SectionItem = memo(function SectionItem({ forwardedRef, itemRef, state, to
     const [transitionStyle, panelRef] = useHeightTransition(state);
     const itemElementRef = useMergeRef(forwardedRef, itemRef);
     const { status, isMounted, isEnter } = state;
-    return (_jsxs("div", { ref: itemElementRef, className: "mb-1", children: [_jsxs("div", { className: `hc-sidebar-section-header flex min-h-8 items-center justify-between gap-2 border-y border-sidebar-rail-separator bg-sidebar-section py-1 pl-0.5 ${flushBody ? 'mb-0' : 'mb-1'}`, children: [_jsxs("button", { ...buttonProps, type: "button", className: "app-no-drag inline-flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 border-none bg-transparent p-0 text-left", children: [_jsx("span", { className: SIDEBAR_CHEVRON_SLOT_CLASS, children: _jsx(FaIcon, { icon: isEnter ? faChevronDown : faChevronRight, className: `${SIDEBAR_CHEVRON_ICON_CLASS} text-sidebar-section-text` }) }), _jsx("h2", { className: "m-0 text-[15px] leading-none font-medium tracking-wide text-sidebar-section-text uppercase", children: title })] }), (headerActions || onAdd) && (_jsxs("div", { className: "hc-sidebar-section-header-actions flex shrink-0 items-center gap-1", children: [headerActions, onAdd ? (_jsx("button", { type: "button", className: "hc-sidebar-add-button app-no-drag inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text", title: addLabel ?? 'Add', "aria-label": addLabel ?? 'Add', onClick: onAdd, children: _jsx(FaIcon, { icon: faPlus, className: "h-3.5 w-3.5" }) })) : null] }))] }), isMounted ? (_jsx("div", { style: {
+    return (_jsxs("div", { ref: itemElementRef, className: "mb-1", children: [_jsxs("div", { className: `hc-sidebar-section-header flex min-h-8 items-center justify-between gap-2 border-b border-sidebar-rail-separator bg-sidebar-section py-1 pl-0.5 ${flushBody ? 'mb-0' : 'mb-1'}`, children: [_jsxs("button", { ...buttonProps, type: "button", className: "app-no-drag inline-flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 border-none bg-transparent p-0 text-left", children: [_jsx("span", { className: SIDEBAR_CHEVRON_SLOT_CLASS, children: _jsx(FaIcon, { icon: isEnter ? faChevronDown : faChevronRight, className: `${SIDEBAR_CHEVRON_ICON_CLASS} text-sidebar-section-text` }) }), _jsx("h2", { className: "m-0 text-[15px] leading-none font-medium tracking-wide text-sidebar-section-text uppercase", children: title })] }), (headerActions || onAdd) && (_jsxs("div", { className: "hc-sidebar-section-header-actions flex shrink-0 items-center gap-1", children: [headerActions, onAdd ? (_jsx("button", { type: "button", className: "hc-sidebar-add-button app-no-drag inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text", title: addLabel ?? 'Add', "aria-label": addLabel ?? 'Add', onClick: onAdd, children: _jsx(FaIcon, { icon: faPlus, className: "h-3.5 w-3.5" }) })) : null] }))] }), isMounted ? (_jsx("div", { style: {
                     display: status === 'exited' ? 'none' : undefined,
                     ...transitionStyle
                 }, className: "transition-[height] duration-200 ease-out motion-reduce:transition-none", children: _jsx("div", { ...panelProps, ref: panelRef, children: children }) })) : null] }));

package/dist/components/TabBar/index.js

@@ -257,7 +257,7 @@ export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPr
                                         }) }, exitingTab.exitKey)))] }), wrap ? newTabButton : null] }), _jsx(DragOverlay, { children: activeDragTab ? (_jsx("div", { className: "rounded-t-lg border border-separator bg-surface px-3 py-2 text-[14px] font-medium shadow-md", children: activeDragTab.dragLabel })) : null })] }), wrap ? null : newTabButton] }));
     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);
+    const containerClassName = cn('app-no-drag flex shrink-0 items-end bg-header 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: closeContextMenu }))] }));
 }
 export { TabNewButton } from './TabNewButton.js';

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

@@ -78,6 +78,9 @@ export interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
  *
+ * The variable tooltip is portaled to `document.body` so fixed positioning is not
+ * trapped under host chrome (for example request tabs above a scroll container).
+ *
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */

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;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"}
+{"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;AAyBnE,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;;;;;;;;GAQG;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,CAsnBrB"}

package/dist/components/VariableInput/index.js

@@ -6,6 +6,7 @@ import { useAutocomplete } from '../Autocomplete/useAutocomplete.js';
 import { Button } from '../Button/index.js';
 import { VariableTooltipValue } from '../VariableTooltip/index.js';
 import { Input } from '../forms/index.js';
+import { portalToBody } from '../portalToBody.js';
 import { getFocusableElements } from '../useDialogFocus.js';
 import { cn } from '../utils.js';
 /** Delay after the pointer stops moving before a hover tooltip is shown. */
@@ -15,6 +16,9 @@ const TOOLTIP_HIDE_DELAY_MS = 400;
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
  *
+ * The variable tooltip is portaled to `document.body` so fixed positioning is not
+ * trapped under host chrome (for example request tabs above a scroll container).
+ *
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */
@@ -368,7 +372,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         scheduleHide();
     };
     /**
-     * Closes any open tooltip when focus leaves the field.
+     * Closes any open tooltip when focus leaves the field and its portaled tooltip.
      */
     const handleWrapperBlur = () => {
         const wrapper = wrapperRef.current;
@@ -376,11 +380,13 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             return;
         }
         queueMicrotask(() => {
-            if (!wrapper.contains(document.activeElement)) {
-                cancelHide();
-                cancelShow();
-                dismissTooltip();
+            const active = document.activeElement;
+            if (wrapper.contains(active) || tooltipRef.current?.contains(active)) {
+                return;
             }
+            cancelHide();
+            cancelShow();
+            dismissTooltip();
         });
     };
     /**
@@ -427,20 +433,22 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
                         dismissTooltip();
                     }
                     openAutocomplete();
-                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { ref: tooltipRef, id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { position: 'fixed', top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted, onClose: () => {
-                            if (tooltipSource === 'focus') {
-                                dismissFocusTooltip(true);
-                            }
-                            else {
-                                dismissTooltip();
-                            }
-                        } }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
-                            onEditVariable(tooltip.key);
-                            if (tooltipSource === 'focus') {
-                                dismissFocusTooltip(true);
-                            }
-                            else {
-                                dismissTooltip();
-                            }
-                        }, children: "Edit value" }))] }))] }));
+                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent
+                ? portalToBody(_jsxs("div", { ref: tooltipRef, id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { position: 'fixed', top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted, onClose: () => {
+                                if (tooltipSource === 'focus') {
+                                    dismissFocusTooltip(true);
+                                }
+                                else {
+                                    dismissTooltip();
+                                }
+                            } }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
+                                onEditVariable(tooltip.key);
+                                if (tooltipSource === 'focus') {
+                                    dismissFocusTooltip(true);
+                                }
+                                else {
+                                    dismissTooltip();
+                                }
+                            }, children: "Edit value" }))] }))
+                : null] }));
 }

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>;