@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.3

package/components/composites/sidebar/sidebar-root.js

@@ -10,7 +10,7 @@ const sidebarRootVariants = cva("mt-4 flex flex-col overflow-hidden text-sm tran
     variants: {
         variant: {
             default: "relative isolate min-h-0 h-[calc(100%_-_1rem)] w-full shrink-0 rounded-sm border border-border bg-card",
-            mobile: "h-full w-full min-w-0 border-0 bg-card shadow-none ring-0",
+            mobile: "h-full w-full min-w-0 border-0 bg-card shadow-none ",
             "game-modal": "h-full rounded-sm border border-border bg-card ",
         },
         collapsed: {
@@ -18,7 +18,12 @@ const sidebarRootVariants = cva("mt-4 flex flex-col overflow-hidden text-sm tran
             false: "",
         },
         resizable: {
-            true: "",
+            // While resizable, width is driven directly by the drag — animating it
+            // over 360ms makes the sidebar lag/chase the pointer and forces layout
+            // every frame. Drop width/min-width from the transition (keep the
+            // radius/shadow polish for collapse/expand, which happens in the
+            // non-resizable state).
+            true: "transition-[border-radius,box-shadow]",
             false: "",
         },
     },
@@ -428,27 +433,48 @@ export const Sidebar = React.forwardRef(function Sidebar({ testId, variant = "de
         catch {
             /* ignore */
         }
+        // Coalesce width writes to one per frame: a high-rate mouse fires
+        // pointermove well above 60Hz, and each write is a parent setState +
+        // layout. The collapse check stays synchronous so the threshold can't
+        // be missed between frames.
+        let rafId = 0;
+        let pendingWidth = null;
         const onMove = (ev) => {
             const delta = ev.clientX - startX;
             const nextRaw = startWidth + delta;
             if (nextRaw < collapseThreshold && onCollapseRequest) {
                 onCollapseRequest();
-                window.removeEventListener("pointermove", onMove);
-                window.removeEventListener("pointerup", onUp);
+                cleanup();
                 return;
             }
-            const clamped = Math.min(Math.max(nextRaw, minWidth), maxWidth);
-            onWidthChange?.(clamped);
+            pendingWidth = Math.min(Math.max(nextRaw, minWidth), maxWidth);
+            if (rafId === 0) {
+                rafId = requestAnimationFrame(() => {
+                    rafId = 0;
+                    if (pendingWidth !== null)
+                        onWidthChange?.(pendingWidth);
+                });
+            }
         };
+        function cleanup() {
+            if (rafId !== 0) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+        }
         const onUp = () => {
+            // Flush the last pending width so the final position isn't dropped.
+            if (rafId !== 0 && pendingWidth !== null)
+                onWidthChange?.(pendingWidth);
             try {
                 target.releasePointerCapture(event.pointerId);
             }
             catch {
                 /* ignore */
             }
-            window.removeEventListener("pointermove", onMove);
-            window.removeEventListener("pointerup", onUp);
+            cleanup();
         };
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);

package/components/composites/sidebar/sidebar-scroll-region.d.ts

@@ -1,3 +1,3 @@
-import type { SidebarScrollRegionProps } from "./sidebar-types";
+import type { SidebarScrollRegionProps } from "./sidebar-types.js";
 export declare function SidebarScrollRegion({ className, variant, ...props }: SidebarScrollRegionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar-scroll-region.d.ts.map

package/components/composites/skills/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./skill-sidebar-item";
+export * from "./skill-sidebar-item.js";
 //# sourceMappingURL=index.d.ts.map

package/components/composites/trajectories/index.d.ts

@@ -1,8 +1,8 @@
-export * from "./trajectory-cache-stats";
-export * from "./trajectory-code-block";
-export * from "./trajectory-context-diff-list";
-export * from "./trajectory-event-timeline";
-export * from "./trajectory-llm-call-card";
-export * from "./trajectory-pipeline-graph";
-export * from "./trajectory-sidebar-item";
+export * from "./trajectory-cache-stats.js";
+export * from "./trajectory-code-block.js";
+export * from "./trajectory-context-diff-list.js";
+export * from "./trajectory-event-timeline.js";
+export * from "./trajectory-llm-call-card.js";
+export * from "./trajectory-pipeline-graph.js";
+export * from "./trajectory-sidebar-item.js";
 //# sourceMappingURL=index.d.ts.map

package/components/composites/trajectories/trajectory-code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trajectory-code-block.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/trajectories/trajectory-code-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,KAAK,EACL,UAAU,EACV,MAAM,GACP,EAAE,wBAAwB,2CA4C1B"}
+{"version":3,"file":"trajectory-code-block.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/trajectories/trajectory-code-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,KAAK,EACL,UAAU,EACV,MAAM,GACP,EAAE,wBAAwB,2CA6C1B"}

package/components/composites/trajectories/trajectory-code-block.js

@@ -4,10 +4,11 @@ import { Button } from "../../ui/button.js";
 import { PagePanel } from "../page-panel/index.js";
 export function TrajectoryCodeBlock({ collapseLabel, content, copyLabel, copyToClipboardLabel, expandLabel, label, linesLabel, onCopy, }) {
     const [expanded, setExpanded] = React.useState(false);
-    const lines = content.split("\n").length;
+    const contentLines = React.useMemo(() => content.split("\n"), [content]);
+    const lines = contentLines.length;
     const shouldTruncate = !expanded && lines > 20;
     const displayContent = shouldTruncate
-        ? `${content.split("\n").slice(0, 20).join("\n")}\n...`
+        ? `${contentLines.slice(0, 20).join("\n")}\n...`
         : content;
     return (_jsxs(PagePanel, { variant: "inset", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: label, description: linesLabel, actions: _jsxs(PagePanel.ActionRail, { className: "rounded-sm px-1 py-1", children: [lines > 20 ? (_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "h-8 rounded-sm px-3 text-xs-tight", onClick: () => setExpanded((current) => !current), children: expanded ? collapseLabel : expandLabel })) : null, _jsx(Button, { variant: "outline", size: "sm", type: "button", className: "h-8 rounded-sm px-3 text-xs-tight", onClick: () => onCopy(content), title: copyToClipboardLabel, children: copyLabel })] }) }), _jsx("pre", { className: "max-h-[28rem] overflow-x-auto overflow-y-auto whitespace-pre-wrap break-words px-4 py-4 text-xs leading-6 text-txt", children: displayContent })] }));
 }

package/components/composites/trajectories/trajectory-pipeline-graph.js

@@ -9,13 +9,13 @@ function PipelineNodeButton({ node, selected, onClick, }) {
     const Icon = node.icon;
     const statusClasses = {
         active: selected
-            ? "border-primary/40 bg-primary/5 ring-2 ring-primary/30 "
+            ? "border-primary/40 bg-primary/5   "
             : "border-border/40 hover:border-border/60 ",
         skipped: selected
-            ? "border-primary/30 bg-primary/5 ring-2 ring-primary/20 opacity-70"
+            ? "border-primary/30 bg-primary/5   opacity-70"
             : "border-border/25 border-dashed opacity-50 hover:opacity-70",
         error: selected
-            ? "border-danger/40 bg-danger/5 ring-2 ring-danger/30"
+            ? "border-danger/40 bg-danger/5  "
             : "border-danger/30 hover:border-danger/40",
     };
     const iconColor = {

package/components/config-ui/config-control-primitives.helpers.js

@@ -1,13 +1,13 @@
 import { cn } from "../../lib/utils.js";
 export function getConfigInputClassName({ className, density = "regular", hasError = false, }) {
-    return cn("w-full border border-border bg-card font-[var(--mono)] box-border transition-[border-color,box-shadow,background-color] focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent placeholder:text-muted placeholder:opacity-60", density === "compact"
+    return cn("w-full border border-border bg-card font-[var(--mono)] box-border transition-[border-color,box-shadow,background-color]     placeholder:text-muted placeholder:opacity-60", density === "compact"
         ? "h-8 px-2 py-1 text-xs"
         : "h-9 rounded-sm px-3 py-2 text-sm", hasError
         ? "border-destructive bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]"
         : null, className);
 }
 export function getConfigTextareaClassName({ className, density = "regular", hasError = false, }) {
-    return cn("w-full border border-border bg-card font-[var(--mono)] box-border transition-[border-color,box-shadow,background-color] focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent resize-y", density === "compact"
+    return cn("w-full border border-border bg-card font-[var(--mono)] box-border transition-[border-color,box-shadow,background-color]     resize-y", density === "compact"
         ? "min-h-16 px-2 py-1 text-xs"
         : "min-h-[72px] max-h-[400px] rounded-sm px-3 py-2 text-sm", hasError
         ? "border-destructive bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]"

package/components/config-ui/config-field.d.ts

@@ -1,4 +1,4 @@
-import type { FieldRenderer, FieldRenderProps } from "../../config/config-catalog";
+import type { FieldRenderer, FieldRenderProps } from "../../config/config-catalog.js";
 /**
  * Wraps a field renderer with the standard label row, env key display,
  * help text, and error messages.

package/components/config-ui/config-field.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { FieldRenderer, FieldRenderProps } from "../../config/config-catalog";
+import type { FieldRenderer, FieldRenderProps } from "../../config/config-catalog.js";
 /** Single-line text input for unresolved field types. */
 export declare function renderTextField(props: FieldRenderProps): import("react/jsx-runtime").JSX.Element;
 /** Masked password input with show/hide toggle and async onReveal for server-backed decryption. */

package/components/config-ui/config-field.helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-field.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/config-field.helpers.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EACjB,MAAM,6BAA6B,CAAC;AA0DrC,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAyBtD;AAID,mGAAmG;AACnG,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAyED,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CAExD;AA+FD,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAEzD;AA2CD,oDAAoD;AACpD,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,2CAyBrD;AAID,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CA+ExD;AA8MD,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAwCD,wDAAwD;AACxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAqBvD;AAID,wDAAwD;AACxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AA2CD,qEAAqE;AACrE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AAkED,iEAAiE;AACjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,2CAE7D;AAoGD,gCAAgC;AAChC,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAqBtD;AAID,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAEtD;AA6DD,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAqBtD;AAID,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AAoKD,mFAAmF;AACnF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAyGD,sDAAsD;AACtD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAmB1D;AAID,sDAAsD;AACtD,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CA+BtD;AAID,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CAkBxD;AA8OD,kDAAkD;AAClD,eAAO,MAAM,mBAAmB,EAAE,aAEjC,CAAC;AA8EF,mFAAmF;AACnF,eAAO,MAAM,wBAAwB,EAAE,aAEtC,CAAC;AAIF,4CAA4C;AAC5C,eAAO,MAAM,gBAAgB,EAAE,aAwB9B,CAAC;AAoHF,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,aAE9B,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAwB1D,CAAC"}
+{"version":3,"file":"config-field.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/config-field.helpers.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EACjB,MAAM,6BAA6B,CAAC;AA0DrC,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAyBtD;AAID,mGAAmG;AACnG,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAyED,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CAExD;AA+FD,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,2CAEzD;AA2CD,oDAAoD;AACpD,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,2CAyBrD;AAID,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CA+ExD;AA+ND,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAwCD,wDAAwD;AACxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAqBvD;AAID,wDAAwD;AACxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AA2CD,qEAAqE;AACrE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AAkED,iEAAiE;AACjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,2CAE7D;AAoGD,gCAAgC;AAChC,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAqBtD;AAID,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAEtD;AA6DD,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAqBtD;AAID,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,2CAEvD;AAoKD,mFAAmF;AACnF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAE1D;AAyGD,sDAAsD;AACtD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,2CAmB1D;AAID,sDAAsD;AACtD,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CA+BtD;AAID,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,2CAkBxD;AA8OD,kDAAkD;AAClD,eAAO,MAAM,mBAAmB,EAAE,aAEjC,CAAC;AA8EF,mFAAmF;AACnF,eAAO,MAAM,wBAAwB,EAAE,aAEtC,CAAC;AAIF,4CAA4C;AAC5C,eAAO,MAAM,gBAAgB,EAAE,aAwB9B,CAAC;AAoHF,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,aAE9B,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAwB1D,CAAC"}

package/components/config-ui/config-field.helpers.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDown, X } from "lucide-react";
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { resolveDynamic } from "../../config/config-catalog.js";
 import { CONFIG_SELECT_FLOATING_LAYER_NAME, CONFIG_SELECT_FLOATING_LAYER_Z_INDEX, } from "../../lib/floating-layers.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Checkbox } from "../ui/checkbox.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
@@ -88,7 +88,7 @@ function PasswordFieldInner({ fp: props }) {
             setVisible(true);
         }
     }, [visible, onReveal, props]);
-    return (_jsxs("div", { className: "flex", children: [_jsx("input", { ref: inputRef, className: "flex-1 px-3 py-2 border border-border border-r-0 bg-card text-sm font-[var(--mono)] transition-all focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent box-border h-9 rounded-l-sm placeholder:text-muted placeholder:opacity-60", type: visible ? "text" : "password", value: fieldValue, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "password", onChange: (e) => {
+    return (_jsxs("div", { className: "flex", children: [_jsx("input", { ref: inputRef, className: "flex-1 px-3 py-2 border border-border border-r-0 bg-card text-sm font-[var(--mono)] transition-all     box-border h-9 rounded-l-sm placeholder:text-muted placeholder:opacity-60", type: visible ? "text" : "password", value: fieldValue, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "password", onChange: (e) => {
                     setFieldValue(e.target.value);
                     props.onChange(e.target.value);
                     fireAction(props, "change");
@@ -176,7 +176,7 @@ export function renderUrlField(props) {
 // ── 6. Select ───────────────────────────────────────────────────────────
 /** Dropdown select. Options from hint.options or schema.enum. */
 export function RenderSelectField(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const enhancedOptions = props.hint.options;
     const plainOptions = props.schema.enum ??
         props.schema.oneOf?.map((o) => String(o.const ?? o.description ?? "")) ??
@@ -212,19 +212,32 @@ export function RenderSelectField(props) {
                         .map((opt) => (_jsxs(SelectItem, { value: opt.value, children: [opt.label, opt.description ? ` — ${opt.description}` : ""] }, opt.value)))] })] }));
 }
 function SearchableSelectInner({ fp: props, options, effectiveValue, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const matchingOpt = options.find((o) => o.value === effectiveValue);
     const [inputVal, setInputVal] = useState(matchingOpt?.label ?? effectiveValue);
     const [open, setOpen] = useState(false);
     const [filter, setFilter] = useState("");
+    const deferredFilter = useDeferredValue(filter);
     const triggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const searchInputRef = useRef(null);
     const [dropdownStyle, setDropdownStyle] = useState({});
-    const filtered = filter
-        ? options.filter((o) => o.label.toLowerCase().includes(filter.toLowerCase()) ||
-            o.value.toLowerCase().includes(filter.toLowerCase()))
-        : options;
+    // Precompute lowercased label/value once per option list so the per-keystroke
+    // filter is a simple substring scan rather than re-lowercasing the whole list.
+    const searchIndex = useMemo(() => options.map((o) => ({
+        option: o,
+        searchLabel: o.label.toLowerCase(),
+        searchValue: o.value.toLowerCase(),
+    })), [options]);
+    const filtered = useMemo(() => {
+        if (!deferredFilter)
+            return options;
+        const needle = deferredFilter.toLowerCase();
+        return searchIndex
+            .filter((entry) => entry.searchLabel.includes(needle) ||
+            entry.searchValue.includes(needle))
+            .map((entry) => entry.option);
+    }, [deferredFilter, options, searchIndex]);
     const select = useCallback((opt) => {
         props.onChange(opt.value);
         setInputVal(opt.label);
@@ -288,7 +301,7 @@ function SearchableSelectInner({ fp: props, options, effectiveValue, }) {
                     setOpen(!open);
                     setFilter("");
                 }, "data-config-key": props.key, "data-field-type": "select", children: [_jsx("span", { className: inputVal ? "" : "text-muted opacity-60", children: inputVal || "Select..." }), _jsx("span", { className: "text-muted text-2xs shrink-0", children: open ? "\u25B2" : "\u25BC" })] }), open &&
-                createPortal(_jsxs("div", { ref: dropdownRef, "data-floating-layer": CONFIG_SELECT_FLOATING_LAYER_NAME, style: dropdownStyle, className: "border border-border bg-card rounded-sm", children: [_jsx("div", { className: "p-1.5", children: _jsx("input", { ref: searchInputRef, className: "w-full px-2 py-1.5 border border-border bg-bg text-xs font-[var(--mono)] focus:border-accent focus:outline-none rounded-sm", type: "text", value: filter, placeholder: `Search ${options.length} options...`, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
+                createPortal(_jsxs("div", { ref: dropdownRef, "data-floating-layer": CONFIG_SELECT_FLOATING_LAYER_NAME, style: dropdownStyle, className: "border border-border bg-card rounded-sm", children: [_jsx("div", { className: "p-1.5", children: _jsx("input", { ref: searchInputRef, className: "w-full px-2 py-1.5 border border-border bg-bg text-xs font-[var(--mono)]   rounded-sm", type: "text", value: filter, placeholder: `Search ${options.length} options...`, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
                                     if (e.key === "Escape") {
                                         setOpen(false);
                                         setFilter("");
@@ -440,7 +453,7 @@ export function renderJsonField(props) {
     return _jsx(JsonFieldInner, { fp: props });
 }
 function JsonFieldInner({ fp: props }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const initial = props.isSet ? String(props.value ?? "") : "";
     const [jsonError, setJsonError] = useState(null);
     const handleBlur = (e) => {
@@ -486,7 +499,7 @@ export function renderArrayField(props) {
     return _jsx(ArrayFieldInner, { fp: props });
 }
 function ArrayItem({ index, value, total, hasError, readonly, onChange, onRemove, onMoveUp, onMoveDown, onBlur, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("div", { className: "flex items-center gap-1", children: [!readonly && (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "px-1 py-0 h-auto w-auto text-2xs leading-tight text-muted hover:text-txt disabled:opacity-30 disabled:cursor-not-allowed", onClick: onMoveUp, disabled: index === 0, title: t("config-field.MoveUp", {
                             defaultValue: "Move up",
                         }), children: "\u25B2" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "px-1 py-0 h-auto w-auto text-2xs leading-tight text-muted hover:text-txt disabled:opacity-30 disabled:cursor-not-allowed", onClick: onMoveDown, disabled: index === total - 1, title: t("config-field.MoveDown", {
@@ -494,7 +507,7 @@ function ArrayItem({ index, value, total, hasError, readonly, onChange, onRemove
                         }), children: _jsx(ChevronDown, { className: "w-3 h-3" }) })] })), _jsx("input", { className: `${inputCls(hasError)} flex-1`, type: "text", value: value, placeholder: `Item ${index + 1}`, disabled: readonly, onChange: (e) => onChange(e.target.value), onBlur: onBlur }), !readonly && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "px-2 py-1.5 bg-bg-hover text-xs text-muted transition-colors hover:bg-surface hover:text-destructive h-9 rounded-sm", onClick: onRemove, children: _jsx(X, { className: "w-3 h-3" }) }))] }));
 }
 function ArrayFieldInner({ fp: props }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const rawVal = props.isSet ? props.value : [];
     const initialItems = Array.isArray(rawVal)
         ? rawVal.map(String)
@@ -541,7 +554,7 @@ export function renderKeyValueField(props) {
     return _jsx(KeyValueFieldInner, { fp: props });
 }
 function KeyValueFieldInner({ fp: props }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const rawVal = props.isSet ? props.value : {};
     const initialPairs = rawVal && typeof rawVal === "object" && !Array.isArray(rawVal)
         ? Object.entries(rawVal).map(([k, v]) => ({
@@ -594,7 +607,7 @@ export function renderDatetimeField(props) {
 // ── 18. File ────────────────────────────────────────────────────────────
 /** File path text input with path traversal guard. */
 export function RenderFileField(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const value = props.isSet ? String(props.value ?? "") : "";
     const placeholder = props.hint.placeholder ?? "/path/to/file";
     return (_jsxs("div", { children: [_jsx("input", { className: inputCls(!!props.errors?.length), type: "text", defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "file", disabled: props.readonly, onChange: (e) => {
@@ -610,7 +623,7 @@ export function RenderFileField(props) {
 // ── 19. Custom ──────────────────────────────────────────────────────────
 /** Placeholder for plugin-provided custom React components. */
 export function RenderCustomField(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const componentName = props.hint.component;
     return (_jsxs("div", { className: "px-3 py-4 border border-dashed border-border bg-bg-hover text-sm text-muted", "data-config-key": props.key, "data-field-type": "custom", children: [t("config-field.CustomComponent", {
                 defaultValue: "Custom component:",
@@ -730,7 +743,7 @@ function processSimpleInline(text, key) {
     return _jsx("span", { children: text }, key);
 }
 function MarkdownFieldInner(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [preview, setPreview] = useState(false);
     const value = typeof props.value === "string" ? props.value : "";
     return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx(Button, { type: "button", variant: !preview ? "default" : "outline", size: "sm", className: `text-xs-tight px-2 py-0.5 transition-colors h-auto ${!preview
@@ -748,7 +761,7 @@ function MarkdownFieldInner(props) {
 export const renderMarkdownField = (props) => (_jsx(MarkdownFieldInner, { ...props }));
 // ── 21. Checkbox Group ───────────────────────────────────────────────────
 function CheckboxGroupInner(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const fieldId = useId();
     const selected = new Set(Array.isArray(props.value)
         ? props.value
@@ -789,7 +802,7 @@ export const renderGroupField = (props) => {
 };
 // ── 23. Table ────────────────────────────────────────────────────────────
 function TableFieldInner(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const MAX_TABLE_ROWS = 50;
     const columns = props.hint.columns ?? [
         { key: "key", label: "Key" },
@@ -823,7 +836,7 @@ function TableFieldInner(props) {
             return;
         emit(rows.filter((_, i) => i !== idx));
     };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "table", children: [_jsx("div", { className: "border border-border overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-surface", children: [columns.map((col) => (_jsx("th", { className: "text-left text-xs-tight font-semibold text-muted px-3 py-1.5", children: col.label }, col.key))), _jsx("th", { className: "w-[36px]" })] }) }), _jsx("tbody", { children: rows.map((row, ri) => (_jsxs("tr", { className: "", children: [columns.map((col) => (_jsx("td", { className: "px-1 py-0.5", children: _jsx("input", { className: "w-full px-2 py-1 bg-transparent text-sm border-none outline-none focus:bg-bg-hover", value: row[col.key] ?? "", placeholder: col.label, disabled: props.readonly, onChange: (e) => updateCell(ri, col.key, e.target.value) }) }, col.key))), _jsx("td", { className: "text-center", children: !props.readonly && rows.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-muted hover:text-destructive text-sm px-1 h-auto w-auto", onClick: () => removeRow(ri), title: t("config-field.RemoveRow", {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "table", children: [_jsx("div", { className: "border border-border overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-surface", children: [columns.map((col) => (_jsx("th", { className: "text-left text-xs-tight font-semibold text-muted px-3 py-1.5", children: col.label }, col.key))), _jsx("th", { className: "w-[36px]" })] }) }), _jsx("tbody", { children: rows.map((row, ri) => (_jsxs("tr", { className: "", children: [columns.map((col) => (_jsx("td", { className: "px-1 py-0.5", children: _jsx("input", { className: "w-full px-2 py-1 bg-transparent text-sm border-none outline-none ", value: row[col.key] ?? "", placeholder: col.label, disabled: props.readonly, onChange: (e) => updateCell(ri, col.key, e.target.value) }) }, col.key))), _jsx("td", { className: "text-center", children: !props.readonly && rows.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-muted hover:text-destructive text-sm px-1 h-auto w-auto", onClick: () => removeRow(ri), title: t("config-field.RemoveRow", {
                                                 defaultValue: "Remove row",
                                             }), children: t("config-field.Times") })) })] }, JSON.stringify(row)))) })] }) }), !props.readonly && rows.length < MAX_TABLE_ROWS && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "self-start text-xs-tight text-accent hover:underline p-0 h-auto", onClick: addRow, children: t("config-field.AddRow", { defaultValue: "Add row" }) }))] }));
 }

package/components/config-ui/config-field.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { defaultRenderers } from "./config-field.helpers.js";
 /**
  * Wraps a field renderer with the standard label row, env key display,
  * help text, and error messages.
  */
 export function ConfigField({ renderProps, renderer, pluginId, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const label = renderProps.hint.label ?? renderProps.key;
     const errors = renderProps.errors ?? [];
     const hasError = errors.length > 0;

package/components/config-ui/config-renderer.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
-import type { FieldRegistry, FieldRenderer, FieldRenderProps, JsonSchemaObject } from "../../config/config-catalog";
-import type { ConfigUiHint, PluginUiTheme } from "../../types";
+import type { FieldRegistry, FieldRenderer, FieldRenderProps, JsonSchemaObject } from "../../config/config-catalog.js";
+import type { ConfigUiHint, PluginUiTheme } from "../../types/index.js";
 export interface ConfigRendererProps {
     /** JSON Schema describing the config structure (type: "object"). */
     schema: JsonSchemaObject | null;

package/components/config-ui/config-renderer.helpers.d.ts

@@ -1,5 +1,5 @@
-import type { FieldRegistry } from "../../config/config-catalog";
-import type { ConfigRendererHandle } from "./config-renderer";
+import type { FieldRegistry } from "../../config/config-catalog.js";
+import type { ConfigRendererHandle } from "./config-renderer.js";
 /** The default registry wiring defaultCatalog → defaultRenderers. */
 export declare const defaultRegistry: FieldRegistry;
 /**

package/components/config-ui/config-renderer.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState, } from "react";
 import { evaluateVisibility, resolveFields, runValidation, } from "../../config/config-catalog.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { ConfigField } from "./config-field.js";
 // ── Group icons ────────────────────────────────────────────────────────
@@ -101,7 +101,7 @@ function widthClass(width) {
     }
 }
 function ValidationSummary({ fieldErrors, fieldLabels, pluginId, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const errorEntries = [...fieldErrors.entries()].filter(([, errors]) => errors.length > 0);
     const totalErrors = errorEntries.length;
     if (totalErrors === 0)
@@ -339,8 +339,8 @@ export const ConfigRenderer = forwardRef(function ConfigRenderer({ schema, hints
         }
         return Object.keys(style).length > 0 ? style : undefined;
     }, [theme]);
-    // ── useApp for i18n ─────────────────────────────────────────────────
-    const { t: tFn } = useApp();
+    // ── i18n ────────────────────────────────────────────────────────────
+    const tFn = useAppSelector((s) => s.t);
     // ── Empty state ──────────────────────────────────────────────────────
     if (!schema) {
         return (_jsx("div", { className: "text-xs text-muted italic py-3", children: tFn("config-renderer.NoSchemaProvided") }));
@@ -353,12 +353,12 @@ export const ConfigRenderer = forwardRef(function ConfigRenderer({ schema, hints
                             } }) })] })), showValidationSummary && fieldErrors.size > 0 ? (_jsx(ValidationSummary, { fieldErrors: fieldErrors, fieldLabels: fieldLabels, pluginId: pluginId })) : null, [...groups.entries()].map(([group, fields], groupIndex) => (_jsxs("div", { className: groupIndex > 0 ? "mt-5" : "", children: [showHeaders && (_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("span", { className: "text-base leading-none", children: groupIcon(group) }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt opacity-70", children: group }), _jsx("span", { className: "flex-1 h-px bg-border ml-1" })] })), _jsx("div", { className: "grid grid-cols-6 gap-x-5 gap-y-0", children: fields.map((f) => renderField(f)) })] }, group))), advanced.length > 0 && (_jsxs("div", { className: "mt-5 pt-4", children: [_jsx(AdvancedSectionToggle, { advanced: advanced, advancedOpen: advancedOpen, setAdvancedOpen: setAdvancedOpen }), advancedOpen && (_jsx("div", { className: "grid grid-cols-6 gap-x-5 gap-y-0 pt-1 animate-[cr-slide_var(--duration-normal,200ms)_ease]", children: advanced.map((f) => renderField(f)) }))] }))] }));
 });
 function ConfigProgressText({ configProgress, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsxs("span", { className: "text-xs font-semibold text-[var(--warning,#f39c12)]", children: [configProgress.requiredSet, "/", configProgress.requiredTotal, " ", t("config-renderer.requiredFieldsConf", {
                         defaultValue: "required fields configured",
                     })] }), _jsxs("span", { className: "text-xs-tight text-muted", children: [configProgress.configured, "/", configProgress.total, " ", t("config-renderer.total", { defaultValue: "total" })] })] }));
 }
 function AdvancedSectionToggle({ advanced, advancedOpen, setAdvancedOpen, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs(Button, { type: "button", variant: "ghost", className: "flex items-center gap-2 cursor-pointer select-none group mb-3 p-0 h-auto", onClick: () => setAdvancedOpen((prev) => !prev), children: [_jsx("span", { className: "inline-block text-2xs text-muted transition-transform duration-200 group-hover:text-txt", style: { transform: advancedOpen ? "rotate(90deg)" : "none" }, children: "\u25B6" }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-muted group-hover:text-txt transition-colors", children: t("nav.advanced", { defaultValue: "Advanced" }) }), _jsx("span", { className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1.5 text-2xs font-bold bg-[var(--accent-subtle,rgba(255,255,255,0.05))] text-accent border border-border rounded-sm", children: advanced.length }), _jsx("span", { className: "flex-1 h-px bg-border opacity-50 ml-1" })] }));
 }

package/components/config-ui/index.d.ts

@@ -1,8 +1,8 @@
-export * from "./config-control-primitives";
-export * from "./config-control-primitives.helpers";
-export * from "./config-field";
-export * from "./config-renderer";
-export * from "./config-renderer.helpers";
-export { UiRenderer, type UiRendererProps } from "./ui-renderer";
-export { evaluateUiVisibility, getSupportedComponents, runValidation as runUiValidation, sanitizeLinkHref, } from "./ui-renderer.helpers";
+export * from "./config-control-primitives.js";
+export * from "./config-control-primitives.helpers.js";
+export * from "./config-field.js";
+export * from "./config-renderer.js";
+export * from "./config-renderer.helpers.js";
+export { UiRenderer, type UiRendererProps } from "./ui-renderer.js";
+export { evaluateUiVisibility, getSupportedComponents, runValidation as runUiValidation, sanitizeLinkHref, } from "./ui-renderer.helpers.js";
 //# sourceMappingURL=index.d.ts.map

package/components/config-ui/ui-renderer.d.ts

@@ -1,4 +1,4 @@
-import type { AuthState, UiSpec } from "../../config/ui-spec";
+import type { AuthState, UiSpec } from "../../config/ui-spec.js";
 export interface UiRendererProps {
     spec: UiSpec;
     onAction?: (action: string, params?: Record<string, unknown>) => void;

package/components/config-ui/ui-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-renderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/ui-renderer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,SAAS,EAKT,MAAM,EACP,MAAM,sBAAsB,CAAC;AA8+C9B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CACjB,MAAM,EACN,CACE,KAAK,EAAE,OAAO,EACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAChC,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CAsEjB"}
+{"version":3,"file":"ui-renderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/ui-renderer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,SAAS,EAKT,MAAM,EACP,MAAM,sBAAsB,CAAC;AA8gD9B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CACjB,MAAM,EACN,CACE,KAAK,EAAE,OAAO,EACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAChC,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CAsEjB"}

package/components/config-ui/ui-renderer.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { AuthState, UiSpecValidationCheck, UiSpecVisibilityCondition } from "../../config/ui-spec";
+import type { AuthState, UiSpecValidationCheck, UiSpecVisibilityCondition } from "../../config/ui-spec.js";
 export declare function evaluateUiVisibility(condition: UiSpecVisibilityCondition | undefined, state: Record<string, unknown>, auth?: AuthState): boolean;
 export declare function sanitizeLinkHref(href: unknown): string;
 export declare function runValidation(checks: UiSpecValidationCheck[], value: unknown, customValidators?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean | Promise<boolean>>): string[];

package/components/config-ui/ui-renderer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
 import { getByPath, setByPath } from "../../config/config-catalog.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { confirmDesktopAction, resolveAppAssetUrl } from "../../utils/index.js";
 import { Button } from "../ui/button.js";
 import { Checkbox } from "../ui/checkbox.js";
@@ -339,7 +339,7 @@ const TableComponent = (props) => {
     return (_jsxs("div", { className: "overflow-x-auto", children: [props.caption ? (_jsx("div", { className: "text-xs font-semibold mb-1.5", children: String(props.caption) })) : null, _jsxs("table", { className: "w-full text-xs border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { className: "text-left px-2.5 py-1.5 font-semibold text-muted", children: col }, col))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { className: "", children: row.map((cell) => (_jsx("td", { className: "px-2.5 py-1.5", children: cell }, cell))) }, row.join("|")))) })] })] }));
 };
 const CarouselComponent = (props) => {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const items = props.items ?? [];
     const [current, setCurrent] = useState(0);
     return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border border-border bg-[var(--bg-hover)] p-4 min-h-[60px]", children: items[current] && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold", children: items[current].title }), _jsx("div", { className: "text-xs text-muted mt-0.5", children: items[current].description })] })) }), _jsxs("div", { className: "flex justify-center gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "text-xs px-2 py-0.5", onClick: () => setCurrent((p) => Math.max(0, p - 1)), disabled: current === 0, children: t("ui-renderer.Larr") }), _jsxs("span", { className: "text-2xs text-muted self-center", children: [current + 1, " / ", items.length] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "text-xs px-2 py-0.5", onClick: () => setCurrent((p) => Math.min(items.length - 1, p + 1)), disabled: current === items.length - 1, children: t("ui-renderer.Rarr") })] })] }));
@@ -628,8 +628,17 @@ const COMPONENTS = {
 // ══════════════════════════════════════════════════════════════════════
 // ELEMENT RENDERER
 // ══════════════════════════════════════════════════════════════════════
+// Renders a single item of a `repeat` element. The per-item context is
+// memoized on the item identity so that re-rendering the parent (e.g. on an
+// unrelated state change) does not produce a fresh context value and force every
+// repeated child subtree to re-render.
+function RepeatItemRenderer({ ctx, item, el, component, resolvedProps, }) {
+    const itemCtx = useMemo(() => ({ ...ctx, repeatItem: item }), [ctx, item]);
+    const childNodes = useMemo(() => el.children.map((childId) => (_jsx(UiContext.Provider, { value: itemCtx, children: _jsx(ElementRenderer, { elementId: childId }) }, childId))), [el.children, itemCtx]);
+    return _jsx(_Fragment, { children: component(resolvedProps, childNodes, itemCtx, el) });
+}
 function ElementRenderer({ elementId }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const ctx = useUiCtx();
     const el = ctx.spec.elements[elementId];
     if (!el)
@@ -648,12 +657,10 @@ function ElementRenderer({ elementId }) {
         const listData = getByPath(ctx.state, el.repeat.path);
         if (!Array.isArray(listData))
             return null;
+        const repeatKey = el.repeat.key;
         return (_jsx(_Fragment, { children: listData.map((item, index) => {
-                const itemCtx = { ...ctx, repeatItem: item };
-                const childNodes = el.children.map((childId) => (_jsx(UiContext.Provider, { value: itemCtx, children: _jsx(ElementRenderer, { elementId: childId }) }, childId)));
-                const repeatKey = el.repeat?.key;
                 const itemKey = String(repeatKey != null ? item[repeatKey] : index);
-                return (_jsx(React.Fragment, { children: component(resolvedProps, childNodes, itemCtx, el) }, itemKey));
+                return (_jsx(RepeatItemRenderer, { ctx: ctx, item: item, el: el, component: component, resolvedProps: resolvedProps }, itemKey));
             }) }));
     }
     // Normal rendering: resolve children

package/components/connectors/BlueBubblesStatusPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlueBubblesStatusPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/connectors/BlueBubblesStatusPanel.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,sBAAsB,4CAoFrC"}
+{"version":3,"file":"BlueBubblesStatusPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/connectors/BlueBubblesStatusPanel.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,sBAAsB,4CA0ErC"}

package/components/connectors/BlueBubblesStatusPanel.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect } from "react";
 import { client } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { useFetchData } from "../../hooks/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { Button } from "../ui/button.js";
 function resolveWebhookTarget(status) {
@@ -20,33 +21,19 @@ function resolveWebhookTarget(status) {
     return status.webhookPath;
 }
 export function BlueBubblesStatusPanel() {
-    const { t } = useApp();
-    const [status, setStatus] = useState(null);
-    const [error, setError] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const refresh = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            setStatus(await client.getBlueBubblesStatus());
-        }
-        catch (nextError) {
-            setError(nextError instanceof Error ? nextError.message : String(nextError));
-        }
-        finally {
-            setLoading(false);
-        }
-    }, []);
+    const t = useAppSelector((s) => s.t);
+    const fetchState = useFetchData((_signal) => client.getBlueBubblesStatus(), []);
+    const status = fetchState.status === "success" ? fetchState.data : null;
+    const loading = fetchState.status === "loading";
+    const error = fetchState.status === "error" ? fetchState.error.message : null;
+    const refresh = fetchState.refetch;
     useEffect(() => {
-        void refresh();
         return client.onWsEvent("ws-reconnected", () => {
-            void refresh();
+            refresh();
         });
     }, [refresh]);
     const webhookTarget = resolveWebhookTarget(status);
-    return (_jsx(PagePanel.Notice, { tone: error ? "danger" : status?.connected ? "accent" : "default", className: "mt-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
-                void refresh();
-            }, disabled: loading, children: loading
+    return (_jsx(PagePanel.Notice, { tone: error ? "danger" : status?.connected ? "accent" : "default", className: "mt-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold", onClick: refresh, disabled: loading, children: loading
                 ? t("common.loading", { defaultValue: "Loading…" })
                 : t("common.refresh", { defaultValue: "Refresh" }) }), children: _jsxs("div", { className: "space-y-2 text-xs", children: [_jsx("div", { className: "font-semibold text-txt", children: status?.connected
                         ? t("pluginsview.BlueBubblesConnected", {