@smarter.sh/ui-widgets 0.36.0-alpha.4 → 0.36.0-alpha.5

package/dist/types/components/ResourceTree/Component.d.ts

@@ -0,0 +1,15 @@
+import "./styles.css";
+import { type NodeId } from "./tree";
+import type { ResourceTreeNode } from "./types";
+export interface ResourceTreeProps {
+    tree: ResourceTreeNode;
+    /** The ids of the resources whose children are hidden, for a controlled tree. */
+    collapsed?: ReadonlySet<NodeId>;
+    /** Hides or shows a resource's children, for a controlled tree. */
+    onToggle?: (id: NodeId) => void;
+    /** The tree's accessible name. */
+    label?: string;
+    /** For a tree that isn't controlled: whether it opens with every resource's children hidden, but the root's. */
+    defaultCollapsed?: boolean;
+}
+export default function ResourceTree({ tree, collapsed, onToggle, label, defaultCollapsed, }: ResourceTreeProps): import("react").JSX.Element;

package/dist/types/components/ResourceTree/ResourceCard.d.ts

@@ -0,0 +1,8 @@
+import type { ResourceTreeNode } from "./types";
+interface ResourceCardProps {
+    node: ResourceTreeNode;
+    /** The LLMClient itself, at the root of the tree, whose card stands out. */
+    isRoot?: boolean;
+}
+export default function ResourceCard({ node, isRoot }: ResourceCardProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ResourceTree/kinds.d.ts

@@ -0,0 +1,20 @@
+/** The documentation that the cards link to. */
+export declare const DOCS = "https://docs.smarter.sh/en/latest";
+/** A Bootstrap color of the web console's theme, for a kind's icon and the accent of its card. */
+export type Tone = "primary" | "info" | "success" | "warning" | "danger" | "dark" | "secondary";
+export interface KindInfo {
+    tone: Tone;
+    /** What the resource does for the LLMClient that uses it, in a few words. */
+    role: string;
+    /** The kind's page in the documentation. */
+    docsUrl: string;
+}
+/** The kinds of plugin, which share a presentation. */
+export declare const PLUGIN_KINDS: string[];
+/**
+ * The presentation of a kind of resource. A kind that the tree doesn't know, e.g. a new one, has a neutral color
+ * and the documentation of the manifests.
+ *
+ * @param kind - The SAM kind, e.g. "SqlPlugin", or "Extension", which is not a SAM kind.
+ */
+export declare function kindInfo(kind: string): KindInfo;

package/dist/types/components/ResourceTree/tree.d.ts

@@ -0,0 +1,14 @@
+/** The tree's arithmetic: what the toolbar counts, and which nodes the Collapse all button closes. */
+import type { ResourceTreeNode } from "./types";
+/** A node's id in the tree: the indexes of its ancestors and itself, e.g. "0.2.1", since a resource can appear twice. */
+export type NodeId = string;
+/** The id of a node's child. */
+export declare const childId: (parent: NodeId, index: number) => NodeId;
+/** The root's id. */
+export declare const ROOT_ID: NodeId;
+/** The number of resources in the tree, counting a resource that appears twice once. */
+export declare function countResources(tree: ResourceTreeNode): number;
+/** The number of levels below the root: 0 for an LLMClient that uses nothing. */
+export declare function depth(tree: ResourceTreeNode): number;
+/** The ids of the nodes that have children, except the root, which is always open. */
+export declare function branchIds(tree: ResourceTreeNode): NodeId[];

package/dist/types/components/ResourceTree/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A resource in an LLMClient's tree: the resource, and, recursively, every resource that it uses. It is the shape of
+ * the backend's smarter.lib.manifest.models.SAMDependencyTreeNode, from which @smarter/llmclient-architecture
+ * generates its SAMDependencyTreeNode type, so that a tree of that type is a ResourceTreeNode too.
+ */
+export interface ResourceTreeNode {
+    /** The SAM kind of the resource, e.g. LLMClient, or Extension. */
+    kind: string;
+    /** The kind's icon, a Keen Icons name without its ki- prefix, e.g. lock-2. */
+    icon: string;
+    /** The resource's name, or null if the user may not read it. */
+    name: string | null;
+    /** Who owns it, e.g. Ada Lovelace (ada), or null. A public page leaves owners out. */
+    owner: string | null;
+    /** Its record locator, e.g. llmclient-rMTAwMDAxMwx, or null for a resource that has none. */
+    recordLocator: string | null;
+    /** Its page in the web console, where its manifest can be edited, or null. A public page leaves urls out. */
+    url: string | null;
+    /** Whether the user may read it. A resource that they may not read shows its kind and record locator only. */
+    readable: boolean;
+    /** The resources that it uses. */
+    children: ResourceTreeNode[];
+}

package/dist/types/index.d.ts

@@ -17,6 +17,14 @@ export { default as McpServer } from "./components/McpServer/Component";
 export type { McpServerProps } from "./components/McpServer/Component";
 export { default as Sdk } from "./components/Sdk/Component";
 export type { SdkProps } from "./components/Sdk/Component";
+export { default as ResourceTree } from "./components/ResourceTree/Component";
+export type { ResourceTreeProps } from "./components/ResourceTree/Component";
+export { default as ResourceCard } from "./components/ResourceTree/ResourceCard";
+export type { ResourceTreeNode } from "./components/ResourceTree/types";
+export { branchIds, childId, countResources, depth, ROOT_ID } from "./components/ResourceTree/tree";
+export type { NodeId } from "./components/ResourceTree/tree";
+export { kindInfo, PLUGIN_KINDS } from "./components/ResourceTree/kinds";
+export type { KindInfo, Tone } from "./components/ResourceTree/kinds";
 export { default as SelfHost } from "./components/SelfHost/Component";
 export { default as VSCodeExtension } from "./components/VSCodeExtension/Component";
 export { default as WhatsNew } from "./components/WhatsNew/Component";

package/dist/types/mocks/resourceTree.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Example trees for the ResourceTree widget's stories and tests, as the web console's architecture view returns
+ * them (smarter.apps.prompt.views.detailviews.prompt_architecture_view). @smarter/llmclient-architecture's
+ * fixtures have the same trees, in its full architectures.
+ */
+import type { ResourceTreeNode } from "../components/ResourceTree/types";
+/**
+ * stackademy_sql: a Provider, a SQL plugin, its Connection and their Secrets, a Guardrail, an Extension, and an api
+ * key.
+ */
+export declare const stackademyTree: ResourceTreeNode;
+/** An LLMClient that uses nothing. */
+export declare const leafTree: ResourceTreeNode;
+/** An LLMClient that uses another account's Guardrail, which the user may not read. */
+export declare const lockedTree: ResourceTreeNode;
+/** The web console's list pages, as the backend reverses them. */

package/dist/ui-widgets.css

@@ -1,2 +1,2 @@
-.cli-card{background-color:#1e1e2e}.cli-terminal{background-color:#11111b;border-radius:.75rem;overflow:hidden;box-shadow:0 .75rem 1.5rem #00000059}.cli-terminal-bar{background-color:#2a2a3c;gap:.4rem;padding:.6rem .8rem;display:flex}.cli-dot{border-radius:50%;width:.7rem;height:.7rem}.cli-dot-red{background-color:#ff5f56}.cli-dot-yellow{background-color:#ffbd2e}.cli-dot-green{background-color:#27c93f}.cli-terminal-body{color:#cdd6f4;white-space:pre-wrap;word-break:break-word;background:0 0;margin:0;padding:.9rem 1rem;font-size:.8rem;line-height:1.7}.cli-prompt{color:#a6e3a1;font-weight:600}.cli-comment{color:#6c7086}.cli-cursor{vertical-align:text-bottom;background-color:#cdd6f4;width:.55em;height:1em;animation:1s step-end infinite cli-blink;display:inline-block}@keyframes cli-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.cli-cursor{animation:none}}.contribute-card{background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 60%,#fed7aa 100%);overflow:hidden}.contribute-illustration{opacity:.95}.contribute-underline{opacity:.6;border-color:#ea580c!important}.contribute-lede{max-width:55%}.contribute-chips,.contribute-badges{flex-wrap:wrap;gap:.5rem;max-width:60%;padding-left:0;list-style:none;display:flex}.contribute-chips{margin-bottom:1.25rem}.contribute-badges{margin-bottom:0}.contribute-chip{color:#9a3412;background-color:#fff;border:1px solid #ea580c40;border-radius:999px;padding:.3rem .75rem;font-size:.8rem;font-weight:600;box-shadow:0 .25rem .75rem #ea580c1f}.contribute-btn{color:#fff;background-color:#ea580c}.contribute-btn:hover{color:#fff;background-color:#c2410c}.extensions-card{background:radial-gradient(circle at 100% 0,#7c3aed24 0%,#7c3aed00 45%),linear-gradient(135deg,#fff 0%,#f5f3ff 100%);overflow:hidden}.extensions-eyebrow{color:#6d28d9;letter-spacing:.08em;text-transform:uppercase;background-color:#ede9fe;border-radius:999px;padding:.25rem .7rem;font-size:.7rem;font-weight:700;display:inline-block}.extensions-underline{opacity:.5;border-color:#7c3aed!important}.extensions-steps{color:var(--bs-gray-800);flex-direction:column;gap:.5rem;margin:0;padding:0;font-size:.9rem;font-weight:600;list-style:none;display:flex}.extensions-steps li{align-items:center;display:flex}.extensions-step-number{color:#fff;background-color:#7c3aed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-right:.6rem;font-size:.75rem;font-weight:700;display:inline-flex}.extensions-btn{color:#fff;background-color:#7c3aed}.extensions-btn:hover{color:#fff;background-color:#6d28d9}.extensions-link{color:#6d28d9}.extensions-link:hover{color:#4c1d95}.extensions-list{flex-direction:column;gap:.6rem;margin:0 0 .75rem;padding:0;list-style:none;display:flex}.extensions-item{background-color:#fff;border:1px solid #ede9fe;border-radius:.85rem;align-items:center;gap:.85rem;padding:.55rem .85rem;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 .4rem 1rem #4c1d9514}.extensions-item:hover{border-color:#c4b5fd;box-shadow:0 .4rem 1.2rem #4c1d9529}.extensions-icon{background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);border-radius:.7rem;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.extensions-icon i{color:#fff}.extensions-text{flex-direction:column;min-width:0;display:flex}.extensions-name{color:var(--bs-gray-900);align-items:center;gap:.5rem;font-weight:700;display:flex}.extensions-badge{color:#15803d;background-color:#dcfce7;border-radius:999px;padding:.05rem .45rem;font-size:.65rem;font-weight:700}.extensions-description{color:var(--bs-gray-600);font-size:.8rem}.extensions-manifest{color:#cdd6f4;background-color:#1e1e2e;border-radius:.75rem;margin:0;padding:.75rem 1rem;font-size:.78rem;line-height:1.6}.extensions-key{color:#89b4fa}.extensions-str{color:#a6e3a1}.instructors-card{background:radial-gradient(#ffffff14 1px,#0000 1px) 0 0/18px 18px,linear-gradient(135deg,#064e3b 0%,#0f766e 55%,#14b8a6 100%);overflow:hidden}.instructors-illustration{filter:drop-shadow(0 .75rem 1.5rem #00000040)}.instructors-eyebrow{color:#422006;letter-spacing:.08em;text-transform:uppercase;background-color:#facc15;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.instructors-headline,.instructors-lede{max-width:62%}.instructors-underline{opacity:.8;border-color:#facc15!important}.instructors-lede{color:#fffc}.instructors-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1.5rem;display:grid}.instructors-stat{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;background-color:#ffffff1a;border:1px solid #ffffff2e;border-radius:.85rem;flex-direction:column-reverse;padding:.75rem .5rem;display:flex}.instructors-stat dd{color:#facc15;margin:0;font-size:1.9rem;font-weight:800;line-height:1.1}.instructors-stat dt{color:#ffffffd9;font-size:.75rem;font-weight:500}.instructors-ribbons{flex-direction:column;gap:.4rem;margin-bottom:1.5rem;display:flex}.instructors-ribbon{margin:0 -2rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 2.5rem calc(100% - 2.5rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 2.5rem calc(100% - 2.5rem),#0000 100%)}.instructors-ribbon-track{width:max-content;animation:60s linear infinite instructors-scroll;display:flex}.instructors-ribbon-reverse{animation-direction:reverse}.instructors-ribbon:hover .instructors-ribbon-track,.instructors-ribbon:focus-within .instructors-ribbon-track{animation-play-state:paused}.instructors-ribbon-set{gap:.5rem;margin:0;padding:.25rem .25rem .25rem .5rem;list-style:none;display:flex}.instructors-chip{color:#065f46;white-space:nowrap;background-color:#fff;border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;display:inline-block;box-shadow:0 .25rem .75rem #00000026}.instructors-chip:hover,.instructors-chip:focus,.instructors-btn{color:#422006;background-color:#facc15}.instructors-btn:hover{color:#422006;background-color:#eab308}.instructors-formats{color:#ffffffd9;background-color:#0000002e;border-left:4px solid #facc15;border-radius:.5rem;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;font-size:.8rem;display:flex}.instructors-formats-label{color:#fff;font-weight:700}.instructors-formats ul{flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:0;list-style:none;display:flex}.instructors-formats li:before{color:#facc15;content:"●";margin-right:.4rem}.instructors-formats strong{color:#facc15}@keyframes instructors-scroll{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.instructors-ribbon{margin:0;-webkit-mask-image:none;mask-image:none}.instructors-ribbon-track{width:auto;animation:none}.instructors-ribbon-set{flex-wrap:wrap;padding:0}.instructors-ribbon-set[aria-hidden=true]{display:none}}@media (width<=767.98px){.instructors-headline,.instructors-lede{max-width:none}.instructors-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}.integrations-card{background:linear-gradient(135deg,#3b1d8f 0%,#1c325e 100%);overflow:hidden}.integrations-illustration{opacity:.9}.integrations-lede{max-width:65%}.integrations-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:0;padding-left:0;list-style:none;display:grid}.integrations-tile{flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;display:flex}.integrations-logo{background-color:#fff;border-radius:.85rem;justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:0 .5rem 1.25rem #00000040}.integrations-logo img{width:28px;height:28px}.integrations-name{color:#fffc;text-align:center;font-size:.75rem;line-height:1.1}.integrations-tile:hover .integrations-name{color:#fff}.mcp-card{background:radial-gradient(circle at 100% 100%,#f472b659 0%,#f472b600 50%),linear-gradient(135deg,#4c0519 0%,#881337 55%,#be123c 100%);overflow:hidden}.mcp-eyebrow{color:#fecdd3;letter-spacing:.08em;text-transform:uppercase;background-color:#ffffff26;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.mcp-card .mcp-headline{color:#fff}.mcp-underline{opacity:.8;border-color:#fda4af!important}.mcp-lede{color:#fffc}.mcp-command{color:#ffe4e6;white-space:pre-wrap;overflow-wrap:anywhere;background-color:#00000059;border-radius:.75rem;margin:0 0 1rem;padding:.75rem .9rem;font-size:.75rem;line-height:1.5}.mcp-prompt{color:#fda4af;font-weight:700}.mcp-tools{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.mcp-tools li{color:#ffe4e6;font-family:var(--bs-font-monospace,monospace);border:1px solid #ffffff40;border-radius:999px;padding:.2rem .6rem;font-size:.7rem}.mcp-btn{color:#881337;background-color:#fff}.mcp-btn:hover{color:#881337;background-color:#ffe4e6}.sdk-card{background:linear-gradient(135deg,#e6f4ff 0%,#fff1e6 100%);overflow:hidden}.sdk-lede{max-width:65%}.sdk-list{flex-direction:column;gap:.75rem;margin-bottom:0;padding-left:0;list-style:none;display:flex}.sdk-item{align-items:center;gap:.85rem;display:flex}.sdk-logo{background-color:#fff;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 .4rem 1rem #1c325e26}.sdk-logo img{width:24px;height:24px}.sdk-text{flex-direction:column;min-width:0;display:flex}.sdk-name{color:#1c325e;font-weight:600}.sdk-name:hover{color:#f1416c}.sdk-install{color:#a6e3a1;max-width:100%;font-family:var(--bs-font-monospace,monospace);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;background-color:#1e1e2e;border-radius:.4rem;align-self:flex-start;margin-top:.2rem;padding:.1rem .45rem;font-size:.75rem;overflow:hidden}.selfhost-card{background:radial-gradient(circle at 15% 110%,#2496ed59 0%,#2496ed00 50%),radial-gradient(circle at 95% 0,#844fba59 0%,#844fba00 45%),linear-gradient(135deg,#0b1d3a 0%,#1c325e 100%);overflow:hidden}.selfhost-eyebrow{color:#7cc4ff;letter-spacing:.08em;text-transform:uppercase;background-color:#2496ed33;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.selfhost-underline{opacity:.8;border-color:#2496ed!important}.selfhost-lede{color:#ffffffbf;max-width:70%}.selfhost-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid;position:relative}.selfhost-steps:before{content:"";border-top:2px dashed #ffffff4d;position:absolute;top:28px;left:16.66%;right:16.66%}.selfhost-step-link{text-align:center;flex-direction:column;align-items:center;height:100%;padding:0 .25rem;text-decoration:none;display:flex;position:relative}.selfhost-logo{background-color:#fff;border-radius:1rem;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:.75rem;display:flex;position:relative;box-shadow:0 .5rem 1.25rem #00000059}.selfhost-logo img{width:30px;height:30px}.selfhost-number{color:#fff;background-color:#2496ed;border:2px solid #1c325e;border-radius:50%;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:-.5rem;right:-.5rem}.selfhost-where{color:#7cc4ff;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;font-weight:700}.selfhost-name{color:#fff;font-size:1.05rem;font-weight:700}.selfhost-description{color:#ffffffa6;font-size:.8rem;line-height:1.3}.selfhost-step-link:hover .selfhost-name{color:#7cc4ff}.selfhost-btn{color:#fff;background-color:#2496ed}.selfhost-btn:hover{color:#fff;background-color:#1a7bc7}.selfhost-license{color:#ffffff8c;font-size:.8rem}@media (width<=575.98px){.selfhost-lede{max-width:none}.selfhost-steps{grid-template-columns:1fr}.selfhost-steps:before{display:none}}.vscode-card{background:radial-gradient(circle at 85% 20%,#007acc59 0%,#007acc00 55%),#23272e;overflow:hidden}.vscode-title-link{color:#3794ff}.vscode-title-link:hover{color:#75beff}.vscode-underline{opacity:.5;border-color:#3794ff!important}.vscode-inline{border-radius:.3rem;font-size:.85em;color:#9cdcfe!important;background-color:#ffffff14!important;padding:.05rem .35rem!important}.vscode-features{color:#e6e6e6;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin-bottom:0;padding-left:0;font-size:.9rem;list-style:none;display:grid}.vscode-features li{align-items:flex-start;display:flex}.vscode-check{color:#3794ff;background-color:#3794ff33;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.2rem;height:1.2rem;margin-top:.1rem;margin-right:.5rem;font-size:.7rem;font-weight:700;display:inline-flex}.vscode-btn{color:#fff;background-color:#007acc}.vscode-btn:hover{color:#fff;background-color:#0062a3}.vscode-editor{background-color:#1e1e1e;border:1px solid #333842;border-radius:.75rem;overflow:hidden;box-shadow:0 1rem 2rem #00000073}.vscode-editor-bar{background-color:#2d2d2d;align-items:center;gap:.4rem;padding:0 .8rem;display:flex}.vscode-dot{border-radius:50%;width:.7rem;height:.7rem}.vscode-dot-red{background-color:#ff5f56}.vscode-dot-yellow{background-color:#ffbd2e}.vscode-dot-green{background-color:#27c93f}.vscode-tab{color:#fff;background-color:#1e1e1e;border-top:2px solid #007acc;align-items:center;gap:.4rem;margin-left:.8rem;padding:.45rem .8rem;font-size:.75rem;display:inline-flex}.vscode-tab img{width:14px;height:14px}.vscode-code{color:#d4d4d4;white-space:pre;background:0 0;margin:0;padding:.8rem 0;font-size:.78rem;line-height:1.65;overflow:visible}.vscode-ln{color:#858585;text-align:right;-webkit-user-select:none;user-select:none;width:2.2rem;padding-right:.8rem;display:inline-block}.vscode-key{color:#569cd6}.vscode-str{color:#ce9178}.vscode-squiggle{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 L1.5 0.5 L3 2.5 L4.5 0.5 L6 2.5' fill='none' stroke='%23f14c4c' stroke-width='1'/%3E%3C/svg%3E") 0 100% repeat-x;padding-bottom:3px}.vscode-hover{color:#ccc;width:fit-content;max-width:calc(100% - 4rem);font-family:var(--bs-font-sans-serif,sans-serif);white-space:normal;background-color:#252526;border:1px solid #454545;border-left:3px solid #f14c4c;border-radius:.3rem;margin:.2rem 0 .3rem 3rem;padding:.35rem .6rem;font-size:.72rem;line-height:1.4;display:block;box-shadow:0 .4rem 1rem #00000080}.whats-new-list .badge{min-width:3rem}
+.cli-card{background-color:#1e1e2e}.cli-terminal{background-color:#11111b;border-radius:.75rem;overflow:hidden;box-shadow:0 .75rem 1.5rem #00000059}.cli-terminal-bar{background-color:#2a2a3c;gap:.4rem;padding:.6rem .8rem;display:flex}.cli-dot{border-radius:50%;width:.7rem;height:.7rem}.cli-dot-red{background-color:#ff5f56}.cli-dot-yellow{background-color:#ffbd2e}.cli-dot-green{background-color:#27c93f}.cli-terminal-body{color:#cdd6f4;white-space:pre-wrap;word-break:break-word;background:0 0;margin:0;padding:.9rem 1rem;font-size:.8rem;line-height:1.7}.cli-prompt{color:#a6e3a1;font-weight:600}.cli-comment{color:#6c7086}.cli-cursor{vertical-align:text-bottom;background-color:#cdd6f4;width:.55em;height:1em;animation:1s step-end infinite cli-blink;display:inline-block}@keyframes cli-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.cli-cursor{animation:none}}.contribute-card{background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 60%,#fed7aa 100%);overflow:hidden}.contribute-illustration{opacity:.95}.contribute-underline{opacity:.6;border-color:#ea580c!important}.contribute-lede{max-width:55%}.contribute-chips,.contribute-badges{flex-wrap:wrap;gap:.5rem;max-width:60%;padding-left:0;list-style:none;display:flex}.contribute-chips{margin-bottom:1.25rem}.contribute-badges{margin-bottom:0}.contribute-chip{color:#9a3412;background-color:#fff;border:1px solid #ea580c40;border-radius:999px;padding:.3rem .75rem;font-size:.8rem;font-weight:600;box-shadow:0 .25rem .75rem #ea580c1f}.contribute-btn{color:#fff;background-color:#ea580c}.contribute-btn:hover{color:#fff;background-color:#c2410c}.extensions-card{background:radial-gradient(circle at 100% 0,#7c3aed24 0%,#7c3aed00 45%),linear-gradient(135deg,#fff 0%,#f5f3ff 100%);overflow:hidden}.extensions-eyebrow{color:#6d28d9;letter-spacing:.08em;text-transform:uppercase;background-color:#ede9fe;border-radius:999px;padding:.25rem .7rem;font-size:.7rem;font-weight:700;display:inline-block}.extensions-underline{opacity:.5;border-color:#7c3aed!important}.extensions-steps{color:var(--bs-gray-800);flex-direction:column;gap:.5rem;margin:0;padding:0;font-size:.9rem;font-weight:600;list-style:none;display:flex}.extensions-steps li{align-items:center;display:flex}.extensions-step-number{color:#fff;background-color:#7c3aed;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-right:.6rem;font-size:.75rem;font-weight:700;display:inline-flex}.extensions-btn{color:#fff;background-color:#7c3aed}.extensions-btn:hover{color:#fff;background-color:#6d28d9}.extensions-link{color:#6d28d9}.extensions-link:hover{color:#4c1d95}.extensions-list{flex-direction:column;gap:.6rem;margin:0 0 .75rem;padding:0;list-style:none;display:flex}.extensions-item{background-color:#fff;border:1px solid #ede9fe;border-radius:.85rem;align-items:center;gap:.85rem;padding:.55rem .85rem;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 .4rem 1rem #4c1d9514}.extensions-item:hover{border-color:#c4b5fd;box-shadow:0 .4rem 1.2rem #4c1d9529}.extensions-icon{background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);border-radius:.7rem;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.extensions-icon i{color:#fff}.extensions-text{flex-direction:column;min-width:0;display:flex}.extensions-name{color:var(--bs-gray-900);align-items:center;gap:.5rem;font-weight:700;display:flex}.extensions-badge{color:#15803d;background-color:#dcfce7;border-radius:999px;padding:.05rem .45rem;font-size:.65rem;font-weight:700}.extensions-description{color:var(--bs-gray-600);font-size:.8rem}.extensions-manifest{color:#cdd6f4;background-color:#1e1e2e;border-radius:.75rem;margin:0;padding:.75rem 1rem;font-size:.78rem;line-height:1.6}.extensions-key{color:#89b4fa}.extensions-str{color:#a6e3a1}.instructors-card{background:radial-gradient(#ffffff14 1px,#0000 1px) 0 0/18px 18px,linear-gradient(135deg,#064e3b 0%,#0f766e 55%,#14b8a6 100%);overflow:hidden}.instructors-illustration{filter:drop-shadow(0 .75rem 1.5rem #00000040)}.instructors-eyebrow{color:#422006;letter-spacing:.08em;text-transform:uppercase;background-color:#facc15;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.instructors-headline,.instructors-lede{max-width:62%}.instructors-underline{opacity:.8;border-color:#facc15!important}.instructors-lede{color:#fffc}.instructors-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1.5rem;display:grid}.instructors-stat{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;background-color:#ffffff1a;border:1px solid #ffffff2e;border-radius:.85rem;flex-direction:column-reverse;padding:.75rem .5rem;display:flex}.instructors-stat dd{color:#facc15;margin:0;font-size:1.9rem;font-weight:800;line-height:1.1}.instructors-stat dt{color:#ffffffd9;font-size:.75rem;font-weight:500}.instructors-ribbons{flex-direction:column;gap:.4rem;margin-bottom:1.5rem;display:flex}.instructors-ribbon{margin:0 -2rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 2.5rem calc(100% - 2.5rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 2.5rem calc(100% - 2.5rem),#0000 100%)}.instructors-ribbon-track{width:max-content;animation:60s linear infinite instructors-scroll;display:flex}.instructors-ribbon-reverse{animation-direction:reverse}.instructors-ribbon:hover .instructors-ribbon-track,.instructors-ribbon:focus-within .instructors-ribbon-track{animation-play-state:paused}.instructors-ribbon-set{gap:.5rem;margin:0;padding:.25rem .25rem .25rem .5rem;list-style:none;display:flex}.instructors-chip{color:#065f46;white-space:nowrap;background-color:#fff;border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:600;display:inline-block;box-shadow:0 .25rem .75rem #00000026}.instructors-chip:hover,.instructors-chip:focus,.instructors-btn{color:#422006;background-color:#facc15}.instructors-btn:hover{color:#422006;background-color:#eab308}.instructors-formats{color:#ffffffd9;background-color:#0000002e;border-left:4px solid #facc15;border-radius:.5rem;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;font-size:.8rem;display:flex}.instructors-formats-label{color:#fff;font-weight:700}.instructors-formats ul{flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:0;list-style:none;display:flex}.instructors-formats li:before{color:#facc15;content:"●";margin-right:.4rem}.instructors-formats strong{color:#facc15}@keyframes instructors-scroll{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.instructors-ribbon{margin:0;-webkit-mask-image:none;mask-image:none}.instructors-ribbon-track{width:auto;animation:none}.instructors-ribbon-set{flex-wrap:wrap;padding:0}.instructors-ribbon-set[aria-hidden=true]{display:none}}@media (width<=767.98px){.instructors-headline,.instructors-lede{max-width:none}.instructors-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}.integrations-card{background:linear-gradient(135deg,#3b1d8f 0%,#1c325e 100%);overflow:hidden}.integrations-illustration{opacity:.9}.integrations-lede{max-width:65%}.integrations-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:0;padding-left:0;list-style:none;display:grid}.integrations-tile{flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;display:flex}.integrations-logo{background-color:#fff;border-radius:.85rem;justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:0 .5rem 1.25rem #00000040}.integrations-logo img{width:28px;height:28px}.integrations-name{color:#fffc;text-align:center;font-size:.75rem;line-height:1.1}.integrations-tile:hover .integrations-name{color:#fff}.mcp-card{background:radial-gradient(circle at 100% 100%,#f472b659 0%,#f472b600 50%),linear-gradient(135deg,#4c0519 0%,#881337 55%,#be123c 100%);overflow:hidden}.mcp-eyebrow{color:#fecdd3;letter-spacing:.08em;text-transform:uppercase;background-color:#ffffff26;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.mcp-card .mcp-headline{color:#fff}.mcp-underline{opacity:.8;border-color:#fda4af!important}.mcp-lede{color:#fffc}.mcp-command{color:#ffe4e6;white-space:pre-wrap;overflow-wrap:anywhere;background-color:#00000059;border-radius:.75rem;margin:0 0 1rem;padding:.75rem .9rem;font-size:.75rem;line-height:1.5}.mcp-prompt{color:#fda4af;font-weight:700}.mcp-tools{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.mcp-tools li{color:#ffe4e6;font-family:var(--bs-font-monospace,monospace);border:1px solid #ffffff40;border-radius:999px;padding:.2rem .6rem;font-size:.7rem}.mcp-btn{color:#881337;background-color:#fff}.mcp-btn:hover{color:#881337;background-color:#ffe4e6}.sdk-card{background:linear-gradient(135deg,#e6f4ff 0%,#fff1e6 100%);overflow:hidden}.sdk-lede{max-width:65%}.sdk-list{flex-direction:column;gap:.75rem;margin-bottom:0;padding-left:0;list-style:none;display:flex}.sdk-item{align-items:center;gap:.85rem;display:flex}.sdk-logo{background-color:#fff;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 .4rem 1rem #1c325e26}.sdk-logo img{width:24px;height:24px}.sdk-text{flex-direction:column;min-width:0;display:flex}.sdk-name{color:#1c325e;font-weight:600}.sdk-name:hover{color:#f1416c}.sdk-install{color:#a6e3a1;max-width:100%;font-family:var(--bs-font-monospace,monospace);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:all;user-select:all;background-color:#1e1e2e;border-radius:.4rem;align-self:flex-start;margin-top:.2rem;padding:.1rem .45rem;font-size:.75rem;overflow:hidden}.architecture-tree,.architecture-children{margin:0;padding:0;list-style:none}.architecture-children{margin-left:1rem}.architecture-node-root>.architecture-children{margin-left:2.25rem}.architecture-children>.architecture-node{padding-top:.75rem;padding-left:1.5rem;position:relative}.architecture-children>.architecture-node:before{content:"";border-left:2px solid var(--architecture-line);position:absolute;top:0;bottom:0;left:0}.architecture-children>.architecture-node:last-child:before{height:var(--architecture-row-center);bottom:auto}.architecture-children>.architecture-node:after{content:"";top:var(--architecture-row-center);border-top:2px solid var(--architecture-line);width:1.5rem;position:absolute;left:0}.architecture-row{align-items:center;gap:.5rem;min-width:0;display:flex}.architecture-toggle,.architecture-toggle-spacer{flex-shrink:0;width:2rem;height:2rem}.architecture-toggle{z-index:1;position:relative}.architecture-hidden-count{flex-shrink:0}.architecture-card{--architecture-tone:var(--bs-gray-500);border:1px solid var(--bs-gray-300);border-left:4px solid var(--architecture-tone);background-color:var(--bs-body-bg);border-radius:.75rem;align-items:center;gap:.875rem;width:min(26rem,100%);min-width:0;min-height:4.5rem;padding:.75rem .875rem;transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;position:relative;box-shadow:0 1px 2px #0000000d}.architecture-card-primary{--architecture-tone:var(--bs-primary)}.architecture-card-info{--architecture-tone:var(--bs-info)}.architecture-card-success{--architecture-tone:var(--bs-success)}.architecture-card-warning{--architecture-tone:var(--bs-warning)}.architecture-card-danger{--architecture-tone:var(--bs-danger)}.architecture-card-dark{--architecture-tone:var(--bs-gray-700)}[data-bs-theme=dark] .architecture-card-dark .text-dark{color:var(--bs-gray-700)!important}[data-bs-theme=dark] .architecture-card-dark .bg-light-dark{background-color:var(--bs-gray-200)!important}.architecture-card-link:hover,.architecture-card-link:focus-within{border-color:var(--architecture-tone);transform:translateY(-1px);box-shadow:0 .5rem 1.25rem #0000001a}.architecture-card-root{background-image:linear-gradient(135deg, var(--bs-primary-light) 0%, var(--bs-body-bg) 70%);width:min(30rem,100%);min-height:5.25rem}.architecture-card-locked{border-style:dashed dashed dashed solid;border-left-color:var(--bs-gray-400);background-color:var(--bs-gray-100)}.architecture-card-icon{border-radius:.625rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.35rem;display:inline-flex}.architecture-card-root .architecture-card-icon{width:3rem;height:3rem;font-size:1.6rem}.architecture-card-locked .architecture-card-icon{background-color:var(--bs-gray-200)!important;color:var(--bs-gray-500)!important}.architecture-card-body{flex-direction:column;flex:1;gap:.125rem;min-width:0;display:flex}.architecture-card-kind{letter-spacing:.04em;text-transform:uppercase;font-size:.7rem;font-weight:600}.architecture-card-locked .architecture-card-kind{color:var(--bs-gray-600)!important}.architecture-card-docs{z-index:2;line-height:1;position:relative}.architecture-card-name{color:var(--bs-gray-900);text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:700;overflow:hidden}a.architecture-card-name:hover,a.architecture-card-name:focus{color:var(--architecture-tone)}.architecture-card-root .architecture-card-name{font-size:1.15rem}.architecture-card-meta{min-width:0;color:var(--bs-gray-600);align-items:center;font-size:.8rem;display:flex}.architecture-card-locator{color:var(--bs-gray-600);background:0 0;padding:0;font-size:.75rem}.architecture-card-open{flex-shrink:0;align-self:flex-start;font-size:1rem;transition:color .15s}.architecture-card-link:hover .architecture-card-open{color:var(--architecture-tone)!important}@media (prefers-reduced-motion:reduce){.architecture-card{transition:none}.architecture-card-link:hover,.architecture-card-link:focus-within{transform:none}}.selfhost-card{background:radial-gradient(circle at 15% 110%,#2496ed59 0%,#2496ed00 50%),radial-gradient(circle at 95% 0,#844fba59 0%,#844fba00 45%),linear-gradient(135deg,#0b1d3a 0%,#1c325e 100%);overflow:hidden}.selfhost-eyebrow{color:#7cc4ff;letter-spacing:.08em;text-transform:uppercase;background-color:#2496ed33;border-radius:999px;align-self:flex-start;padding:.25rem .7rem;font-size:.7rem;font-weight:700}.selfhost-underline{opacity:.8;border-color:#2496ed!important}.selfhost-lede{color:#ffffffbf;max-width:70%}.selfhost-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid;position:relative}.selfhost-steps:before{content:"";border-top:2px dashed #ffffff4d;position:absolute;top:28px;left:16.66%;right:16.66%}.selfhost-step-link{text-align:center;flex-direction:column;align-items:center;height:100%;padding:0 .25rem;text-decoration:none;display:flex;position:relative}.selfhost-logo{background-color:#fff;border-radius:1rem;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:.75rem;display:flex;position:relative;box-shadow:0 .5rem 1.25rem #00000059}.selfhost-logo img{width:30px;height:30px}.selfhost-number{color:#fff;background-color:#2496ed;border:2px solid #1c325e;border-radius:50%;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:-.5rem;right:-.5rem}.selfhost-where{color:#7cc4ff;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;font-weight:700}.selfhost-name{color:#fff;font-size:1.05rem;font-weight:700}.selfhost-description{color:#ffffffa6;font-size:.8rem;line-height:1.3}.selfhost-step-link:hover .selfhost-name{color:#7cc4ff}.selfhost-btn{color:#fff;background-color:#2496ed}.selfhost-btn:hover{color:#fff;background-color:#1a7bc7}.selfhost-license{color:#ffffff8c;font-size:.8rem}@media (width<=575.98px){.selfhost-lede{max-width:none}.selfhost-steps{grid-template-columns:1fr}.selfhost-steps:before{display:none}}.vscode-card{background:radial-gradient(circle at 85% 20%,#007acc59 0%,#007acc00 55%),#23272e;overflow:hidden}.vscode-title-link{color:#3794ff}.vscode-title-link:hover{color:#75beff}.vscode-underline{opacity:.5;border-color:#3794ff!important}.vscode-inline{border-radius:.3rem;font-size:.85em;color:#9cdcfe!important;background-color:#ffffff14!important;padding:.05rem .35rem!important}.vscode-features{color:#e6e6e6;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin-bottom:0;padding-left:0;font-size:.9rem;list-style:none;display:grid}.vscode-features li{align-items:flex-start;display:flex}.vscode-check{color:#3794ff;background-color:#3794ff33;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.2rem;height:1.2rem;margin-top:.1rem;margin-right:.5rem;font-size:.7rem;font-weight:700;display:inline-flex}.vscode-btn{color:#fff;background-color:#007acc}.vscode-btn:hover{color:#fff;background-color:#0062a3}.vscode-editor{background-color:#1e1e1e;border:1px solid #333842;border-radius:.75rem;overflow:hidden;box-shadow:0 1rem 2rem #00000073}.vscode-editor-bar{background-color:#2d2d2d;align-items:center;gap:.4rem;padding:0 .8rem;display:flex}.vscode-dot{border-radius:50%;width:.7rem;height:.7rem}.vscode-dot-red{background-color:#ff5f56}.vscode-dot-yellow{background-color:#ffbd2e}.vscode-dot-green{background-color:#27c93f}.vscode-tab{color:#fff;background-color:#1e1e1e;border-top:2px solid #007acc;align-items:center;gap:.4rem;margin-left:.8rem;padding:.45rem .8rem;font-size:.75rem;display:inline-flex}.vscode-tab img{width:14px;height:14px}.vscode-code{color:#d4d4d4;white-space:pre;background:0 0;margin:0;padding:.8rem 0;font-size:.78rem;line-height:1.65;overflow:visible}.vscode-ln{color:#858585;text-align:right;-webkit-user-select:none;user-select:none;width:2.2rem;padding-right:.8rem;display:inline-block}.vscode-key{color:#569cd6}.vscode-str{color:#ce9178}.vscode-squiggle{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 L1.5 0.5 L3 2.5 L4.5 0.5 L6 2.5' fill='none' stroke='%23f14c4c' stroke-width='1'/%3E%3C/svg%3E") 0 100% repeat-x;padding-bottom:3px}.vscode-hover{color:#ccc;width:fit-content;max-width:calc(100% - 4rem);font-family:var(--bs-font-sans-serif,sans-serif);white-space:normal;background-color:#252526;border:1px solid #454545;border-left:3px solid #f14c4c;border-radius:.3rem;margin:.2rem 0 .3rem 3rem;padding:.35rem .6rem;font-size:.72rem;line-height:1.4;display:block;box-shadow:0 .4rem 1rem #00000080}.whats-new-list .badge{min-width:3rem}
 /*$vite$:1*/