@truefoundry/trueforge-ui 0.3.0-rc.0 → 0.3.0-rc.2

package/dist/{SkillSettings-3EPPC3IT.js → SkillSettings-64VXUO6J.js}

@@ -5,16 +5,18 @@ import {
   SearchInput_default,
   auiInputClass,
   useToasterOptional
-} from "./chunk-OSV3HI5M.js";
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
 import {
   Icon,
   getErrorMessage
-} from "./chunk-FJ5RSSMA.js";
+} from "./chunk-H6WTY5PM.js";
 import {
   useCatalogServer
-} from "./chunk-WQULF5AT.js";
-import "./chunk-B52K63AW.js";
-import "./chunk-36KOSC2J.js";
+} from "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
 
 // src/containers/SettingsBuilder/SkillSettings.tsx
 import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
@@ -153,7 +155,7 @@ var ImportGithubSkillForm = ({ open, onOpenChange, onImport, busy = false, error
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           error ? /* @__PURE__ */ jsx("p", { className: "text-failure-bg text-sm", children: error }) : null,
-          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canImport, className: "w-full", children: "Import" })
+          /* @__PURE__ */ jsx(Button.Primary, { type: "submit", disabled: !canImport, className: "w-full", children: "Import" })
         ] })
       ] }) })
     }
@@ -279,9 +281,8 @@ var SkillSettings = () => {
       /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
         /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx2(SearchInput_default, { query, setQuery, placeholder: "Search skills" }) }),
         /* @__PURE__ */ jsxs2(
-          Button,
+          Button.Secondary,
           {
-            variant: "secondary",
             type: "button",
             className: "shrink-0",
             disabled: busy,
@@ -316,10 +317,9 @@ var SkillSettings = () => {
               name: skill.name,
               description: skill.description,
               action: skillCatalog.deleteSkill ? /* @__PURE__ */ jsx2(
-                Button,
+                Button.Secondary,
                 {
-                  variant: "outline",
-                  size: "sm",
+                  size: "small",
                   type: "button",
                   disabled: busy,
                   "aria-label": `Remove ${skill.name}`,
@@ -350,10 +350,9 @@ var SkillSettings = () => {
               name: entry.name,
               description: entry.description,
               action: /* @__PURE__ */ jsx2(
-                Button,
+                Button.Secondary,
                 {
-                  variant: "outline",
-                  size: "sm",
+                  size: "small",
                   type: "button",
                   disabled: busy,
                   "aria-label": `Enable ${entry.name}`,
@@ -388,4 +387,4 @@ var SkillSettings_default = SkillSettings;
 export {
   SkillSettings_default as default
 };
-//# sourceMappingURL=SkillSettings-3EPPC3IT.js.map
+//# sourceMappingURL=SkillSettings-64VXUO6J.js.map

package/dist/SkillSettings-64VXUO6J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/containers/SettingsBuilder/SkillSettings.tsx","../src/containers/SettingsBuilder/ImportGithubSkillForm.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\n\nimport { Button } from '@/atoms/primitives/Button.js';\nimport SearchInput from '@/atoms/primitives/SearchInput.js';\nimport { Icon } from '@/icons/Icon.js';\nimport { useCatalogServer } from '../../server/ServerContext.js';\nimport type { RegistrySkill, SkillBase, SkillCatalogEntry, SkillConfigBase } from '../../server/types.js';\nimport { getErrorMessage } from '../../utils/getErrorMessage.js';\nimport { useToasterOptional } from '../ToasterContainer.js';\nimport ImportGithubSkillForm from './ImportGithubSkillForm.js';\n\nconst matchesQuery = (query: string, name: string, description: string) =>\n  !query || name.toLowerCase().includes(query) || description.toLowerCase().includes(query);\n\nconst isRegistrySkill = (skill: SkillBase): skill is RegistrySkill => 'catalogId' in skill;\n\nconst SkillSettings = () => {\n  const { skillCatalog } = useCatalogServer();\n  const toaster = useToasterOptional();\n\n  const [query, setQuery] = useState('');\n  const [skills, setSkills] = useState<SkillBase[]>([]);\n  const [catalog, setCatalog] = useState<SkillCatalogEntry[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [formError, setFormError] = useState<string | null>(null);\n  const [busy, setBusy] = useState(false);\n  const [importOpen, setImportOpen] = useState(false);\n\n  const refresh = useCallback(async () => {\n    if (!skillCatalog) return;\n    setLoading(true);\n    setError(null);\n    try {\n      const [defined, available] = await Promise.all([skillCatalog.listSkills(), skillCatalog.getSkillCatalog()]);\n      setSkills(defined);\n      setCatalog(available);\n    } catch (err) {\n      setError(getErrorMessage(err, 'Failed to load skills'));\n    } finally {\n      setLoading(false);\n    }\n  }, [skillCatalog]);\n\n  useEffect(() => {\n    void refresh();\n  }, [refresh]);\n\n  const normalizedQuery = query.trim().toLowerCase();\n\n  const selectedSkills = useMemo(\n    () => skills.filter(skill => matchesQuery(normalizedQuery, skill.name, skill.description)),\n    [skills, normalizedQuery],\n  );\n\n  const availableSkills = useMemo(() => {\n    const selectedCatalogIds = new Set(skills.flatMap(skill => (isRegistrySkill(skill) ? [skill.catalogId] : [])));\n    return catalog.filter(\n      entry => !selectedCatalogIds.has(entry.id) && matchesQuery(normalizedQuery, entry.name, entry.description),\n    );\n  }, [catalog, skills, normalizedQuery]);\n\n  const runMutation = async (fn: () => Promise<void>, setMutationError = setError) => {\n    setBusy(true);\n    setError(null);\n    try {\n      await fn();\n      await refresh();\n    } catch (err) {\n      setMutationError(getErrorMessage(err, 'Request failed'));\n      throw err;\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  if (!skillCatalog) {\n    return <p className=\"text-sm text-text-secondary\">Skills catalog is not available.</p>;\n  }\n\n  const handleSelect = (entry: SkillCatalogEntry) => {\n    void runMutation(async () => {\n      await skillCatalog.createSkill({\n        catalogId: entry.id,\n        name: entry.name,\n        description: entry.description,\n        repoURL: entry.repoURL,\n        path: entry.path,\n        ref: entry.ref,\n      });\n    }).catch(() => {});\n  };\n\n  const handleRemove = (skill: SkillBase) => {\n    const deleteSkill = skillCatalog.deleteSkill;\n    if (!deleteSkill) return;\n    void runMutation(async () => {\n      await deleteSkill({ id: skill.id });\n    }).catch(() => {});\n  };\n\n  const handleImport = async (draft: SkillConfigBase) => {\n    setFormError(null);\n    await runMutation(async () => {\n      await skillCatalog.createSkill(draft);\n    }, setFormError);\n    setTimeout(() => {\n      toaster?.showSuccess({ title: `${draft.name} imported` });\n    }, 0);\n  };\n\n  const renderRow = ({\n    key,\n    name,\n    description,\n    action,\n  }: {\n    key: string;\n    name: string;\n    description: string;\n    action: ReactNode;\n  }) => (\n    <article key={key} className=\"flex min-h-16 items-center gap-3 border-b border-border p-3 last:border-b-0\">\n      <span\n        className=\"flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-secondary-bg\"\n        aria-hidden\n      >\n        <Icon name=\"lightbulb\" className=\"size-4.5 text-text-primary\" />\n      </span>\n\n      <div className=\"min-w-0 flex-1\">\n        <h5 className=\"truncate text-sm font-medium text-text-primary\">{name}</h5>\n        {description ? <p className=\"mt-0.5 truncate text-sm text-text-secondary\">{description}</p> : null}\n      </div>\n\n      {action}\n    </article>\n  );\n\n  const hasMatches = selectedSkills.length > 0 || availableSkills.length > 0;\n\n  return (\n    <>\n      <h3 className=\"text-xl font-semibold tracking-tight text-text-primary\">Skills</h3>\n      <p className=\"mt-1 text-sm text-text-secondary\">Use built-in skills or import custom skills from GitHub.</p>\n\n      {error ? (\n        <p className=\"mt-3 rounded-md border border-failure-bg/30 bg-failure-bg/10 px-3 py-2 text-sm text-failure-bg\">\n          {error}\n        </p>\n      ) : null}\n\n      <div className=\"mt-4 flex min-h-0 flex-1 flex-col gap-3\">\n        <div className=\"flex flex-col gap-2 sm:flex-row\">\n          <div className=\"min-w-0 flex-1\">\n            <SearchInput query={query} setQuery={setQuery} placeholder=\"Search skills\" />\n          </div>\n          <Button.Secondary\n            type=\"button\"\n            className=\"shrink-0\"\n            disabled={busy}\n            onClick={() => {\n              setFormError(null);\n              setImportOpen(true);\n            }}\n          >\n            <Icon name=\"github\" className=\"size-4\" />\n            Import from GitHub\n          </Button.Secondary>\n        </div>\n\n        <div className=\"flex flex-1 flex-col gap-5 overflow-y-auto pb-1\">\n          {loading ? <p className=\"py-8 text-center text-sm text-text-secondary\">Loading…</p> : null}\n\n          {!loading && selectedSkills.length > 0 ? (\n            <section aria-labelledby=\"enabled-skills-heading\">\n              <h4\n                id=\"enabled-skills-heading\"\n                className=\"mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary\"\n              >\n                Enabled · {selectedSkills.length}\n              </h4>\n              <div className=\"overflow-hidden rounded-xl border border-border bg-card-bg\">\n                {selectedSkills.map(skill =>\n                  renderRow({\n                    key: skill.id,\n                    name: skill.name,\n                    description: skill.description,\n                    action: skillCatalog.deleteSkill ? (\n                      <Button.Secondary\n                        size=\"small\"\n                        type=\"button\"\n                        disabled={busy}\n                        aria-label={`Remove ${skill.name}`}\n                        onClick={() => {\n                          handleRemove(skill);\n                        }}\n                      >\n                        Remove\n                      </Button.Secondary>\n                    ) : null,\n                  }),\n                )}\n              </div>\n            </section>\n          ) : null}\n\n          {!loading && availableSkills.length > 0 ? (\n            <section aria-labelledby=\"available-skills-heading\">\n              <h4\n                id=\"available-skills-heading\"\n                className=\"mb-2 text-[0.8125rem] font-semibold uppercase text-text-secondary\"\n              >\n                Available · {availableSkills.length}\n              </h4>\n              <div className=\"overflow-hidden rounded-xl border border-border bg-card-bg\">\n                {availableSkills.map(entry =>\n                  renderRow({\n                    key: entry.id,\n                    name: entry.name,\n                    description: entry.description,\n                    action: (\n                      <Button.Secondary\n                        size=\"small\"\n                        type=\"button\"\n                        disabled={busy}\n                        aria-label={`Enable ${entry.name}`}\n                        onClick={() => {\n                          handleSelect(entry);\n                        }}\n                      >\n                        Enable\n                      </Button.Secondary>\n                    ),\n                  }),\n                )}\n              </div>\n            </section>\n          ) : null}\n\n          {!loading && !hasMatches ? (\n            <div className=\"flex flex-1 items-center justify-center rounded-xl border border-dashed border-border p-8 text-center text-sm text-text-secondary\">\n              {normalizedQuery ? `No skills match “${query.trim()}”.` : 'No skills yet.'}\n            </div>\n          ) : null}\n        </div>\n      </div>\n\n      <ImportGithubSkillForm\n        open={importOpen}\n        onOpenChange={open => {\n          setImportOpen(open);\n          if (!open) setFormError(null);\n        }}\n        onImport={handleImport}\n        busy={busy}\n        error={formError}\n      />\n    </>\n  );\n};\n\nexport default SkillSettings;\n","'use client';\n\nimport { useState, type SyntheticEvent } from 'react';\n\nimport { auiInputClass } from '@/atoms/lib/inputClasses.js';\nimport { Button } from '@/atoms/primitives/Button.js';\nimport { CenteredModal } from '@/atoms/primitives/CenteredModal.js';\nimport { Icon } from '@/icons/Icon.js';\nimport type { SkillConfigBase } from '../../server/types.js';\n\ntype ImportGithubSkillFormProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onImport: (draft: SkillConfigBase) => void | Promise<void>;\n  busy?: boolean;\n  error?: string | null;\n};\n\nconst ImportGithubSkillForm = ({ open, onOpenChange, onImport, busy = false, error }: ImportGithubSkillFormProps) => {\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [repoURL, setRepoURL] = useState('');\n  const [path, setPath] = useState('');\n  const [ref, setRef] = useState('');\n\n  const reset = () => {\n    setName('');\n    setDescription('');\n    setRepoURL('');\n    setPath('');\n    setRef('');\n  };\n\n  const close = () => {\n    reset();\n    onOpenChange(false);\n  };\n\n  const handleSubmit = async (event: SyntheticEvent<HTMLFormElement, SubmitEvent>) => {\n    event.preventDefault();\n    if (!name.trim() || !description.trim() || !repoURL.trim() || !path.trim() || !ref.trim() || busy) return;\n\n    try {\n      await onImport({\n        name: name.trim(),\n        description: description.trim(),\n        repoURL: repoURL.trim(),\n        path: path.trim(),\n        ref: ref.trim(),\n      });\n      close();\n    } catch {\n      // Parent surfaces error; keep form open.\n    }\n  };\n\n  const canImport = Boolean(name.trim() && description.trim() && repoURL.trim() && path.trim() && ref.trim()) && !busy;\n\n  return (\n    <CenteredModal\n      open={open}\n      onOpenChange={nextOpen => {\n        if (!nextOpen) close();\n      }}\n      title=\"Import from GitHub\"\n      description=\"Import a skill from a SKILL.md file in a GitHub repository.\"\n      headerIcon={\n        <span className=\"flex size-11 shrink-0 items-center justify-center rounded-lg border border-border bg-secondary-bg text-text-primary\">\n          <Icon name=\"github\" className=\"size-5\" />\n        </span>\n      }\n      contentSized\n      className=\"md:max-w-2xl\"\n    >\n      <form onSubmit={e => void handleSubmit(e)}>\n        <div className=\"space-y-5 px-5 py-5 md:px-6\">\n          <div>\n            <label htmlFor=\"skill-name\" className=\"mb-2 block text-sm font-semibold text-text-primary\">\n              Name\n            </label>\n            <input\n              id=\"skill-name\"\n              value={name}\n              onChange={event => {\n                setName(event.target.value);\n              }}\n              placeholder=\"release-notes\"\n              autoFocus\n              required\n              className={auiInputClass('h-11')}\n            />\n          </div>\n\n          <div>\n            <label htmlFor=\"skill-description\" className=\"mb-2 block text-sm font-semibold text-text-primary\">\n              Description\n            </label>\n            <textarea\n              id=\"skill-description\"\n              value={description}\n              onChange={event => {\n                setDescription(event.target.value);\n              }}\n              placeholder=\"Generate release notes from merged pull requests\"\n              required\n              rows={3}\n              className={auiInputClass('resize-y py-2.5')}\n            />\n          </div>\n\n          <div>\n            <label htmlFor=\"skill-repo-url\" className=\"mb-2 block text-sm font-semibold text-text-primary\">\n              Repository URL\n            </label>\n            <input\n              id=\"skill-repo-url\"\n              type=\"url\"\n              value={repoURL}\n              onChange={event => {\n                setRepoURL(event.target.value);\n              }}\n              placeholder=\"https://github.com/org/repo\"\n              required\n              className={auiInputClass('h-11')}\n            />\n          </div>\n\n          <div>\n            <label htmlFor=\"skill-path\" className=\"mb-2 block text-sm font-semibold text-text-primary\">\n              Folder containing the SKILL.md\n            </label>\n            <input\n              id=\"skill-path\"\n              value={path}\n              onChange={event => {\n                setPath(event.target.value);\n              }}\n              placeholder=\"skills/release-notes\"\n              required\n              className={auiInputClass('h-11')}\n            />\n          </div>\n\n          <div>\n            <label htmlFor=\"skill-ref\" className=\"mb-2 block text-sm font-semibold text-text-primary\">\n              Branch\n            </label>\n            <input\n              id=\"skill-ref\"\n              value={ref}\n              onChange={event => {\n                setRef(event.target.value);\n              }}\n              placeholder=\"main\"\n              required\n              className={auiInputClass('h-11')}\n            />\n          </div>\n\n          <div className=\"space-y-3\">\n            {error ? <p className=\"text-failure-bg text-sm\">{error}</p> : null}\n            <Button.Primary type=\"submit\" disabled={!canImport} className=\"w-full\">\n              Import\n            </Button.Primary>\n          </div>\n        </div>\n      </form>\n    </CenteredModal>\n  );\n};\n\nexport default ImportGithubSkillForm;\n"],"mappings":"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","names":["useState","jsx","jsxs","useState"]}

package/dist/{TrueForgeUIWithRouter-NZ4FGPE4.js → TrueForgeUIWithRouter-3TSLV22Q.js}

@@ -1,17 +1,21 @@
 "use client";
-import {
-  resolveRoutesConfig
-} from "./chunk-YIWUG6MC.js";
 import {
   TrueForgeUIShell
-} from "./chunk-WREC7D54.js";
+} from "./chunk-LGRHHFHN.js";
+import "./chunk-DJUFS2BW.js";
 import "./chunk-BSIPI3KV.js";
+import {
+  resolveRoutesConfig
+} from "./chunk-SQGT43Z3.js";
+import "./chunk-Y6S4OVVQ.js";
+import "./chunk-RDXBMTP5.js";
+import "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-OSV3HI5M.js";
-import "./chunk-FJ5RSSMA.js";
-import "./chunk-WQULF5AT.js";
-import "./chunk-B52K63AW.js";
-import "./chunk-36KOSC2J.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
 
 // src/containers/TrueForgeUIWithRouter.tsx
 import { useMemo } from "react";
@@ -27,4 +31,4 @@ function TrueForgeUIWithRouter({
 export {
   TrueForgeUIWithRouter
 };
-//# sourceMappingURL=TrueForgeUIWithRouter-NZ4FGPE4.js.map
+//# sourceMappingURL=TrueForgeUIWithRouter-3TSLV22Q.js.map

package/dist/{TrueForgeUIWithRouter-NZ4FGPE4.js.map → TrueForgeUIWithRouter-3TSLV22Q.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/containers/TrueForgeUIWithRouter.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type ComponentProps } from 'react';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport { resolveRoutesConfig } from '../routing/paths.js';\nimport { TrueForgeUIShell } from './TrueForgeUIShell.js';\n\n/**\n * `withRouter` entry point. Owns a `BrowserRouter` and hands the resolved route\n * templates to the shell, which mounts `ShellRouteSync`. This module statically\n * imports react-router and is only loaded lazily from `TrueForgeUI`.\n */\nexport function TrueForgeUIWithRouter({\n  routes,\n  ...rest\n}: Omit<ComponentProps<typeof TrueForgeUIShell>, 'resolvedRoutes'>) {\n  const resolved = useMemo(() => resolveRoutesConfig(routes), [routes]);\n  return (\n    <BrowserRouter basename={resolved.basename || undefined}>\n      <TrueForgeUIShell {...rest} resolvedRoutes={resolved} />\n    </BrowserRouter>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,qBAAqB;AAiBxB;AAPC,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAAoE;AAClE,QAAM,WAAW,QAAQ,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AACpE,SACE,oBAAC,iBAAc,UAAU,SAAS,YAAY,QAC5C,8BAAC,oBAAkB,GAAG,MAAM,gBAAgB,UAAU,GACxD;AAEJ;","names":[]}
+{"version":3,"sources":["../src/containers/TrueForgeUIWithRouter.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, type ComponentProps } from 'react';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport { resolveRoutesConfig } from '../routing/paths.js';\nimport { TrueForgeUIShell } from './TrueForgeUIShell.js';\n\n/**\n * `withRouter` entry point. Owns a `BrowserRouter` and hands the resolved route\n * templates to the shell, which mounts `ShellRouteSync`. This module statically\n * imports react-router and is only loaded lazily from `TrueForgeUI`.\n */\nexport function TrueForgeUIWithRouter({\n  routes,\n  ...rest\n}: Omit<ComponentProps<typeof TrueForgeUIShell>, 'resolvedRoutes'>) {\n  const resolved = useMemo(() => resolveRoutesConfig(routes), [routes]);\n  return (\n    <BrowserRouter basename={resolved.basename || undefined}>\n      <TrueForgeUIShell {...rest} resolvedRoutes={resolved} />\n    </BrowserRouter>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,qBAAqB;AAiBxB;AAPC,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAAoE;AAClE,QAAM,WAAW,QAAQ,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AACpE,SACE,oBAAC,iBAAc,UAAU,SAAS,YAAY,QAC5C,8BAAC,oBAAkB,GAAG,MAAM,gBAAgB,UAAU,GACxD;AAEJ;","names":[]}

package/dist/{WidgetLayout-3QZ357FL.js → WidgetLayout-Q5P7PYSJ.js}

@@ -1,31 +1,35 @@
 "use client";
 import {
   StackChatPanel
-} from "./chunk-7L63OK3O.js";
-import "./chunk-ZXOADNF3.js";
-import "./chunk-3S6KHO7H.js";
+} from "./chunk-I3AL54MA.js";
+import "./chunk-VUMGMGKZ.js";
+import "./chunk-G2TUAD65.js";
+import {
+  useWidgetVisibility
+} from "./chunk-DJUFS2BW.js";
 import "./chunk-BSIPI3KV.js";
-import "./chunk-M6MHLVSO.js";
 import {
   useSlot
-} from "./chunk-OSV3HI5M.js";
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
 import {
   CompactLayoutProvider,
   Icon,
   auiButtonClass
-} from "./chunk-FJ5RSSMA.js";
-import "./chunk-WQULF5AT.js";
-import "./chunk-B52K63AW.js";
+} from "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
 import {
   cn
-} from "./chunk-36KOSC2J.js";
+} from "./chunk-BWHOZFIV.js";
 
 // src/layouts/WidgetLayout.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function WidgetLayout({ className }) {
   const BrandLogo = useSlot("BrandLogo");
-  const [open, setOpen] = useState(false);
+  const { open, setOpen } = useWidgetVisibility();
   const fabRef = useRef(null);
   const dialogRef = useRef(null);
   const wasOpen = useRef(false);
@@ -38,7 +42,7 @@ function WidgetLayout({ className }) {
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open]);
+  }, [open, setOpen]);
   useEffect(() => {
     if (open) {
       wasOpen.current = true;
@@ -100,4 +104,4 @@ function WidgetLayout({ className }) {
 export {
   WidgetLayout
 };
-//# sourceMappingURL=WidgetLayout-3QZ357FL.js.map
+//# sourceMappingURL=WidgetLayout-Q5P7PYSJ.js.map

package/dist/WidgetLayout-Q5P7PYSJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layouts/WidgetLayout.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\nimport { auiButtonClass } from '../atoms/lib/buttonClasses.js';\nimport { cn } from '../atoms/lib/cn.js';\nimport { CompactLayoutProvider } from '../atoms/lib/CompactLayoutContext.js';\nimport { Icon } from '../icons/Icon.js';\nimport { useSlot } from '../theme/SlotsProvider.js';\nimport { StackChatPanel } from './StackChatPanel.js';\nimport { useWidgetVisibility } from './WidgetVisibilityContext.js';\n\n/** FAB-anchored panel with the same list ↔ thread stack as `dock`. */\nexport function WidgetLayout({ className }: { className?: string }) {\n  const BrandLogo = useSlot('BrandLogo');\n  const { open, setOpen } = useWidgetVisibility();\n  const fabRef = useRef<HTMLButtonElement>(null);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const wasOpen = useRef(false);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && !dialogRef.current?.querySelector('dialog[open]')) {\n        setOpen(false);\n      }\n    };\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [open, setOpen]);\n\n  useEffect(() => {\n    if (open) {\n      wasOpen.current = true;\n      dialogRef.current?.focus();\n      return;\n    }\n    if (wasOpen.current) {\n      fabRef.current?.focus();\n      wasOpen.current = false;\n    }\n  }, [open]);\n\n  return (\n    <div className={cn('pointer-events-none relative h-full min-h-0 w-full', className)}>\n      {open ? (\n        <div\n          ref={dialogRef}\n          data-aui-compact-layout\n          className=\"pointer-events-auto absolute right-[max(1.25rem,env(safe-area-inset-right,0px))] bottom-[calc(5.25rem+env(safe-area-inset-bottom,0px))] z-[19] flex h-[min(560px,calc(100%-6.5rem-env(safe-area-inset-bottom,0px)))] max-h-[calc(100%-6.5rem)] w-[min(380px,calc(100%-2.5rem))] flex-col overflow-hidden rounded-xl border border-border bg-primary-bg shadow-[0_16px_48px_color-mix(in_oklab,var(--shadow-color)_14%,transparent)] outline-none\"\n          role=\"dialog\"\n          aria-modal={true}\n          aria-label=\"Chat\"\n          tabIndex={-1}\n        >\n          <CompactLayoutProvider>\n            <StackChatPanel\n              threadHeaderEnd={\n                <button\n                  type=\"button\"\n                  aria-label=\"Close\"\n                  title=\"Close\"\n                  className={auiButtonClass({ variant: 'ghost', size: 'icon' })}\n                  onClick={() => setOpen(false)}\n                >\n                  <Icon name=\"xmark\" />\n                </button>\n              }\n            />\n          </CompactLayoutProvider>\n        </div>\n      ) : null}\n      {/* Native FAB: inline colors beat host unlayered Tailwind (SDK utilities are layered). */}\n      <button\n        ref={fabRef}\n        type=\"button\"\n        className=\"pointer-events-auto absolute right-[max(1.25rem,env(safe-area-inset-right,0px))] bottom-[max(1.25rem,env(safe-area-inset-bottom,0px))] z-20 flex size-14 cursor-pointer items-center justify-center rounded-full text-sm font-medium shadow-[0_8px_24px_color-mix(in_oklab,var(--primary-button-bg)_45%,transparent)]\"\n        style={{\n          backgroundColor: 'var(--primary-button-bg)',\n          color: 'var(--primary-button-text)',\n        }}\n        aria-expanded={open}\n        aria-label={open ? 'Close chat' : 'Open chat'}\n        onClick={() => setOpen(v => !v)}\n      >\n        {open ? (\n          <span aria-hidden className=\"text-xl leading-none\">\n            ×\n          </span>\n        ) : (\n          <BrandLogo variant=\"icon\" className=\"size-6\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,WAAW,cAAc;AA0C9B,SAqBc,KArBd;AA/BG,SAAS,aAAa,EAAE,UAAU,GAA2B;AAClE,QAAM,YAAY,QAAQ,WAAW;AACrC,QAAM,EAAE,MAAM,QAAQ,IAAI,oBAAoB;AAC9C,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,OAAO,KAAK;AAE5B,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,YAAY,CAAC,UAAU,SAAS,cAAc,cAAc,GAAG;AAC/E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,YAAU,MAAM;AACd,QAAI,MAAM;AACR,cAAQ,UAAU;AAClB,gBAAU,SAAS,MAAM;AACzB;AAAA,IACF;AACA,QAAI,QAAQ,SAAS;AACnB,aAAO,SAAS,MAAM;AACtB,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,qBAAC,SAAI,WAAW,GAAG,sDAAsD,SAAS,GAC/E;AAAA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,2BAAuB;AAAA,QACvB,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,8BAAC,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,iBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,OAAM;AAAA,gBACN,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,OAAO,CAAC;AAAA,gBAC5D,SAAS,MAAM,QAAQ,KAAK;AAAA,gBAE5B,8BAAC,QAAK,MAAK,SAAQ;AAAA;AAAA,YACrB;AAAA;AAAA,QAEJ,GACF;AAAA;AAAA,IACF,IACE;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,OAAO;AAAA,QACT;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,OAAO,eAAe;AAAA,QAClC,SAAS,MAAM,QAAQ,OAAK,CAAC,CAAC;AAAA,QAE7B,iBACC,oBAAC,UAAK,eAAW,MAAC,WAAU,wBAAuB,kBAEnD,IAEA,oBAAC,aAAU,SAAQ,QAAO,WAAU,UAAS;AAAA;AAAA,IAEjD;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-5I2COQNL.js

@@ -0,0 +1,119 @@
+import {
+  formatCostUsd,
+  formatDurationMs,
+  useThemeMode
+} from "./chunk-YQO2NMJ3.js";
+
+// src/atoms/agent-details/AgentMetricChart.tsx
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import { useMemo } from "react";
+import { Line } from "react-chartjs-2";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Legend, Tooltip);
+var LIGHT_COLORS = ["#2563eb", "#16a34a", "#9333ea", "#ea580c", "#0891b2"];
+var DARK_COLORS = ["#60a5fa", "#4ade80", "#c084fc", "#fb923c", "#22d3ee"];
+var numberFormatter = new Intl.NumberFormat(void 0, { maximumFractionDigits: 4 });
+var timestampFormatter = new Intl.DateTimeFormat(void 0, {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit"
+});
+function formatValue(value, unit) {
+  if (unit === "$") return formatCostUsd(value);
+  if (unit === "ms") return formatDurationMs(value);
+  return `${numberFormatter.format(value)}${unit === "count" || unit.length === 0 ? "" : ` ${unit}`}`;
+}
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return Number.isNaN(date.getTime()) ? timestamp : timestampFormatter.format(date);
+}
+function AgentMetricChart({ graph, definition, error }) {
+  const mode = useThemeMode();
+  const colors = mode === "dark" ? DARK_COLORS : LIGHT_COLORS;
+  const axisColor = mode === "dark" ? "#a1a1aa" : "#71717a";
+  const gridColor = mode === "dark" ? "#27272a" : "#e4e4e7";
+  const labels = useMemo(
+    () => graph == null ? [] : [...new Set(graph.graphLines.flatMap((line) => line.values.map((point) => point.timestamp)))].sort(),
+    [graph]
+  );
+  const data = useMemo(
+    () => ({
+      labels: labels.map(formatTimestamp),
+      datasets: graph?.graphLines.map((line, index) => {
+        const valuesByTimestamp = new Map(line.values.map((point) => [point.timestamp, point.value]));
+        const color = colors[index % colors.length];
+        return {
+          label: line.name,
+          data: labels.map((timestamp) => valuesByTimestamp.get(timestamp) ?? null),
+          borderColor: color,
+          backgroundColor: color,
+          pointRadius: 2,
+          pointHoverRadius: 4,
+          borderWidth: 2,
+          tension: 0.25,
+          spanGaps: true
+        };
+      }) ?? []
+    }),
+    [colors, graph, labels]
+  );
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      interaction: { intersect: false, mode: "index" },
+      plugins: {
+        legend: {
+          display: (graph?.graphLines.length ?? 0) > 1,
+          labels: { color: axisColor, boxWidth: 10, boxHeight: 2 }
+        },
+        tooltip: {
+          callbacks: {
+            label: (context) => {
+              const value = context.parsed.y;
+              return `${context.dataset.label ?? ""}: ${value == null ? "\u2014" : formatValue(value, graph?.unit ?? "")}`;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: { display: false },
+          border: { color: gridColor },
+          ticks: { color: axisColor, maxRotation: 0, autoSkip: true, maxTicksLimit: 8 }
+        },
+        y: {
+          beginAtZero: true,
+          grid: { color: gridColor },
+          border: { display: false },
+          ticks: {
+            color: axisColor,
+            callback: (value) => formatValue(Number(value), graph?.unit ?? "")
+          }
+        }
+      }
+    }),
+    [axisColor, graph, gridColor]
+  );
+  const hasData = graph?.graphLines.some((line) => line.values.length > 0) === true;
+  return /* @__PURE__ */ jsxs("section", { className: "min-w-0 rounded-lg border border-border bg-card-bg p-4", "data-slot": "agent-metric-chart", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-text-primary", children: graph?.displayName ?? definition.displayName }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-text-secondary", children: graph?.description ?? definition.description }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 h-64", children: error != null ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-failure-bg", children: error }) : hasData ? /* @__PURE__ */ jsx(Line, { data, options }) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-text-secondary", children: "No data" }) })
+  ] });
+}
+
+export {
+  AgentMetricChart
+};
+//# sourceMappingURL=chunk-5I2COQNL.js.map

package/dist/chunk-5I2COQNL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentMetricChart.tsx"],"sourcesContent":["'use client';\n\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Tooltip,\n  type ChartData,\n  type ChartOptions,\n} from 'chart.js';\nimport { useMemo, type ComponentType } from 'react';\nimport { Line } from 'react-chartjs-2';\n\nimport { useThemeMode } from '../../theme/SlotsProvider.js';\nimport { formatCostUsd, formatDurationMs } from '../../utils/sessionDisplayFormat.js';\nimport type { AgentMetricChartProps } from './types.js';\n\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Legend, Tooltip);\n\nconst LIGHT_COLORS = ['#2563eb', '#16a34a', '#9333ea', '#ea580c', '#0891b2'];\nconst DARK_COLORS = ['#60a5fa', '#4ade80', '#c084fc', '#fb923c', '#22d3ee'];\nconst numberFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 });\nconst timestampFormatter = new Intl.DateTimeFormat(undefined, {\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n});\n\nfunction formatValue(value: number, unit: string): string {\n  if (unit === '$') return formatCostUsd(value);\n  if (unit === 'ms') return formatDurationMs(value);\n  return `${numberFormatter.format(value)}${unit === 'count' || unit.length === 0 ? '' : ` ${unit}`}`;\n}\n\nfunction formatTimestamp(timestamp: string): string {\n  const date = new Date(timestamp);\n  return Number.isNaN(date.getTime()) ? timestamp : timestampFormatter.format(date);\n}\n\nexport function AgentMetricChart({ graph, definition, error }: AgentMetricChartProps) {\n  const mode = useThemeMode();\n  const colors = mode === 'dark' ? DARK_COLORS : LIGHT_COLORS;\n  const axisColor = mode === 'dark' ? '#a1a1aa' : '#71717a';\n  const gridColor = mode === 'dark' ? '#27272a' : '#e4e4e7';\n  const labels = useMemo(\n    () =>\n      graph == null\n        ? []\n        : [...new Set(graph.graphLines.flatMap(line => line.values.map(point => point.timestamp)))].sort(),\n    [graph],\n  );\n  const data = useMemo<ChartData<'line', Array<number | null>, string>>(\n    () => ({\n      labels: labels.map(formatTimestamp),\n      datasets:\n        graph?.graphLines.map((line, index) => {\n          const valuesByTimestamp = new Map(line.values.map(point => [point.timestamp, point.value]));\n          const color = colors[index % colors.length];\n          return {\n            label: line.name,\n            data: labels.map(timestamp => valuesByTimestamp.get(timestamp) ?? null),\n            borderColor: color,\n            backgroundColor: color,\n            pointRadius: 2,\n            pointHoverRadius: 4,\n            borderWidth: 2,\n            tension: 0.25,\n            spanGaps: true,\n          };\n        }) ?? [],\n    }),\n    [colors, graph, labels],\n  );\n  const options = useMemo<ChartOptions<'line'>>(\n    () => ({\n      responsive: true,\n      maintainAspectRatio: false,\n      animation: false,\n      interaction: { intersect: false, mode: 'index' },\n      plugins: {\n        legend: {\n          display: (graph?.graphLines.length ?? 0) > 1,\n          labels: { color: axisColor, boxWidth: 10, boxHeight: 2 },\n        },\n        tooltip: {\n          callbacks: {\n            label: context => {\n              const value = context.parsed.y;\n              return `${context.dataset.label ?? ''}: ${value == null ? '—' : formatValue(value, graph?.unit ?? '')}`;\n            },\n          },\n        },\n      },\n      scales: {\n        x: {\n          grid: { display: false },\n          border: { color: gridColor },\n          ticks: { color: axisColor, maxRotation: 0, autoSkip: true, maxTicksLimit: 8 },\n        },\n        y: {\n          beginAtZero: true,\n          grid: { color: gridColor },\n          border: { display: false },\n          ticks: {\n            color: axisColor,\n            callback: value => formatValue(Number(value), graph?.unit ?? ''),\n          },\n        },\n      },\n    }),\n    [axisColor, graph, gridColor],\n  );\n  const hasData = graph?.graphLines.some(line => line.values.length > 0) === true;\n\n  return (\n    <section className=\"min-w-0 rounded-lg border border-border bg-card-bg p-4\" data-slot=\"agent-metric-chart\">\n      <h3 className=\"text-sm font-semibold text-text-primary\">{graph?.displayName ?? definition.displayName}</h3>\n      <p className=\"mt-1 text-xs text-text-secondary\">{graph?.description ?? definition.description}</p>\n      <div className=\"mt-4 h-64\">\n        {error != null ? (\n          <div className=\"flex h-full items-center justify-center text-sm text-failure-bg\">{error}</div>\n        ) : hasData ? (\n          <Line data={data} options={options} />\n        ) : (\n          <div className=\"flex h-full items-center justify-center text-sm text-text-secondary\">No data</div>\n        )}\n      </div>\n    </section>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentMetricChart: ComponentType<AgentMetricChartProps>;\n  }\n}\n"],"mappings":";;;;;;;AAEA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAmC;AAC5C,SAAS,YAAY;AAyGjB,SACE,KADF;AAnGJ,QAAQ,SAAS,eAAe,aAAa,aAAa,cAAc,QAAQ,OAAO;AAEvF,IAAM,eAAe,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAC3E,IAAM,cAAc,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAC1E,IAAM,kBAAkB,IAAI,KAAK,aAAa,QAAW,EAAE,uBAAuB,EAAE,CAAC;AACrF,IAAM,qBAAqB,IAAI,KAAK,eAAe,QAAW;AAAA,EAC5D,OAAO;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAED,SAAS,YAAY,OAAe,MAAsB;AACxD,MAAI,SAAS,IAAK,QAAO,cAAc,KAAK;AAC5C,MAAI,SAAS,KAAM,QAAO,iBAAiB,KAAK;AAChD,SAAO,GAAG,gBAAgB,OAAO,KAAK,CAAC,GAAG,SAAS,WAAW,KAAK,WAAW,IAAI,KAAK,IAAI,IAAI,EAAE;AACnG;AAEA,SAAS,gBAAgB,WAA2B;AAClD,QAAM,OAAO,IAAI,KAAK,SAAS;AAC/B,SAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAAI,YAAY,mBAAmB,OAAO,IAAI;AAClF;AAEO,SAAS,iBAAiB,EAAE,OAAO,YAAY,MAAM,GAA0B;AACpF,QAAM,OAAO,aAAa;AAC1B,QAAM,SAAS,SAAS,SAAS,cAAc;AAC/C,QAAM,YAAY,SAAS,SAAS,YAAY;AAChD,QAAM,YAAY,SAAS,SAAS,YAAY;AAChD,QAAM,SAAS;AAAA,IACb,MACE,SAAS,OACL,CAAC,IACD,CAAC,GAAG,IAAI,IAAI,MAAM,WAAW,QAAQ,UAAQ,KAAK,OAAO,IAAI,WAAS,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK;AAAA,IACrG,CAAC,KAAK;AAAA,EACR;AACA,QAAM,OAAO;AAAA,IACX,OAAO;AAAA,MACL,QAAQ,OAAO,IAAI,eAAe;AAAA,MAClC,UACE,OAAO,WAAW,IAAI,CAAC,MAAM,UAAU;AACrC,cAAM,oBAAoB,IAAI,IAAI,KAAK,OAAO,IAAI,WAAS,CAAC,MAAM,WAAW,MAAM,KAAK,CAAC,CAAC;AAC1F,cAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAC1C,eAAO;AAAA,UACL,OAAO,KAAK;AAAA,UACZ,MAAM,OAAO,IAAI,eAAa,kBAAkB,IAAI,SAAS,KAAK,IAAI;AAAA,UACtE,aAAa;AAAA,UACb,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,kBAAkB;AAAA,UAClB,aAAa;AAAA,UACb,SAAS;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,MACF,CAAC,KAAK,CAAC;AAAA,IACX;AAAA,IACA,CAAC,QAAQ,OAAO,MAAM;AAAA,EACxB;AACA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,qBAAqB;AAAA,MACrB,WAAW;AAAA,MACX,aAAa,EAAE,WAAW,OAAO,MAAM,QAAQ;AAAA,MAC/C,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,UAAU,OAAO,WAAW,UAAU,KAAK;AAAA,UAC3C,QAAQ,EAAE,OAAO,WAAW,UAAU,IAAI,WAAW,EAAE;AAAA,QACzD;AAAA,QACA,SAAS;AAAA,UACP,WAAW;AAAA,YACT,OAAO,aAAW;AAChB,oBAAM,QAAQ,QAAQ,OAAO;AAC7B,qBAAO,GAAG,QAAQ,QAAQ,SAAS,EAAE,KAAK,SAAS,OAAO,WAAM,YAAY,OAAO,OAAO,QAAQ,EAAE,CAAC;AAAA,YACvG;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,GAAG;AAAA,UACD,MAAM,EAAE,SAAS,MAAM;AAAA,UACvB,QAAQ,EAAE,OAAO,UAAU;AAAA,UAC3B,OAAO,EAAE,OAAO,WAAW,aAAa,GAAG,UAAU,MAAM,eAAe,EAAE;AAAA,QAC9E;AAAA,QACA,GAAG;AAAA,UACD,aAAa;AAAA,UACb,MAAM,EAAE,OAAO,UAAU;AAAA,UACzB,QAAQ,EAAE,SAAS,MAAM;AAAA,UACzB,OAAO;AAAA,YACL,OAAO;AAAA,YACP,UAAU,WAAS,YAAY,OAAO,KAAK,GAAG,OAAO,QAAQ,EAAE;AAAA,UACjE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,OAAO,SAAS;AAAA,EAC9B;AACA,QAAM,UAAU,OAAO,WAAW,KAAK,UAAQ,KAAK,OAAO,SAAS,CAAC,MAAM;AAE3E,SACE,qBAAC,aAAQ,WAAU,0DAAyD,aAAU,sBACpF;AAAA,wBAAC,QAAG,WAAU,2CAA2C,iBAAO,eAAe,WAAW,aAAY;AAAA,IACtG,oBAAC,OAAE,WAAU,oCAAoC,iBAAO,eAAe,WAAW,aAAY;AAAA,IAC9F,oBAAC,SAAI,WAAU,aACZ,mBAAS,OACR,oBAAC,SAAI,WAAU,mEAAmE,iBAAM,IACtF,UACF,oBAAC,QAAK,MAAY,SAAkB,IAEpC,oBAAC,SAAI,WAAU,uEAAsE,qBAAO,GAEhG;AAAA,KACF;AAEJ;","names":[]}