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

package/components/pages/SkillsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AASrE,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}
+{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAmH3E,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}

package/components/pages/SkillsView.js

@@ -1,11 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ConfirmDelete, Input, PageLayout, PagePanel, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, SkillSidebarItem, StatusBadge, Switch, } from "@elizaos/ui";
-import { RefreshCw } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brain, Store } from "lucide-react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
+import { PageLayout } from "../../layouts/page-layout/page-layout.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
+import { ChatSearchHint } from "../composites/chat-search-hint.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
+import { SkillSidebarItem } from "../composites/skills/skill-sidebar-item.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { Button } from "../ui/button.js";
+import { ConfirmDelete } from "../ui/confirm-delete.js";
+import { Input } from "../ui/input.js";
+import { StatusBadge } from "../ui/status-badge.js";
+import { Switch } from "../ui/switch.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { EditSkillModal, SkillsModalView } from "./skill-detail-panel.js";
 import { InstallModal } from "./skill-marketplace.js";
+/* ── Agent-controllable child controls (hooks must stay at top level) ── */
+function SkillFilterTab({ tabKey, label, isActive, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `filter-${tabKey}`,
+        role: "tab",
+        label,
+        group: "skills-filter",
+        status: isActive ? "active" : "inactive",
+        description: `Filter the skills list to ${label}`,
+        onActivate: onSelect,
+    });
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "sm", type: "button", "aria-current": isActive ? "true" : undefined, className: `h-8 rounded-full border px-3 text-2xs font-bold tracking-[0.14em] ${isActive
+            ? "border-accent/30 bg-accent/10 text-txt"
+            : "border-border/45 text-muted hover:border-border/70 hover:bg-bg/35 hover:text-txt"}`, onClick: onSelect, ...agentProps, children: label }));
+}
+const SkillRowButton = memo(function SkillRowButton({ skill, active, enabled, icon, description, onLabel, offLabel, attentionLabel, onSelect, }) {
+    const { agentProps } = useAgentElement({
+        id: `skill-${skill.id}`,
+        role: "button",
+        label: skill.name,
+        group: "skills-list",
+        status: active ? "active" : enabled ? "enabled" : "disabled",
+        description: `Select the ${skill.name} skill`,
+        onActivate: onSelect,
+    });
+    return (_jsx("div", { ...agentProps, children: _jsx(SkillSidebarItem, { active: active, testId: `skill-row-${skill.id}`, enabled: enabled, icon: icon, name: skill.name, description: description, onLabel: onLabel, offLabel: offLabel, onSelect: onSelect, attentionLabel: attentionLabel }) }));
+});
 /* ── Main Skills View ───────────────────────────────────────────────── */
 export function SkillsView({ contentHeader, inModal, } = {}) {
     if (inModal)
@@ -14,15 +56,67 @@ export function SkillsView({ contentHeader, inModal, } = {}) {
 }
 /* ── Full-Page Skills View ─────────────────────────────────────────── */
 function SkillsFullView({ contentHeader } = {}) {
-    const { skills, skillCreateFormOpen, skillCreateName, skillCreateDescription, skillCreating, skillReviewReport, skillReviewId, skillReviewLoading, skillToggleAction, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, loadSkills, refreshSkills, handleSkillToggle, handleCreateSkill, handleDeleteSkill, handleReviewSkill, handleAcknowledgeSkill, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, setState, t, } = useApp();
+    const { skills, skillCreateFormOpen, skillCreateName, skillCreateDescription, skillCreating, skillReviewReport, skillReviewId, skillReviewLoading, skillToggleAction, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, loadSkills, refreshSkills, handleSkillToggle, handleCreateSkill, handleDeleteSkill, handleReviewSkill, handleAcknowledgeSkill, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, setState, t, } = useAppSelectorShallow((s) => ({
+        skills: s.skills,
+        skillCreateFormOpen: s.skillCreateFormOpen,
+        skillCreateName: s.skillCreateName,
+        skillCreateDescription: s.skillCreateDescription,
+        skillCreating: s.skillCreating,
+        skillReviewReport: s.skillReviewReport,
+        skillReviewId: s.skillReviewId,
+        skillReviewLoading: s.skillReviewLoading,
+        skillToggleAction: s.skillToggleAction,
+        skillsMarketplaceQuery: s.skillsMarketplaceQuery,
+        skillsMarketplaceResults: s.skillsMarketplaceResults,
+        skillsMarketplaceError: s.skillsMarketplaceError,
+        skillsMarketplaceLoading: s.skillsMarketplaceLoading,
+        skillsMarketplaceAction: s.skillsMarketplaceAction,
+        skillsMarketplaceManualGithubUrl: s.skillsMarketplaceManualGithubUrl,
+        loadSkills: s.loadSkills,
+        refreshSkills: s.refreshSkills,
+        handleSkillToggle: s.handleSkillToggle,
+        handleCreateSkill: s.handleCreateSkill,
+        handleDeleteSkill: s.handleDeleteSkill,
+        handleReviewSkill: s.handleReviewSkill,
+        handleAcknowledgeSkill: s.handleAcknowledgeSkill,
+        searchSkillsMarketplace: s.searchSkillsMarketplace,
+        installSkillFromMarketplace: s.installSkillFromMarketplace,
+        uninstallMarketplaceSkill: s.uninstallMarketplaceSkill,
+        installSkillFromGithubUrl: s.installSkillFromGithubUrl,
+        enableMarketplaceSkill: s.enableMarketplaceSkill,
+        disableMarketplaceSkill: s.disableMarketplaceSkill,
+        copyMarketplaceSkillSource: s.copyMarketplaceSkillSource,
+        setState: s.setState,
+        t: s.t,
+    }));
     const [installModalOpen, setInstallModalOpen] = useState(false);
     const [filterText, setFilterText] = useState("");
     const [filterTab, setFilterTab] = useState("all");
     const [selectedId, setSelectedId] = useState(null);
     const [editingSkill, setEditingSkill] = useState(null);
+    // The floating chat composer is this view's search box. While Skills is the
+    // active view it takes over the composer (placeholder + live draft) and feeds
+    // each keystroke into the `filterText` filter — there's no in-page search input.
+    const searchPlaceholder = t("skillsview.SearchSkills", {
+        defaultValue: "Search skills…",
+    });
+    const chatBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: setFilterText }), [searchPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
     useEffect(() => {
         void loadSkills();
     }, [loadSkills]);
+    // The skills list polls itself in the background instead of exposing a manual
+    // refresh control — silently revalidate on a slow interval and on window focus.
+    // The interval is gated on document visibility so a backgrounded window goes
+    // quiet; the focus listener still gives an immediate refresh on return.
+    useEffect(() => {
+        const poll = () => void refreshSkills();
+        window.addEventListener("focus", poll);
+        return () => {
+            window.removeEventListener("focus", poll);
+        };
+    }, [refreshSkills]);
+    useIntervalWhenDocumentVisible(() => void refreshSkills(), 20_000);
     const filteredSkills = useMemo(() => {
         const query = filterText.toLowerCase();
         return skills.filter((skill) => {
@@ -46,6 +140,8 @@ function SkillsFullView({ contentHeader } = {}) {
     const selectedSkill = selectedSkillId
         ? (skills.find((skill) => skill.id === selectedSkillId) ?? null)
         : null;
+    const enabledSkillCount = useMemo(() => skills.filter((skill) => skill.enabled).length, [skills]);
+    const disabledSkillCount = skills.length - enabledSkillCount;
     const filterTabs = [
         {
             key: "all",
@@ -53,11 +149,11 @@ function SkillsFullView({ contentHeader } = {}) {
         },
         {
             key: "on",
-            label: `${t("common.on")} (${skills.filter((skill) => skill.enabled).length})`,
+            label: `${t("common.on")} (${enabledSkillCount})`,
         },
         {
             key: "off",
-            label: `${t("common.off")} (${skills.filter((skill) => !skill.enabled).length})`,
+            label: `${t("common.off")} (${disabledSkillCount})`,
         },
     ];
     const handleDismissReview = () => {
@@ -73,7 +169,85 @@ function SkillsFullView({ contentHeader } = {}) {
     const selectedNeedsAttention = selectedSkill?.scanStatus === "warning" ||
         selectedSkill?.scanStatus === "critical" ||
         selectedSkill?.scanStatus === "blocked";
-    const skillsSidebar = (_jsxs(AppPageSidebar, { testId: "skills-sidebar", collapsible: true, contentIdentity: "skills", "aria-label": t("skillsview.filterSkills", {
+    const newSkillButton = useAgentElement({
+        id: "new-skill",
+        role: "button",
+        label: skillCreateFormOpen
+            ? t("common.cancel")
+            : t("skillsview.NewSkill", { defaultValue: "New Skill" }),
+        group: "skills-toolbar",
+        status: skillCreateFormOpen ? "active" : "inactive",
+        description: "Open or close the new skill builder form",
+        onActivate: () => {
+            setState("skillCreateFormOpen", !skillCreateFormOpen);
+            if (skillCreateFormOpen)
+                handleCancelCreate();
+        },
+    });
+    const installButton = useAgentElement({
+        id: "install-skill",
+        role: "button",
+        label: t("common.install", { defaultValue: "Install" }),
+        group: "skills-toolbar",
+        description: "Open the skill marketplace install dialog",
+        onActivate: () => setInstallModalOpen(true),
+    });
+    const createNameInput = useAgentElement({
+        id: "create-skill-name",
+        role: "text-input",
+        label: t("skillsview.SkillName"),
+        group: "skills-create",
+        description: "Name for the new skill being created",
+        getValue: () => skillCreateName,
+        onFill: (value) => setState("skillCreateName", value),
+    });
+    const createDescriptionInput = useAgentElement({
+        id: "create-skill-description",
+        role: "text-input",
+        label: t("common.description"),
+        group: "skills-create",
+        description: "Description for the new skill being created",
+        getValue: () => skillCreateDescription,
+        onFill: (value) => setState("skillCreateDescription", value),
+    });
+    const createSubmitButton = useAgentElement({
+        id: "create-skill-submit",
+        role: "button",
+        label: t("skillsview.createSkill", { defaultValue: "Create Skill" }),
+        group: "skills-create",
+        description: "Create the new skill with the entered name and description",
+        onActivate: () => {
+            if (skillCreateName.trim() && !skillCreating)
+                handleCreateSkill();
+        },
+    });
+    const toggleSelectedSwitch = useAgentElement({
+        id: "toggle-selected-skill",
+        role: "toggle",
+        label: selectedSkill
+            ? `${selectedSkill.name} ${selectedSkill.enabled ? t("common.on") : t("common.off")}`
+            : t("common.off"),
+        group: "skills-detail",
+        status: selectedSkill?.enabled ? "active" : "inactive",
+        description: "Enable or disable the selected skill",
+        onActivate: () => {
+            if (selectedSkill) {
+                handleSkillToggle(selectedSkill.id, !selectedSkill.enabled);
+            }
+        },
+    });
+    const editSourceButton = useAgentElement({
+        id: "edit-skill-source",
+        role: "button",
+        label: t("skillsview.EditSource", { defaultValue: "Edit Source" }),
+        group: "skills-detail",
+        description: "Open the source editor for the selected skill",
+        onActivate: () => {
+            if (selectedSkill)
+                setEditingSkill(selectedSkill);
+        },
+    });
+    const skillsSidebar = (_jsx(AppPageSidebar, { testId: "skills-sidebar", collapsible: true, contentIdentity: "skills", "aria-label": t("skillsview.filterSkills", {
             defaultValue: "Skills list",
         }), collapsedRailItems: filteredSkills.map((skill) => {
             const selected = selectedSkillId === skill.id;
@@ -81,114 +255,82 @@ function SkillsFullView({ contentHeader } = {}) {
                     setSelectedId(skill.id);
                     setState("skillCreateFormOpen", false);
                 }, children: skill.name.charAt(0).toUpperCase() }, skill.id));
-        }), children: [_jsx(SidebarHeader, { search: {
-                    value: filterText,
-                    onChange: (event) => setFilterText(event.target.value),
-                    placeholder: t("skillsview.filterSkills"),
-                    "aria-label": t("skillsview.filterSkills"),
-                    onClear: () => setFilterText(""),
-                } }), _jsx(SidebarScrollRegion, { children: _jsxs(SidebarPanel, { children: [_jsxs(SidebarContent.Toolbar, { className: "mb-3", children: [_jsx(SidebarContent.ToolbarPrimary, { children: _jsx(Button, { variant: skillCreateFormOpen ? "outline" : "default", size: "sm", type: "button", className: `h-9 w-full rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] ${skillCreateFormOpen
-                                            ? "border-border/50 bg-bg/25 text-txt"
-                                            : "text-txt-strong"}`, onClick: () => {
-                                            setState("skillCreateFormOpen", !skillCreateFormOpen);
-                                            if (skillCreateFormOpen) {
-                                                handleCancelCreate();
-                                            }
-                                        }, children: skillCreateFormOpen
-                                            ? t("common.cancel")
-                                            : `+ ${t("skillsview.NewSkill", { defaultValue: "New Skill" })}` }) }), _jsxs(SidebarContent.ToolbarActions, { children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setInstallModalOpen(true), children: t("common.install", { defaultValue: "Install" }) }), _jsx(Button, { variant: "ghost", size: "icon", type: "button", className: "h-9 w-9 rounded-full text-muted hover:text-txt", onClick: () => void refreshSkills(), title: t("skillsview.RefreshSkillsList", {
-                                                defaultValue: "Refresh Skills List",
-                                            }), "aria-label": t("skillsview.RefreshSkillsList", {
-                                                defaultValue: "Refresh Skills List",
-                                            }), children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: filterTabs.map((tab) => (_jsx(Button, { variant: "ghost", size: "sm", type: "button", className: `h-8 rounded-full border px-3 text-2xs font-bold tracking-[0.14em] ${filterTab === tab.key
-                                    ? "border-accent/30 bg-accent/10 text-txt"
-                                    : "border-border/45 text-muted hover:border-border/70 hover:bg-bg/35 hover:text-txt"}`, onClick: () => setFilterTab(tab.key), children: tab.label }, tab.key))) }), filteredSkills.length === 0 ? (_jsx(SidebarContent.EmptyState, { children: skills.length === 0
-                                ? t("skillsview.noSkillsInstalled", {
-                                    defaultValue: "No Skills Installed",
-                                })
-                                : t("skillsview.noSkillsMatchFilter", {
-                                    defaultValue: 'No skills match "{{filter}}"',
-                                    filter: filterText,
-                                }) })) : (_jsx("div", { className: "space-y-1.5", children: filteredSkills.map((skill) => {
-                                const needsAttention = skill.scanStatus === "warning" ||
-                                    skill.scanStatus === "critical" ||
-                                    skill.scanStatus === "blocked";
-                                const selected = selectedSkillId === skill.id;
-                                return (_jsx(SkillSidebarItem, { active: selected, testId: `skill-row-${skill.id}`, enabled: skill.enabled, icon: skill.name.charAt(0).toUpperCase(), name: skill.name, description: skill.description || t("skillsview.noDescription"), onLabel: t("common.on"), offLabel: t("common.off"), onSelect: () => {
-                                        setSelectedId(skill.id);
-                                        setState("skillCreateFormOpen", false);
-                                    }, attentionLabel: needsAttention
-                                        ? skill.scanStatus === "blocked"
-                                            ? t("skillsview.statusBlocked")
-                                            : t("skillsview.statusWarning")
-                                        : undefined }, skill.id));
-                            }) }))] }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(PageLayout, { "data-testid": "skills-shell", sidebar: skillsSidebar, contentHeader: contentHeader, contentInnerClassName: "mx-auto w-full max-w-[76rem]", children: _jsx("div", { "data-testid": "skills-detail", children: _jsxs(PagePanel, { variant: "section", children: [_jsx(PagePanel.Header, { eyebrow: t("nav.advanced"), heading: t("advancedpageview.Skills", {
+        }), children: _jsx(SidebarScrollRegion, { children: _jsxs(SidebarPanel, { children: [_jsxs(SidebarContent.Toolbar, { className: "mb-3", children: [_jsx(SidebarContent.ToolbarPrimary, { children: _jsx(Button, { ref: newSkillButton.ref, variant: skillCreateFormOpen ? "outline" : "default", size: "sm", type: "button", className: `h-9 w-full rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] ${skillCreateFormOpen
+                                        ? "border-border/50 bg-bg/25 text-txt"
+                                        : "text-txt-strong"}`, onClick: () => {
+                                        setState("skillCreateFormOpen", !skillCreateFormOpen);
+                                        if (skillCreateFormOpen) {
+                                            handleCancelCreate();
+                                        }
+                                    }, ...newSkillButton.agentProps, children: skillCreateFormOpen
+                                        ? t("common.cancel")
+                                        : `+ ${t("skillsview.NewSkill", { defaultValue: "New Skill" })}` }) }), _jsx(SidebarContent.ToolbarActions, { children: _jsx(Button, { ref: installButton.ref, variant: "outline", size: "sm", type: "button", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setInstallModalOpen(true), ...installButton.agentProps, children: t("common.install", { defaultValue: "Install" }) }) })] }), _jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: filterTabs.map((tab) => (_jsx(SkillFilterTab, { tabKey: tab.key, label: tab.label, isActive: filterTab === tab.key, onSelect: () => setFilterTab(tab.key) }, tab.key))) }), filteredSkills.length === 0 ? (_jsx(SidebarContent.EmptyState, { children: skills.length === 0
+                            ? t("skillsview.noSkillsInstalled", {
+                                defaultValue: "No Skills Installed",
+                            })
+                            : t("skillsview.noSkillsMatchFilter", {
+                                defaultValue: 'No skills match "{{filter}}"',
+                                filter: filterText,
+                            }) })) : (_jsx("div", { className: "space-y-1.5", children: filteredSkills.map((skill) => {
+                            const needsAttention = skill.scanStatus === "warning" ||
+                                skill.scanStatus === "critical" ||
+                                skill.scanStatus === "blocked";
+                            const selected = selectedSkillId === skill.id;
+                            return (_jsx(SkillRowButton, { skill: skill, active: selected, enabled: skill.enabled, icon: skill.name.charAt(0).toUpperCase(), description: skill.description || t("skillsview.noDescription"), onLabel: t("common.on"), offLabel: t("common.off"), onSelect: () => {
+                                    setSelectedId(skill.id);
+                                    setState("skillCreateFormOpen", false);
+                                }, attentionLabel: needsAttention
+                                    ? skill.scanStatus === "blocked"
+                                        ? t("skillsview.statusBlocked")
+                                        : t("skillsview.statusWarning")
+                                    : undefined }, skill.id));
+                        }) }))] }) }) }));
+    return (_jsxs(ShellViewAgentSurface, { viewId: "skills", children: [_jsx(PageLayout, { "data-testid": "skills-shell", sidebar: skillsSidebar, contentHeader: contentHeader, contentInnerClassName: "mx-auto w-full max-w-[76rem]", children: _jsx("div", { "data-testid": "skills-detail", children: _jsxs(PagePanel, { variant: "section", children: [_jsx(PagePanel.Header, { heading: t("advancedpageview.Skills", {
                                     defaultValue: "Skills",
-                                }), description: t("advancedpageview.SkillsDescription", {
-                                    defaultValue: "Custom agent skills",
                                 }), className: "border-border/35", actions: _jsx(PagePanel.Meta, { className: "border-border/45 px-2.5 py-1 font-bold tracking-[0.16em] text-muted", children: t("skillsview.VisibleCount", {
                                         defaultValue: "{{count}} shown",
                                         count: filteredSkills.length,
-                                    }) }) }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: skills.length === 0 && !skillCreateFormOpen ? (_jsx(PagePanel.Empty, { "data-testid": "skills-empty-state", variant: "surface", className: "min-h-[18rem] rounded-3xl px-6 py-12", title: t("skillsview.noSkillsInstalled", {
-                                        defaultValue: "No Skills Installed",
-                                    }), description: t("skillsview.noSkillsInstalledDesc", {
-                                        defaultValue: "Install skills from the marketplace or create your own.",
-                                    }), action: _jsxs("div", { className: "flex justify-center gap-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-10 rounded-full px-5 font-bold tracking-[0.12em]", onClick: () => setInstallModalOpen(true), children: t("skillsview.BrowseMarketplace") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-10 rounded-full px-5 font-bold tracking-[0.12em]", onClick: () => setState("skillCreateFormOpen", true), children: t("skillsview.createSkill", {
-                                                    defaultValue: "Create Skill",
-                                                }) })] }) })) : filteredSkills.length === 0 && !skillCreateFormOpen ? (_jsx(PagePanel.Empty, { "data-testid": "skills-filter-empty", variant: "surface", className: "min-h-[16rem] rounded-3xl px-6 py-12", title: t("skillsview.noMatchingSkills", {
+                                    }) }) }), _jsx("div", { className: "border-b border-border/35 px-4 py-2.5 sm:px-5", children: _jsx(ChatSearchHint, { noun: "skills", query: filterText }) }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: skills.length === 0 && !skillCreateFormOpen ? (_jsx("div", { "data-testid": "skills-empty-state", className: "grid min-h-[20rem] place-items-center px-6 py-10", children: _jsxs("div", { className: "w-full max-w-2xl text-center", children: [_jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-sm bg-accent/12 text-accent", children: _jsx(Brain, { className: "h-7 w-7" }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-txt", children: t("skillsview.noSkillsInstalled", {
+                                                    defaultValue: "No Skills Installed",
+                                                }) }), _jsx("div", { className: "mt-6 flex w-full flex-col justify-center gap-2 sm:w-auto sm:flex-row sm:gap-3", children: _jsxs(Button, { variant: "default", size: "sm", className: "h-10 w-full justify-center rounded-full px-5 font-bold tracking-[0.12em] sm:w-auto", onClick: () => setInstallModalOpen(true), children: [_jsx(Store, { className: "mr-2 h-4 w-4" }), t("skillsview.BrowseMarketplace")] }) })] }) })) : filteredSkills.length === 0 && !skillCreateFormOpen ? (_jsx(PagePanel.Empty, { "data-testid": "skills-filter-empty", variant: "surface", className: "min-h-[16rem] rounded-sm px-6 py-12", title: t("skillsview.noMatchingSkills", {
                                         defaultValue: "No matching skills",
                                     }), description: t("skillsview.noSkillsMatchFilter", {
                                         defaultValue: 'No skills match "{{filter}}"',
                                         filter: filterText,
-                                    }) })) : skillCreateFormOpen ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { eyebrow: t("skillsview.skillBuilder", {
-                                                defaultValue: "Skill Builder",
-                                            }), heading: t("skillsview.CreateNewSkill") }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-danger", children: "*" })] }), _jsx(Input, { className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (event) => setState("skillCreateName", event.target.value), onKeyDown: (event) => {
+                                    }) })) : skillCreateFormOpen ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: t("skillsview.CreateNewSkill") }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-danger", children: "*" })] }), _jsx(Input, { ref: createNameInput.ref, className: "w-full border-border/50 bg-bg/50 ", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (event) => setState("skillCreateName", event.target.value), ...createNameInput.agentProps, onKeyDown: (event) => {
                                                                     if (event.key === "Enter" &&
                                                                         skillCreateName.trim() &&
                                                                         !skillCreating) {
                                                                         handleCreateSkill();
                                                                     }
-                                                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: t("common.description") }), _jsx(Input, { className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (event) => setState("skillCreateDescription", event.target.value), onKeyDown: (event) => {
+                                                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: t("common.description") }), _jsx(Input, { ref: createDescriptionInput.ref, className: "w-full border-border/50 bg-bg/50 ", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (event) => setState("skillCreateDescription", event.target.value), ...createDescriptionInput.agentProps, onKeyDown: (event) => {
                                                                     if (event.key === "Enter" &&
                                                                         skillCreateName.trim() &&
                                                                         !skillCreating) {
                                                                         handleCreateSkill();
                                                                     }
-                                                                } })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelCreate, children: t("common.cancel") }), _jsx(Button, { variant: "default", size: "sm", onClick: handleCreateSkill, disabled: !skillCreateName.trim() || skillCreating, children: skillCreating
+                                                                } })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelCreate, children: t("common.cancel") }), _jsx(Button, { ref: createSubmitButton.ref, variant: "default", size: "sm", onClick: handleCreateSkill, disabled: !skillCreateName.trim() || skillCreating, ...createSubmitButton.agentProps, children: skillCreating
                                                                     ? t("skillsview.creating", {
                                                                         defaultValue: "Creating...",
                                                                     })
                                                                     : t("skillsview.createSkill", {
                                                                         defaultValue: "Create Skill",
-                                                                    }) })] })] }) })] })) : selectedSkill ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", "data-skill-id": selectedSkill.id, children: [_jsxs("div", { className: "flex items-start gap-3 px-4 py-4 sm:px-5", children: [_jsx("div", { className: "mt-0.5 shrink-0", children: _jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-2xl border border-accent/30 bg-accent/18 p-2.5 text-base font-bold text-txt-strong", children: selectedSkill.name.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("div", { "data-testid": "skills-detail-name", className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: selectedSkill.name }), _jsx(StatusBadge, { label: selectedSkill.scanStatus === "blocked" ||
-                                                                        selectedSkill.scanStatus === "critical"
-                                                                        ? t("skillsview.statusBlocked")
-                                                                        : selectedSkill.scanStatus === "warning"
-                                                                            ? t("skillsview.statusWarning")
-                                                                            : selectedSkill.enabled
-                                                                                ? t("common.active")
-                                                                                : t("common.inactive"), variant: selectedSkill.scanStatus === "warning"
+                                                                    }) })] })] }) })] })) : selectedSkill ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", "data-skill-id": selectedSkill.id, children: [_jsxs("div", { className: "flex items-start gap-3 px-4 py-4 sm:px-5", children: [_jsx("div", { className: "mt-0.5 shrink-0", children: _jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-sm border border-accent/30 bg-accent/18 p-2.5 text-base font-bold text-txt-strong", children: selectedSkill.name.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("div", { "data-testid": "skills-detail-name", className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: selectedSkill.name }), selectedNeedsAttention ? (_jsx(StatusBadge, { label: selectedSkill.scanStatus === "warning"
+                                                                        ? t("skillsview.statusWarning")
+                                                                        : t("skillsview.statusBlocked"), variant: selectedSkill.scanStatus === "warning"
                                                                         ? "warning"
-                                                                        : selectedSkill.scanStatus === "blocked" ||
-                                                                            selectedSkill.scanStatus === "critical"
-                                                                            ? "danger"
-                                                                            : selectedSkill.enabled
-                                                                                ? "success"
-                                                                                : "muted", withDot: true }), _jsx("span", { className: "text-xs-tight font-mono text-muted/80", children: selectedSkill.id })] }), _jsx("div", { className: "mt-3 max-w-3xl text-sm leading-relaxed text-muted", children: selectedSkill.description ||
+                                                                        : "danger", withDot: true })) : null, _jsx("span", { className: "min-w-0 break-all text-xs-tight font-mono text-muted/80", children: selectedSkill.id })] }), _jsx("div", { className: "mt-3 max-w-3xl text-sm leading-relaxed text-muted", children: selectedSkill.description ||
                                                                 t("skillsview.noDescriptionProvided", {
                                                                     defaultValue: "No description provided.",
-                                                                }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [selectedNeedsAttention && !selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-warn/35 bg-warn/12 px-3 py-1.5 text-2xs font-bold tracking-[0.14em] text-warn", onClick: () => handleReviewSkill(selectedSkill.id), children: t("skillsview.ReviewFindings") })), selectedNeedsAttention && selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-border/50 px-3 py-1.5 text-xs-tight font-semibold text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })), _jsx(Switch, { checked: selectedSkill.enabled, disabled: skillToggleAction === selectedSkill.id, onCheckedChange: (next) => handleSkillToggle(selectedSkill.id, next === true) })] })] }), _jsxs("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: [_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setEditingSkill(selectedSkill), children: t("skillsview.EditSource", {
+                                                                }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [selectedNeedsAttention && !selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-warn/35 bg-warn/12 px-3 py-1.5 text-2xs font-bold tracking-[0.14em] text-warn", onClick: () => handleReviewSkill(selectedSkill.id), children: t("skillsview.ReviewFindings") })), selectedNeedsAttention && selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-border/50 px-3 py-1.5 text-xs-tight font-semibold text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })), _jsx(Switch, { ref: toggleSelectedSwitch.ref, checked: selectedSkill.enabled, disabled: skillToggleAction === selectedSkill.id, onCheckedChange: (next) => handleSkillToggle(selectedSkill.id, next === true), ...toggleSelectedSwitch.agentProps })] })] }), _jsxs("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: [_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [_jsx(Button, { ref: editSourceButton.ref, variant: "outline", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setEditingSkill(selectedSkill), ...editSourceButton.agentProps, children: t("skillsview.EditSource", {
                                                                 defaultValue: "Edit Source",
-                                                            }) }), _jsx(Button, { variant: "ghost", size: "icon", type: "button", className: "h-9 w-9 rounded-full text-muted hover:text-txt", onClick: () => void refreshSkills(), title: t("common.refresh"), "aria-label": t("common.refresh"), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsx(ConfirmDelete, { triggerClassName: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] !bg-transparent text-danger hover:!bg-danger/15 hover:text-danger-foreground transition-colors border border-danger/30", confirmClassName: "px-3 py-1 text-xs-tight font-bold bg-danger text-danger-foreground hover:bg-danger/90 transition-colors rounded-md shadow-sm", cancelClassName: "px-3 py-1 text-xs-tight font-bold text-muted border border-border/40 hover:text-txt transition-colors rounded-md", confirmLabel: t("common.yes"), cancelLabel: t("common.no"), onConfirm: () => handleDeleteSkill(selectedSkill.id, selectedSkill.name) })] }), selectedSkillReviewOpen && skillReviewReport ? (_jsxs(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-xs font-semibold text-txt", children: t("skillsview.ScanReport") }), _jsxs("span", { className: "text-xs-tight font-mono text-danger", children: [skillReviewReport.summary.critical, " ", t("skillsview.critical")] }), _jsxs("span", { className: "text-xs-tight font-mono text-warn", children: [skillReviewReport.summary.warn, " ", t("skillsview.warnings")] })] }), skillReviewReport.findings.length > 0 && (_jsx("div", { className: "custom-scrollbar max-h-64 overflow-y-auto rounded-2xl border border-border/35 bg-card/30", children: skillReviewReport.findings.map((finding, _idx) => (_jsxs("div", { className: `flex items-start gap-2 px-3 py-2 text-xs-tight`, children: [_jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-3xs font-bold uppercase tracking-[0.12em] ${finding.severity === "critical"
+                                                            }) }), _jsx(ConfirmDelete, { triggerClassName: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] !bg-transparent text-danger hover:!bg-danger/15 hover:text-danger-foreground transition-colors border border-danger/30", confirmClassName: "px-3 py-1 text-xs-tight font-bold bg-danger text-danger-foreground hover:bg-danger/90 transition-colors rounded-sm ", cancelClassName: "px-3 py-1 text-xs-tight font-bold text-muted border border-border/40 hover:text-txt transition-colors rounded-sm", confirmLabel: t("common.yes"), cancelLabel: t("common.no"), onConfirm: () => handleDeleteSkill(selectedSkill.id, selectedSkill.name) })] }), selectedSkillReviewOpen && skillReviewReport ? (_jsxs(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-xs font-semibold text-txt", children: t("skillsview.ScanReport") }), _jsxs("span", { className: "text-xs-tight font-mono text-danger", children: [skillReviewReport.summary.critical, " ", t("skillsview.critical")] }), _jsxs("span", { className: "text-xs-tight font-mono text-warn", children: [skillReviewReport.summary.warn, " ", t("skillsview.warnings")] })] }), skillReviewReport.findings.length > 0 && (_jsx("div", { className: "custom-scrollbar max-h-64 overflow-y-auto rounded-sm border border-border/35 bg-card/30", children: skillReviewReport.findings.map((finding, _idx) => (_jsxs("div", { className: `flex flex-col gap-1 px-3 py-2 text-xs-tight sm:flex-row sm:items-start sm:gap-2`, children: [_jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-3xs font-bold uppercase tracking-[0.12em] ${finding.severity === "critical"
                                                                             ? "bg-danger/12 text-danger"
                                                                             : "bg-warn/12 text-warn"}`, children: finding.severity === "critical"
                                                                             ? t("skillsview.critical")
-                                                                            : t("skillsview.statusWarning") }), _jsx("span", { className: "min-w-0 flex-1 text-txt", children: finding.message }), _jsxs("span", { className: "shrink-0 font-mono text-muted", children: [finding.file, ":", finding.line] })] }, `${finding.file}:${finding.line}:${finding.message}`))) })), _jsxs("div", { className: "mt-4 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => handleAcknowledgeSkill(selectedSkill.id), children: t("skillsview.AcknowledgeAmpEn") }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })] })] })) : selectedSkillReviewOpen && skillReviewLoading ? (_jsx(PagePanel.Notice, { tone: "accent", children: t("skillsview.LoadingScanReport") })) : (_jsxs(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: [_jsx("div", { className: "text-2xs font-semibold uppercase tracking-[0.16em] text-muted/60", children: t("skillsview.EditSource", {
-                                                                defaultValue: "Edit Source",
-                                                            }) }), _jsx("div", { className: "mt-2 text-sm leading-relaxed text-muted", children: t("skillsview.SkillSourceEditorDescription", {
-                                                                defaultValue: "Open the skill source editor to inspect or modify `SKILL.md`, or review findings here when a skill needs attention.",
-                                                            }) })] }))] })] })) : (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[16rem] rounded-3xl px-6 py-12", title: t("skillsview.SelectATalentToConf", {
+                                                                            : t("skillsview.statusWarning") }), _jsx("span", { className: "min-w-0 flex-1 text-txt", children: finding.message }), _jsxs("span", { className: "min-w-0 break-all font-mono text-muted sm:shrink-0", children: [finding.file, ":", finding.line] })] }, `${finding.file}:${finding.line}:${finding.message}`))) })), _jsxs("div", { className: "mt-4 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => handleAcknowledgeSkill(selectedSkill.id), children: t("skillsview.AcknowledgeAmpEn") }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })] })] })) : selectedSkillReviewOpen && skillReviewLoading ? (_jsx(PagePanel.Notice, { tone: "accent", children: t("skillsview.LoadingScanReport") })) : (_jsx(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: _jsx("div", { className: "text-sm leading-relaxed text-muted", children: t("skillsview.SkillSourceEditorDescription", {
+                                                            defaultValue: "Open the skill source editor to inspect or modify `SKILL.md`, or review findings here when a skill needs attention.",
+                                                        }) }) }))] })] })) : (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[16rem] rounded-sm px-6 py-12", title: t("skillsview.SelectATalentToConf", {
                                         defaultValue: "Select a talent to configure",
                                     }) })) })] }) }) }), editingSkill && (_jsx(EditSkillModal, { skillId: editingSkill.id, skillName: editingSkill.name, onClose: () => setEditingSkill(null), onSaved: () => void refreshSkills() })), installModalOpen && (_jsx(InstallModal, { skills: skills, skillsMarketplaceQuery: skillsMarketplaceQuery, skillsMarketplaceResults: skillsMarketplaceResults, skillsMarketplaceError: skillsMarketplaceError, skillsMarketplaceLoading: skillsMarketplaceLoading, skillsMarketplaceAction: skillsMarketplaceAction, skillsMarketplaceManualGithubUrl: skillsMarketplaceManualGithubUrl, searchSkillsMarketplace: searchSkillsMarketplace, installSkillFromMarketplace: installSkillFromMarketplace, uninstallMarketplaceSkill: uninstallMarketplaceSkill, installSkillFromGithubUrl: installSkillFromGithubUrl, enableSkill: enableMarketplaceSkill, disableSkill: disableMarketplaceSkill, copySkillSource: copyMarketplaceSkillSource, showSkillDetails: (skillId) => {
                     setSelectedId(skillId);

package/components/pages/Springboard.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Springboard — iOS-like app/view launcher.
+ *
+ * Renders every available view as a names-only icon on swipeable pages plus a
+ * pinned favorites dock. Tap launches; long-press enters edit mode where icons
+ * can be reordered (drag), favorited into the dock, and — for manageable
+ * (dynamic developer) views — edited or deleted. Page order is persisted via
+ * the pure `springboard-layout` model. Favorites are
+ * controlled-optional: when `onToggleFavorite` is supplied the dock reflects the
+ * caller's `favoriteIds`; otherwise favorites are kept locally. Fully
+ * token-themed (light/dark + overrides) and renders no background of its own —
+ * the shared root `AppBackground` shows through, matching the home screen.
+ */
+import type { ViewEntry } from "../../hooks/view-catalog.js";
+export interface SpringboardProps {
+    entries: ViewEntry[];
+    loading?: boolean;
+    onLaunch: (entry: ViewEntry) => void;
+    onEdgeSwipeRight?: () => void;
+    /** When set, favorites are controlled by the caller (e.g. desktop tabs). */
+    favoriteIds?: string[];
+    onToggleFavorite?: (id: string) => void;
+    /** Per-tile management for dynamic views, shown in edit mode when allowed. */
+    canManageView?: (id: string) => boolean;
+    onEditView?: (id: string) => void;
+    onDeleteView?: (id: string) => void;
+    /**
+     * Controlled active page index. When provided the page is owned by the caller
+     * (the shell-surface store, via SpringboardSurface); when omitted it is local
+     * state so the component stays usable standalone (stories / isolated tests).
+     */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Fires with the rendered page count whenever it changes, so an outer surface
+     *  can size the unified page indicator. */
+    onPageCountChange?: (count: number) => void;
+    /** Controlled edit mode. When omitted, edit mode is local state. */
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * Render the inner per-page dots. Off when an outer surface (the rail) owns
+     * the single unified indicator — this is what prevents two stacked dot strips
+     * (#4). Defaults to true for standalone usage.
+     */
+    showPageDots?: boolean;
+    className?: string;
+}
+export declare function Springboard({ entries, loading, onLaunch, onEdgeSwipeRight, favoriteIds, onToggleFavorite, canManageView, onEditView, onDeleteView, page: pageProp, onPageChange, onPageCountChange, editing: editingProp, onEditingChange, showPageDots, className, }: SpringboardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Springboard.d.ts.map

package/components/pages/Springboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Springboard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/Springboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAc1D,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;+CAC2C;IAC3C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmKD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,OAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,2CA0SlB"}