@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/state/useWalletState.js

@@ -0,0 +1,533 @@
+/**
+ * Wallet / Inventory / Registry / Drop / Whitelist state — extracted from AppContext.
+ *
+ * Manages:
+ * - Wallet addresses, config, balances, NFTs, export flow
+ * - Inventory view preferences (sort, filter, chain toggles)
+ * - ERC-8004 on-chain registry (register, sync, status)
+ * - Drop / mint state and actions
+ * - Whitelist status
+ *
+ * Cross-domain dependencies accepted as params:
+ * - `setActionNotice` — from useLifecycleState, used by handleWalletApiKeySave
+ * - `agentName`       — from agentStatus?.agentName, used by registry/mint
+ * - `characterName`   — from characterDraft?.name, used by registry/mint
+ * - `promptModal`     — from AppContext's usePrompt(), used by handleExportKeys
+ * - `confirmAction`   — confirmDesktopAction utility, used by handleExportKeys
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client, } from "../api/index.js";
+import { confirmDesktopAction } from "../utils/desktop-dialogs.js";
+import { loadBrowserEnabled, loadComputerUseEnabled, loadWalletEnabled, saveBrowserEnabled, saveComputerUseEnabled, saveWalletEnabled, } from "./persistence.js";
+// ── Hook ──────────────────────────────────────────────────────────────
+export function useWalletState({ setActionNotice, promptModal, agentName, characterName, }) {
+    // ── Feature toggles ────────────────────────────────────────────────
+    const [walletEnabled, setWalletEnabledRaw] = useState(loadWalletEnabled);
+    const setWalletEnabled = useCallback((v) => {
+        setWalletEnabledRaw(v);
+        saveWalletEnabled(v);
+        void client
+            .updateConfig({ ui: { capabilities: { wallet: v } } })
+            .catch(() => { });
+    }, []);
+    const [browserEnabled, setBrowserEnabledRaw] = useState(loadBrowserEnabled);
+    const setBrowserEnabled = useCallback((v) => {
+        setBrowserEnabledRaw(v);
+        saveBrowserEnabled(v);
+        void client
+            .updateConfig({ ui: { capabilities: { browser: v } } })
+            .catch(() => { });
+    }, []);
+    const [computerUseEnabled, setComputerUseEnabledRaw] = useState(loadComputerUseEnabled);
+    const setComputerUseEnabled = useCallback((v) => {
+        setComputerUseEnabledRaw(v);
+        saveComputerUseEnabled(v);
+        void client
+            .updateConfig({ ui: { capabilities: { computerUse: v } } })
+            .catch(() => { });
+    }, []);
+    // ── Hydrate capability flags from server config on mount ──────────
+    // Server config (written by TOGGLE_CAPABILITY agent action) wins on
+    // first load; localStorage remains a fallback for offline / stale.
+    useEffect(() => {
+        let cancelled = false;
+        void client
+            .getConfig()
+            .then((cfg) => {
+            if (cancelled)
+                return;
+            const ui = cfg.ui;
+            const caps = ui?.capabilities;
+            if (!caps || typeof caps !== "object")
+                return;
+            if (typeof caps.wallet === "boolean") {
+                setWalletEnabledRaw(caps.wallet);
+                saveWalletEnabled(caps.wallet);
+            }
+            if (typeof caps.browser === "boolean") {
+                setBrowserEnabledRaw(caps.browser);
+                saveBrowserEnabled(caps.browser);
+            }
+            if (typeof caps.computerUse === "boolean") {
+                setComputerUseEnabledRaw(caps.computerUse);
+                saveComputerUseEnabled(caps.computerUse);
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // ── Wallet / Inventory ─────────────────────────────────────────────
+    const [walletAddresses, setWalletAddresses] = useState(null);
+    const [walletConfig, setWalletConfig] = useState(null);
+    const [walletBalances, setWalletBalances] = useState(null);
+    const [walletNfts, setWalletNfts] = useState(null);
+    const [walletLoading, setWalletLoading] = useState(false);
+    const [walletNftsLoading, setWalletNftsLoading] = useState(false);
+    const [inventoryView, setInventoryView] = useState("tokens");
+    const [walletExportData, setWalletExportData] = useState(null);
+    const [walletExportVisible, setWalletExportVisible] = useState(false);
+    const [walletApiKeySaving, setWalletApiKeySaving] = useState(false);
+    const [wallets, setWallets] = useState([]);
+    const [walletPrimary, setWalletPrimaryMap] = useState(null);
+    const [walletPrimaryRestarting] = useState({});
+    const [walletPrimaryPending, setWalletPrimaryPending] = useState({});
+    const [cloudRefreshing, setCloudRefreshing] = useState(false);
+    const [inventorySort, setInventorySort] = useState("value");
+    const [inventorySortDirection, setInventorySortDirection] = useState("desc");
+    const [inventoryChainFilters, setInventoryChainFilters] = useState({
+        ethereum: true,
+        base: true,
+        bsc: true,
+        avax: true,
+        solana: true,
+    });
+    const [walletError, setWalletError] = useState(null);
+    // ── ERC-8004 Registry ──────────────────────────────────────────────
+    const [registryStatus, setRegistryStatus] = useState(null);
+    const [registryLoading, setRegistryLoading] = useState(false);
+    const [registryRegistering, setRegistryRegistering] = useState(false);
+    const [registryError, setRegistryError] = useState(null);
+    // ── Drop / Mint ────────────────────────────────────────────────────
+    const [dropStatus, setDropStatus] = useState(null);
+    const [dropLoading, setDropLoading] = useState(false);
+    const [mintInProgress, setMintInProgress] = useState(false);
+    const [mintResult, setMintResult] = useState(null);
+    const [mintError, setMintError] = useState(null);
+    const [mintShiny, setMintShiny] = useState(false);
+    // ── Whitelist ──────────────────────────────────────────────────────
+    const [whitelistStatus, setWhitelistStatus] = useState(null);
+    const [whitelistLoading, setWhitelistLoading] = useState(false);
+    // ── Synchronous lock to prevent duplicate save clicks ──────────────
+    const walletApiKeySavingRef = useRef(false);
+    const walletExportTimerRef = useRef(null);
+    const fetchWalletConfig = useCallback(async () => {
+        const cfg = await client.getWalletConfig();
+        setWalletConfig(cfg);
+        setWalletAddresses({
+            evmAddress: cfg.evmAddress,
+            solanaAddress: cfg.solanaAddress,
+        });
+        setWallets(Array.isArray(cfg.wallets) ? cfg.wallets : []);
+        setWalletPrimaryMap(cfg.primary ?? null);
+        return cfg;
+    }, []);
+    const hasWalletSource = useCallback((config, chain, source) => (config?.wallets ?? []).some((wallet) => wallet.chain === chain &&
+        wallet.source === source &&
+        typeof wallet.address === "string" &&
+        wallet.address.trim().length > 0), []);
+    const normalizeCloudWalletNotice = useCallback((warning) => {
+        const detail = warning.replace(/^Cloud (evm|solana) wallet import failed:\s*/i, "");
+        if (/Invalid Solana address \(base58, 32–44 chars\)/i.test(detail)) {
+            return "the connected Eliza Cloud backend is still using the legacy Solana wallet contract";
+        }
+        return detail;
+    }, []);
+    const summarizeCloudWalletImport = useCallback((config, warnings) => {
+        const evmConnected = hasWalletSource(config, "evm", "cloud");
+        const solanaConnected = hasWalletSource(config, "solana", "cloud");
+        if (evmConnected && solanaConnected) {
+            return { text: "Cloud wallets connected.", tone: "success" };
+        }
+        const solanaWarning = warnings?.find((warning) => /Cloud solana wallet import failed:/i.test(warning));
+        if (evmConnected && solanaWarning) {
+            return {
+                text: `EVM cloud wallet connected. Solana cloud wallet is unavailable because ${normalizeCloudWalletNotice(solanaWarning)}.`,
+                tone: "info",
+            };
+        }
+        const evmWarning = warnings?.find((warning) => /Cloud evm wallet import failed:/i.test(warning));
+        if (solanaConnected && evmWarning) {
+            return {
+                text: `Solana cloud wallet connected. EVM cloud wallet is unavailable because ${normalizeCloudWalletNotice(evmWarning)}.`,
+                tone: "info",
+            };
+        }
+        return { text: "Cloud wallet import queued.", tone: "success" };
+    }, [hasWalletSource, normalizeCloudWalletNotice]);
+    // ── Wallet callbacks ───────────────────────────────────────────────
+    const loadWalletConfig = useCallback(async () => {
+        try {
+            await fetchWalletConfig();
+            setWalletError(null);
+        }
+        catch (err) {
+            setWalletError(`Failed to load wallet config: ${err instanceof Error ? err.message : "network error"}`);
+        }
+    }, [fetchWalletConfig]);
+    const loadBalances = useCallback(async () => {
+        setWalletLoading(true);
+        setWalletError(null);
+        try {
+            const b = await client.getWalletBalances();
+            setWalletBalances(b);
+        }
+        catch (err) {
+            setWalletError(`Failed to fetch balances: ${err instanceof Error ? err.message : "network error"}`);
+        }
+        setWalletLoading(false);
+    }, []);
+    const loadNfts = useCallback(async () => {
+        setWalletNftsLoading(true);
+        setWalletError(null);
+        try {
+            const n = await client.getWalletNfts();
+            setWalletNfts(n);
+        }
+        catch (err) {
+            setWalletError(`Failed to fetch NFTs: ${err instanceof Error ? err.message : "network error"}`);
+        }
+        setWalletNftsLoading(false);
+    }, []);
+    const handleWalletApiKeySave = useCallback(async (config) => {
+        if (Object.keys(config.credentials ?? {}).length === 0 &&
+            Object.keys(config.selections ?? {}).length === 0) {
+            return false;
+        }
+        if (walletApiKeySavingRef.current || walletApiKeySaving)
+            return false;
+        walletApiKeySavingRef.current = true;
+        setWalletApiKeySaving(true);
+        setWalletError(null);
+        try {
+            await client.updateWalletConfig(config);
+            const selectedProviders = config.selections;
+            const shouldImportCloudWallets = selectedProviders.evm === "eliza-cloud" &&
+                selectedProviders.bsc === "eliza-cloud" &&
+                selectedProviders.solana === "eliza-cloud";
+            let walletConfigAfterSave;
+            if (shouldImportCloudWallets) {
+                setCloudRefreshing(true);
+                try {
+                    const refreshResult = await client.refreshCloudWallets();
+                    walletConfigAfterSave = await fetchWalletConfig();
+                    const notice = summarizeCloudWalletImport(walletConfigAfterSave, refreshResult?.warnings);
+                    setActionNotice(notice.text, notice.tone);
+                }
+                finally {
+                    setCloudRefreshing(false);
+                }
+            }
+            else {
+                walletConfigAfterSave = await fetchWalletConfig();
+                setActionNotice("Wallet RPC settings saved. Restart required to apply.", "success");
+            }
+            await loadBalances();
+            if (!walletConfigAfterSave) {
+                await loadWalletConfig();
+            }
+            return true;
+        }
+        catch (err) {
+            setWalletError(`Failed to save API keys: ${err instanceof Error ? err.message : "network error"}`);
+            return false;
+        }
+        finally {
+            walletApiKeySavingRef.current = false;
+            setWalletApiKeySaving(false);
+        }
+    }, [
+        walletApiKeySaving,
+        fetchWalletConfig,
+        loadBalances,
+        loadWalletConfig,
+        setActionNotice,
+        summarizeCloudWalletImport,
+    ]);
+    const refreshCloudWallets = useCallback(async () => {
+        setCloudRefreshing(true);
+        setWalletError(null);
+        try {
+            const result = await client.refreshCloudWallets();
+            const nextConfig = await fetchWalletConfig();
+            const notice = summarizeCloudWalletImport(nextConfig, result?.warnings);
+            setActionNotice(notice.text, notice.tone);
+            await loadBalances();
+        }
+        catch (err) {
+            setWalletError(`Failed to refresh cloud wallets: ${err instanceof Error ? err.message : "network error"}`);
+        }
+        finally {
+            setCloudRefreshing(false);
+        }
+    }, [
+        fetchWalletConfig,
+        loadBalances,
+        setActionNotice,
+        summarizeCloudWalletImport,
+    ]);
+    const setWalletPrimary = useCallback(async (chain, source) => {
+        setWalletPrimaryPending((prev) => ({ ...prev, [chain]: true }));
+        setWalletError(null);
+        try {
+            let currentConfig = walletConfig;
+            if (!currentConfig) {
+                currentConfig = await fetchWalletConfig();
+            }
+            if (!hasWalletSource(currentConfig, chain, source)) {
+                if (source === "local") {
+                    await client.generateWallet({ chain, source: "local" });
+                }
+                else {
+                    setCloudRefreshing(true);
+                    try {
+                        await client.refreshCloudWallets();
+                    }
+                    finally {
+                        setCloudRefreshing(false);
+                    }
+                }
+                currentConfig = await fetchWalletConfig();
+            }
+            await client.setWalletPrimary({ chain, source });
+            await fetchWalletConfig();
+            await loadBalances();
+        }
+        catch (err) {
+            setWalletError(`Failed to switch wallet primary: ${err instanceof Error ? err.message : "network error"}`);
+        }
+        finally {
+            setWalletPrimaryPending((prev) => {
+                const next = { ...prev };
+                delete next[chain];
+                return next;
+            });
+        }
+    }, [fetchWalletConfig, hasWalletSource, loadBalances, walletConfig]);
+    const handleExportKeys = useCallback(async () => {
+        if (walletExportVisible) {
+            if (walletExportTimerRef.current) {
+                clearTimeout(walletExportTimerRef.current);
+                walletExportTimerRef.current = null;
+            }
+            setWalletExportVisible(false);
+            setWalletExportData(null);
+            return;
+        }
+        const confirmed = await confirmDesktopAction({
+            title: "Reveal Private Keys",
+            message: "This will reveal your private keys.",
+            detail: "NEVER share your private keys with anyone. Anyone with your private keys can steal all funds in your wallets.",
+            confirmLabel: "Continue",
+            cancelLabel: "Cancel",
+            type: "warning",
+        });
+        if (!confirmed)
+            return;
+        const exportToken = await promptModal({
+            title: "Wallet Export Token",
+            message: "Enter your wallet export token (ELIZA_WALLET_EXPORT_TOKEN):",
+            placeholder: "ELIZA_WALLET_EXPORT_TOKEN",
+            confirmLabel: "Export",
+            cancelLabel: "Cancel",
+        });
+        if (exportToken === null)
+            return;
+        if (!exportToken.trim()) {
+            setWalletError("Wallet export token is required.");
+            return;
+        }
+        try {
+            const data = await client.exportWalletKeys(exportToken.trim());
+            setWalletExportData(data);
+            setWalletExportVisible(true);
+            if (walletExportTimerRef.current) {
+                clearTimeout(walletExportTimerRef.current);
+            }
+            walletExportTimerRef.current = setTimeout(() => {
+                walletExportTimerRef.current = null;
+                setWalletExportVisible(false);
+                setWalletExportData(null);
+            }, 60_000);
+        }
+        catch (err) {
+            setWalletError(`Failed to export keys: ${err instanceof Error ? err.message : "network error"}`);
+        }
+    }, [promptModal, walletExportVisible]);
+    // ── Registry callbacks ─────────────────────────────────────────────
+    const loadRegistryStatus = useCallback(async () => {
+        setRegistryLoading(true);
+        setRegistryError(null);
+        try {
+            const status = await client.getRegistryStatus();
+            setRegistryStatus(status);
+        }
+        catch (err) {
+            setRegistryError(err instanceof Error ? err.message : "Failed to load registry status");
+        }
+        finally {
+            setRegistryLoading(false);
+        }
+    }, []);
+    const registerOnChain = useCallback(async () => {
+        setRegistryRegistering(true);
+        setRegistryError(null);
+        try {
+            await client.registerAgent({
+                name: characterName || agentName,
+            });
+            await loadRegistryStatus();
+        }
+        catch (err) {
+            setRegistryError(err instanceof Error ? err.message : "Registration failed");
+        }
+        finally {
+            setRegistryRegistering(false);
+        }
+    }, [characterName, agentName, loadRegistryStatus]);
+    const syncRegistryProfile = useCallback(async () => {
+        setRegistryRegistering(true);
+        setRegistryError(null);
+        try {
+            await client.syncRegistryProfile({
+                name: characterName || agentName,
+            });
+            await loadRegistryStatus();
+        }
+        catch (err) {
+            setRegistryError(err instanceof Error ? err.message : "Sync failed");
+        }
+        finally {
+            setRegistryRegistering(false);
+        }
+    }, [characterName, agentName, loadRegistryStatus]);
+    // ── Drop / Mint callbacks ──────────────────────────────────────────
+    const loadDropStatus = useCallback(async () => {
+        setDropLoading(true);
+        try {
+            const status = await client.getDropStatus();
+            setDropStatus(status);
+        }
+        catch {
+            // Non-critical -- drop may not be configured
+        }
+        finally {
+            setDropLoading(false);
+        }
+    }, []);
+    const mintFromDrop = useCallback(async (shiny) => {
+        setMintInProgress(true);
+        setMintShiny(shiny);
+        setMintError(null);
+        setMintResult(null);
+        try {
+            const result = await client.mintAgent({
+                name: characterName || agentName,
+                shiny,
+            });
+            setMintResult(result);
+            await loadRegistryStatus();
+            await loadDropStatus();
+        }
+        catch (err) {
+            setMintError(err instanceof Error ? err.message : "Mint failed");
+        }
+        finally {
+            setMintInProgress(false);
+            setMintShiny(false);
+        }
+    }, [characterName, agentName, loadRegistryStatus, loadDropStatus]);
+    // ── Whitelist callback ─────────────────────────────────────────────
+    const loadWhitelistStatus = useCallback(async () => {
+        setWhitelistLoading(true);
+        try {
+            const status = await client.getWhitelistStatus();
+            setWhitelistStatus(status);
+        }
+        catch {
+            // Non-critical
+        }
+        finally {
+            setWhitelistLoading(false);
+        }
+    }, []);
+    // ── Return ─────────────────────────────────────────────────────────
+    return {
+        state: {
+            browserEnabled,
+            computerUseEnabled,
+            walletEnabled,
+            walletAddresses,
+            walletConfig,
+            walletBalances,
+            walletNfts,
+            walletLoading,
+            walletNftsLoading,
+            inventoryView,
+            walletExportData,
+            walletExportVisible,
+            walletApiKeySaving,
+            wallets,
+            walletPrimary,
+            walletPrimaryRestarting,
+            walletPrimaryPending,
+            cloudRefreshing,
+            inventorySort,
+            inventorySortDirection,
+            inventoryChainFilters,
+            walletError,
+            registryStatus,
+            registryLoading,
+            registryRegistering,
+            registryError,
+            dropStatus,
+            dropLoading,
+            mintInProgress,
+            mintResult,
+            mintError,
+            mintShiny,
+            whitelistStatus,
+            whitelistLoading,
+        },
+        // Raw setters needed by AppContext for UI binding
+        setBrowserEnabled,
+        setComputerUseEnabled,
+        setWalletEnabled,
+        setWalletAddresses,
+        setInventoryView,
+        setInventorySort,
+        setInventorySortDirection,
+        setInventoryChainFilters,
+        setWalletError,
+        setRegistryError,
+        setMintResult,
+        setMintError,
+        // Callbacks
+        loadWalletConfig,
+        loadBalances,
+        loadNfts,
+        handleWalletApiKeySave,
+        setWalletPrimary,
+        setPrimary: setWalletPrimary,
+        refreshCloud: refreshCloudWallets,
+        refreshCloudWallets,
+        handleExportKeys,
+        loadRegistryStatus,
+        registerOnChain,
+        syncRegistryProfile,
+        loadDropStatus,
+        mintFromDrop,
+        loadWhitelistStatus,
+    };
+}

package/state/vrm.d.ts

@@ -0,0 +1,10 @@
+import type { UiTheme } from "./ui-preferences";
+export declare function getVrmCount(): number;
+export declare const VRM_COUNT = 8;
+export declare function normalizeAvatarIndex(index: number): number;
+export declare function getVrmUrl(index: number): string;
+export declare function getVrmPreviewUrl(index: number): string;
+export declare function getVrmBackgroundUrl(index: number): string;
+export declare function getCompanionBackgroundUrl(theme: UiTheme): string;
+export declare function getVrmTitle(index: number): string;
+//# sourceMappingURL=vrm.d.ts.map

package/state/vrm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vrm.d.ts","sourceRoot":"","sources":["../../../../../src/state/vrm.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAYhD,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAO1D;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAS/C;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAStD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAWzD;AAOD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAEhE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD"}

package/state/vrm.js

@@ -0,0 +1,70 @@
+import { getBootConfig } from "../config/boot-config.js";
+import { resolveAppAssetUrl } from "../utils/asset-url.js";
+const BUNDLED_VRM_FALLBACK_SLUG = "bundled-1";
+function getAssets() {
+    const assets = getBootConfig().vrmAssets;
+    if (Array.isArray(assets) && assets.length > 0) {
+        return assets;
+    }
+    return [];
+}
+export function getVrmCount() {
+    return getAssets().length;
+}
+export const VRM_COUNT = 8;
+export function normalizeAvatarIndex(index) {
+    if (!Number.isFinite(index))
+        return 1;
+    const n = Math.trunc(index);
+    if (n === 0)
+        return 0;
+    const count = getAssets().length;
+    if (n < 1 || n > count)
+        return 1;
+    return n;
+}
+export function getVrmUrl(index) {
+    const assets = getAssets();
+    if (assets.length === 0) {
+        return resolveAppAssetUrl(`vrms/${BUNDLED_VRM_FALLBACK_SLUG}.vrm.gz`);
+    }
+    const n = normalizeAvatarIndex(index);
+    const safe = n > 0 ? n : 1;
+    const slug = assets[safe - 1]?.slug ?? assets[0]?.slug ?? "default";
+    return resolveAppAssetUrl(`vrms/${slug}.vrm.gz`);
+}
+export function getVrmPreviewUrl(index) {
+    const assets = getAssets();
+    if (assets.length === 0) {
+        return resolveAppAssetUrl(`vrms/previews/${BUNDLED_VRM_FALLBACK_SLUG}.png`);
+    }
+    const n = normalizeAvatarIndex(index);
+    const safe = n > 0 ? n : 1;
+    const slug = assets[safe - 1]?.slug ?? assets[0]?.slug ?? "default";
+    return resolveAppAssetUrl(`vrms/previews/${slug}.png`);
+}
+export function getVrmBackgroundUrl(index) {
+    const assets = getAssets();
+    if (assets.length === 0) {
+        return resolveAppAssetUrl(`vrms/backgrounds/${BUNDLED_VRM_FALLBACK_SLUG}.png`);
+    }
+    const n = normalizeAvatarIndex(index);
+    const safe = n > 0 ? n : 1;
+    const slug = assets[safe - 1]?.slug ?? assets[0]?.slug ?? "default";
+    return resolveAppAssetUrl(`vrms/backgrounds/${slug}.png`);
+}
+const COMPANION_THEME_BACKGROUND_INDEX = {
+    light: 3,
+    dark: 4,
+};
+export function getCompanionBackgroundUrl(theme) {
+    return getVrmBackgroundUrl(COMPANION_THEME_BACKGROUND_INDEX[theme]);
+}
+export function getVrmTitle(index) {
+    const assets = getAssets();
+    if (assets.length === 0)
+        return "Avatar";
+    const n = normalizeAvatarIndex(index);
+    const safe = n > 0 ? n : 1;
+    return assets[safe - 1]?.title ?? assets[0]?.title ?? "Avatar";
+}

package/stories/layout-story-fixtures.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export declare function LayoutStoryFrame({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutStorySidebar(): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutStoryHeader(): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutStoryFooter(): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutStoryContent(): import("react/jsx-runtime").JSX.Element;
+export declare const fullLayoutArgs: {
+    contentHeader: import("react/jsx-runtime").JSX.Element;
+    footer: import("react/jsx-runtime").JSX.Element;
+    sidebar: import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=layout-story-fixtures.d.ts.map

package/stories/layout-story-fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-story-fixtures.d.ts","sourceRoot":"","sources":["../../../../../src/stories/layout-story-fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAErE;AAED,wBAAgB,kBAAkB,4CAqCjC;AAED,wBAAgB,iBAAiB,4CAmBhC;AAED,wBAAgB,iBAAiB,4CAQhC;AAED,wBAAgB,kBAAkB,4CA2EjC;AAED,eAAO,MAAM,cAAc;;;;CAI1B,CAAC"}

package/stories/layout-story-fixtures.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, PagePanel, Sidebar, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, } from "../index.js";
+export function LayoutStoryFrame({ children }) {
+    return _jsx("div", { className: "flex min-h-screen bg-bg", children: children });
+}
+export function LayoutStorySidebar() {
+    return (_jsx(Sidebar, { collapsible: true, contentIdentity: "storybook-layout", mobileTitle: "Sections", header: _jsx(SidebarHeader, { search: {
+                value: "",
+                onChange: () => { },
+                placeholder: "Search sections",
+                "aria-label": "Search sections",
+            } }), children: _jsx(SidebarScrollRegion, { children: _jsx(SidebarPanel, { children: _jsxs("nav", { className: "space-y-1", "aria-label": "Demo sections", children: [_jsx(SidebarContent.Item, { active: true, children: _jsx(SidebarContent.ItemTitle, { children: "Overview" }) }), _jsx(SidebarContent.Item, { children: _jsx(SidebarContent.ItemTitle, { children: "Details" }) }), _jsx(SidebarContent.Item, { children: _jsx(SidebarContent.ItemTitle, { children: "History" }) }), _jsx(SidebarContent.Item, { children: _jsx(SidebarContent.ItemTitle, { children: "Widgets" }) })] }) }) }) }));
+}
+export function LayoutStoryHeader() {
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[72rem] flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: "Shell header" }), _jsx("div", { className: "truncate text-sm font-medium text-txt", children: "Shared content header slot" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Filter" }), _jsx(Button, { size: "sm", children: "Create" })] })] }));
+}
+export function LayoutStoryFooter() {
+    return (_jsx("div", { className: "mx-auto w-full max-w-[72rem]", children: _jsx("div", { className: "rounded-[1.5rem] border border-border/40 bg-card/75 px-4 py-3 text-sm text-muted shadow-sm", children: "Supplementary widget/footer slot" }) }));
+}
+export function LayoutStoryContent() {
+    const primarySections = [
+        "Section 1",
+        "Section 2",
+        "Section 3",
+        "Section 4",
+    ];
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[72rem] flex-1 flex-col gap-4", children: [_jsxs(PagePanel, { variant: "workspace", className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: "Layout contract" }), _jsx("h2", { className: "mt-1 text-lg font-semibold text-txt", children: "Shared page shell" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Secondary" }), _jsx(Button, { size: "sm", children: "Primary" })] })] }), _jsx("p", { className: "max-w-3xl text-sm text-muted", children: "This story exercises the standardized app page structure: optional left sidebar, scrollable main column, shared header slot, and a supplementary widget/footer region." })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[1.35fr_0.65fr]", children: [_jsxs(PagePanel, { variant: "workspace", className: "space-y-3", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted", children: "Primary content" }), _jsx("div", { className: "space-y-3", children: primarySections.map((sectionLabel) => (_jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/40 p-4", children: [_jsx("div", { className: "text-sm font-medium text-txt", children: sectionLabel }), _jsx("p", { className: "mt-1 text-sm text-muted", children: "Responsive spacing, sidebar behavior, and the footer widget slot should remain consistent across every page shape." })] }, sectionLabel))) })] }), _jsxs(PagePanel, { variant: "workspace", className: "space-y-3", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted", children: "Supporting column" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/40 p-4 text-sm text-muted", children: "Use this area to verify long-form content, summary cards, or right-column panels at tablet and desktop breakpoints." }), _jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/40 p-4 text-sm text-muted", children: "On narrow widths the column naturally stacks under the primary content." })] })] })] })] }));
+}
+export const fullLayoutArgs = {
+    contentHeader: _jsx(LayoutStoryHeader, {}),
+    footer: _jsx(LayoutStoryFooter, {}),
+    sidebar: _jsx(LayoutStorySidebar, {}),
+};