@elizaos/ui 2.0.0-beta.1 → 2.0.3-beta.2

package/components/setup/BootstrapStep.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BootstrapStep — cloud-provisioned containers only.
+ *
+ * If the dashboard linked here with `#bootstrap=<token>`, the token is read
+ * once on mount, scrubbed from the URL, and exchanged automatically — no
+ * paste required. Otherwise the manual paste form is shown as a fallback.
+ *
+ * On success the returned session id is written to
+ * sessionStorage["eliza_session"] and the `onAdvance` callback fires.
+ *
+ * P1 will migrate the session to an HttpOnly cookie and retire sessionStorage.
+ * The key name is kept in sync with the cookie name planned for P1
+ * (eliza_session) so the P1 migration is a straightforward swap.
+ *
+ * Error contract (fail closed):
+ *   401 → token invalid / expired / already used, single-use, must rotate.
+ *   429 → rate limited.
+ *   5xx → server not ready.
+ *   network → surfaces to user; never treated as success.
+ */
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { client } from "../../api/index.js";
+import { cn } from "../../lib/utils.js";
+import { startFreshFirstRunReload } from "../../platform/index.js";
+import { useTranslation, } from "../../state/TranslationContext.hooks.js";
+import { setupBodyTextShadowStyle, setupDescriptionClass, setupDetailStackClassName, setupEyebrowClass, setupFooterClass, setupHeaderBlockClass, setupHelperTextClassName, setupInputClassName, setupPrimaryActionClass, setupPrimaryActionTextShadowStyle, setupReadableTextFaintClassName, setupReadableTextMutedClassName, setupTextShadowStyle, setupTitleClass, } from "./setup-classes.js";
+import { SetupField } from "./setup-form-primitives.js";
+import { SetupStepDivider } from "./setup-step-chrome.js";
+const SESSION_STORAGE_KEY = "eliza_session";
+const MONO_FONT = "'Poppins', Arial, system-ui, sans-serif";
+const BOOTSTRAP_HASH_PARAM = "bootstrap";
+/**
+ * If the dashboard handed off the token via `#bootstrap=<token>`, read it once
+ * on mount so the container can auto-activate without a manual paste.
+ * Fragment (not query) so the token never reaches the server or referer logs.
+ */
+function readBootstrapTokenFromHash() {
+    if (typeof window === "undefined")
+        return null;
+    const hash = window.location.hash;
+    if (hash.length < 2)
+        return null;
+    const params = new URLSearchParams(hash.slice(1));
+    const value = params.get(BOOTSTRAP_HASH_PARAM);
+    return value && value.length > 0 ? value : null;
+}
+function scrubBootstrapTokenFromHash() {
+    if (typeof window === "undefined")
+        return;
+    const hash = window.location.hash;
+    if (hash.length < 2)
+        return;
+    const params = new URLSearchParams(hash.slice(1));
+    if (!params.has(BOOTSTRAP_HASH_PARAM))
+        return;
+    params.delete(BOOTSTRAP_HASH_PARAM);
+    const remaining = params.toString();
+    const newHash = remaining.length > 0 ? `#${remaining}` : "";
+    window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${newHash}`);
+}
+function describeError(result, t) {
+    if (result.status === 429) {
+        return t("bootstrapstep.errorRateLimited", {
+            defaultValue: "Too many attempts — wait a minute and try again.",
+        });
+    }
+    if (result.status === 503) {
+        return t("bootstrapstep.errorServerNotReady", {
+            defaultValue: "The server is not ready. Reload the page and try again.",
+        });
+    }
+    if (result.status === 400) {
+        return t("bootstrapstep.errorNoToken", {
+            defaultValue: "No token provided. Paste the token from your Eliza Cloud dashboard.",
+        });
+    }
+    // 401 — invalid / expired / already used
+    return t("bootstrapstep.errorInvalidToken", {
+        defaultValue: "Token invalid, expired, or already used. Bootstrap tokens are single-use — rotate from your Eliza Cloud dashboard to get a new one.",
+    });
+}
+export function BootstrapStep({ onAdvance, exchangeFn }) {
+    const { t } = useTranslation();
+    const fieldId = useId().replace(/:/g, "");
+    const [token, setToken] = useState("");
+    // Lazy-init to "submitting" when an auto-activate token is present so the
+    // first paint shows "Verifying…" instead of an empty paste form.
+    const [submitState, setSubmitState] = useState(() => readBootstrapTokenFromHash() !== null
+        ? { phase: "submitting" }
+        : { phase: "idle" });
+    const inputRef = useRef(null);
+    const didAutoExchangeRef = useRef(false);
+    const doExchange = useCallback(async (rawToken) => {
+        setSubmitState({ phase: "submitting" });
+        let result;
+        try {
+            if (exchangeFn) {
+                result = await exchangeFn(rawToken);
+            }
+            else {
+                // `client` is statically imported above. The `exchangeFn` injection
+                // path remains the test seam; this branch is the production path.
+                result = await client.postBootstrapExchange(rawToken);
+            }
+        }
+        catch (err) {
+            // Network down or unexpected throw — surface to user, do not proceed.
+            const message = err instanceof Error && err.message
+                ? err.message
+                : t("bootstrapstep.errorNetwork", {
+                    defaultValue: "Network error — check your connection and try again.",
+                });
+            setSubmitState({ phase: "error", message, tone: "danger" });
+            return;
+        }
+        if (result.ok === false) {
+            setSubmitState({
+                phase: "error",
+                message: describeError(result, t),
+                tone: "danger",
+            });
+            return;
+        }
+        // P0 bridge: write session id to sessionStorage. P1 replaces this with
+        // an HttpOnly cookie set by the server on the exchange response.
+        try {
+            sessionStorage.setItem(SESSION_STORAGE_KEY, result.sessionId);
+        }
+        catch {
+            // sessionStorage unavailable (e.g. private browsing on some browsers).
+            // Session is still in memory for this page load; startup can advance.
+        }
+        client.setToken(result.sessionId);
+        setSubmitState({ phase: "success" });
+        onAdvance();
+    }, [exchangeFn, onAdvance, t]);
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        const trimmed = token.trim();
+        if (!trimmed)
+            return;
+        void doExchange(trimmed);
+    }, [token, doExchange]);
+    useEffect(() => {
+        if (didAutoExchangeRef.current)
+            return;
+        const hashToken = readBootstrapTokenFromHash();
+        if (!hashToken)
+            return;
+        didAutoExchangeRef.current = true;
+        // Scrub before exchange so the token never lingers in window.history,
+        // even if exchange throws or the user navigates away mid-flight.
+        scrubBootstrapTokenFromHash();
+        void doExchange(hashToken);
+    }, [doExchange]);
+    const isSubmitting = submitState.phase === "submitting";
+    return (_jsxs("form", { onSubmit: handleSubmit, "aria-label": t("bootstrapstep.formLabel", {
+            defaultValue: "Bootstrap token entry",
+        }), className: "flex w-full flex-col gap-6", children: [_jsxs("div", { className: setupHeaderBlockClass, children: [_jsx("p", { className: setupEyebrowClass, style: setupBodyTextShadowStyle, children: "Eliza Cloud" }), _jsx(SetupStepDivider, {}), _jsx("h1", { className: setupTitleClass, style: setupTextShadowStyle, children: t("bootstrapstep.title", {
+                            defaultValue: "Finish setting up your container",
+                        }) }), _jsx("p", { className: setupDescriptionClass, style: setupBodyTextShadowStyle, children: t("bootstrapstep.description", {
+                            defaultValue: "Paste the bootstrap token from your Eliza Cloud dashboard to activate this container.",
+                        }) })] }), _jsx("div", { className: setupDetailStackClassName, children: _jsx(SetupField, { controlId: fieldId, label: t("bootstrapstep.tokenLabel", {
+                        defaultValue: "Bootstrap token",
+                    }), message: submitState.phase === "error" ? submitState.message : undefined, messageTone: submitState.phase === "error" ? submitState.tone : undefined, children: ({ describedBy, invalid }) => (_jsx("input", { ref: inputRef, id: fieldId, type: "password", autoComplete: "off", spellCheck: false, placeholder: t("bootstrapstep.tokenPlaceholder", {
+                            defaultValue: "Paste your bootstrap token here",
+                        }), value: token, onChange: (e) => {
+                            setToken(e.target.value);
+                            if (submitState.phase === "error") {
+                                setSubmitState({ phase: "idle" });
+                            }
+                        }, disabled: isSubmitting, "aria-invalid": invalid, "aria-describedby": describedBy, className: cn(setupInputClassName, invalid &&
+                            "border-[var(--danger)] focus-visible:border-[var(--danger)]") })) }) }), _jsx("div", { className: cn("rounded-sm px-4 py-3", "border border-[rgba(240,185,11,0.18)] bg-[rgba(240,185,11,0.07)]"), children: _jsxs("p", { className: cn(setupHelperTextClassName, "leading-relaxed"), style: setupBodyTextShadowStyle, children: [_jsx("span", { className: setupReadableTextMutedClassName, style: { fontFamily: MONO_FONT }, children: t("bootstrapstep.whereToGet", {
+                                defaultValue: "Where do I get this?",
+                            }) }), " ", _jsxs("span", { className: setupReadableTextFaintClassName, children: [t("bootstrapstep.whereToGetDetail", {
+                                    defaultValue: "Open your Eliza Cloud dashboard, select this container, and copy the token shown under “Bootstrap token”. It is valid for 24 hours and can only be used once.",
+                                }), " ", _jsx("a", { href: "/docs/security/bootstrap-token", target: "_blank", rel: "noopener noreferrer", className: "underline hover:text-[var(--first-run-text-muted)] transition-colors", children: t("bootstrapstep.learnMore", { defaultValue: "Learn more" }) })] })] }) }), _jsxs("div", { className: cn(setupFooterClass, "justify-between"), children: [_jsx("button", { type: "button", onClick: () => startFreshFirstRunReload(), className: "text-sm underline underline-offset-2 text-[var(--first-run-text-muted)] transition-opacity hover:opacity-80", children: t("bootstrapstep.startOver", { defaultValue: "Start over" }) }), _jsx("button", { type: "submit", disabled: isSubmitting || !token.trim(), className: setupPrimaryActionClass, style: setupPrimaryActionTextShadowStyle, children: isSubmitting
+                            ? t("bootstrapstep.verifying", { defaultValue: "Verifying…" })
+                            : t("bootstrapstep.activate", { defaultValue: "Activate" }) })] })] }));
+}

package/components/setup/setup-classes.d.ts

@@ -0,0 +1,28 @@
+export declare const setupDetailStackClassName = "flex w-full flex-col gap-4 text-left";
+export declare const setupReadableTextStrongClassName = "text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export declare const setupReadableTextPrimaryClassName = "text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)]";
+export declare const setupReadableTextMutedClassName = "text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupReadableTextSubtleClassName = "text-[var(--first-run-text-subtle)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupReadableTextFaintClassName = "text-[var(--first-run-text-faint)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupHelperTextClassName = "text-xs leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupFieldLabelClassName = "text-xs font-semibold uppercase tracking-[0.14em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+export declare const setupInputClassName = "h-12 w-full rounded-sm px-4 text-left text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)] transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 bg-[var(--first-run-input-bg)]";
+export declare const setupEyebrowClass = "text-center text-xs font-semibold uppercase tracking-[0.3em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupTitleClass = "text-center text-xl font-light leading-[1.4] text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export declare const setupDescriptionClass = "mx-auto max-w-[36ch] text-center text-sm leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)] rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+export declare const setupHeaderBlockClass = "mb-5 max-md:mb-4";
+export declare const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
+export declare const setupSecondaryActionClass = "inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
+export declare const setupTextShadowStyle: {
+    readonly textShadow: "var(--first-run-text-shadow-strong)";
+    readonly WebkitTextStroke: "0.35px var(--first-run-text-stroke)";
+};
+export declare const setupBodyTextShadowStyle: {
+    readonly textShadow: "var(--first-run-text-shadow-muted)";
+};
+export declare const setupPrimaryActionTextShadowStyle: {
+    readonly textShadow: "0 1px 5px rgba(3,5,10,0.38)";
+};
+//# sourceMappingURL=setup-classes.d.ts.map

package/components/setup/setup-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-classes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-classes.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,yCAAyC,CAAC;AAChF,eAAO,MAAM,gCAAgC,mJACqG,CAAC;AACnJ,eAAO,MAAM,iCAAiC,4FAC6C,CAAC;AAC5F,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,gCAAgC,yFAC2C,CAAC;AACzF,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,wBAAwB,gHAA+D,CAAC;AACrG,eAAO,MAAM,wBAAwB,0IAAyF,CAAC;AAC/H,eAAO,MAAM,yBAAyB,oEAC6B,CAAC;AAEpE,eAAO,MAAM,mBAAmB,qXAAiU,CAAC;AAElW,eAAO,MAAM,iBAAiB,qJAAoG,CAAC;AACnI,eAAO,MAAM,eAAe,gMAAqF,CAAC;AAClH,eAAO,MAAM,qBAAqB,iNAA6H,CAAC;AAChK,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AACxD,eAAO,MAAM,gBAAgB,0EAC4C,CAAC;AAC1E,eAAO,MAAM,yBAAyB,soBAAqlB,CAAC;AAC5nB,eAAO,MAAM,uBAAuB,+WAC0U,CAAC;AAE/W,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AACX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AACX,eAAO,MAAM,iCAAiC;;CAEpC,CAAC"}

package/components/setup/setup-classes.js

@@ -0,0 +1,32 @@
+// Shared first-run / setup styling tokens. Pure string + style constants kept
+// out of the component modules so those stay Fast-Refresh-clean: a module that
+// exports a component alongside an object/array export (e.g. a style object)
+// breaks the React refresh boundary and forces a full reload.
+export const setupDetailStackClassName = "flex w-full flex-col gap-4 text-left";
+export const setupReadableTextStrongClassName = "text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export const setupReadableTextPrimaryClassName = "text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)]";
+export const setupReadableTextMutedClassName = "text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupReadableTextSubtleClassName = "text-[var(--first-run-text-subtle)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupReadableTextFaintClassName = "text-[var(--first-run-text-faint)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupHelperTextClassName = `text-xs leading-relaxed ${setupReadableTextMutedClassName}`;
+export const setupFieldLabelClassName = `text-xs font-semibold uppercase tracking-[0.14em] ${setupReadableTextMutedClassName}`;
+export const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+const setupInputSurfaceClassName = "bg-[var(--first-run-input-bg)]";
+export const setupInputClassName = `h-12 w-full rounded-sm px-4 text-left ${setupReadableTextPrimaryClassName} transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 ${setupInputSurfaceClassName}`;
+export const setupEyebrowClass = `text-center text-xs font-semibold uppercase tracking-[0.3em] ${setupReadableTextMutedClassName}`;
+export const setupTitleClass = `text-center text-xl font-light leading-[1.4] ${setupReadableTextStrongClassName}`;
+export const setupDescriptionClass = `mx-auto max-w-[36ch] text-center text-sm leading-relaxed ${setupReadableTextMutedClassName} ${setupTextSupportClassName}`;
+export const setupHeaderBlockClass = "mb-5 max-md:mb-4";
+export const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
+export const setupSecondaryActionClass = `inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 ${setupReadableTextMutedClassName}`;
+export const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
+export const setupTextShadowStyle = {
+    textShadow: "var(--first-run-text-shadow-strong)",
+    WebkitTextStroke: "0.35px var(--first-run-text-stroke)",
+};
+export const setupBodyTextShadowStyle = {
+    textShadow: "var(--first-run-text-shadow-muted)",
+};
+export const setupPrimaryActionTextShadowStyle = {
+    textShadow: "0 1px 5px rgba(3,5,10,0.38)",
+};

package/components/setup/setup-form-primitives.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+interface SetupFieldProps {
+    align?: "left" | "center";
+    children: (controlProps: {
+        describedBy?: string;
+        invalid: boolean;
+    }) => React.ReactNode;
+    className?: string;
+    controlId?: string;
+    description?: React.ReactNode;
+    descriptionClassName?: string;
+    label?: React.ReactNode;
+    labelClassName?: string;
+    message?: React.ReactNode;
+    messageClassName?: string;
+    messageTone?: "default" | "danger" | "success";
+}
+export declare function SetupField({ align, children, className, controlId, description, descriptionClassName, label, labelClassName, message, messageClassName, messageTone, }: SetupFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=setup-form-primitives.d.ts.map

package/components/setup/setup-form-primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-form-primitives.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-form-primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAQpC,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;CAChD;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,oBAAoB,EACpB,KAAK,EACL,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,WAAuB,GACxB,EAAE,eAAe,2CAyDjB"}

package/components/setup/setup-form-primitives.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Field, FieldDescription, FieldLabel, FieldMessage } from "../ui/field.js";
+import { setupFieldLabelClassName, setupHelperTextClassName, } from "./setup-classes.js";
+export function SetupField({ align = "left", children, className, controlId, description, descriptionClassName, label, labelClassName, message, messageClassName, messageTone = "default", }) {
+    const descriptionId = controlId && description ? `${controlId}-description` : undefined;
+    const messageId = controlId && message ? `${controlId}-message` : undefined;
+    const describedBy = [descriptionId, messageId].filter(Boolean).join(" ") || undefined;
+    const isInvalid = Boolean(message) && messageTone === "danger";
+    return (_jsxs(Field, { className: cn("w-full gap-2.5", align === "center" ? "items-center text-center" : "text-left", className), children: [label ? (_jsx(FieldLabel, { htmlFor: controlId, className: cn(setupFieldLabelClassName, align === "center" && "text-center", labelClassName), children: label })) : null, children({ describedBy, invalid: isInvalid }), description ? (_jsx(FieldDescription, { id: descriptionId, className: cn(setupHelperTextClassName, align === "center" && "text-center", descriptionClassName), children: description })) : null, message ? (_jsx(FieldMessage, { id: messageId, tone: messageTone, "aria-live": messageTone === "danger" ? "assertive" : "polite", className: cn("leading-relaxed", align === "center" && "text-center", messageClassName), children: message })) : null] }));
+}

package/components/setup/setup-step-chrome.d.ts

@@ -0,0 +1,2 @@
+export declare function SetupStepDivider(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=setup-step-chrome.d.ts.map

package/components/setup/setup-step-chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-step-chrome.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-step-chrome.tsx"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,4CAM/B"}

package/components/setup/setup-step-chrome.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SetupStepDivider() {
+    return (_jsx("div", { className: "my-4 flex items-center gap-3 before:h-px before:flex-1 before: before:from-transparent before:via-[var(--first-run-divider)] before:to-transparent after:h-px after:flex-1 after: after:from-transparent after:via-[var(--first-run-divider)] after:to-transparent", children: _jsx("div", { className: "h-1.5 w-1.5 shrink-0 rotate-45 bg-[rgba(240,185,11,0.4)]" }) }));
+}

package/components/shared/AppPageSidebar.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { SidebarProps } from "../composites/sidebar/sidebar-types";
+export interface AppPageSidebarProps extends Omit<SidebarProps, "defaultCollapsed" | "footer" | "width"> {
+    bottomAction?: React.ReactNode;
+    defaultCollapsed?: boolean;
+    defaultWidth?: number;
+    footer?: React.ReactNode;
+    width?: number;
+    widthStorageKey?: string;
+}
+export declare const AppPageSidebar: React.ForwardRefExoticComponent<AppPageSidebarProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AppPageSidebar.d.ts.map

package/components/shared/AppPageSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppPageSidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/AppPageSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAmFxE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,yFA8KzB,CAAC"}

package/components/shared/AppPageSidebar.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeftClose } from "lucide-react";
+import * as React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Sidebar } from "../composites/sidebar/sidebar-root.js";
+const DEFAULT_PAGE_SIDEBAR_WIDTH = 240;
+const DEFAULT_PAGE_SIDEBAR_MIN_WIDTH = 200;
+const DEFAULT_PAGE_SIDEBAR_MAX_WIDTH = 520;
+const SIDEBAR_SYNC_STORAGE_PREFIX = "elizaos:ui:sidebar:";
+const PAGE_SIDEBAR_WIDTH_STORAGE_PREFIX = "eliza:page-sidebar:";
+const PAGE_SIDEBAR_ROOT_CLASS = "!mt-0 !h-full !bg-none !bg-transparent !rounded-none !border-0 !border-r !border-r-border/30 !shadow-none !backdrop-blur-none !ring-0";
+const PAGE_SIDEBAR_FOOTER_CLASS = "!justify-stretch !px-2 !pt-1.5 !pb-2";
+const PAGE_SIDEBAR_COLLAPSE_BUTTON_CLASS = "!border-0 !bg-transparent !shadow-none hover:!bg-transparent hover:!text-txt";
+function joinClassNames(...values) {
+    const className = values.filter(Boolean).join(" ").trim();
+    return className.length > 0 ? className : undefined;
+}
+function clampSidebarWidth(value, minWidth, maxWidth) {
+    return Math.min(Math.max(value, minWidth), maxWidth);
+}
+function buildPageSidebarWidthStorageKey(identity) {
+    return `${PAGE_SIDEBAR_WIDTH_STORAGE_PREFIX}${identity}:width`;
+}
+function buildSidebarCollapsedStorageKey(syncId) {
+    return `${SIDEBAR_SYNC_STORAGE_PREFIX}${syncId}:collapsed`;
+}
+function readStoredSidebarWidth(storageKey, defaultWidth, minWidth, maxWidth) {
+    if (!storageKey || typeof window === "undefined") {
+        return clampSidebarWidth(defaultWidth, minWidth, maxWidth);
+    }
+    try {
+        const raw = window.localStorage.getItem(storageKey);
+        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
+        if (Number.isFinite(parsed)) {
+            return clampSidebarWidth(parsed, minWidth, maxWidth);
+        }
+    }
+    catch {
+        /* ignore sandboxed storage */
+    }
+    return clampSidebarWidth(defaultWidth, minWidth, maxWidth);
+}
+function persistSidebarWidth(storageKey, width) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(storageKey, String(width));
+    }
+    catch {
+        /* ignore sandboxed storage */
+    }
+}
+function readStoredSidebarCollapsed(syncId, fallbackValue) {
+    if (!syncId || typeof window === "undefined")
+        return fallbackValue;
+    try {
+        const raw = window.localStorage.getItem(buildSidebarCollapsedStorageKey(syncId));
+        return raw == null ? fallbackValue : raw === "true";
+    }
+    catch {
+        return fallbackValue;
+    }
+}
+export const AppPageSidebar = React.forwardRef(function AppPageSidebar({ bottomAction, className, collapseButtonAriaLabel = "Collapse sidebar", collapseButtonClassName, collapsible = false, collapsed: collapsedProp, contentIdentity, defaultCollapsed = false, defaultWidth = DEFAULT_PAGE_SIDEBAR_WIDTH, expandButtonAriaLabel = "Expand sidebar", footer, footerClassName, header, headerClassName, maxWidth = DEFAULT_PAGE_SIDEBAR_MAX_WIDTH, minWidth = DEFAULT_PAGE_SIDEBAR_MIN_WIDTH, onCollapseRequest, onCollapsedChange, onWidthChange, resizable, showExpandedCollapseButton = false, syncId, testId, variant = "default", width: widthProp, widthStorageKey, ...props }, ref) {
+    const desktopDefaultVariant = variant === "default";
+    const effectiveResizable = resizable ?? desktopDefaultVariant;
+    const resolvedSyncId = syncId ??
+        (desktopDefaultVariant && collapsible
+            ? `eliza:page-sidebar:${contentIdentity ?? testId ?? "default"}`
+            : undefined);
+    const [internalCollapsed, setInternalCollapsed] = useState(() => readStoredSidebarCollapsed(resolvedSyncId, defaultCollapsed));
+    const controlledCollapsed = collapsedProp !== undefined;
+    const collapsed = controlledCollapsed ? collapsedProp : internalCollapsed;
+    const handleCollapsedChange = useCallback((next) => {
+        if (!controlledCollapsed) {
+            setInternalCollapsed(next);
+        }
+        onCollapsedChange?.(next);
+    }, [controlledCollapsed, onCollapsedChange]);
+    const resolvedWidthStorageKey = useMemo(() => {
+        if (widthStorageKey)
+            return widthStorageKey;
+        if (!desktopDefaultVariant || !effectiveResizable || !contentIdentity) {
+            return null;
+        }
+        return buildPageSidebarWidthStorageKey(contentIdentity);
+    }, [
+        contentIdentity,
+        desktopDefaultVariant,
+        effectiveResizable,
+        widthStorageKey,
+    ]);
+    const [internalWidth, setInternalWidth] = useState(() => readStoredSidebarWidth(resolvedWidthStorageKey, defaultWidth, minWidth, maxWidth));
+    const controlledWidth = widthProp !== undefined;
+    const width = controlledWidth ? widthProp : internalWidth;
+    const handleWidthChange = useCallback((next) => {
+        const clamped = clampSidebarWidth(next, minWidth, maxWidth);
+        if (!controlledWidth) {
+            setInternalWidth(clamped);
+            persistSidebarWidth(resolvedWidthStorageKey, clamped);
+        }
+        onWidthChange?.(clamped);
+    }, [
+        controlledWidth,
+        maxWidth,
+        minWidth,
+        onWidthChange,
+        resolvedWidthStorageKey,
+    ]);
+    const defaultFooter = footer ??
+        (desktopDefaultVariant && (collapsible || bottomAction) ? (_jsxs("div", { className: joinClassNames("flex w-full items-center gap-2", collapsible ? "justify-between" : "justify-end"), children: [collapsible ? (_jsx("button", { type: "button", onClick: () => handleCollapsedChange(true), "aria-label": collapseButtonAriaLabel, "data-testid": testId
+                        ? `${testId}-collapse-inline`
+                        : "page-sidebar-collapse-inline", className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-transparent text-muted transition-colors hover:text-txt", children: _jsx(PanelLeftClose, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, bottomAction] })) : undefined);
+    return (_jsx(Sidebar, { ...props, ref: ref, testId: testId, variant: variant, collapsible: collapsible, collapsed: collapsed, onCollapsedChange: handleCollapsedChange, contentIdentity: contentIdentity, syncId: resolvedSyncId, header: header, footer: defaultFooter, showExpandedCollapseButton: showExpandedCollapseButton, collapseButtonAriaLabel: collapseButtonAriaLabel, expandButtonAriaLabel: expandButtonAriaLabel, className: joinClassNames(desktopDefaultVariant ? PAGE_SIDEBAR_ROOT_CLASS : undefined, className), headerClassName: joinClassNames(desktopDefaultVariant && header == null
+            ? "!h-0 !min-h-0 !p-0 !m-0 !overflow-hidden"
+            : undefined, headerClassName), footerClassName: joinClassNames(defaultFooter && desktopDefaultVariant
+            ? PAGE_SIDEBAR_FOOTER_CLASS
+            : undefined, footerClassName), collapseButtonClassName: joinClassNames(desktopDefaultVariant ? PAGE_SIDEBAR_COLLAPSE_BUTTON_CLASS : undefined, collapseButtonClassName), resizable: effectiveResizable, width: effectiveResizable ? width : widthProp, onWidthChange: effectiveResizable ? handleWidthChange : onWidthChange, minWidth: minWidth, maxWidth: maxWidth, onCollapseRequest: onCollapseRequest ?? (() => handleCollapsedChange(true)) }));
+});

package/components/shared/CollapsibleSidebarSection.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import * as React from "react";
+export function CollapsibleSidebarSection({ addLabel, bodyClassName, children, collapsed, emptyClassName, emptyLabel, hoverActionsOnDesktop = true, icon, indicator, label, onAdd, onToggleCollapsed, sectionKey, testIdPrefix = "sidebar-section", }) {
+    const Chevron = collapsed ? ChevronRight : ChevronDown;
+    const hoverHideClass = hoverActionsOnDesktop
+        ? " opacity-0 transition-opacity group-hover/section:opacity-100 focus-visible:opacity-100"
+        : "";
+    const bodyId = `${testIdPrefix}-body-${sectionKey}`;
+    const hasChildren = React.Children.count(children) > 0;
+    return (_jsxs("section", { "data-testid": `${testIdPrefix}-${sectionKey}`, className: "group/section space-y-0", children: [_jsxs("div", { className: "flex items-center gap-1 pr-1", children: [_jsxs("button", { type: "button", onClick: () => onToggleCollapsed(sectionKey), "aria-expanded": !collapsed, "aria-controls": bodyId, "data-testid": `${testIdPrefix}-toggle-${sectionKey}`, className: "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-sm bg-transparent px-1.5 py-1 text-left text-[11px] leading-none font-semibold uppercase tracking-[0.16em] text-muted transition-colors hover:text-txt", children: [icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-muted", children: icon })) : null, _jsx("span", { className: "truncate", children: label }), indicator ? (_jsx("span", { className: "ml-0.5 inline-flex shrink-0 items-center", children: indicator })) : null, _jsx(Chevron, { "aria-hidden": true, className: `ml-0.5 h-3 w-3 shrink-0 text-muted${hoverHideClass}` })] }), onAdd ? (_jsx("button", { type: "button", onClick: onAdd, "aria-label": addLabel ?? "Add", title: addLabel, "data-testid": `${testIdPrefix}-add-${sectionKey}`, className: `inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-transparent text-muted transition-colors hover:text-txt${hoverHideClass}`, children: _jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null] }), collapsed ? null : hasChildren ? (_jsx("div", { id: bodyId, className: bodyClassName, children: children })) : emptyLabel ? (_jsx("div", { id: bodyId, className: emptyClassName, children: emptyLabel })) : null] }));
+}

package/components/shared/LanguageDropdown.d.ts

@@ -0,0 +1,17 @@
+import type { UiLanguage } from "../../i18n/messages";
+/** Minimal translator function type. Receive key, return string. */
+export type TranslatorFn = (key: string) => string;
+export interface LanguageDropdownProps {
+    uiLanguage: UiLanguage;
+    setUiLanguage: (language: UiLanguage) => void;
+    /** Optional translator for ARIA labels */
+    t?: TranslatorFn;
+    /** Optional extra className on the root */
+    className?: string;
+    /** Optional extra className on the trigger button */
+    triggerClassName?: string;
+    variant?: "native" | "companion" | "titlebar";
+    menuPlacement?: "bottom-end" | "top-end";
+}
+export declare function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant, menuPlacement, }: LanguageDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LanguageDropdown.d.ts.map

package/components/shared/LanguageDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageDropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/LanguageDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUtD,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,CAAC,EACD,SAAS,EACT,gBAAgB,EAChB,OAAkB,EAClB,aAA4B,GAC7B,EAAE,qBAAqB,2CAmFvB"}

package/components/shared/LanguageDropdown.helpers.d.ts

@@ -0,0 +1,9 @@
+import type { UiLanguage } from "../../i18n/messages";
+/** Language metadata with flag emoji and native label. */
+export declare const LANGUAGES: {
+    id: UiLanguage;
+    flag: string;
+    label: string;
+}[];
+export declare const LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME = "!h-11 !min-h-11 !rounded-sm !px-3.5";
+//# sourceMappingURL=LanguageDropdown.helpers.d.ts.map

package/components/shared/LanguageDropdown.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageDropdown.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/LanguageDropdown.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE;IAAE,EAAE,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAStE,CAAC;AAEF,eAAO,MAAM,mCAAmC,wCACT,CAAC"}

package/components/shared/LanguageDropdown.helpers.js

@@ -0,0 +1,12 @@
+/** Language metadata with flag emoji and native label. */
+export const LANGUAGES = [
+    { id: "en", flag: "\u{1F1FA}\u{1F1F8}", label: "English" },
+    { id: "zh-CN", flag: "\u{1F1E8}\u{1F1F3}", label: "中文" },
+    { id: "ko", flag: "\u{1F1F0}\u{1F1F7}", label: "한국어" },
+    { id: "es", flag: "\u{1F1EA}\u{1F1F8}", label: "Español" },
+    { id: "pt", flag: "\u{1F1E7}\u{1F1F7}", label: "Português" },
+    { id: "vi", flag: "\u{1F1FB}\u{1F1F3}", label: "Tiếng Việt" },
+    { id: "tl", flag: "\u{1F1F5}\u{1F1ED}", label: "Tagalog" },
+    { id: "ja", flag: "\u{1F1EF}\u{1F1F5}", label: "日本語" },
+];
+export const LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME = "!h-11 !min-h-11 !rounded-sm !px-3.5";

package/components/shared/LanguageDropdown.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { LANGUAGES } from "./LanguageDropdown.helpers.js";
+export function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant = "native", menuPlacement = "bottom-end", }) {
+    const [open, setOpen] = useState(false);
+    const current = LANGUAGES.find((l) => l.id === uiLanguage) ?? LANGUAGES[0];
+    const triggerClassNameResolved = variant === "titlebar"
+        ? `inline-flex h-[2.375rem] min-h-[2.375rem] min-w-0 items-center justify-center rounded-sm border border-transparent !bg-transparent px-2.5 py-0 text-[11px] font-medium text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent data-[state=open]:!bg-transparent ${open ? "text-accent" : ""} ${triggerClassName ?? ""}`
+        : `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt gap-1.5 text-xs font-medium ${open ? "border-accent/80 bg-accent/12 text-txt " : ""} ${triggerClassName ?? ""}`;
+    const contentClassName = variant === "titlebar"
+        ? "w-40 overflow-hidden rounded-sm border border-border/70 bg-card/96 py-1 backdrop-blur-xl"
+        : "w-40 overflow-hidden rounded-sm border border-border/60 bg-card/95 py-1 backdrop-blur-xl";
+    return (_jsx("div", { className: `relative inline-flex shrink-0 ${className ?? ""}`, "data-testid": "language-dropdown", "data-no-camera-drag": "true", children: _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: triggerClassNameResolved, onPointerDown: (event) => event.stopPropagation(), "aria-label": `${t?.("settings.language") ?? "Language"}: ${current.label ?? current.id}`, "data-testid": "language-dropdown-trigger", children: [_jsx("span", { className: "text-sm leading-none", children: current.flag }), _jsx("span", { className: variant === "titlebar"
+                                    ? "uppercase tracking-[0.14em] opacity-80"
+                                    : "hidden sm:inline uppercase tracking-widest opacity-80", children: current.id }), _jsx(ChevronDown, { className: `w-3.5 h-3.5 opacity-60 transition-transform ${open ? "rotate-180" : ""}` })] }) }), _jsx(DropdownMenuContent, { align: "end", side: menuPlacement === "top-end" ? "top" : "bottom", sideOffset: 4, className: contentClassName, style: variant === "companion"
+                        ? {
+                            zIndex: 10001,
+                            backdropFilter: "blur(24px)",
+                            WebkitBackdropFilter: "blur(24px)",
+                            boxShadow: "var(--)",
+                        }
+                        : undefined, "data-no-camera-drag": "true", children: LANGUAGES.map((lang) => (_jsxs(DropdownMenuItem, { className: `flex min-h-[40px] items-center justify-between px-3 py-2 text-sm transition-colors cursor-pointer ${lang.id === uiLanguage ? "bg-accent/10 text-txt font-medium" : "text-txt"}`, onPointerDown: (event) => event.stopPropagation(), onSelect: () => {
+                            setUiLanguage(lang.id);
+                        }, "data-testid": `language-option-${lang.id}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: lang.flag }), _jsx("span", { children: lang.label })] }), lang.id === uiLanguage && _jsx(Check, { className: "w-4 h-4" })] }, lang.id))) })] }) }));
+}

package/components/shared/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/ThemeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvD,wCAAwC;AACxC,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0CAA0C;IAC1C,CAAC,CAAC,EAAE,iBAAiB,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,CAAC,EAAE,EAAE,EACL,SAAS,EACT,OAAO,EAAE,QAAmB,GAC7B,EAAE,gBAAgB,2CAmClB"}

package/components/shared/ThemeToggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
+import { useCallback } from "react";
+import { Button } from "../ui/button.js";
+export function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _variant = "native", }) {
+    const isDark = uiTheme === "dark";
+    const handleToggle = useCallback(() => {
+        setUiTheme(isDark ? "light" : "dark");
+    }, [isDark, setUiTheme]);
+    const resolvedClassName = _variant === "titlebar"
+        ? `inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] items-center justify-center rounded-sm border border-transparent !bg-transparent text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent ${className ?? ""}`
+        : `inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-sm border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt text-sm leading-none ${className ?? ""}`;
+    return (_jsx(Button, { size: "icon", variant: "outline", "aria-label": _t
+            ? _t(isDark ? "aria.switchToLight" : "aria.switchToDark")
+            : isDark
+                ? "Switch to light mode"
+                : "Switch to dark mode", onClick: handleToggle, onPointerDown: (event) => event.stopPropagation(), className: resolvedClassName, "data-testid": "theme-toggle", "data-no-camera-drag": "true", children: isDark ? (_jsx(Sun, { className: "w-5 h-5", "aria-hidden": true })) : (_jsx(Moon, { className: "w-5 h-5", "aria-hidden": true })) }));
+}

package/components/shared/confirm-delete-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-delete-control.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/confirm-delete-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIjD,KAAK,yBAAyB,GAAG;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;CACtD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAqD,EACrD,YAAY,EACZ,cAA8B,GAC/B,EAAE,yBAAyB,2CAyD3B"}

package/components/shared/confirm-delete-control.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useApp } from "../../state/index.js";
+import { Button } from "../ui/button.js";
+export function ConfirmDeleteControl({ onConfirm, disabled = false, triggerLabel, confirmLabel, cancelLabel, busyLabel, promptText, triggerClassName, confirmClassName, cancelClassName, promptClassName = "text-xs-tight text-[#e74c3c] ml-1", triggerTitle, triggerVariant = "destructive", }) {
+    const { t } = useApp();
+    const [confirming, setConfirming] = useState(false);
+    const resolvedTriggerLabel = triggerLabel ?? t("common.delete", { defaultValue: "Delete" });
+    const resolvedConfirmLabel = confirmLabel ?? t("common.confirm", { defaultValue: "Confirm" });
+    const resolvedCancelLabel = cancelLabel ?? t("common.cancel", { defaultValue: "Cancel" });
+    const resolvedPromptText = promptText ?? t("conversations.deleteConfirm", { defaultValue: "Delete?" });
+    if (!confirming) {
+        return (_jsx(Button, { variant: triggerVariant, size: "sm", type: "button", className: triggerClassName, onClick: () => setConfirming(true), disabled: disabled, title: triggerTitle, "aria-label": triggerTitle, children: resolvedTriggerLabel }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: promptClassName, children: resolvedPromptText }), _jsx(Button, { variant: "destructive", size: "sm", type: "button", className: confirmClassName, onClick: () => {
+                    onConfirm();
+                    setConfirming(false);
+                }, disabled: disabled, children: disabled && busyLabel ? busyLabel : resolvedConfirmLabel }), _jsx(Button, { variant: "outline", size: "sm", type: "button", className: cancelClassName, onClick: () => setConfirming(false), disabled: disabled, children: resolvedCancelLabel })] }));
+}

package/components/shell/ActionBanner.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Top-of-shell action banner: a full-width banner above the shell content
+ * (not a bottom toast) carrying an optional primary-action CTA. Reuses the
+ * SystemWarningBanner styling contract (orange accent, never blue) and the
+ * RestartBanner primary-button tokens. One banner at a time, driven by the
+ * `actionBanner` app-state slice. The model-required first-run prompt is the
+ * sole consumer for now.
+ */
+export declare function ActionBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ActionBanner.d.ts.map