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

package/components/apps/AppsCatalogGrid.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@elizaos/ui";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useApp } from "../../state/index.js";
+import { AppHero } from "./app-identity.js";
+import { getAppShortName, groupAppsForCatalog } from "./helpers.js";
+const CARD_GAP_PX = 8;
+const MAX_CARDS_PER_ROW = 5;
+const MIN_CARD_WIDTH_PX = 248;
+function clampCardsPerRow(value) {
+    return Math.min(Math.max(value, 1), MAX_CARDS_PER_ROW);
+}
+function resolveCardsPerRow(width) {
+    if (width <= 0)
+        return MAX_CARDS_PER_ROW;
+    const fit = Math.floor((width + CARD_GAP_PX) / (MIN_CARD_WIDTH_PX + CARD_GAP_PX));
+    return clampCardsPerRow(fit);
+}
+function buildBalancedRows(items, maxCardsPerRow) {
+    if (items.length === 0)
+        return [];
+    const perRow = clampCardsPerRow(maxCardsPerRow);
+    if (items.length <= perRow) {
+        return [[...items]];
+    }
+    const rowCount = Math.ceil(items.length / perRow);
+    const baseRowSize = Math.floor(items.length / rowCount);
+    const oversizedRowCount = items.length % rowCount;
+    const rows = [];
+    let index = 0;
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+        const size = rowIndex < rowCount - oversizedRowCount ? baseRowSize : baseRowSize + 1;
+        rows.push(items.slice(index, index + size));
+        index += size;
+    }
+    return rows;
+}
+function resolveSectionPreferredSlots(itemCount, maxCardsPerRow) {
+    return clampCardsPerRow(Math.min(Math.max(itemCount, 1), maxCardsPerRow));
+}
+function resolveSectionMinSlots(itemCount, maxCardsPerRow) {
+    const preferredSlots = resolveSectionPreferredSlots(itemCount, maxCardsPerRow);
+    if (itemCount <= 3 || preferredSlots <= 2) {
+        return preferredSlots;
+    }
+    return Math.max(2, preferredSlots - 1);
+}
+function buildCatalogSectionRows(sections, maxCardsPerRow) {
+    if (sections.length === 0) {
+        return [];
+    }
+    const rowCapacity = clampCardsPerRow(maxCardsPerRow);
+    const rows = [];
+    let sectionIndex = 0;
+    while (sectionIndex < sections.length) {
+        const rowSections = [];
+        let usedSlots = 0;
+        while (sectionIndex < sections.length) {
+            const section = sections[sectionIndex];
+            const preferredSlots = resolveSectionPreferredSlots(section.apps.length, rowCapacity);
+            const minSlots = resolveSectionMinSlots(section.apps.length, rowCapacity);
+            const remainingSlots = rowCapacity - usedSlots;
+            if (remainingSlots <= 0) {
+                break;
+            }
+            let slots = preferredSlots;
+            if (usedSlots === 0) {
+                const nextSection = sections[sectionIndex + 1];
+                if (nextSection &&
+                    preferredSlots === rowCapacity &&
+                    minSlots < preferredSlots) {
+                    const nextMinSlots = resolveSectionMinSlots(nextSection.apps.length, rowCapacity);
+                    if (minSlots + nextMinSlots <= rowCapacity) {
+                        slots = minSlots;
+                    }
+                }
+            }
+            else if (preferredSlots > remainingSlots) {
+                const leadSection = rowSections[0];
+                const canPairSmallFavoritesWithFeatured = rowSections.length === 1 &&
+                    leadSection?.key === "favorites" &&
+                    leadSection.apps.length <= 2 &&
+                    section.key === "featured" &&
+                    remainingSlots >= 2;
+                if (canPairSmallFavoritesWithFeatured) {
+                    slots = remainingSlots;
+                }
+                else if (minSlots <= remainingSlots) {
+                    slots = minSlots;
+                }
+                else {
+                    break;
+                }
+            }
+            if (slots > remainingSlots) {
+                if (rowSections.length > 0) {
+                    break;
+                }
+                slots = remainingSlots;
+            }
+            rowSections.push({
+                ...section,
+                slots,
+            });
+            usedSlots += slots;
+            sectionIndex += 1;
+            if (usedSlots >= rowCapacity) {
+                break;
+            }
+        }
+        if (rowSections.length === 0) {
+            const section = sections[sectionIndex];
+            rowSections.push({
+                ...section,
+                slots: resolveSectionPreferredSlots(section.apps.length, rowCapacity),
+            });
+            sectionIndex += 1;
+        }
+        rows.push({
+            sections: rowSections,
+            totalSlots: rowSections.reduce((total, section) => total + section.slots, 0),
+        });
+    }
+    return rows;
+}
+function CatalogSkeletonSection({ label, rowSizes, }) {
+    const rowDescriptors = useMemo(() => {
+        const seenRowCounts = new Map();
+        return rowSizes.map((rowSize) => {
+            const occurrence = (seenRowCounts.get(rowSize) ?? 0) + 1;
+            seenRowCounts.set(rowSize, occurrence);
+            const key = `${label}-${rowSize}-${occurrence}`;
+            return {
+                key,
+                rowSize,
+                cardKeys: Array.from({ length: rowSize }, (_, position) => `${key}-${position + 1}`),
+            };
+        });
+    }, [label, rowSizes]);
+    return (_jsxs("section", { className: "space-y-3", "aria-hidden": "true", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28 rounded-full bg-bg-accent/80" }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "space-y-2", children: rowDescriptors.map((rowDescriptor) => (_jsx("div", { className: "grid gap-2", style: {
+                        gridTemplateColumns: `repeat(${rowDescriptor.rowSize}, minmax(0, 1fr))`,
+                    }, children: rowDescriptor.cardKeys.map((cardKey) => (_jsxs("div", { className: "overflow-hidden rounded-2xl border border-border/35 bg-card/72", children: [_jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-none bg-bg-accent/70" }), _jsx("div", { className: "space-y-2 px-3 py-3", children: _jsx(Skeleton, { className: "h-3 w-2/3 rounded-full bg-bg-accent/80" }) })] }, cardKey))) }, rowDescriptor.key))) })] }));
+}
+export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onToggleFavorite, }) {
+    const { t } = useApp();
+    const catalogRef = useRef(null);
+    const [catalogWidth, setCatalogWidth] = useState(0);
+    const cardsPerRow = useMemo(() => resolveCardsPerRow(catalogWidth), [catalogWidth]);
+    const sections = useMemo(() => {
+        return groupAppsForCatalog(visibleApps, {
+            favoriteAppNames,
+        });
+    }, [favoriteAppNames, visibleApps]);
+    const sectionRows = useMemo(() => buildCatalogSectionRows(sections, cardsPerRow), [cardsPerRow, sections]);
+    useEffect(() => {
+        const element = catalogRef.current;
+        if (!element)
+            return;
+        const updateWidth = (width) => {
+            setCatalogWidth(Math.max(0, Math.round(width)));
+        };
+        updateWidth(element.getBoundingClientRect().width);
+        if (typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const nextWidth = entries[0]?.contentRect.width;
+            if (typeof nextWidth === "number") {
+                updateWidth(nextWidth);
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs("div", { ref: catalogRef, "data-testid": "apps-catalog-grid", children: [error ? (_jsx("div", { className: "mb-4 rounded-xl border border-danger/30 bg-danger/10 px-3 py-2 text-xs-tight text-danger", children: error })) : null, loading ? (_jsxs("div", { className: "space-y-6", role: "status", "aria-label": t("appsview.Loading"), children: [_jsx(CatalogSkeletonSection, { label: "Featured", rowSizes: [1] }), _jsx(CatalogSkeletonSection, { label: "Games & Entertainment", rowSizes: buildBalancedRows(Array.from({ length: 7 }), cardsPerRow).map((row) => row.length) }), _jsx(CatalogSkeletonSection, { label: "Developer Utilities", rowSizes: buildBalancedRows(Array.from({ length: 6 }), cardsPerRow).map((row) => row.length) })] })) : visibleApps.length === 0 ? (_jsx("div", { className: "rounded-2xl border border-dashed border-border/35 bg-card/72 px-6 py-16 text-center", children: _jsx("div", { className: "text-xs font-medium text-muted-strong", children: searchQuery
+                        ? t("appsview.NoAppsMatchSearch")
+                        : t("appsview.NoAppsAvailable") }) })) : (_jsx("div", { className: "space-y-4", children: sectionRows.map((sectionRow) => {
+                    const rowKey = sectionRow.sections
+                        .map((section) => section.key)
+                        .join("-");
+                    return (_jsx("div", { "data-testid": `apps-section-row-${rowKey}`, className: "grid gap-4", style: {
+                            gridTemplateColumns: `repeat(${sectionRow.totalSlots}, minmax(0, 1fr))`,
+                        }, children: sectionRow.sections.map((section) => (_jsxs("section", { "data-testid": `apps-section-${section.key}`, className: "min-w-0 space-y-3", style: {
+                                gridColumn: `span ${section.slots} / span ${section.slots}`,
+                            }, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-muted-strong", children: section.label }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "space-y-2", children: buildBalancedRows(section.apps, section.slots).map((row) => {
+                                        const sectionRowKey = row
+                                            .map((app) => app.name)
+                                            .join("-");
+                                        return (_jsx("div", { className: "grid gap-2", style: {
+                                                gridTemplateColumns: `repeat(${row.length}, minmax(0, 1fr))`,
+                                            }, children: row.map((app) => {
+                                                const isActive = activeAppNames.has(app.name);
+                                                const isFavorite = favoriteAppNames.has(app.name);
+                                                const displayName = app.displayName ?? getAppShortName(app);
+                                                return (_jsxs("div", { className: `group relative overflow-hidden rounded-2xl border bg-card/72 transition-all hover:border-accent/45 focus-within:ring-2 focus-within:ring-accent/35 ${isActive
+                                                        ? "border-ok/45 shadow-[0_0_0_1px_rgba(16,185,129,0.25)]"
+                                                        : "border-border/35 hover:shadow-[0_8px_24px_-12px_rgba(0,0,0,0.4)]"}`, children: [_jsxs("button", { type: "button", "data-testid": `app-card-${app.name.replace(/[^a-z0-9]+/gi, "-")}`, title: displayName, "aria-label": displayName, className: "block w-full text-left focus-visible:outline-none", onClick: () => onLaunch(app), children: [_jsx(AppHero, { app: app, className: "aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.02]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2 pe-10", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-semibold text-white drop-shadow-[0_1px_6px_rgba(0,0,0,0.6)]", children: displayName }) }) })] }), isActive ? (_jsx("span", { title: "Running", className: "pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgba(16,185,129,0.35)]" })) : null, _jsx("button", { type: "button", "aria-label": isFavorite
+                                                                ? "Remove from favorites"
+                                                                : "Add to favorites", className: `absolute bottom-3 right-3 rounded-full p-1.5 text-white transition-all ${isFavorite
+                                                                ? "bg-black/30 text-warn backdrop-blur-sm"
+                                                                : "bg-black/30 text-white/70 backdrop-blur-sm hover:text-warn focus-visible:text-warn"}`, onClick: (event) => {
+                                                                event.stopPropagation();
+                                                                onToggleFavorite(app.name);
+                                                            }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: isFavorite ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("title", { children: "Favorite" }), _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })] }) })] }, app.name));
+                                            }) }, `${section.key}-${sectionRowKey}`));
+                                    }) })] }, section.key))) }, rowKey));
+                }) }))] }));
+}

package/components/apps/AppsSidebar.d.ts

@@ -0,0 +1,22 @@
+import type { AppRunSummary, RegistryAppInfo } from "../../api";
+interface AppsSidebarProps {
+    apps: RegistryAppInfo[];
+    browseApps: RegistryAppInfo[];
+    runs: AppRunSummary[];
+    activeAppNames: ReadonlySet<string>;
+    favoriteAppNames: ReadonlySet<string>;
+    selectedAppName: string | null;
+    /** Controlled collapsed state. */
+    collapsed: boolean;
+    onCollapsedChange: (next: boolean) => void;
+    /** Controlled width in px (expanded only; ignored when collapsed). */
+    width: number;
+    onWidthChange: (next: number) => void;
+    minWidth?: number;
+    maxWidth?: number;
+    onLaunchApp: (app: RegistryAppInfo) => void;
+    onOpenRun: (run: AppRunSummary) => void;
+}
+export declare function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAppNames, selectedAppName, collapsed, onCollapsedChange, width, onWidthChange, minWidth, maxWidth, onLaunchApp, onOpenRun, }: AppsSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppsSidebar.d.ts.map

package/components/apps/AppsSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppsSidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAWhE,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AASD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,aAAa,EACb,QAAc,EACd,QAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CA6LlB"}

package/components/apps/AppsSidebar.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarContent, SidebarPanel, SidebarScrollRegion } from "@elizaos/ui";
+import { Play, Star } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslation } from "../../state/TranslationContext.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { getAppCategoryIcon } from "./app-identity.js";
+import { APP_CATALOG_SECTION_LABELS, getAppCatalogSectionKey, getAppShortName, } from "./helpers.js";
+const GENRE_ORDER = [
+    "games",
+    "finance",
+    "developerUtilities",
+    "other",
+];
+export function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAppNames, selectedAppName, collapsed, onCollapsedChange, width, onWidthChange, minWidth = 220, maxWidth = 420, onLaunchApp, onOpenRun, }) {
+    const appsByName = useMemo(() => {
+        const map = new Map();
+        for (const app of apps)
+            map.set(app.name, app);
+        return map;
+    }, [apps]);
+    const featuredEntries = useMemo(() => {
+        return browseApps.filter((app) => getAppCatalogSectionKey(app) === "featured" &&
+            !favoriteAppNames.has(app.name));
+    }, [browseApps, favoriteAppNames]);
+    const starredEntries = useMemo(() => {
+        return browseApps
+            .filter((app) => favoriteAppNames.has(app.name))
+            .sort((a, b) => (a.displayName ?? a.name).localeCompare(b.displayName ?? b.name));
+    }, [browseApps, favoriteAppNames]);
+    const activeEntries = useMemo(() => {
+        return runs
+            .map((run) => {
+            const app = appsByName.get(run.appName);
+            const displayName = app?.displayName ?? run.displayName ?? run.appName;
+            return { run, app, displayName };
+        })
+            .sort((a, b) => b.run.updatedAt.localeCompare(a.run.updatedAt));
+    }, [appsByName, runs]);
+    const featuredAppNames = useMemo(() => {
+        return new Set(featuredEntries.map((app) => app.name));
+    }, [featuredEntries]);
+    const surfacedAppNames = useMemo(() => {
+        const set = new Set();
+        for (const appName of featuredAppNames)
+            set.add(appName);
+        for (const app of starredEntries)
+            set.add(app.name);
+        for (const entry of activeEntries)
+            set.add(entry.run.appName);
+        return set;
+    }, [activeEntries, featuredAppNames, starredEntries]);
+    const genreEntries = useMemo(() => {
+        const buckets = new Map();
+        for (const app of browseApps) {
+            if (surfacedAppNames.has(app.name))
+                continue;
+            const key = getAppCatalogSectionKey(app);
+            const list = buckets.get(key) ?? [];
+            list.push(app);
+            buckets.set(key, list);
+        }
+        for (const list of buckets.values()) {
+            list.sort((a, b) => (a.displayName ?? a.name).localeCompare(b.displayName ?? b.name));
+        }
+        return GENRE_ORDER.flatMap((key) => {
+            const list = buckets.get(key) ?? [];
+            if (list.length === 0)
+                return [];
+            return [
+                {
+                    key,
+                    label: APP_CATALOG_SECTION_LABELS[key],
+                    apps: list,
+                },
+            ];
+        });
+    }, [browseApps, surfacedAppNames]);
+    const hasAnyResults = featuredEntries.length > 0 ||
+        starredEntries.length > 0 ||
+        activeEntries.length > 0 ||
+        genreEntries.length > 0;
+    return (_jsx(AppPageSidebar, { testId: "apps-sidebar", collapsible: true, contentIdentity: "apps", collapseButtonAriaLabel: "Collapse apps sidebar", expandButtonAriaLabel: "Expand apps sidebar", expandButtonTestId: "apps-sidebar-expand-toggle", collapsed: collapsed, onCollapsedChange: onCollapsedChange, resizable: true, width: width, onWidthChange: onWidthChange, minWidth: minWidth, maxWidth: maxWidth, onCollapseRequest: () => onCollapsedChange(true), children: _jsx(SidebarScrollRegion, { className: "scrollbar-hide px-1 pb-3 pt-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx(SidebarPanel, { className: "bg-transparent gap-0 p-0 shadow-none", children: !hasAnyResults ? (_jsx("div", { className: "px-3 py-4 text-2xs text-muted/70", children: "No apps available" })) : (_jsxs("div", { className: "space-y-3", children: [starredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Starred", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: starredEntries.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) })), featuredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Featured", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: featuredEntries.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) })), activeEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Active", icon: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }), children: activeEntries.map(({ run, app, displayName }) => (_jsx(AppsSidebarAppButton, { name: run.appName, displayName: displayName, active: true, selected: selectedAppName === run.appName, identitySource: app ?? {
+                                    name: run.appName,
+                                    displayName,
+                                    icon: null,
+                                    category: "",
+                                    description: "",
+                                }, onClick: () => onOpenRun(run) }, run.runId))) })), genreEntries.map((section) => (_jsx(AppsSidebarSection, { label: section.label, children: section.apps.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) }, section.key)))] })) }) }) }));
+}
+function AppsSidebarSection({ label, icon, children, }) {
+    return (_jsxs("div", { children: [_jsxs(SidebarContent.SectionLabel, { className: "mb-1 inline-flex items-center gap-1.5 px-2 text-[0.625rem]", children: [icon, label] }), _jsx("div", { className: "space-y-0.5 pl-3", children: children })] }));
+}
+function AppsSidebarAppButton({ displayName, active, selected, identitySource, onClick, }) {
+    const { t } = useTranslation();
+    const Icon = getAppCategoryIcon(identitySource);
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-current": selected ? "page" : undefined, className: `group flex w-full min-w-0 items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-left transition-colors ${selected ? "bg-accent/15 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted/70", "aria-hidden": true, strokeWidth: 2 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs-tight", children: displayName }), active ? (_jsx("span", { role: "img", "aria-label": t("appsview.Running"), className: "h-1.5 w-1.5 shrink-0 rounded-full bg-ok shadow-[0_0_0_2px_rgba(16,185,129,0.25)]" })) : null] }));
+}

package/components/apps/GameView.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Game View — embeds a running app's game client in an iframe.
+ *
+ * Features:
+ * - Full-screen iframe for game client
+ * - PostMessage auth for embedded app viewers
+ * - Split-screen mode with agent logs panel
+ * - Connection status indicator
+ */
+import { type AppSessionState } from "../../api";
+import type { DesktopClickAuditItem } from "../../utils/desktop-workspace";
+export declare function buildDisconnectedSessionState(session: AppSessionState | null): AppSessionState | null;
+export declare const DESKTOP_GAME_CLICK_AUDIT: readonly DesktopClickAuditItem[];
+export declare function DesktopGameWindowControls({ gameWindowId, }: {
+    gameWindowId: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GameView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GameView.d.ts.map

package/components/apps/GameView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAYH,OAAO,EAGL,KAAK,eAAe,EAGrB,MAAM,WAAW,CAAC;AAUnB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAW3E,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,eAAe,GAAG,IAAI,CAcxB;AA8ED,eAAO,MAAM,wBAAwB,EAAE,SAAS,qBAAqB,EAkD3D,CAAC;AAEX,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,GACb,EAAE;IACD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,2CA8ZA;AAED,wBAAgB,QAAQ,4CAyhDvB"}