@calibrate-ds/cli 0.1.0

package/dist/ai/openai-provider.d.ts

@@ -0,0 +1,13 @@
+import type { ImplementationProvider, ComponentImplementationResult, ComponentPromptPackage } from "@calibrate-ds/shared-types";
+export declare class OpenAIProvider implements ImplementationProvider {
+    name: string;
+    private client;
+    private model;
+    constructor(apiKey: string, model?: string);
+    implementComponent(params: {
+        componentName: string;
+        framework: string | null;
+        promptPackage: ComponentPromptPackage;
+    }): Promise<ComponentImplementationResult>;
+}
+//# sourceMappingURL=openai-provider.d.ts.map

package/dist/ai/openai-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"openai-provider.d.ts","sourceRoot":"","sources":["../../src/ai/openai-provider.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,6BAA6B,EAAE,sBAAsB,EAAiB,MAAM,4BAA4B,CAAC;AA+S/I,qBAAa,cAAe,YAAW,sBAAsB;IACzD,IAAI,SAAY;IAChB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,KAAK,CAAS;gBAEV,MAAM,EAAE,MAAM,EAAE,KAAK,SAAW;IAKtC,kBAAkB,CAAC,MAAM,EAAE;QAC7B,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,aAAa,EAAE,sBAAsB,CAAC;KACzC,GAAG,OAAO,CAAC,6BAA6B,CAAC;CAgD7C"}

package/dist/ai/openai-provider.js

@@ -0,0 +1,345 @@
+import OpenAI from "openai";
+import { calcMaxTokens, buildUserMessage, formatTokenUsage } from "./prompt-utils.js";
+const SYSTEM_PROMPT = `You are a design system component implementation assistant working inside PTB (Calibrate).
+
+You receive a structured design context document describing a component extracted directly from Figma. Your job is to implement the component files that bring this design to life in code.
+
+The examples below use React/JSX syntax. If the context specifies a different framework, apply the same principles using that framework's equivalent patterns.
+
+## Rules
+
+1. Call the write_file function for EVERY file you generate. Do not output prose or fenced code blocks — function calls only.
+2. You MUST generate ALL FOUR of these files, no exceptions:
+   - <ComponentName>.<ext>      — the component implementation
+   - <ComponentName>.types.ts   — TypeScript prop types
+   - <ComponentName>.module.css — CSS module styles (generate an empty file if the component truly has no styles)
+   - index.ts                   — barrel export (always required, even if it is a single re-export line)
+   Before writing the last file, verify:
+   - [ ] The component file imports the Props type: \`import type { ComponentNameProps } from './ComponentName.types';\`
+   - [ ] Every \`[Class: X]\` annotation in the render structure is applied as a plain utility string (never a CSS module key)
+   - [ ] No \`display: none\` in CSS for elements already handled by a JS conditional in the template
+   - [ ] No fixed \`height: Npx\` on any element that wraps text content
+   - [ ] Dependency props match the \`Accepted props\` list in the context — no invented prop names, defaults match \`/* default: X */\` annotations
+   - [ ] Conditional rendering wraps ONLY the node at the specified path, not all instances of that component type
+   - [ ] Every prop in the Props Interface Skeleton is destructured in the function signature — no props silently dropped
+3. Implement ONLY what the design context specifies:
+   - Variant axes → prop union types (these are PROPS, not useState)
+   - Token bindings → CSS custom properties (use the resolved variable names from the context)
+   - State contract → conditional class logic driven by a prop or controlled state
+   - Interaction contract → event handler stubs
+   - Layout → flex/grid CSS matching direction, gap, padding from context
+   - Size → CSS classes, never inline style={{ width, height }}
+4. Do NOT invent business logic, API calls, or application state.
+5. Do NOT add features absent from the design context.
+6. Follow the framework and naming conventions specified in the prompt.
+7. Never reference hardcoded colour values — always use the CSS custom properties from the token bindings.
+
+## Anti-patterns — never do these
+
+**1. Variant axes are props, not state:**
+\`\`\`tsx
+// WRONG — variant axes from the design context are never local state
+const [variant, setVariant] = useState<'primary' | 'secondary'>('primary');
+// RIGHT — receive as a prop with the Figma default as the default value
+function Component({ variant = 'primary' }: ComponentProps) { ... }
+\`\`\`
+
+**2. CSS modules must be imported as an object, not as a side-effect:**
+\`\`\`tsx
+// WRONG — side-effect import; className string has no scoping
+import './Component.module.css';
+className="root"
+// RIGHT — named import gives you the scoped class map
+import styles from './Component.module.css';
+className={styles.root}
+\`\`\`
+
+**3. Import every component you render — never use an undeclared identifier:**
+\`\`\`tsx
+// WRONG — renders <SubComponent /> without importing it; runtime error
+// RIGHT
+import { SubComponent } from '../sub-component/index.js';
+\`\`\`
+
+**4. Never inline pixel dimensions from the context — put them in CSS:**
+\`\`\`tsx
+// WRONG — inline styles bypass the CSS module and are hard to override
+<div style={{ width: 320, height: 48 }}>
+// RIGHT — dimensions belong in the CSS module
+.root { width: 320px; height: 48px; }
+\`\`\`
+
+**5. Never pass a Figma metadata object as a prop:**
+\`\`\`tsx
+// WRONG — slot values in the context are design descriptions, not runtime values
+<Component iconSlot={{ kind: 'unknown', componentId: '123:456' }} />
+// RIGHT — render the actual resolved component in JSX
+<IconComponent />
+\`\`\`
+
+**6. Pass sub-component dependencies as named slot props, not as children:**
+\`\`\`tsx
+// WRONG — passing as children only works if the component explicitly renders {children}
+<ParentComponent><IconComponent /></ParentComponent>
+// RIGHT — use the named slot prop defined in the Slot Contract
+<ParentComponent icon={<IconComponent />} />
+\`\`\`
+
+**7. Never use heading tags (h1–h6) for non-heading content:**
+\`\`\`tsx
+// WRONG — labels, captions, and timestamps are not document headings
+<h1>{label}</h1>
+// RIGHT — use the semantically appropriate inline or block element
+<span className={styles.label}>{label}</span>
+<time className={styles.timestamp}>{timestamp}</time>
+\`\`\`
+
+**8. All props that have a Figma default must have a default value in code:**
+\`\`\`tsx
+// WRONG — prop with no default silently breaks the component when omitted
+function Component({ label, value }: ComponentProps) { ... }
+// RIGHT — mirror the Figma default so the component renders correctly in isolation
+function Component({ label = 'Default label', value = '' }: ComponentProps) { ... }
+\`\`\`
+
+**9. Never use local state for anything driven by the design context:**
+\`\`\`tsx
+// WRONG — design-system variant axes are never local state
+const [variant, setVariant] = useState('primary');
+// WRONG — inventing a boolean flag for a slot that should be a ReactNode
+function Component({ showIcon = false }: ComponentProps) { ... }
+// RIGHT — receive variant axes and slot props directly; derive everything from props
+function Component({ variant = 'primary', icon }: ComponentProps) { ... }
+\`\`\`
+Slot props (icons, sub-components) are ALWAYS \`ReactNode\` — never \`boolean\`.
+
+**10. Never set a fixed height on a text or content container:**
+\`\`\`css
+/* WRONG — clips content when text reflows on the web */
+.content { height: 80px; }
+/* RIGHT — let the container grow with its content */
+.content { min-height: 1.5em; } /* or omit height entirely */
+\`\`\`
+Figma fixes containers to their current content height. On the web, text reflows freely.
+Use \`min-height\` or no height for any element that wraps text. Only apply a fixed \`height\`
+to elements with a truly fixed visual footprint (icons, avatars, dividers, separators).
+
+**11. A slot prop IS the element to render — never use its presence to select a hardcoded fallback:**
+\`\`\`tsx
+// WRONG — prop holds a ReactNode; treating it as a boolean selects a hardcoded component
+const rendered = icon ? <DefaultIcon /> : null;
+// RIGHT — render whatever was passed in
+{icon}
+// RIGHT — use the design default only as a fallback when nothing is passed
+{icon ?? <DefaultIcon />}
+\`\`\`
+A slot prop named \`icon?: React.ReactNode\` is the element itself. The named component in the
+context is the design tool's placeholder — use it as the \`??\` fallback, not the primary render.
+
+**12. Never concatenate className with template literals — use a filtered join:**
+\`\`\`tsx
+// WRONG — produces "root undefined" when the optional className prop is not passed
+className={\`\${styles.root} \${className}\`}
+// RIGHT — filter removes falsy values before joining
+className={[styles.root, className].filter(Boolean).join(' ')}
+\`\`\`
+
+**13. Never build dynamic class names from variant values — use data attributes:**
+\`\`\`tsx
+// WRONG — generates class names like "size-sm-status-active" that don't exist in the CSS module
+const cls = \`size-\${size}-status-\${status}\`;
+<div className={styles[cls]}>
+// RIGHT — the CSS skeleton uses [data-*] attribute selectors; wire props to data attributes
+<div
+  className={styles.root}
+  data-size={size}
+  data-status={status}
+>
+\`\`\`
+The CSS skeleton already has \`.root[data-size="sm"] { ... }\` — connect props via \`data-*\`, never via dynamic class names.
+
+**14. Always import the component's Props type from its .types file:**
+\`\`\`tsx
+// WRONG — type identifier is used but not imported → TypeScript error
+const MyComponent: React.FC<MyComponentProps> = ...
+// RIGHT
+import type { MyComponentProps } from './MyComponent.types';
+const MyComponent: React.FC<MyComponentProps> = ...
+\`\`\`
+Every component has a \`<ComponentName>.types.ts\` file. Always import the Props type from it.
+
+**15. A CSS module key lookup must contain exactly one key — never two class names in one string:**
+\`\`\`tsx
+// WRONG — looks up a single key with a space in it; always resolves to undefined
+className={styles['element-name utility-class']}
+// RIGHT — look up the module key, then join utility classes separately as plain strings
+className={[styles['element-name'], 'utility-class'].filter(Boolean).join(' ')}
+\`\`\`
+\`styles[key]\` is a single object property lookup. A space-separated string is one key, not two classes.
+
+**16. CSS module keys containing a hyphen MUST use bracket notation — dot notation is a syntax error:**
+\`\`\`tsx
+// WRONG — "list-item" parses as "styles.list" minus "item" — JavaScript subtraction syntax error
+className={styles.list-item}
+// RIGHT — any key that is not a valid JS identifier requires bracket notation
+className={styles['list-item']}
+\`\`\`
+Any CSS module key with a \`-\`, digit start, or reserved word must use \`styles['key']\`.
+
+**17. A ReactNode slot prop is already an element — render it directly, never invoke it as a component:**
+\`\`\`tsx
+// WRONG — variable name in lowercase JSX is treated as a DOM element tag, not a component
+{icon && <icon />}
+// WRONG — the variable holds a ReactNode, not a constructor; calling it as a component is an error
+{icon && <Icon />}
+// RIGHT — a ReactNode renders as-is; undefined or null renders nothing
+{icon}
+\`\`\`
+If the slot is optional, \`{prop}\` is the complete render expression — no boolean guard, no JSX invocation.
+Never invent a paired \`showX: boolean\` alongside \`x: ReactNode\`. The presence or absence of the node IS the visibility control.
+
+**18. Render structure \`[Class: X]\` tags are global utility classes — apply them as plain strings alongside the module class:**
+\`\`\`tsx
+// Context render structure: "Label node [Class: type-body-sm]"
+// WRONG — drops the typography utility class entirely
+<span className={styles['label']}>{text}</span>
+// WRONG — tries to look up the utility class as a module key; always undefined
+<span className={styles['label type-body-sm']}>{text}</span>
+// RIGHT — module class handles component-specific styles; utility class handles typography
+<span className={[styles['label'], 'type-body-sm'].filter(Boolean).join(' ')}>{text}</span>
+\`\`\`
+\`[Class: X]\` in the render structure is a global utility class (e.g. from \`typography.css\`). It is NOT a CSS module key. Always apply it as a plain string entry in the class array.
+
+**19. Nodes marked \`visible: false\` in a variant diff must be conditionally removed from the DOM:**
+\`\`\`tsx
+// Context variant diff: "sidebar node — visible: true → false in state=collapsed"
+// WRONG — CSS display:none hides visually but the node is still in the DOM and still runs
+<div className={styles.layout}>
+  <Sidebar />
+</div>
+// RIGHT — use a JS conditional so the node does not render at all in that state
+<div className={styles.layout}>
+  {status !== 'collapsed' && <Sidebar />}
+</div>
+\`\`\`
+When the variant diff shows \`visible: true → false\` for a node in a given state, use \`&&\` or a ternary to remove it entirely — do not rely only on CSS.
+
+**20. When one of several instances of the same dependency is conditionally hidden, wrap ONLY that instance:**
+\`\`\`tsx
+// Context: two SubComponent instances — one always visible, one hidden in state=secondary
+// WRONG — wraps both; nothing renders in 'secondary' state
+{variant !== 'secondary' && <SubComponent type="icon" />}
+{variant !== 'secondary' && <SubComponent label="Open" />}
+// RIGHT — the Conditional Rendering Guide names the hidden SLOT (e.g. "cta");
+//          cross-reference the Slot Render Guide to find which specific instance it maps to
+<SubComponent type="icon" />                              {/* always rendered */}
+{variant !== 'secondary' && <SubComponent label="Open" />} {/* 'cta' slot — hidden in secondary */}
+\`\`\`
+The Conditional Rendering Guide names SLOTS (e.g. \`/* hide slot: cta */\`), not component types.
+Look up that slot in the Slot Render Guide to identify exactly which instance to wrap.
+All other instances of the same component that are NOT named remain always-rendered.
+
+**21. Always use named exports — never default exports:**
+\`\`\`tsx
+// WRONG — default exports break named imports used by every consumer of this component
+export default function Component({ ... }: ComponentProps) { ... }
+export default Component;
+
+// RIGHT — named export so every import can use { Component }
+export function Component({ ... }: ComponentProps) { ... }
+// OR
+export const Component: React.FC<ComponentProps> = ({ ... }) => { ... };
+\`\`\`
+The \`index.ts\` barrel must also re-export named:
+\`\`\`ts
+// WRONG
+export { default } from './Component.js';
+// RIGHT
+export { Component } from './Component.js';
+\`\`\`
+
+**22. \`data-state\` only exists on the root container — child overrides must use descendant selectors:**
+\`\`\`css
+/* WRONG — data-state is not on .sidebar; this selector never matches */
+.sidebar[data-state="collapsed"] { width: 0; }
+
+/* RIGHT — data-state lives on .container; use descendant selector */
+.container[data-state="collapsed"] .sidebar { width: 0; }
+\`\`\`
+Every state/variant attribute is set on the root element only. Any CSS overrides for child elements
+in a given state must be written as \`.container[data-X="Y"] .child\`, never \`.child[data-X="Y"]\`.
+The CSS skeleton already shows the correct descendant-selector form — follow it exactly.`;
+const WRITE_FILE_TOOL = {
+    type: "function",
+    function: {
+        name: "write_file",
+        description: "Write a generated implementation file for the component. Call this once per file.",
+        parameters: {
+            type: "object",
+            properties: {
+                path: {
+                    type: "string",
+                    description: "File path relative to the component folder, e.g. Button.tsx or Button.module.css"
+                },
+                content: {
+                    type: "string",
+                    description: "Full file content — no PTB_METADATA header needed, PTB adds that automatically"
+                }
+            },
+            required: ["path", "content"]
+        }
+    }
+};
+// GPT-5.x and o-series reasoning models use max_completion_tokens instead of max_tokens.
+function tokenLimitParam(model, value) {
+    return /^(gpt-5|o1|o3|o4)/.test(model)
+        ? { max_completion_tokens: value }
+        : { max_tokens: value };
+}
+export class OpenAIProvider {
+    name = "OpenAI";
+    client;
+    model;
+    constructor(apiKey, model = "gpt-4o") {
+        this.client = new OpenAI({ apiKey });
+        this.model = model;
+    }
+    async implementComponent(params) {
+        const { componentName, framework, promptPackage } = params;
+        const response = await this.client.chat.completions.create({
+            model: this.model,
+            ...tokenLimitParam(this.model, calcMaxTokens(promptPackage)),
+            tools: [WRITE_FILE_TOOL],
+            tool_choice: "auto",
+            messages: [
+                { role: "system", content: SYSTEM_PROMPT },
+                { role: "user", content: buildUserMessage(promptPackage, componentName, framework) }
+            ]
+        });
+        const usage = response.usage;
+        if (usage) {
+            console.log(formatTokenUsage(usage.prompt_tokens, usage.completion_tokens, usage.prompt_tokens_details?.cached_tokens ?? 0));
+        }
+        const files = [];
+        const toolCalls = response.choices[0]?.message?.tool_calls ?? [];
+        for (const call of toolCalls) {
+            if (call.type === "function" && call.function.name === "write_file") {
+                try {
+                    const input = JSON.parse(call.function.arguments);
+                    if (input.path && input.content !== undefined) {
+                        files.push({ path: input.path, content: input.content });
+                    }
+                }
+                catch {
+                    // malformed tool call — skip
+                }
+            }
+        }
+        if (files.length === 0) {
+            throw new Error(`OpenAI returned no files for "${componentName}". ` +
+                `Finish reason: ${response.choices[0]?.finish_reason}. Check your API key and model access.`);
+        }
+        return { files };
+    }
+}
+//# sourceMappingURL=openai-provider.js.map

package/dist/ai/openai-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openai-provider.js","sourceRoot":"","sources":["../../src/ai/openai-provider.ts"],"names":[],"mappings":"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"}

package/dist/ai/prompt-utils.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPromptPackage } from "@calibrate-ds/shared-types";
+/**
+ * Calculates an appropriate max_tokens ceiling based on component complexity.
+ * Avoids reserving 8096 for components that only need ~2000 output tokens.
+ *
+ * Base 2048 covers 4 files at ~500 tokens each.
+ * Each structural feature adds headroom for the extra code it requires.
+ */
+export declare function calcMaxTokens(pkg: ComponentPromptPackage): number;
+/**
+ * Builds a compact user message from the prompt package.
+ *
+ * Two passes of trimming:
+ * 1. Strip "Structure Summary" — human-readable recap already covered by data sections below it.
+ * 2. Trim "Variant Differences" — for components with many variants this section dominates
+ *    input tokens (can be 8k+ for 40+ variant combos). The AI doesn't need every structural
+ *    diff to generate correct code — variant axes + token bindings are sufficient.
+ *    We keep the first MAX_VARIANT_EXAMPLES as reference and replace the rest with a summary.
+ */
+export declare function buildUserMessage(pkg: ComponentPromptPackage, componentName: string, framework: string | null): string;
+/** Formats token usage for display after a generation call. */
+export declare function formatTokenUsage(input: number, output: number, cached?: number): string;
+//# sourceMappingURL=prompt-utils.d.ts.map

package/dist/ai/prompt-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-utils.d.ts","sourceRoot":"","sources":["../../src/ai/prompt-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,sBAAsB,GAAG,MAAM,CAajE;AAID;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC5B,GAAG,EAAE,sBAAsB,EAC3B,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,MAAM,GAAG,IAAI,GACzB,MAAM,CA4BR;AAED,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAMvF"}

package/dist/ai/prompt-utils.js

@@ -0,0 +1,67 @@
+/**
+ * Calculates an appropriate max_tokens ceiling based on component complexity.
+ * Avoids reserving 8096 for components that only need ~2000 output tokens.
+ *
+ * Base 2048 covers 4 files at ~500 tokens each.
+ * Each structural feature adds headroom for the extra code it requires.
+ */
+export function calcMaxTokens(pkg) {
+    const s = pkg.structureSummary;
+    let max = 2048;
+    if (s?.hasVariants)
+        max += 512;
+    if (s?.hasStateContract)
+        max += 768;
+    if (s?.hasInteractionContract)
+        max += 512;
+    if (s?.hasPrototypeInteractionContract)
+        max += 512;
+    if (s?.hasTokenBindings)
+        max += 512;
+    if (s?.hasDependencies)
+        max += (s.dependencyCount ?? 1) * 256;
+    // Cap at 6144 — enough for complex components without over-reserving
+    return Math.min(max, 6144);
+}
+const MAX_VARIANT_EXAMPLES = 3;
+/**
+ * Builds a compact user message from the prompt package.
+ *
+ * Two passes of trimming:
+ * 1. Strip "Structure Summary" — human-readable recap already covered by data sections below it.
+ * 2. Trim "Variant Differences" — for components with many variants this section dominates
+ *    input tokens (can be 8k+ for 40+ variant combos). The AI doesn't need every structural
+ *    diff to generate correct code — variant axes + token bindings are sufficient.
+ *    We keep the first MAX_VARIANT_EXAMPLES as reference and replace the rest with a summary.
+ */
+export function buildUserMessage(pkg, componentName, framework) {
+    // Pass 1: strip redundant Structure Summary section
+    let text = pkg.promptText.replace(/\n## Structure Summary\n(?:- .+\n)*/, "\n");
+    // Pass 2: trim Variant Differences to MAX_VARIANT_EXAMPLES + summary
+    text = text.replace(/(\n## Variant Differences\n)([\s\S]*?)(?=\n## [A-Z]|\n---|\s*$)/, (_match, header, body) => {
+        // Each variant block starts with "### Variant:"
+        const blocks = body.split(/(?=### Variant:)/).filter((b) => b.trim());
+        if (blocks.length <= MAX_VARIANT_EXAMPLES)
+            return header + body;
+        const kept = blocks.slice(0, MAX_VARIANT_EXAMPLES).join("");
+        const omitted = blocks.length - MAX_VARIANT_EXAMPLES;
+        const note = `\n> ${omitted} more variant combinations omitted. Implement all ${blocks.length} combinations using the Variant Axes and Token Bindings defined above.\n`;
+        return header + kept + note;
+    });
+    return [
+        `Implement component: **${componentName}**`,
+        `Framework: ${framework || "react"}`,
+        ``,
+        text.trimStart()
+    ].join("\n");
+}
+/** Formats token usage for display after a generation call. */
+export function formatTokenUsage(input, output, cached) {
+    const dim = "\x1b[2m";
+    const reset = "\x1b[0m";
+    const parts = [`${input.toLocaleString()} in`, `${output.toLocaleString()} out`];
+    if (cached && cached > 0)
+        parts.push(`${cached.toLocaleString()} cached`);
+    return `${dim}  ↳ tokens: ${parts.join("  |  ")}${reset}`;
+}
+//# sourceMappingURL=prompt-utils.js.map

package/dist/ai/prompt-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-utils.js","sourceRoot":"","sources":["../../src/ai/prompt-utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,GAA2B;IACrD,MAAM,CAAC,GAAG,GAAG,CAAC,gBAAgB,CAAC;IAC/B,IAAI,GAAG,GAAG,IAAI,CAAC;IAEf,IAAI,CAAC,EAAE,WAAW;QAAuB,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI,CAAC,EAAE,gBAAgB;QAAkB,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI,CAAC,EAAE,sBAAsB;QAAY,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI,CAAC,EAAE,+BAA+B;QAAG,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI,CAAC,EAAE,gBAAgB;QAAkB,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI,CAAC,EAAE,eAAe;QAAmB,GAAG,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/E,qEAAqE;IACrE,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AAC/B,CAAC;AAED,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAC5B,GAA2B,EAC3B,aAAqB,EACrB,SAAwB;IAExB,oDAAoD;IACpD,IAAI,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,OAAO,CAC7B,qCAAqC,EACrC,IAAI,CACP,CAAC;IAEF,qEAAqE;IACrE,IAAI,GAAG,IAAI,CAAC,OAAO,CACf,iEAAiE,EACjE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;QACrB,gDAAgD;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9E,IAAI,MAAM,CAAC,MAAM,IAAI,oBAAoB;YAAE,OAAO,MAAM,GAAG,IAAI,CAAC;QAEhE,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC5D,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,GAAG,oBAAoB,CAAC;QACrD,MAAM,IAAI,GAAG,OAAO,OAAO,qDAAqD,MAAM,CAAC,MAAM,0EAA0E,CAAC;QACxK,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC,CACJ,CAAC;IAEF,OAAO;QACH,0BAA0B,aAAa,IAAI;QAC3C,cAAc,SAAS,IAAI,OAAO,EAAE;QACpC,EAAE;QACF,IAAI,CAAC,SAAS,EAAE;KACnB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACjB,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,gBAAgB,CAAC,KAAa,EAAE,MAAc,EAAE,MAAe;IAC3E,MAAM,GAAG,GAAI,SAAS,CAAC;IACvB,MAAM,KAAK,GAAG,SAAS,CAAC;IACxB,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACjF,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;QAAE,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAC1E,OAAO,GAAG,GAAG,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,EAAE,CAAC;AAC9D,CAAC"}

package/dist/commands/ai.d.ts

@@ -0,0 +1,8 @@
+export declare function aiStatusCommand(): Promise<void>;
+export declare function aiListCommand(): Promise<void>;
+export declare function aiProvidersCommand(): Promise<void>;
+export declare function aiUseCommand(provider: string): Promise<void>;
+export declare function aiRemoveCommand(provider: string): Promise<void>;
+export declare function aiModelCommand(modelId?: string): Promise<void>;
+export declare function aiSetupCommand(): Promise<void>;
+//# sourceMappingURL=ai.d.ts.map

package/dist/commands/ai.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai.d.ts","sourceRoot":"","sources":["../../src/commands/ai.ts"],"names":[],"mappings":"AAyWA,wBAAsB,eAAe,kBA2GpC;AAID,wBAAsB,aAAa,kBA8BlC;AAID,wBAAsB,kBAAkB,kBAEvC;AAID,wBAAsB,YAAY,CAAC,QAAQ,EAAE,MAAM,iBAyBlD;AAID,wBAAsB,eAAe,CAAC,QAAQ,EAAE,MAAM,iBAyBrD;AAID,wBAAsB,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,iBA4EpD;AAID,wBAAsB,cAAc,kBAGnC"}