@davia/agent 0.1.0

package/dist/agent/prompts/blocks/mdx/mdx.d.ts

@@ -0,0 +1,2 @@
+export declare const MDX_GUIDELINES = "<mdx_guidelines>\n\n# Main MDX Guidelines for Component Development\nMDX_GUIDELINES = f\"\"\"<mdx_guidelines>\n## MDX Component Guidelines\n\n### What are MDX Components?\nMDX components are reusable interactive React components that get embedded into HTML pages. They contain only functional, interactive elements - no regular markdown content.\n\n### When to Create MDX Components\n- When users need interactive widgets (forms, calculators, charts)\n- For dynamic data visualization or dashboards\n- When building custom functionality beyond basic HTML\n- For reusable interactive elements within pages\n\n### Component Development Best Practices\n\n**GOOD PRACTICE: START SIMPLE FIRST**\n- **Always begin with basic functionality** - avoid complex features initially\n- **Add complexity gradually** - enhance features incrementally after basic version works\n- **Resist over-engineering** - users can always request additional features later\n\n1. **Component Structure**\n  - Create focused, single-purpose interactive components\n  - Use only JSX/React components - NO markdown content\n  - Export components that can be embedded in HTML pages\n  - Ensure component paths match the data-path attribute exactly\n\n2. **Component Design**\n  - Keep component logic simple and readable\n  - Focus on interactive functionality only\n  - Build incrementally - add features one at a time, not all at once unless requested by the user\n\n3. **State Management**\n  - Import a JSON data source and bind it: `import sourceData from \"~/data/file.json\"`\n  - Use `const { data, updateData } = useData(sourceData);` for persisted, shareable state\n  - Use local component state for temporary interactions\n  - Data is not scoped to a component or page; sharing is achieved by importing the same JSON file\n\n4. **Styling Approach**\n  - Use Tailwind CSS classes from the approved safelist only\n  - Leverage shadcn/ui components for consistent design\n  - Keep inline styles minimal and purposeful\n  - Maintain consistent design patterns across components\n\n### Example MDX Component Structure\n```mdx\nimport sales from \"~/data/sales.json\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function SalesChart() {\n  const { data, updateData } = useData(sales);\n  \n  // data is an array of sales records\n  const salesData = data || [];\n  \n  return (\n    <div className=\"p-4 border rounded\">\n      <h3>Sales Records</h3>\n      {salesData.map(record => (\n        <div key={record.id} className=\"p-2 border-b\">\n          <p>{record.month}: ${record.revenue}</p>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n<SalesChart />\n```\n\n**Usage in HTML Page:**\n```html\n<h1>Dashboard</h1>\n<p>Welcome to our interactive dashboard.</p>\n<mdx-component data-path=\"components/sales-chart.mdx\"></mdx-component>\n<p></p>\n```\n\n<mdx_implementation>\n## Davia-Specific MDX Component Implementation\n\n### Critical Component Requirements\n\n1. **Component File Structure**\n  - MDX components are created in the \"components/\" directory\n  - File paths must match the data-path attribute exactly\n  - Components are embedded in HTML pages via `<mdx-component data-path=\"components/name.mdx\"></mdx-component>`\n  - Components can be shared across multiple HTML pages\n  - NO markdown content - components contain only interactive functionality\n\n2. **Imports**\n  - Data: `import dataSource from \"~/data/name.json\"`\n  - UI: Import shadcn components from `@/components/ui/*`\n  - Icons: Import icons from `lucide-react` (e.g., `import { ChevronDown, Plus, Search } from \"lucide-react\"`)\n  - Utilities: `import { cn } from \"@/lib/utils\"`, `import { useIsMobile } from \"@/hooks/use-mobile\"`\n\n3. **React Usage**\n  - React is globally available - use `React.useState`, `React.useEffect`, etc.\n  - Always prefix React hooks and methods with `React.`\n\n4. **Component Data Persistence**\n  - Bind component state to a specific data source: `const { data, updateData } = useData(dataSource);`\n  - `dataSource` is the imported JSON reference (e.g., `import dataSource from \"~/data/name.json\"`)\n  - Updates via `updateData(newData)` persist to the underlying JSON file and are shared wherever that file is used\n  - **Avoid hardcoding data in component files** \u2014 define initial structure in the JSON file, and use `useData(importedRef)` to read/update it\n  - Use the spread operator to preserve existing data when updating\n\n   **Component Example:**\n  ```mdx\n  import counter from \"~/data/counter.json\";\n  import { Button } from \"@/components/ui/button\";\n\n  export function InteractiveCounter() {\n    const { data, updateData } = useData(counter);\n    const count = data.count || 0;\n    \n    const increment = () => {\n      updateData({\n        ...data,\n        count: count + 1\n      });\n    };\n\n    return (\n      <div className=\"p-4 border rounded\">\n        <p>Count: {count}</p>\n        <Button onClick={increment}>Increment</Button>\n      </div>\n    );\n  }\n\n  <InteractiveCounter />\n  ```\n\n5. **Tailwind CSS v4 (Safelist ONLY)**\n  - The project uses Tailwind v4 with a strict safelist. Only the classes below are allowed.\n  - Do NOT use any class names not present in this safelist (they will be stripped at build time).\n  - Use `className` for styling as much as possible but if you need very specific styling, use inline styles (try to avoid if possible).\n\n   **Color Usage Guidelines:**\n   - **Text Colors**: Do NOT use text colors unless explicitly requested by users. Text colors are set globally through shadcn and nextjs.\n   - **Background Colors**: When using background colors (not predefined globals like primary, muted, accent), always include `dark:` variants for light/dark mode compatibility.\n\n  ```css\n  /* Layout */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}{block,inline-block,inline,flex,inline-flex,grid,inline-grid,hidden}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}overflow-{auto,hidden,visible,scroll,x-auto,y-auto}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}position-{static,relative,absolute,fixed,sticky}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}{top,bottom,left,right,inset,inset-x,inset-y}-{0,auto}\");\n\n  /* Flexbox & Grid */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}flex-{row,row-reverse,col,col-reverse}\", \"{,sm:,md:,lg:,xl:,2xl:}flex-wrap\", \"{,sm:,md:,lg:,xl:,2xl:}flex-nowrap\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}items-{start,end,center,baseline,stretch}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}justify-{start,end,center,between,around,evenly}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}gap-{0,1,2,3,4,5,6,8,10,12,16,20,24,32}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}col-span-{1,2,3,4,5,6,7,8,9,10,11,12,full}\");\n\n  /* Spacing */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}{p,m,px,py,pt,pr,pb,pl,mx,my,mt,mr,mb,ml}-{0,1,2,3,4,5,6,8,10,12,16,20,24,32,auto}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}space-{x,y}-{0,1,2,3,4,5,6,8,10,12,16,20,24,32}\");\n\n  /* Sizing */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}{w,h}-{auto,full,screen,fit,min,max,'1/2','1/3','2/3','1/4','3/4','1/5','2/5','3/5','4/5'}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,prose}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}{w,h}-{4,5,6,7,8,9,10,11,12}\");\n\n  /* Typography */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}font-{light,normal,medium,semibold,bold,extrabold}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}text-{left,center,right,justify}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}leading-{tight,snug,normal,relaxed,loose}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}italic\", \"{,sm:,md:,lg:,xl:,2xl:}not-italic\", \"{,sm:,md:,lg:,xl:,2xl:}underline\", \"{,sm:,md:,lg:,xl:,2xl:}line-through\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}list-{disc,decimal}\", \"{,sm:,md:,lg:,xl:,2xl:}list-inside\");\n\n  /* Colors (semantic & grayscale) */\n  @source inline(\"{,dark:,hover:,focus:,focus-visible:,active:}{bg,text,border,ring,fill,stroke}-{background,foreground,primary,primary-foreground,secondary,secondary-foreground,muted,muted-foreground,accent,accent-foreground,destructive,card,border,input,ring}\");\n  @source inline(\"{,dark:,hover:,focus:,focus-visible:,active:}{bg,text,border,ring,fill,stroke}-{slate,gray,zinc,neutral,stone}-{50,{100..900..100},950}\");\n  @source inline(\"{,dark:,hover:,focus:,focus-visible:,active:}{bg,text,border,ring,fill,stroke}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}\");\n  @source inline(\"{,dark:,hover:,focus:,focus-visible:,active:}{bg,text,border,ring,fill,stroke}-{transparent,white,black}\");\n  @source inline(\"ring-offset-{background,foreground,card,popover,white,black}\");\n\n  /* Borders */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}rounded{,-t,-r,-b,-l,-tl,-tr,-br,-bl}-{sm,md,lg,xl,2xl,3xl,full}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}border{,-x,-y,-t,-r,-b,-l}-{0,1,2,4,8}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}divide-{x,y}-{0,1,2,4,8}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}ring-{0,1,2,4,8}\");\n\n  /* Effects & Transitions */\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}shadow-{sm,md,lg,xl,2xl,inner,none}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}opacity-{0,25,50,75,100}\");\n  @source inline(\"{,sm:,md:,lg:,xl:,2xl:}transition-all\", \"{,sm:,md:,lg:,xl:,2xl:}duration-{150,200,300,500,700}\");\n  ```\n</mdx_implementation>\n\n<mdx_shadcn>\n## Shadcn Component Instructions\n\n### Best Practices\n1. **Composition**: Combine multiple components to create rich interfaces\n2. **Styling**: Use `className` prop for additional Tailwind CSS classes\n3. **State Management**: Manage component state within custom components\n\n### Forms\nUse the following imports for forms and validation. Import shadcn form components from `@/components/ui/form`.\n\n- **useForm** from react-hook-form - For form state management\n- **zodResolver** from @hookform/resolvers/zod - For form validation\n- **z** from zod - For schema validation\n\n```mdx\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from \"@/components/ui/form\";\n\nexport function ContactForm() {\n  const formSchema = z.object({\n    email: z.string().email(\"Please enter a valid email address\"),\n  });\n\n  const form = useForm({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n    },\n  });\n\n  const onSubmit = (values) => {\n    console.log(values);\n  };\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input placeholder=\"Enter your email\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n```\n\n### Charts\nRecharts v2 components are available for data visualization. Import them from `recharts` as shown below.\n**Important**: Remember to set a `min-h-[VALUE]` on the ChartContainer component. This is required for the chart to be responsive.\n**Colors**: Use direct hex, hsl, or oklch values in chartConfig instead of CSS variables. Default chart colors available:\n- **Chart 1**: `oklch(0.646 0.222 41.116)` (light) / `oklch(0.488 0.243 264.376)` (dark)\n- **Chart 2**: `oklch(0.6 0.118 184.704)` (light) / `oklch(0.696 0.17 162.48)` (dark)\n- **Chart 3**: `oklch(0.398 0.07 227.392)` (light) / `oklch(0.769 0.188 70.08)` (dark)\n- **Chart 4**: `oklch(0.828 0.189 84.429)` (light) / `oklch(0.627 0.265 303.9)` (dark)\n- **Chart 5**: `oklch(0.769 0.188 70.08)` (light) / `oklch(0.645 0.246 16.439)` (dark)\n\n```mdx\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\";\nimport { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis } from \"recharts\";\n\nexport function SalesChart() {\n  const chartData = [\n    { month: \"Jan\", sales: 4000, profit: 2400 },\n    { month: \"Feb\", sales: 3000, profit: 1398 },\n    { month: \"Mar\", sales: 2000, profit: 9800 },\n    { month: \"Apr\", sales: 2780, profit: 3908 },\n    { month: \"May\", sales: 1890, profit: 4800 },\n    { month: \"Jun\", sales: 2390, profit: 3800 },\n  ];\n\n  const chartConfig = {\n    sales: {\n      label: \"Sales\",\n      color: \"oklch(0.646 0.222 41.116)\",\n    },\n    profit: {\n      label: \"Profit\", \n      color: \"oklch(0.6 0.118 184.704)\",\n    },\n  };\n\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[150px] w-full\">\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <BarChart data={chartData}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey=\"month\" />\n          <YAxis />\n          <ChartTooltip content={<ChartTooltipContent />} />\n          <Bar dataKey=\"sales\" fill=\"var(--color-sales)\" />\n          <Bar dataKey=\"profit\" fill=\"var(--color-profit)\" />\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartContainer>\n  );\n}\n```\n\n### Toasts\nUse Sonner by importing `toast`:\n\n```mdx\nimport { Button } from \"@/components/ui/button\";\nimport { toast } from \"sonner\";\n\nexport function SimpleToast() {\n  const handleClick = () => {\n    toast('Event has been created');\n  };\n\n  return (\n    <Button onClick={handleClick}>Show Toast</Button>\n  );\n}\n```\n</mdx_shadcn>\n\n<mdx_custom_components>\n## Custom Component Instructions\n\n### Rules for Custom Components\n\n1. **Always Use Export**\n  - All custom components must use `export function ComponentName()`\n  - This makes them available throughout the MDX document\n\n2. **Keep Everything Inside**\n  - ALL variables, functions, state, and logic must be declared inside the component\n  - Never declare anything outside the component scope\n  \n  **WRONG:**\n  ```mdx\n  const initCounter = 4;\n  export function CounterComponent() {\n    const [count, setCount] = React.useState(initCounter);\n  }\n  ```\n  \n  **CORRECT:**\n  ```mdx\n  export function CounterComponent() {\n    const initCounter = 4;\n    const [count, setCount] = React.useState(initCounter);\n  }\n  ```\n\n3. **Component Placement**\n  - ALL custom component definitions MUST be placed at the TOP of the document\n  - Define components before any content or component usage\n  - Never define components at the bottom or mixed within content\n  - ALWAYS add a blank line between the last component and the beginning of MDX content\n  \n  **WRONG:**\n  ```mdx\n  export function InternEvents() {\n    const events = [];\n    return (<></>);\n  }\n  <InternEvents />\n  ```\n  \n  **CORRECT:**\n  ```mdx\n  export function InternEvents() {\n    const events = [];\n    return (<></>);\n  }\n\n  <InternEvents />\n  ```\n\n4. **Component Structure**\n  - Use descriptive, PascalCase component names\n  - Keep components self-contained with all logic inside\n  - Components should be focused and single-purpose\n\n5. **String Quotes (IMPORTANT)**\n  - Try to use double quotes `\"` for strings as much as possible, but if you need to use single quotes, use single quotes `'`\n  - Triple quotes ```text``` will cause syntax errors\n  \n  **WRONG:**\n  ```mdx\n  const events = [\n    { title: ```Meeting```, description: ```Team sync``` }\n  ];\n  ```\n  \n  **CORRECT:**\n  ```mdx\n  const events = [\n    { title: \"Meeting\", description: \"Team sync\" }\n  ];\n  ```\n</mdx_custom_components>\n\n<available_packages>\nHere are the available secondary packages for you to use to build your components:\n- react-simple-maps@3.0.0 : ideal for lightweight, SVG-based map visualizations (choropleths, small geo overlays).\n(careful to set the geoUrl constant inside the component function)\n\n- usehooks-ts@3.1.1 : React hooks library, written in Typescript and easy to use. It provides a set of hooks that enables you to build your React applications faster.\nDo not hesitate to look at the documentation on the internet (use the web search tool) of the packages to see how to use them.\n</available_packages>\n</mdx_guidelines>";
+//# sourceMappingURL=mdx.d.ts.map

package/dist/agent/prompts/blocks/mdx/mdx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../../../../../src/agent/prompts/blocks/mdx/mdx.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,g8gBAsFT,CAAC"}

package/dist/agent/prompts/blocks/mdx/mdx.js

@@ -0,0 +1,91 @@
+import { MDX_IMPLEMENTATION_INSTRUCTIONS } from "./davia_specific.js";
+import { MDX_SHADCN_INSTRUCTIONS } from "./shadcn.js";
+import { CUSTOM_COMPONENTS } from "./custom_components.js";
+import { AVAILABLE_PACKAGES } from "./available_packages.js";
+export const MDX_GUIDELINES = `<mdx_guidelines>
+
+# Main MDX Guidelines for Component Development
+MDX_GUIDELINES = f"""<mdx_guidelines>
+## MDX Component Guidelines
+
+### What are MDX Components?
+MDX components are reusable interactive React components that get embedded into HTML pages. They contain only functional, interactive elements - no regular markdown content.
+
+### When to Create MDX Components
+- When users need interactive widgets (forms, calculators, charts)
+- For dynamic data visualization or dashboards
+- When building custom functionality beyond basic HTML
+- For reusable interactive elements within pages
+
+### Component Development Best Practices
+
+**GOOD PRACTICE: START SIMPLE FIRST**
+- **Always begin with basic functionality** - avoid complex features initially
+- **Add complexity gradually** - enhance features incrementally after basic version works
+- **Resist over-engineering** - users can always request additional features later
+
+1. **Component Structure**
+  - Create focused, single-purpose interactive components
+  - Use only JSX/React components - NO markdown content
+  - Export components that can be embedded in HTML pages
+  - Ensure component paths match the data-path attribute exactly
+
+2. **Component Design**
+  - Keep component logic simple and readable
+  - Focus on interactive functionality only
+  - Build incrementally - add features one at a time, not all at once unless requested by the user
+
+3. **State Management**
+  - Import a JSON data source and bind it: \`import sourceData from "~/data/file.json"\`
+  - Use \`const { data, updateData } = useData(sourceData);\` for persisted, shareable state
+  - Use local component state for temporary interactions
+  - Data is not scoped to a component or page; sharing is achieved by importing the same JSON file
+
+4. **Styling Approach**
+  - Use Tailwind CSS classes from the approved safelist only
+  - Leverage shadcn/ui components for consistent design
+  - Keep inline styles minimal and purposeful
+  - Maintain consistent design patterns across components
+
+### Example MDX Component Structure
+\`\`\`mdx
+import sales from "~/data/sales.json";
+import { Button } from "@/components/ui/button";
+
+export function SalesChart() {
+  const { data, updateData } = useData(sales);
+  
+  // data is an array of sales records
+  const salesData = data || [];
+  
+  return (
+    <div className="p-4 border rounded">
+      <h3>Sales Records</h3>
+      {salesData.map(record => (
+        <div key={record.id} className="p-2 border-b">
+          <p>{record.month}: \${record.revenue}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+<SalesChart />
+\`\`\`
+
+**Usage in HTML Page:**
+\`\`\`html
+<h1>Dashboard</h1>
+<p>Welcome to our interactive dashboard.</p>
+<mdx-component data-path="components/sales-chart.mdx"></mdx-component>
+<p></p>
+\`\`\`
+
+${MDX_IMPLEMENTATION_INSTRUCTIONS}
+
+${MDX_SHADCN_INSTRUCTIONS}
+
+${CUSTOM_COMPONENTS}
+
+${AVAILABLE_PACKAGES}
+</mdx_guidelines>`;

package/dist/agent/prompts/blocks/mdx/shadcn.d.ts

@@ -0,0 +1,2 @@
+export declare const MDX_SHADCN_INSTRUCTIONS = "<mdx_shadcn>\n## Shadcn Component Instructions\n\n### Best Practices\n1. **Composition**: Combine multiple components to create rich interfaces\n2. **Styling**: Use `className` prop for additional Tailwind CSS classes\n3. **State Management**: Manage component state within custom components\n\n### Forms\nUse the following imports for forms and validation. Import shadcn form components from `@/components/ui/form`.\n\n- **useForm** from react-hook-form - For form state management\n- **zodResolver** from @hookform/resolvers/zod - For form validation\n- **z** from zod - For schema validation\n\n```mdx\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from \"@/components/ui/form\";\n\nexport function ContactForm() {\n  const formSchema = z.object({\n    email: z.string().email(\"Please enter a valid email address\"),\n  });\n\n  const form = useForm({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n    },\n  });\n\n  const onSubmit = (values) => {\n    console.log(values);\n  };\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input placeholder=\"Enter your email\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n```\n\n### Charts\nRecharts v2 components are available for data visualization. Import them from `recharts` as shown below.\n**Important**: Remember to set a `min-h-[VALUE]` on the ChartContainer component. This is required for the chart to be responsive.\n**Colors**: Use direct hex, hsl, or oklch values in chartConfig instead of CSS variables. Default chart colors available:\n- **Chart 1**: `oklch(0.646 0.222 41.116)` (light) / `oklch(0.488 0.243 264.376)` (dark)\n- **Chart 2**: `oklch(0.6 0.118 184.704)` (light) / `oklch(0.696 0.17 162.48)` (dark)\n- **Chart 3**: `oklch(0.398 0.07 227.392)` (light) / `oklch(0.769 0.188 70.08)` (dark)\n- **Chart 4**: `oklch(0.828 0.189 84.429)` (light) / `oklch(0.627 0.265 303.9)` (dark)\n- **Chart 5**: `oklch(0.769 0.188 70.08)` (light) / `oklch(0.645 0.246 16.439)` (dark)\n\n```mdx\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\";\nimport { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis } from \"recharts\";\n\nexport function SalesChart() {\n  const chartData = [\n    { month: \"Jan\", sales: 4000, profit: 2400 },\n    { month: \"Feb\", sales: 3000, profit: 1398 },\n    { month: \"Mar\", sales: 2000, profit: 9800 },\n    { month: \"Apr\", sales: 2780, profit: 3908 },\n    { month: \"May\", sales: 1890, profit: 4800 },\n    { month: \"Jun\", sales: 2390, profit: 3800 },\n  ];\n\n  const chartConfig = {\n    sales: {\n      label: \"Sales\",\n      color: \"oklch(0.646 0.222 41.116)\",\n    },\n    profit: {\n      label: \"Profit\", \n      color: \"oklch(0.6 0.118 184.704)\",\n    },\n  };\n\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[150px] w-full\">\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <BarChart data={chartData}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey=\"month\" />\n          <YAxis />\n          <ChartTooltip content={<ChartTooltipContent />} />\n          <Bar dataKey=\"sales\" fill=\"var(--color-sales)\" />\n          <Bar dataKey=\"profit\" fill=\"var(--color-profit)\" />\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartContainer>\n  );\n}\n```\n\n### Toasts\nUse Sonner by importing `toast`:\n\n```mdx\nimport { Button } from \"@/components/ui/button\";\nimport { toast } from \"sonner\";\n\nexport function SimpleToast() {\n  const handleClick = () => {\n    toast('Event has been created');\n  };\n\n  return (\n    <Button onClick={handleClick}>Show Toast</Button>\n  );\n}\n```\n</mdx_shadcn>";
+//# sourceMappingURL=shadcn.d.ts.map

package/dist/agent/prompts/blocks/mdx/shadcn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadcn.d.ts","sourceRoot":"","sources":["../../../../../src/agent/prompts/blocks/mdx/shadcn.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,i1IAmItB,CAAC"}

package/dist/agent/prompts/blocks/mdx/shadcn.js

@@ -0,0 +1,132 @@
+export const MDX_SHADCN_INSTRUCTIONS = `<mdx_shadcn>
+## Shadcn Component Instructions
+
+### Best Practices
+1. **Composition**: Combine multiple components to create rich interfaces
+2. **Styling**: Use \`className\` prop for additional Tailwind CSS classes
+3. **State Management**: Manage component state within custom components
+
+### Forms
+Use the following imports for forms and validation. Import shadcn form components from \`@/components/ui/form\`.
+
+- **useForm** from react-hook-form - For form state management
+- **zodResolver** from @hookform/resolvers/zod - For form validation
+- **z** from zod - For schema validation
+
+\`\`\`mdx
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+
+export function ContactForm() {
+  const formSchema = z.object({
+    email: z.string().email("Please enter a valid email address"),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = (values) => {
+    console.log(values);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter your email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+\`\`\`
+
+### Charts
+Recharts v2 components are available for data visualization. Import them from \`recharts\` as shown below.
+**Important**: Remember to set a \`min-h-[VALUE]\` on the ChartContainer component. This is required for the chart to be responsive.
+**Colors**: Use direct hex, hsl, or oklch values in chartConfig instead of CSS variables. Default chart colors available:
+- **Chart 1**: \`oklch(0.646 0.222 41.116)\` (light) / \`oklch(0.488 0.243 264.376)\` (dark)
+- **Chart 2**: \`oklch(0.6 0.118 184.704)\` (light) / \`oklch(0.696 0.17 162.48)\` (dark)
+- **Chart 3**: \`oklch(0.398 0.07 227.392)\` (light) / \`oklch(0.769 0.188 70.08)\` (dark)
+- **Chart 4**: \`oklch(0.828 0.189 84.429)\` (light) / \`oklch(0.627 0.265 303.9)\` (dark)
+- **Chart 5**: \`oklch(0.769 0.188 70.08)\` (light) / \`oklch(0.645 0.246 16.439)\` (dark)
+
+\`\`\`mdx
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis } from "recharts";
+
+export function SalesChart() {
+  const chartData = [
+    { month: "Jan", sales: 4000, profit: 2400 },
+    { month: "Feb", sales: 3000, profit: 1398 },
+    { month: "Mar", sales: 2000, profit: 9800 },
+    { month: "Apr", sales: 2780, profit: 3908 },
+    { month: "May", sales: 1890, profit: 4800 },
+    { month: "Jun", sales: 2390, profit: 3800 },
+  ];
+
+  const chartConfig = {
+    sales: {
+      label: "Sales",
+      color: "oklch(0.646 0.222 41.116)",
+    },
+    profit: {
+      label: "Profit", 
+      color: "oklch(0.6 0.118 184.704)",
+    },
+  };
+
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[150px] w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="month" />
+          <YAxis />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="sales" fill="var(--color-sales)" />
+          <Bar dataKey="profit" fill="var(--color-profit)" />
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartContainer>
+  );
+}
+\`\`\`
+
+### Toasts
+Use Sonner by importing \`toast\`:
+
+\`\`\`mdx
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+export function SimpleToast() {
+  const handleClick = () => {
+    toast('Event has been created');
+  };
+
+  return (
+    <Button onClick={handleClick}>Show Toast</Button>
+  );
+}
+\`\`\`
+</mdx_shadcn>`;

package/dist/agent/prompts/blocks/tiptap.d.ts

@@ -0,0 +1,2 @@
+export declare const TIPTAP_HTML_GUIDELINES = "<tiptap_html_guidelines>\n## Tiptap HTML Input Guidelines\n\n1. **Use only supported elements**\n   Tiptap follows a strict ProseMirror schema. If your HTML includes tags, custom attributes or styles not in that schema, those tags will silently be stripped out.\n   - **Block-level**: `<p>`, `<h1>\u2026<h6>`, `<blockquote>`, `<ul>`, `<ol>`, `<li>`, `<pre><code>`, `<hr>`\n   - **Task Lists**: `<ul data-type=\"taskList\">` with `<li data-type=\"taskItem\" data-checked=\"false\"||\"true\">` containing `<input type=\"checkbox\">` and `<p>` for todo items\n   - **Inline/text-level**: `<strong>`, `<em>`, `<code>`, `<a>`, `<br>`\n   - **MDX Components**: `<mdx-component data-path=\"components/component-name.mdx\"></mdx-component>` for embedding interactive components\n   - **Data Views**: `<database-view data-path=\"data/path.json\"></database-view>` for displaying top-level array JSON directly in HTML\n   - **Excalidraw Whiteboards**: `<excalidraw data-path=\"data/diagram.json\"></excalidraw>` for embedding interactive whiteboards\n   Anything outside this list (like `<div>`, `<span>`, `<img>`) will be dropped unless the corresponding extension is added.\n\n2. **Well-formed HTML only**\n   - Every tag must be properly opened and closed.\n   - Lists must be correctly nested: e.g. `<ul><li>Item text</li></ul>`\n   - Inline tags must be inside blocks: e.g. `<p>This is <strong>bold</strong> text.</p>`\n\n3. **No stray inline elements**\n   Avoid standalone inline tags or text outside blocks.\n   WRONG: `<strong>bold!</strong><p>Paragraph</p>`\n   CORRECT: `<p><strong>bold!</strong></p><p>Paragraph</p>`\n\n4. **Creating Task Lists (Todo Lists)**\n   To create interactive todo lists, use the task list structure:\n   \n   ```html\n   <ul data-type=\"taskList\">\n      <li data-checked=\"false\" data-type=\"taskItem\">\n         <input type=\"checkbox\">\n         <p>Task description here</p>\n      </li>\n      <li data-checked=\"true\" data-type=\"taskItem\">\n         <input type=\"checkbox\" checked>\n         <p>Completed task</p>\n      </li>\n   </ul>\n   ```\n   \n   - Use `data-checked=\"false\"` for unchecked items\n   - Use `data-checked=\"true\"` and `checked` attribute for completed items\n   - Each task item contains an `<input type=\"checkbox\">` and a `<p>` with the task content\n\n5. **Embedding MDX Components**\n   To embed interactive components in HTML pages, use the mdx-component element:\n   \n   ```html\n   <mdx-component data-path=\"components/component-name.mdx\"></mdx-component>\n   ```\n   \n   * HTML pages are for content structure only - no custom app logic\n   * Interactive functionality and complex data handling should live within MDX components\n\n5a. **Embedding Data Views (Top-Level Arrays Only)**\n   To directly display JSON data in HTML pages (without an MDX component), use the database-view element:\n   \n   ```html\n   <database-view data-path=\"data/path.json\"></database-view>\n   ```\n   \n   - Works only when the JSON file's root is a top-level array (table/list-like datasets)\n   - For configs, single-value objects, or nested structures, use an MDX component instead\n\n6. **Spacing Multiple Components**\n   When adding multiple `<mdx-component>`, `<database-view>`, or `<excalidraw>` blocks one after another, you MUST separate them with empty paragraphs to ensure proper editor behavior:\n   \n   ```html\n   <mdx-component data-path=\"components/component1.mdx\"></mdx-component>\n   <p></p>\n   <database-view data-path=\"data/list-a.json\"></database-view>\n   <p></p>\n   <excalidraw data-path=\"data/diagram.json\"></excalidraw>\n   ```\n   \n   This creates editable zones where users can position their cursor and add content\n\n7. **Commenting on the document**\n   When the user asks for a comment on the document, you should use one of the valid blockquote tags to wrap the comment. \n   You shouldn't place them inside HTML comments for they would be stripped out.\n\n### Sample Valid HTML\n```html\n<h1>Hello World</h1>\n<p>This is a <strong>bold</strong> paragraph.</p>\n<ul>\n   <li>First item</li>\n   <li>Second <em>item</em></li>\n</ul>\n<blockquote>A nice quote.</blockquote>\n<pre><code>console.log('hi');</code></pre>\n<hr />\n```\n\n### Example of Invalid HTML\n```html\n<div>A div tag</div>\n<span style=\"color:red;\">Red text</span>\n<p>Some <unknown>weird</unknown> tag.</p>\n```\n</tiptap_html_guidelines>";
+//# sourceMappingURL=tiptap.d.ts.map

package/dist/agent/prompts/blocks/tiptap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap.d.ts","sourceRoot":"","sources":["../../../../src/agent/prompts/blocks/tiptap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,u0IAmGT,CAAC"}

package/dist/agent/prompts/blocks/tiptap.js

@@ -0,0 +1,100 @@
+export const TIPTAP_HTML_GUIDELINES = `<tiptap_html_guidelines>
+## Tiptap HTML Input Guidelines
+
+1. **Use only supported elements**
+   Tiptap follows a strict ProseMirror schema. If your HTML includes tags, custom attributes or styles not in that schema, those tags will silently be stripped out.
+   - **Block-level**: \`<p>\`, \`<h1>…<h6>\`, \`<blockquote>\`, \`<ul>\`, \`<ol>\`, \`<li>\`, \`<pre><code>\`, \`<hr>\`
+   - **Task Lists**: \`<ul data-type="taskList">\` with \`<li data-type="taskItem" data-checked="false"||"true">\` containing \`<input type="checkbox">\` and \`<p>\` for todo items
+   - **Inline/text-level**: \`<strong>\`, \`<em>\`, \`<code>\`, \`<a>\`, \`<br>\`
+   - **MDX Components**: \`<mdx-component data-path="components/component-name.mdx"></mdx-component>\` for embedding interactive components
+   - **Data Views**: \`<database-view data-path="data/path.json"></database-view>\` for displaying top-level array JSON directly in HTML
+   - **Excalidraw Whiteboards**: \`<excalidraw data-path="data/diagram.json"></excalidraw>\` for embedding interactive whiteboards
+   Anything outside this list (like \`<div>\`, \`<span>\`, \`<img>\`) will be dropped unless the corresponding extension is added.
+
+2. **Well-formed HTML only**
+   - Every tag must be properly opened and closed.
+   - Lists must be correctly nested: e.g. \`<ul><li>Item text</li></ul>\`
+   - Inline tags must be inside blocks: e.g. \`<p>This is <strong>bold</strong> text.</p>\`
+
+3. **No stray inline elements**
+   Avoid standalone inline tags or text outside blocks.
+   WRONG: \`<strong>bold!</strong><p>Paragraph</p>\`
+   CORRECT: \`<p><strong>bold!</strong></p><p>Paragraph</p>\`
+
+4. **Creating Task Lists (Todo Lists)**
+   To create interactive todo lists, use the task list structure:
+   
+   \`\`\`html
+   <ul data-type="taskList">
+      <li data-checked="false" data-type="taskItem">
+         <input type="checkbox">
+         <p>Task description here</p>
+      </li>
+      <li data-checked="true" data-type="taskItem">
+         <input type="checkbox" checked>
+         <p>Completed task</p>
+      </li>
+   </ul>
+   \`\`\`
+   
+   - Use \`data-checked="false"\` for unchecked items
+   - Use \`data-checked="true"\` and \`checked\` attribute for completed items
+   - Each task item contains an \`<input type="checkbox">\` and a \`<p>\` with the task content
+
+5. **Embedding MDX Components**
+   To embed interactive components in HTML pages, use the mdx-component element:
+   
+   \`\`\`html
+   <mdx-component data-path="components/component-name.mdx"></mdx-component>
+   \`\`\`
+   
+   * HTML pages are for content structure only - no custom app logic
+   * Interactive functionality and complex data handling should live within MDX components
+
+5a. **Embedding Data Views (Top-Level Arrays Only)**
+   To directly display JSON data in HTML pages (without an MDX component), use the database-view element:
+   
+   \`\`\`html
+   <database-view data-path="data/path.json"></database-view>
+   \`\`\`
+   
+   - Works only when the JSON file's root is a top-level array (table/list-like datasets)
+   - For configs, single-value objects, or nested structures, use an MDX component instead
+
+6. **Spacing Multiple Components**
+   When adding multiple \`<mdx-component>\`, \`<database-view>\`, or \`<excalidraw>\` blocks one after another, you MUST separate them with empty paragraphs to ensure proper editor behavior:
+   
+   \`\`\`html
+   <mdx-component data-path="components/component1.mdx"></mdx-component>
+   <p></p>
+   <database-view data-path="data/list-a.json"></database-view>
+   <p></p>
+   <excalidraw data-path="data/diagram.json"></excalidraw>
+   \`\`\`
+   
+   This creates editable zones where users can position their cursor and add content
+
+7. **Commenting on the document**
+   When the user asks for a comment on the document, you should use one of the valid blockquote tags to wrap the comment. 
+   You shouldn't place them inside HTML comments for they would be stripped out.
+
+### Sample Valid HTML
+\`\`\`html
+<h1>Hello World</h1>
+<p>This is a <strong>bold</strong> paragraph.</p>
+<ul>
+   <li>First item</li>
+   <li>Second <em>item</em></li>
+</ul>
+<blockquote>A nice quote.</blockquote>
+<pre><code>console.log('hi');</code></pre>
+<hr />
+\`\`\`
+
+### Example of Invalid HTML
+\`\`\`html
+<div>A div tag</div>
+<span style="color:red;">Red text</span>
+<p>Some <unknown>weird</unknown> tag.</p>
+\`\`\`
+</tiptap_html_guidelines>`;

package/dist/agent/prompts/index.d.ts

@@ -0,0 +1,7 @@
+export { TIPTAP_HTML_GUIDELINES } from "./blocks/tiptap.js";
+export { DATA_GUIDELINES } from "./blocks/data.js";
+export { EXCALIDRAW_GUIDELINES } from "./blocks/excalidraw.js";
+export { FILE_HANDLING_INSTRUCTIONS } from "./blocks/file_handling.js";
+export { MDX_GUIDELINES } from "./blocks/mdx/mdx.js";
+export { STATIC_AGENT_INSTRUCT, DYNAMIC_AGENT_INSTRUCT } from "./agent.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/agent/prompts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/agent/prompts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}

package/dist/agent/prompts/index.js

@@ -0,0 +1,6 @@
+export { TIPTAP_HTML_GUIDELINES } from "./blocks/tiptap.js";
+export { DATA_GUIDELINES } from "./blocks/data.js";
+export { EXCALIDRAW_GUIDELINES } from "./blocks/excalidraw.js";
+export { FILE_HANDLING_INSTRUCTIONS } from "./blocks/file_handling.js";
+export { MDX_GUIDELINES } from "./blocks/mdx/mdx.js";
+export { STATIC_AGENT_INSTRUCT, DYNAMIC_AGENT_INSTRUCT } from "./agent.js";

package/dist/agent/prompts/repo_instructions.d.ts

@@ -0,0 +1,3 @@
+export declare const GIT_EXPLO_INSTRUCTIONS: (repositoryContent: string, isUpdate?: boolean) => string;
+export declare const HUMAN_MESSAGE = "A repository has been analyzed. Please create concise, VISUAL, EDUCATIONAL documentation that teaches and explains this repository in the workspace.\n \n Follow the github_exploration_instructions carefully.";
+//# sourceMappingURL=repo_instructions.d.ts.map

package/dist/agent/prompts/repo_instructions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repo_instructions.d.ts","sourceRoot":"","sources":["../../../src/agent/prompts/repo_instructions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,GACjC,mBAAmB,MAAM,EACzB,WAAU,OAAe,WAub1B,CAAC;AAEF,eAAO,MAAM,aAAa,oNAE6B,CAAC"}