@databricks/appkit-ui 0.47.1 → 0.48.0

package/dist/cli/commands/lint.js

@@ -26,6 +26,12 @@ const rules = [
 		id: "no-parse-float-without-validation",
 		pattern: "parseFloat($X).toFixed($Y)",
 		message: "parseFloat can return NaN. Validate input or use toNumber() helper from shared/types.ts."
+	},
+	{
+		id: "no-variants-in-prod",
+		pattern: "<Variants $$$P>$$$C</Variants>",
+		message: "<Variants> is a development-only variant picker and must not be shipped. Finalize the chosen <Variant> before deploying.",
+		includeTests: false
 	}
 ];
 function isTestFile(filePath, rootDir) {

package/dist/cli/commands/lint.js.map

@@ -1 +1 @@
-{"version":3,"file":"lint.js","names":[],"sources":["../../../src/cli/commands/lint.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { Lang, parse } from \"@ast-grep/napi\";\nimport { Command } from \"commander\";\n\ninterface Rule {\n  id: string;\n  pattern: string;\n  message: string;\n  includeTests?: boolean;\n  filter?: (code: string) => boolean;\n}\n\nconst rules: Rule[] = [\n  {\n    id: \"no-double-type-assertion\",\n    pattern: \"$X as unknown as $Y\",\n    message:\n      \"Avoid double type assertion (as unknown as). Use proper type guards or fix the source type.\",\n  },\n  {\n    id: \"no-as-any\",\n    pattern: \"$X as any\",\n    message:\n      'Avoid \"as any\" type assertion. Use proper typing or unknown with type guards.',\n    includeTests: false, // acceptable in test mocks\n  },\n  {\n    id: \"no-array-index-key\",\n    pattern: \"key={$IDX}\",\n    message:\n      \"Avoid using array index as React key. Use a stable unique identifier.\",\n    filter: (code) => /key=\\{(idx|index|i)\\}/.test(code),\n  },\n  {\n    id: \"no-parse-float-without-validation\",\n    pattern: \"parseFloat($X).toFixed($Y)\",\n    message:\n      \"parseFloat can return NaN. Validate input or use toNumber() helper from shared/types.ts.\",\n  },\n];\n\nfunction isTestFile(filePath: string, rootDir: string): boolean {\n  // Relative to scan root: an ancestor `tests` dir must not mark the whole project as tests.\n  const rel = path.relative(rootDir, filePath);\n  return (\n    /\\.(test|spec)\\.(ts|tsx)$/.test(rel) || /(^|[/\\\\])tests[/\\\\]/.test(rel)\n  );\n}\n\nfunction findTsFiles(dir: string, files: string[] = []): string[] {\n  const entries = fs.readdirSync(dir, { withFileTypes: true });\n\n  for (const entry of entries) {\n    const fullPath = path.join(dir, entry.name);\n\n    if (entry.isDirectory()) {\n      if ([\"node_modules\", \"dist\", \"build\", \".git\"].includes(entry.name))\n        continue;\n      findTsFiles(fullPath, files);\n    } else if (entry.isFile() && /\\.(ts|tsx)$/.test(entry.name)) {\n      files.push(fullPath);\n    }\n  }\n\n  return files;\n}\n\ninterface Violation {\n  file: string;\n  line: number;\n  column: number;\n  rule: string;\n  message: string;\n  code: string;\n}\n\nfunction lintFile(\n  filePath: string,\n  rules: Rule[],\n  rootDir: string,\n): Violation[] {\n  const violations: Violation[] = [];\n  const content = fs.readFileSync(filePath, \"utf-8\");\n  const lang = filePath.endsWith(\".tsx\") ? Lang.Tsx : Lang.TypeScript;\n  const testFile = isTestFile(filePath, rootDir);\n\n  const ast = parse(lang, content);\n  const root = ast.root();\n\n  for (const rule of rules) {\n    // skip rules that don't apply to test files\n    if (testFile && rule.includeTests === false) continue;\n\n    const matches = root.findAll(rule.pattern);\n\n    for (const match of matches) {\n      const code = match.text();\n\n      if (rule.filter && !rule.filter(code)) continue;\n\n      const range = match.range();\n      violations.push({\n        file: filePath,\n        line: range.start.line + 1,\n        column: range.start.column + 1,\n        rule: rule.id,\n        message: rule.message,\n        code: code.length > 80 ? `${code.slice(0, 77)}...` : code,\n      });\n    }\n  }\n\n  return violations;\n}\n\n/**\n * Lint command implementation\n */\nfunction runLint() {\n  const rootDir = process.cwd();\n  const files = findTsFiles(rootDir);\n\n  console.log(`Scanning ${files.length} TypeScript files...\\n`);\n\n  const allViolations: Violation[] = [];\n\n  for (const file of files) {\n    const violations = lintFile(file, rules, rootDir);\n    allViolations.push(...violations);\n  }\n\n  if (allViolations.length === 0) {\n    console.log(\"No ast-grep lint violations found.\");\n    process.exit(0);\n  }\n\n  console.log(`Found ${allViolations.length} violation(s):\\n`);\n\n  for (const v of allViolations) {\n    const relPath = path.relative(rootDir, v.file);\n    console.log(`${relPath}:${v.line}:${v.column}`);\n    console.log(`  ${v.rule}: ${v.message}`);\n    console.log(`  > ${v.code}\\n`);\n  }\n\n  process.exit(1);\n}\n\nexport const lintCommand = new Command(\"lint\")\n  .description(\"Run AST-based linting on TypeScript files\")\n  .addHelpText(\n    \"after\",\n    `\nExamples:\n  $ appkit lint`,\n  )\n  .action(runLint);\n"],"mappings":";;;;;;AAaA,MAAM,QAAgB;CACpB;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACH;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACF,cAAc;EACf;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACF,SAAS,SAAS,wBAAwB,KAAK,KAAK;EACrD;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACH;CACF;AAED,SAAS,WAAW,UAAkB,SAA0B;CAE9D,MAAM,MAAM,KAAK,SAAS,SAAS,SAAS;AAC5C,QACE,2BAA2B,KAAK,IAAI,IAAI,sBAAsB,KAAK,IAAI;;AAI3E,SAAS,YAAY,KAAa,QAAkB,EAAE,EAAY;CAChE,MAAM,UAAU,GAAG,YAAY,KAAK,EAAE,eAAe,MAAM,CAAC;AAE5D,MAAK,MAAM,SAAS,SAAS;EAC3B,MAAM,WAAW,KAAK,KAAK,KAAK,MAAM,KAAK;AAE3C,MAAI,MAAM,aAAa,EAAE;AACvB,OAAI;IAAC;IAAgB;IAAQ;IAAS;IAAO,CAAC,SAAS,MAAM,KAAK,CAChE;AACF,eAAY,UAAU,MAAM;aACnB,MAAM,QAAQ,IAAI,cAAc,KAAK,MAAM,KAAK,CACzD,OAAM,KAAK,SAAS;;AAIxB,QAAO;;AAYT,SAAS,SACP,UACA,OACA,SACa;CACb,MAAM,aAA0B,EAAE;CAClC,MAAM,UAAU,GAAG,aAAa,UAAU,QAAQ;CAClD,MAAM,OAAO,SAAS,SAAS,OAAO,GAAG,KAAK,MAAM,KAAK;CACzD,MAAM,WAAW,WAAW,UAAU,QAAQ;CAG9C,MAAM,OADM,MAAM,MAAM,QAAQ,CACf,MAAM;AAEvB,MAAK,MAAM,QAAQ,OAAO;AAExB,MAAI,YAAY,KAAK,iBAAiB,MAAO;EAE7C,MAAM,UAAU,KAAK,QAAQ,KAAK,QAAQ;AAE1C,OAAK,MAAM,SAAS,SAAS;GAC3B,MAAM,OAAO,MAAM,MAAM;AAEzB,OAAI,KAAK,UAAU,CAAC,KAAK,OAAO,KAAK,CAAE;GAEvC,MAAM,QAAQ,MAAM,OAAO;AAC3B,cAAW,KAAK;IACd,MAAM;IACN,MAAM,MAAM,MAAM,OAAO;IACzB,QAAQ,MAAM,MAAM,SAAS;IAC7B,MAAM,KAAK;IACX,SAAS,KAAK;IACd,MAAM,KAAK,SAAS,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC,OAAO;IACtD,CAAC;;;AAIN,QAAO;;;;;AAMT,SAAS,UAAU;CACjB,MAAM,UAAU,QAAQ,KAAK;CAC7B,MAAM,QAAQ,YAAY,QAAQ;AAElC,SAAQ,IAAI,YAAY,MAAM,OAAO,wBAAwB;CAE7D,MAAM,gBAA6B,EAAE;AAErC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,aAAa,SAAS,MAAM,OAAO,QAAQ;AACjD,gBAAc,KAAK,GAAG,WAAW;;AAGnC,KAAI,cAAc,WAAW,GAAG;AAC9B,UAAQ,IAAI,qCAAqC;AACjD,UAAQ,KAAK,EAAE;;AAGjB,SAAQ,IAAI,SAAS,cAAc,OAAO,kBAAkB;AAE5D,MAAK,MAAM,KAAK,eAAe;EAC7B,MAAM,UAAU,KAAK,SAAS,SAAS,EAAE,KAAK;AAC9C,UAAQ,IAAI,GAAG,QAAQ,GAAG,EAAE,KAAK,GAAG,EAAE,SAAS;AAC/C,UAAQ,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,UAAU;AACxC,UAAQ,IAAI,OAAO,EAAE,KAAK,IAAI;;AAGhC,SAAQ,KAAK,EAAE;;AAGjB,MAAa,cAAc,IAAI,QAAQ,OAAO,CAC3C,YAAY,4CAA4C,CACxD,YACC,SACA;;iBAGD,CACA,OAAO,QAAQ"}
+{"version":3,"file":"lint.js","names":[],"sources":["../../../src/cli/commands/lint.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { Lang, parse } from \"@ast-grep/napi\";\nimport { Command } from \"commander\";\n\ninterface Rule {\n  id: string;\n  pattern: string;\n  message: string;\n  includeTests?: boolean;\n  filter?: (code: string) => boolean;\n}\n\nconst rules: Rule[] = [\n  {\n    id: \"no-double-type-assertion\",\n    pattern: \"$X as unknown as $Y\",\n    message:\n      \"Avoid double type assertion (as unknown as). Use proper type guards or fix the source type.\",\n  },\n  {\n    id: \"no-as-any\",\n    pattern: \"$X as any\",\n    message:\n      'Avoid \"as any\" type assertion. Use proper typing or unknown with type guards.',\n    includeTests: false, // acceptable in test mocks\n  },\n  {\n    id: \"no-array-index-key\",\n    pattern: \"key={$IDX}\",\n    message:\n      \"Avoid using array index as React key. Use a stable unique identifier.\",\n    filter: (code) => /key=\\{(idx|index|i)\\}/.test(code),\n  },\n  {\n    id: \"no-parse-float-without-validation\",\n    pattern: \"parseFloat($X).toFixed($Y)\",\n    message:\n      \"parseFloat can return NaN. Validate input or use toNumber() helper from shared/types.ts.\",\n  },\n  {\n    // <Variants> is the dev-only variant picker from @databricks/appkit-ui,\n    // meant to drive the local edit loop. Finalize the chosen variant before\n    // deploying so the picker chrome never reaches production.\n    id: \"no-variants-in-prod\",\n    pattern: \"<Variants $$$P>$$$C</Variants>\",\n    message:\n      \"<Variants> is a development-only variant picker and must not be shipped. Finalize the chosen <Variant> before deploying.\",\n    includeTests: false,\n  },\n];\n\nfunction isTestFile(filePath: string, rootDir: string): boolean {\n  // Relative to scan root: an ancestor `tests` dir must not mark the whole project as tests.\n  const rel = path.relative(rootDir, filePath);\n  return (\n    /\\.(test|spec)\\.(ts|tsx)$/.test(rel) || /(^|[/\\\\])tests[/\\\\]/.test(rel)\n  );\n}\n\nfunction findTsFiles(dir: string, files: string[] = []): string[] {\n  const entries = fs.readdirSync(dir, { withFileTypes: true });\n\n  for (const entry of entries) {\n    const fullPath = path.join(dir, entry.name);\n\n    if (entry.isDirectory()) {\n      if ([\"node_modules\", \"dist\", \"build\", \".git\"].includes(entry.name))\n        continue;\n      findTsFiles(fullPath, files);\n    } else if (entry.isFile() && /\\.(ts|tsx)$/.test(entry.name)) {\n      files.push(fullPath);\n    }\n  }\n\n  return files;\n}\n\ninterface Violation {\n  file: string;\n  line: number;\n  column: number;\n  rule: string;\n  message: string;\n  code: string;\n}\n\nfunction lintFile(\n  filePath: string,\n  rules: Rule[],\n  rootDir: string,\n): Violation[] {\n  const violations: Violation[] = [];\n  const content = fs.readFileSync(filePath, \"utf-8\");\n  const lang = filePath.endsWith(\".tsx\") ? Lang.Tsx : Lang.TypeScript;\n  const testFile = isTestFile(filePath, rootDir);\n\n  const ast = parse(lang, content);\n  const root = ast.root();\n\n  for (const rule of rules) {\n    // skip rules that don't apply to test files\n    if (testFile && rule.includeTests === false) continue;\n\n    const matches = root.findAll(rule.pattern);\n\n    for (const match of matches) {\n      const code = match.text();\n\n      if (rule.filter && !rule.filter(code)) continue;\n\n      const range = match.range();\n      violations.push({\n        file: filePath,\n        line: range.start.line + 1,\n        column: range.start.column + 1,\n        rule: rule.id,\n        message: rule.message,\n        code: code.length > 80 ? `${code.slice(0, 77)}...` : code,\n      });\n    }\n  }\n\n  return violations;\n}\n\n/**\n * Lint command implementation\n */\nfunction runLint() {\n  const rootDir = process.cwd();\n  const files = findTsFiles(rootDir);\n\n  console.log(`Scanning ${files.length} TypeScript files...\\n`);\n\n  const allViolations: Violation[] = [];\n\n  for (const file of files) {\n    const violations = lintFile(file, rules, rootDir);\n    allViolations.push(...violations);\n  }\n\n  if (allViolations.length === 0) {\n    console.log(\"No ast-grep lint violations found.\");\n    process.exit(0);\n  }\n\n  console.log(`Found ${allViolations.length} violation(s):\\n`);\n\n  for (const v of allViolations) {\n    const relPath = path.relative(rootDir, v.file);\n    console.log(`${relPath}:${v.line}:${v.column}`);\n    console.log(`  ${v.rule}: ${v.message}`);\n    console.log(`  > ${v.code}\\n`);\n  }\n\n  process.exit(1);\n}\n\nexport const lintCommand = new Command(\"lint\")\n  .description(\"Run AST-based linting on TypeScript files\")\n  .addHelpText(\n    \"after\",\n    `\nExamples:\n  $ appkit lint`,\n  )\n  .action(runLint);\n"],"mappings":";;;;;;AAaA,MAAM,QAAgB;CACpB;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACH;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACF,cAAc;EACf;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACF,SAAS,SAAS,wBAAwB,KAAK,KAAK;EACrD;CACD;EACE,IAAI;EACJ,SAAS;EACT,SACE;EACH;CACD;EAIE,IAAI;EACJ,SAAS;EACT,SACE;EACF,cAAc;EACf;CACF;AAED,SAAS,WAAW,UAAkB,SAA0B;CAE9D,MAAM,MAAM,KAAK,SAAS,SAAS,SAAS;AAC5C,QACE,2BAA2B,KAAK,IAAI,IAAI,sBAAsB,KAAK,IAAI;;AAI3E,SAAS,YAAY,KAAa,QAAkB,EAAE,EAAY;CAChE,MAAM,UAAU,GAAG,YAAY,KAAK,EAAE,eAAe,MAAM,CAAC;AAE5D,MAAK,MAAM,SAAS,SAAS;EAC3B,MAAM,WAAW,KAAK,KAAK,KAAK,MAAM,KAAK;AAE3C,MAAI,MAAM,aAAa,EAAE;AACvB,OAAI;IAAC;IAAgB;IAAQ;IAAS;IAAO,CAAC,SAAS,MAAM,KAAK,CAChE;AACF,eAAY,UAAU,MAAM;aACnB,MAAM,QAAQ,IAAI,cAAc,KAAK,MAAM,KAAK,CACzD,OAAM,KAAK,SAAS;;AAIxB,QAAO;;AAYT,SAAS,SACP,UACA,OACA,SACa;CACb,MAAM,aAA0B,EAAE;CAClC,MAAM,UAAU,GAAG,aAAa,UAAU,QAAQ;CAClD,MAAM,OAAO,SAAS,SAAS,OAAO,GAAG,KAAK,MAAM,KAAK;CACzD,MAAM,WAAW,WAAW,UAAU,QAAQ;CAG9C,MAAM,OADM,MAAM,MAAM,QAAQ,CACf,MAAM;AAEvB,MAAK,MAAM,QAAQ,OAAO;AAExB,MAAI,YAAY,KAAK,iBAAiB,MAAO;EAE7C,MAAM,UAAU,KAAK,QAAQ,KAAK,QAAQ;AAE1C,OAAK,MAAM,SAAS,SAAS;GAC3B,MAAM,OAAO,MAAM,MAAM;AAEzB,OAAI,KAAK,UAAU,CAAC,KAAK,OAAO,KAAK,CAAE;GAEvC,MAAM,QAAQ,MAAM,OAAO;AAC3B,cAAW,KAAK;IACd,MAAM;IACN,MAAM,MAAM,MAAM,OAAO;IACzB,QAAQ,MAAM,MAAM,SAAS;IAC7B,MAAM,KAAK;IACX,SAAS,KAAK;IACd,MAAM,KAAK,SAAS,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC,OAAO;IACtD,CAAC;;;AAIN,QAAO;;;;;AAMT,SAAS,UAAU;CACjB,MAAM,UAAU,QAAQ,KAAK;CAC7B,MAAM,QAAQ,YAAY,QAAQ;AAElC,SAAQ,IAAI,YAAY,MAAM,OAAO,wBAAwB;CAE7D,MAAM,gBAA6B,EAAE;AAErC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,aAAa,SAAS,MAAM,OAAO,QAAQ;AACjD,gBAAc,KAAK,GAAG,WAAW;;AAGnC,KAAI,cAAc,WAAW,GAAG;AAC9B,UAAQ,IAAI,qCAAqC;AACjD,UAAQ,KAAK,EAAE;;AAGjB,SAAQ,IAAI,SAAS,cAAc,OAAO,kBAAkB;AAE5D,MAAK,MAAM,KAAK,eAAe;EAC7B,MAAM,UAAU,KAAK,SAAS,SAAS,EAAE,KAAK;AAC9C,UAAQ,IAAI,GAAG,QAAQ,GAAG,EAAE,KAAK,GAAG,EAAE,SAAS;AAC/C,UAAQ,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,UAAU;AACxC,UAAQ,IAAI,OAAO,EAAE,KAAK,IAAI;;AAGhC,SAAQ,KAAK,EAAE;;AAGjB,MAAa,cAAc,IAAI,QAAQ,OAAO,CAC3C,YAAY,4CAA4C,CACxD,YACC,SACA;;iBAGD,CACA,OAAO,QAAQ"}

package/dist/react/index.d.ts

@@ -104,4 +104,7 @@ import { Textarea } from "./ui/textarea.js";
 import { Toggle, toggleVariants } from "./ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
 import "./ui/index.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartData, ChartInference, ChartType, ChartUITokens, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+import { Variant, VariantProps } from "./ui-variants/variant.js";
+import { Variants, VariantsProps } from "./ui-variants/variants.js";
+import "./ui-variants/index.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartData, ChartInference, ChartType, ChartUITokens, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, Variant, VariantProps, Variants, VariantsProps, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/index.js

@@ -94,5 +94,7 @@ import { Slider } from "./ui/slider.js";
 import { Switch } from "./ui/switch.js";
 import { Toggle, toggleVariants } from "./ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
+import { Variant } from "./ui-variants/variant.js";
+import { Variants } from "./ui-variants/variants.js";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Variant, Variants, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/ui-variants/index.d.ts

@@ -0,0 +1,2 @@
+import { Variant, VariantProps } from "./variant.js";
+import { Variants, VariantsProps } from "./variants.js";

package/dist/react/ui-variants/variant.d.ts

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/ui-variants/variant.d.ts
+/** Props for a single {@link Variant} inside a {@link Variants} block. */
+interface VariantProps {
+  /** Human-readable label shown in the switcher and recorded on confirm. */
+  label?: string;
+  children: React$1.ReactNode;
+}
+/**
+ * One candidate inside a {@link Variants} block. Purely a declarative marker:
+ * `Variants` reads its `label` and renders its `children` for the active
+ * index. It is not meant to be rendered on its own.
+ */
+declare function Variant({
+  children
+}: VariantProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Variant, VariantProps };
+//# sourceMappingURL=variant.d.ts.map

package/dist/react/ui-variants/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","names":[],"sources":["../../../src/react/ui-variants/variant.tsx"],"mappings":";;;;;UAGiB,YAAA;;EAEf,KAAA;EACA,QAAA,EAAU,OAAA,CAAM,SAAA;AAAA;;;;;;iBAQF,OAAA,CAAA;EAAU;AAAA,GAAY,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/ui-variants/variant.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/react/ui-variants/variant.tsx
+/**
+* One candidate inside a {@link Variants} block. Purely a declarative marker:
+* `Variants` reads its `label` and renders its `children` for the active
+* index. It is not meant to be rendered on its own.
+*/
+function Variant({ children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+export { Variant };
+//# sourceMappingURL=variant.js.map

package/dist/react/ui-variants/variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.js","names":[],"sources":["../../../src/react/ui-variants/variant.tsx"],"sourcesContent":["import type * as React from \"react\";\n\n/** Props for a single {@link Variant} inside a {@link Variants} block. */\nexport interface VariantProps {\n  /** Human-readable label shown in the switcher and recorded on confirm. */\n  label?: string;\n  children: React.ReactNode;\n}\n\n/**\n * One candidate inside a {@link Variants} block. Purely a declarative marker:\n * `Variants` reads its `label` and renders its `children` for the active\n * index. It is not meant to be rendered on its own.\n */\nexport function Variant({ children }: VariantProps) {\n  return <>{children}</>;\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,QAAQ,EAAE,YAA0B;AAClD,QAAO,gCAAG,WAAY"}

package/dist/react/ui-variants/variants.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/ui-variants/variants.d.ts
+/** Props for {@link Variants}. */
+interface VariantsProps {
+  /**
+   * Stable, unique identifier for this block. The variant-picking agent matches
+   * on it to finalize the chosen variant into source, so it must be unique per
+   * file. (Named `blockId`, not `id`, because it is a semantic key — not a DOM
+   * element id.)
+   */
+  blockId: string;
+  /** `<Variant>` children — one candidate UI each. */
+  children: ReactNode;
+  /**
+   * How the wrapper flows in the layout. Defaults to `"block"` (full width,
+   * variants stack vertically) — the right choice for page sections, heroes,
+   * and other block-level regions, which is the common case. Use `"inline"`
+   * when wrapping a small inline element such as a single button, so the
+   * wrapper hugs its content instead of spanning the row.
+   */
+  layout?: "block" | "inline";
+  /** Class name applied to the block wrapper (merged after `layout`). */
+  className?: string;
+  /**
+   * Any CSS color for the switcher chrome (dot, ring, control cluster, count
+   * pill, confirm tick). Every accent element derives from this one value.
+   * Defaults to {@link DEFAULT_ACCENT}. The error state stays red regardless.
+   *
+   * @example accent="var(--primary)"   // match the app theme
+   * @example accent="#f43f5e"          // rose
+   */
+  accent?: string;
+}
+/**
+ * Dev-time UI picker: renders several `<Variant>` candidates one at a time.
+ *
+ * At rest the block shows a small, slowly-pulsing corner dot so it's clear
+ * it's "in variant state" without hovering — the dot pulses while a choice is
+ * still pending and goes calm once recorded. On hover (or focus) an accent
+ * ring outlines the block and the dot gives way to a compact control cluster
+ * (‹ index/total › ✓) that scales out of the corner. Confirming POSTs the
+ * choice to the `uiVariants()` recorder plugin; a coding agent then finalizes
+ * the chosen variant into source, removing this wrapper.
+ *
+ * All switcher chrome uses the `accent` color (default {@link DEFAULT_ACCENT},
+ * a violet distinct from most apps' `primary`) so it doesn't blend into the
+ * content it wraps.
+ *
+ * Degrades gracefully. In a production build the picker chrome is dropped
+ * entirely and only the first variant renders as plain content — a safety net
+ * for a block that shipped without being finalized. In dev, if the recorder
+ * endpoint is absent (feature off) the switcher still works as a viewer and
+ * Confirm reports that recording is unavailable.
+ *
+ * @example Page section (default layout — full-width, stacks vertically)
+ * ```tsx
+ * <Variants blockId="hero">
+ *   <Variant label="Split"><section>…</section></Variant>
+ *   <Variant label="Centered"><section>…</section></Variant>
+ * </Variants>
+ * ```
+ *
+ * @example Small inline element (hug the content)
+ * ```tsx
+ * <Variants blockId="hero-cta" layout="inline">
+ *   <Variant label="Ghost"><Button variant="ghost">Get started</Button></Variant>
+ *   <Variant label="Solid"><Button>Get started</Button></Variant>
+ * </Variants>
+ * ```
+ *
+ * @example Custom accent
+ * ```tsx
+ * <Variants blockId="hero" accent="#f43f5e">…</Variants>
+ * ```
+ */
+declare function Variants({
+  blockId,
+  children,
+  layout,
+  className,
+  accent
+}: VariantsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Variants, VariantsProps };
+//# sourceMappingURL=variants.d.ts.map

package/dist/react/ui-variants/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","names":[],"sources":["../../../src/react/ui-variants/variants.tsx"],"mappings":";;;;;UAoCiB,aAAA;;AAAjB;;;;;EAOE,OAAA;EAEU;EAAV,QAAA,EAAU,SAAA;EAUV;;;;AA0DF;;;EA5DE,MAAA;EA8DA;EA5DA,SAAA;EA8DA;;;;;;;;EArDA,MAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiDc,QAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA;AAAA,GACC,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/ui-variants/variants.js

@@ -0,0 +1,199 @@
+import { cn } from "../lib/utils.js";
+import { Variant } from "./variant.js";
+import { Children, isValidElement, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, CheckCheck, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+
+//#region src/react/ui-variants/variants.tsx
+/** Endpoint the recorder plugin (`uiVariants()`) mounts in development. */
+const CONFIRM_ENDPOINT = "/api/ui-variants/confirm";
+/** Abort the confirm request after this long so the button can't hang. */
+const CONFIRM_TIMEOUT_MS = 5e3;
+/**
+* Default switcher accent — a violet chosen to stand apart from most apps'
+* `primary`, so the dev-only picker chrome doesn't blend into the content it
+* wraps. Override per-block via the `accent` prop.
+*/
+const DEFAULT_ACCENT = "#8b5cf6";
+function isVariantElement(node) {
+	return isValidElement(node) && node.type === Variant;
+}
+/**
+* Dev-time UI picker: renders several `<Variant>` candidates one at a time.
+*
+* At rest the block shows a small, slowly-pulsing corner dot so it's clear
+* it's "in variant state" without hovering — the dot pulses while a choice is
+* still pending and goes calm once recorded. On hover (or focus) an accent
+* ring outlines the block and the dot gives way to a compact control cluster
+* (‹ index/total › ✓) that scales out of the corner. Confirming POSTs the
+* choice to the `uiVariants()` recorder plugin; a coding agent then finalizes
+* the chosen variant into source, removing this wrapper.
+*
+* All switcher chrome uses the `accent` color (default {@link DEFAULT_ACCENT},
+* a violet distinct from most apps' `primary`) so it doesn't blend into the
+* content it wraps.
+*
+* Degrades gracefully. In a production build the picker chrome is dropped
+* entirely and only the first variant renders as plain content — a safety net
+* for a block that shipped without being finalized. In dev, if the recorder
+* endpoint is absent (feature off) the switcher still works as a viewer and
+* Confirm reports that recording is unavailable.
+*
+* @example Page section (default layout — full-width, stacks vertically)
+* ```tsx
+* <Variants blockId="hero">
+*   <Variant label="Split"><section>…</section></Variant>
+*   <Variant label="Centered"><section>…</section></Variant>
+* </Variants>
+* ```
+*
+* @example Small inline element (hug the content)
+* ```tsx
+* <Variants blockId="hero-cta" layout="inline">
+*   <Variant label="Ghost"><Button variant="ghost">Get started</Button></Variant>
+*   <Variant label="Solid"><Button>Get started</Button></Variant>
+* </Variants>
+* ```
+*
+* @example Custom accent
+* ```tsx
+* <Variants blockId="hero" accent="#f43f5e">…</Variants>
+* ```
+*/
+function Variants({ blockId, children, layout = "block", className, accent = DEFAULT_ACCENT }) {
+	const variants = useMemo(() => Children.toArray(children).filter(isVariantElement), [children]);
+	const [active, setActive] = useState(0);
+	const [confirmState, setConfirmState] = useState("idle");
+	if (variants.length === 0) return null;
+	if (!import.meta.env.DEV) return /* @__PURE__ */ jsx(Fragment, { children: variants[0] });
+	const clampedActive = Math.min(active, variants.length - 1);
+	const current = variants[clampedActive];
+	const label = current.props.label ?? `Variant ${clampedActive + 1}`;
+	const atStart = clampedActive === 0;
+	const atEnd = clampedActive === variants.length - 1;
+	const go = (delta) => {
+		setActive((i) => Math.max(0, Math.min(variants.length - 1, i + delta)));
+		setConfirmState("idle");
+	};
+	const confirm = async () => {
+		if (confirmState === "saving") return;
+		setConfirmState("saving");
+		const controller = new AbortController();
+		const timeout = setTimeout(() => controller.abort(), CONFIRM_TIMEOUT_MS);
+		try {
+			const res = await fetch(CONFIRM_ENDPOINT, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					blockId,
+					chosenIndex: clampedActive,
+					label
+				}),
+				signal: controller.signal
+			});
+			if (res.status === 404 || res.status === 403) {
+				setConfirmState("unavailable");
+				return;
+			}
+			setConfirmState(res.ok ? "recorded" : "error");
+		} catch {
+			setConfirmState("error");
+		} finally {
+			clearTimeout(timeout);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "variants",
+		style: { "--variants-accent": accent },
+		className: cn("group relative rounded-md ring-[color:var(--variants-accent)] transition-[box-shadow] duration-200", layout === "inline" ? "inline-block" : "block w-full", "hover:ring-1 focus-within:ring-1", className),
+		children: [
+			current,
+			/* @__PURE__ */ jsx(StateDot, {
+				state: confirmState,
+				className: "group-hover:pointer-events-none group-hover:opacity-0 group-focus-within:pointer-events-none group-focus-within:opacity-0"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "variants-switcher",
+				className: cn("absolute -top-3 right-0 z-20 flex items-center gap-0.5 rounded-full border bg-background/95 px-1 py-0.5 shadow-md backdrop-blur", "border-[color-mix(in_srgb,var(--variants-accent)_40%,transparent)]", "pointer-events-none origin-top-right scale-90 opacity-0 transition-all duration-150", "group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100"),
+				children: [
+					/* @__PURE__ */ jsx(RoundButton, {
+						"aria-label": "Previous variant",
+						disabled: atStart,
+						onClick: () => go(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "select-none rounded-full bg-[color-mix(in_srgb,var(--variants-accent)_15%,transparent)] px-1 text-[10px] font-semibold text-[color:var(--variants-accent)] tabular-nums",
+						children: [
+							clampedActive + 1,
+							"/",
+							variants.length
+						]
+					}),
+					/* @__PURE__ */ jsx(RoundButton, {
+						"aria-label": "Next variant",
+						disabled: atEnd,
+						onClick: () => go(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx(ConfirmButton, {
+						state: confirmState,
+						label,
+						onClick: confirm
+					})
+				]
+			})
+		]
+	});
+}
+function dotColorFor(state) {
+	switch (state) {
+		case "error": return "bg-destructive";
+		case "unavailable": return "bg-muted-foreground/40";
+		default: return "bg-[color:var(--variants-accent)]";
+	}
+}
+/**
+* Resting corner indicator: pulses while a choice is pending, calm once
+* recorded — so a block's picked/unpicked state reads at a glance without
+* hovering.
+*/
+function StateDot({ state, className }) {
+	const pulsing = state === "idle" || state === "saving";
+	const color = dotColorFor(state);
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "variants-dot",
+		className: cn("absolute -top-1 -right-1 z-10 flex size-3 items-center justify-center transition-opacity duration-150", className),
+		children: [pulsing && /* @__PURE__ */ jsx("span", { className: cn("absolute inline-flex size-full animate-ping rounded-full opacity-50 [animation-duration:2.5s]", color) }), /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2.5 rounded-full ring-2 ring-background", color) })]
+	});
+}
+function RoundButton({ children, disabled, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		className: cn("inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors", "hover:bg-accent hover:text-accent-foreground", "disabled:pointer-events-none disabled:opacity-30", className),
+		...props,
+		children
+	});
+}
+/**
+* Round tick that confirms the active variant. State is conveyed by icon +
+* color only (no text). The chosen `label` rides along in the title/aria for
+* accessibility and hover context.
+*/
+function ConfirmButton({ state, label, onClick }) {
+	const title = state === "recorded" ? `Recorded "${label}" — ask the agent to finalize` : state === "unavailable" ? "Recorder unavailable" : state === "error" ? "Failed — click to retry" : `Confirm "${label}"`;
+	return /* @__PURE__ */ jsx(RoundButton, {
+		"aria-label": title,
+		title,
+		disabled: state === "saving" || state === "unavailable",
+		onClick,
+		className: cn(state === "recorded" && "text-[color:var(--variants-accent)] hover:bg-[color-mix(in_srgb,var(--variants-accent)_12%,transparent)] hover:text-[color:var(--variants-accent)]", state === "error" && "text-destructive hover:bg-destructive/10 hover:text-destructive", (state === "idle" || state === "saving") && "hover:bg-[color-mix(in_srgb,var(--variants-accent)_12%,transparent)] hover:text-[color:var(--variants-accent)]"),
+		children: state === "saving" ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : state === "recorded" ? /* @__PURE__ */ jsx(CheckCheck, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+	});
+}
+
+//#endregion
+export { Variants };
+//# sourceMappingURL=variants.js.map

package/dist/react/ui-variants/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","names":[],"sources":["../../../src/react/ui-variants/variants.tsx"],"sourcesContent":["import {\n  Check,\n  CheckCheck,\n  ChevronLeft,\n  ChevronRight,\n  Loader2,\n} from \"lucide-react\";\nimport {\n  Children,\n  type ComponentProps,\n  type CSSProperties,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n  useState,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Variant, type VariantProps } from \"./variant\";\n\n/** Endpoint the recorder plugin (`uiVariants()`) mounts in development. */\nconst CONFIRM_ENDPOINT = \"/api/ui-variants/confirm\";\n\n/** Abort the confirm request after this long so the button can't hang. */\nconst CONFIRM_TIMEOUT_MS = 5000;\n\n/**\n * Default switcher accent — a violet chosen to stand apart from most apps'\n * `primary`, so the dev-only picker chrome doesn't blend into the content it\n * wraps. Override per-block via the `accent` prop.\n */\nconst DEFAULT_ACCENT = \"#8b5cf6\";\n\ntype ConfirmState = \"idle\" | \"saving\" | \"recorded\" | \"unavailable\" | \"error\";\n\n/** Props for {@link Variants}. */\nexport interface VariantsProps {\n  /**\n   * Stable, unique identifier for this block. The variant-picking agent matches\n   * on it to finalize the chosen variant into source, so it must be unique per\n   * file. (Named `blockId`, not `id`, because it is a semantic key — not a DOM\n   * element id.)\n   */\n  blockId: string;\n  /** `<Variant>` children — one candidate UI each. */\n  children: ReactNode;\n  /**\n   * How the wrapper flows in the layout. Defaults to `\"block\"` (full width,\n   * variants stack vertically) — the right choice for page sections, heroes,\n   * and other block-level regions, which is the common case. Use `\"inline\"`\n   * when wrapping a small inline element such as a single button, so the\n   * wrapper hugs its content instead of spanning the row.\n   */\n  layout?: \"block\" | \"inline\";\n  /** Class name applied to the block wrapper (merged after `layout`). */\n  className?: string;\n  /**\n   * Any CSS color for the switcher chrome (dot, ring, control cluster, count\n   * pill, confirm tick). Every accent element derives from this one value.\n   * Defaults to {@link DEFAULT_ACCENT}. The error state stays red regardless.\n   *\n   * @example accent=\"var(--primary)\"   // match the app theme\n   * @example accent=\"#f43f5e\"          // rose\n   */\n  accent?: string;\n}\n\nfunction isVariantElement(node: ReactNode): node is ReactElement<VariantProps> {\n  return isValidElement(node) && node.type === Variant;\n}\n\n/**\n * Dev-time UI picker: renders several `<Variant>` candidates one at a time.\n *\n * At rest the block shows a small, slowly-pulsing corner dot so it's clear\n * it's \"in variant state\" without hovering — the dot pulses while a choice is\n * still pending and goes calm once recorded. On hover (or focus) an accent\n * ring outlines the block and the dot gives way to a compact control cluster\n * (‹ index/total › ✓) that scales out of the corner. Confirming POSTs the\n * choice to the `uiVariants()` recorder plugin; a coding agent then finalizes\n * the chosen variant into source, removing this wrapper.\n *\n * All switcher chrome uses the `accent` color (default {@link DEFAULT_ACCENT},\n * a violet distinct from most apps' `primary`) so it doesn't blend into the\n * content it wraps.\n *\n * Degrades gracefully. In a production build the picker chrome is dropped\n * entirely and only the first variant renders as plain content — a safety net\n * for a block that shipped without being finalized. In dev, if the recorder\n * endpoint is absent (feature off) the switcher still works as a viewer and\n * Confirm reports that recording is unavailable.\n *\n * @example Page section (default layout — full-width, stacks vertically)\n * ```tsx\n * <Variants blockId=\"hero\">\n *   <Variant label=\"Split\"><section>…</section></Variant>\n *   <Variant label=\"Centered\"><section>…</section></Variant>\n * </Variants>\n * ```\n *\n * @example Small inline element (hug the content)\n * ```tsx\n * <Variants blockId=\"hero-cta\" layout=\"inline\">\n *   <Variant label=\"Ghost\"><Button variant=\"ghost\">Get started</Button></Variant>\n *   <Variant label=\"Solid\"><Button>Get started</Button></Variant>\n * </Variants>\n * ```\n *\n * @example Custom accent\n * ```tsx\n * <Variants blockId=\"hero\" accent=\"#f43f5e\">…</Variants>\n * ```\n */\nexport function Variants({\n  blockId,\n  children,\n  layout = \"block\",\n  className,\n  accent = DEFAULT_ACCENT,\n}: VariantsProps) {\n  const variants = useMemo(\n    () => Children.toArray(children).filter(isVariantElement),\n    [children],\n  );\n  const [active, setActive] = useState(0);\n  const [confirmState, setConfirmState] = useState<ConfirmState>(\"idle\");\n\n  if (variants.length === 0) return null;\n  if (!import.meta.env.DEV) return <>{variants[0]}</>;\n\n  const clampedActive = Math.min(active, variants.length - 1);\n  const current = variants[clampedActive];\n  const label = current.props.label ?? `Variant ${clampedActive + 1}`;\n  const atStart = clampedActive === 0;\n  const atEnd = clampedActive === variants.length - 1;\n\n  const go = (delta: number) => {\n    // No wrap-around: clamp within bounds.\n    setActive((i) => Math.max(0, Math.min(variants.length - 1, i + delta)));\n    setConfirmState(\"idle\");\n  };\n\n  const confirm = async () => {\n    if (confirmState === \"saving\") return;\n    setConfirmState(\"saving\");\n\n    // Bound the request so a hung recorder can't leave the button stuck in\n    // \"saving\" forever.\n    const controller = new AbortController();\n    const timeout = setTimeout(() => controller.abort(), CONFIRM_TIMEOUT_MS);\n    try {\n      const res = await fetch(CONFIRM_ENDPOINT, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ blockId, chosenIndex: clampedActive, label }),\n        signal: controller.signal,\n      });\n      // 404/403: the recorder isn't mounted (feature off or a production\n      // build). Degrade to a plain viewer.\n      if (res.status === 404 || res.status === 403) {\n        setConfirmState(\"unavailable\");\n        return;\n      }\n      // Any other non-OK status (e.g. a 500) is a failure the user can retry.\n      setConfirmState(res.ok ? \"recorded\" : \"error\");\n    } catch {\n      // Network failure or timeout abort — the request never completed.\n      setConfirmState(\"error\");\n    } finally {\n      clearTimeout(timeout);\n    }\n  };\n\n  return (\n    <div\n      data-slot=\"variants\"\n      // All accent chrome derives from this one variable; children read it via\n      // the cascade, so the `accent` prop flows everywhere without prop-drilling.\n      style={{ \"--variants-accent\": accent } as CSSProperties}\n      className={cn(\n        // Ring appears only on hover/focus so blocks stay calm at rest; the\n        // corner dot is the resting \"in variant state\" indicator.\n        \"group relative rounded-md ring-[color:var(--variants-accent)] transition-[box-shadow] duration-200\",\n        layout === \"inline\" ? \"inline-block\" : \"block w-full\",\n        \"hover:ring-1 focus-within:ring-1\",\n        className,\n      )}\n    >\n      {current}\n\n      <StateDot\n        state={confirmState}\n        className=\"group-hover:pointer-events-none group-hover:opacity-0 group-focus-within:pointer-events-none group-focus-within:opacity-0\"\n      />\n\n      <div\n        data-slot=\"variants-switcher\"\n        className={cn(\n          \"absolute -top-3 right-0 z-20 flex items-center gap-0.5 rounded-full border bg-background/95 px-1 py-0.5 shadow-md backdrop-blur\",\n          \"border-[color-mix(in_srgb,var(--variants-accent)_40%,transparent)]\",\n          \"pointer-events-none origin-top-right scale-90 opacity-0 transition-all duration-150\",\n          \"group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100\",\n          \"group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100\",\n        )}\n      >\n        <RoundButton\n          aria-label=\"Previous variant\"\n          disabled={atStart}\n          onClick={() => go(-1)}\n        >\n          <ChevronLeft className=\"size-3.5\" />\n        </RoundButton>\n\n        <span className=\"select-none rounded-full bg-[color-mix(in_srgb,var(--variants-accent)_15%,transparent)] px-1 text-[10px] font-semibold text-[color:var(--variants-accent)] tabular-nums\">\n          {clampedActive + 1}/{variants.length}\n        </span>\n\n        <RoundButton\n          aria-label=\"Next variant\"\n          disabled={atEnd}\n          onClick={() => go(1)}\n        >\n          <ChevronRight className=\"size-3.5\" />\n        </RoundButton>\n\n        <ConfirmButton state={confirmState} label={label} onClick={confirm} />\n      </div>\n    </div>\n  );\n}\n\nfunction dotColorFor(state: ConfirmState): string {\n  switch (state) {\n    case \"error\":\n      return \"bg-destructive\";\n    case \"unavailable\":\n      return \"bg-muted-foreground/40\";\n    default:\n      return \"bg-[color:var(--variants-accent)]\";\n  }\n}\n\n/**\n * Resting corner indicator: pulses while a choice is pending, calm once\n * recorded — so a block's picked/unpicked state reads at a glance without\n * hovering.\n */\nfunction StateDot({\n  state,\n  className,\n}: {\n  state: ConfirmState;\n  className?: string;\n}) {\n  const pulsing = state === \"idle\" || state === \"saving\";\n  const color = dotColorFor(state);\n\n  return (\n    <span\n      aria-hidden\n      data-slot=\"variants-dot\"\n      className={cn(\n        \"absolute -top-1 -right-1 z-10 flex size-3 items-center justify-center transition-opacity duration-150\",\n        className,\n      )}\n    >\n      {pulsing && (\n        <span\n          className={cn(\n            // Slow, gentle pulse (~2.5s) so it reads as an ambient hint,\n            // not an alarm. Overrides tailwind's default 1s ping cadence.\n            \"absolute inline-flex size-full animate-ping rounded-full opacity-50 [animation-duration:2.5s]\",\n            color,\n          )}\n        />\n      )}\n      <span\n        className={cn(\n          \"relative inline-flex size-2.5 rounded-full ring-2 ring-background\",\n          color,\n        )}\n      />\n    </span>\n  );\n}\n\nfunction RoundButton({\n  children,\n  disabled,\n  className,\n  ...props\n}: ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      className={cn(\n        \"inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors\",\n        \"hover:bg-accent hover:text-accent-foreground\",\n        \"disabled:pointer-events-none disabled:opacity-30\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\n/**\n * Round tick that confirms the active variant. State is conveyed by icon +\n * color only (no text). The chosen `label` rides along in the title/aria for\n * accessibility and hover context.\n */\nfunction ConfirmButton({\n  state,\n  label,\n  onClick,\n}: {\n  state: ConfirmState;\n  label: string;\n  onClick: () => void;\n}) {\n  const title =\n    state === \"recorded\"\n      ? `Recorded \"${label}\" — ask the agent to finalize`\n      : state === \"unavailable\"\n        ? \"Recorder unavailable\"\n        : state === \"error\"\n          ? \"Failed — click to retry\"\n          : `Confirm \"${label}\"`;\n\n  return (\n    <RoundButton\n      aria-label={title}\n      title={title}\n      disabled={state === \"saving\" || state === \"unavailable\"}\n      onClick={onClick}\n      className={cn(\n        state === \"recorded\" &&\n          \"text-[color:var(--variants-accent)] hover:bg-[color-mix(in_srgb,var(--variants-accent)_12%,transparent)] hover:text-[color:var(--variants-accent)]\",\n        state === \"error\" &&\n          \"text-destructive hover:bg-destructive/10 hover:text-destructive\",\n        (state === \"idle\" || state === \"saving\") &&\n          \"hover:bg-[color-mix(in_srgb,var(--variants-accent)_12%,transparent)] hover:text-[color:var(--variants-accent)]\",\n      )}\n    >\n      {state === \"saving\" ? (\n        <Loader2 className=\"size-3.5 animate-spin\" />\n      ) : state === \"recorded\" ? (\n        <CheckCheck className=\"size-3.5\" />\n      ) : (\n        <Check className=\"size-3.5\" />\n      )}\n    </RoundButton>\n  );\n}\n"],"mappings":";;;;;;;;AAqBA,MAAM,mBAAmB;;AAGzB,MAAM,qBAAqB;;;;;;AAO3B,MAAM,iBAAiB;AAoCvB,SAAS,iBAAiB,MAAqD;AAC7E,QAAO,eAAe,KAAK,IAAI,KAAK,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6C/C,SAAgB,SAAS,EACvB,SACA,UACA,SAAS,SACT,WACA,SAAS,kBACO;CAChB,MAAM,WAAW,cACT,SAAS,QAAQ,SAAS,CAAC,OAAO,iBAAiB,EACzD,CAAC,SAAS,CACX;CACD,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,cAAc,mBAAmB,SAAuB,OAAO;AAEtE,KAAI,SAAS,WAAW,EAAG,QAAO;AAClC,KAAI,CAAC,OAAO,KAAK,IAAI,IAAK,QAAO,0CAAG,SAAS,KAAM;CAEnD,MAAM,gBAAgB,KAAK,IAAI,QAAQ,SAAS,SAAS,EAAE;CAC3D,MAAM,UAAU,SAAS;CACzB,MAAM,QAAQ,QAAQ,MAAM,SAAS,WAAW,gBAAgB;CAChE,MAAM,UAAU,kBAAkB;CAClC,MAAM,QAAQ,kBAAkB,SAAS,SAAS;CAElD,MAAM,MAAM,UAAkB;AAE5B,aAAW,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,SAAS,GAAG,IAAI,MAAM,CAAC,CAAC;AACvE,kBAAgB,OAAO;;CAGzB,MAAM,UAAU,YAAY;AAC1B,MAAI,iBAAiB,SAAU;AAC/B,kBAAgB,SAAS;EAIzB,MAAM,aAAa,IAAI,iBAAiB;EACxC,MAAM,UAAU,iBAAiB,WAAW,OAAO,EAAE,mBAAmB;AACxE,MAAI;GACF,MAAM,MAAM,MAAM,MAAM,kBAAkB;IACxC,QAAQ;IACR,SAAS,EAAE,gBAAgB,oBAAoB;IAC/C,MAAM,KAAK,UAAU;KAAE;KAAS,aAAa;KAAe;KAAO,CAAC;IACpE,QAAQ,WAAW;IACpB,CAAC;AAGF,OAAI,IAAI,WAAW,OAAO,IAAI,WAAW,KAAK;AAC5C,oBAAgB,cAAc;AAC9B;;AAGF,mBAAgB,IAAI,KAAK,aAAa,QAAQ;UACxC;AAEN,mBAAgB,QAAQ;YAChB;AACR,gBAAa,QAAQ;;;AAIzB,QACE,qBAAC;EACC,aAAU;EAGV,OAAO,EAAE,qBAAqB,QAAQ;EACtC,WAAW,GAGT,sGACA,WAAW,WAAW,iBAAiB,gBACvC,oCACA,UACD;;GAEA;GAED,oBAAC;IACC,OAAO;IACP,WAAU;KACV;GAEF,qBAAC;IACC,aAAU;IACV,WAAW,GACT,mIACA,sEACA,uFACA,iFACA,qGACD;;KAED,oBAAC;MACC,cAAW;MACX,UAAU;MACV,eAAe,GAAG,GAAG;gBAErB,oBAAC,eAAY,WAAU,aAAa;OACxB;KAEd,qBAAC;MAAK,WAAU;;OACb,gBAAgB;OAAE;OAAE,SAAS;;OACzB;KAEP,oBAAC;MACC,cAAW;MACX,UAAU;MACV,eAAe,GAAG,EAAE;gBAEpB,oBAAC,gBAAa,WAAU,aAAa;OACzB;KAEd,oBAAC;MAAc,OAAO;MAAqB;MAAO,SAAS;OAAW;;KAClE;;GACF;;AAIV,SAAS,YAAY,OAA6B;AAChD,SAAQ,OAAR;EACE,KAAK,QACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,QACE,QAAO;;;;;;;;AASb,SAAS,SAAS,EAChB,OACA,aAIC;CACD,MAAM,UAAU,UAAU,UAAU,UAAU;CAC9C,MAAM,QAAQ,YAAY,MAAM;AAEhC,QACE,qBAAC;EACC;EACA,aAAU;EACV,WAAW,GACT,yGACA,UACD;aAEA,WACC,oBAAC,UACC,WAAW,GAGT,iGACA,MACD,GACD,EAEJ,oBAAC,UACC,WAAW,GACT,qEACA,MACD,GACD;GACG;;AAIX,SAAS,YAAY,EACnB,UACA,UACA,WACA,GAAG,SACwB;AAC3B,QACE,oBAAC;EACC,MAAK;EACK;EACV,WAAW,GACT,uGACA,gDACA,oDACA,UACD;EACD,GAAI;EAEH;GACM;;;;;;;AASb,SAAS,cAAc,EACrB,OACA,OACA,WAKC;CACD,MAAM,QACJ,UAAU,aACN,aAAa,MAAM,iCACnB,UAAU,gBACR,yBACA,UAAU,UACR,4BACA,YAAY,MAAM;AAE5B,QACE,oBAAC;EACC,cAAY;EACL;EACP,UAAU,UAAU,YAAY,UAAU;EACjC;EACT,WAAW,GACT,UAAU,cACR,sJACF,UAAU,WACR,oEACD,UAAU,UAAU,UAAU,aAC7B,iHACH;YAEA,UAAU,WACT,oBAAC,WAAQ,WAAU,0BAA0B,GAC3C,UAAU,aACZ,oBAAC,cAAW,WAAU,aAAa,GAEnC,oBAAC,SAAM,WAAU,aAAa;GAEpB"}

package/dist/schemas/manifest.d.ts

@@ -1118,6 +1118,7 @@ declare const pluginManifestSchema: z.ZodObject<{
   license: z.ZodOptional<z.ZodString>;
   onSetupMessage: z.ZodOptional<z.ZodString>;
   hidden: z.ZodOptional<z.ZodBoolean>;
+  devOnly: z.ZodOptional<z.ZodBoolean>;
   stability: z.ZodOptional<z.ZodEnum<{
     beta: "beta";
     ga: "ga";

package/dist/schemas/manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest.d.ts","names":[],"sources":["../../src/schemas/manifest.ts"],"mappings":";;;cAsPa,yBAAA,EAAyB,CAAA,CAAA,qBAAA,EAAA,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;cA8FzB,wBAAA,EAAwB,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkQxB,4BAAA,EAA4B,CAAA,CAAA,SAAA;;;;;cAoE5B,oBAAA,EAAoB,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+frB,mBAAA,GAAsB,CAAA,CAAE,KAAA,QAAa,yBAAA;AAAA,KACrC,kBAAA,GAAqB,CAAA,CAAE,KAAA,QAAa,wBAAA;AAAA,KAIpC,sBAAA,GAAyB,CAAA,CAAE,KAAA,QAC9B,4BAAA;AAAA,KAEG,cAAA,GAAiB,CAAA,CAAE,KAAA,QAAa,oBAAA"}
+{"version":3,"file":"manifest.d.ts","names":[],"sources":["../../src/schemas/manifest.ts"],"mappings":";;;cAsPa,yBAAA,EAAyB,CAAA,CAAA,qBAAA,EAAA,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;cA8FzB,wBAAA,EAAwB,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkQxB,4BAAA,EAA4B,CAAA,CAAA,SAAA;;;;;cAoE5B,oBAAA,EAAoB,CAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqgBrB,mBAAA,GAAsB,CAAA,CAAE,KAAA,QAAa,yBAAA;AAAA,KACrC,kBAAA,GAAqB,CAAA,CAAE,KAAA,QAAa,wBAAA;AAAA,KAIpC,sBAAA,GAAyB,CAAA,CAAE,KAAA,QAC9B,4BAAA;AAAA,KAEG,cAAA,GAAiB,CAAA,CAAE,KAAA,QAAa,oBAAA"}

package/dist/schemas/manifest.js

@@ -334,6 +334,7 @@ const pluginManifestSchema = z.object({
 	license: z.string().optional().describe("SPDX license identifier"),
 	onSetupMessage: z.string().optional().describe("Message displayed to the user after project initialization. Use this to inform about manual setup steps (e.g. environment variables, resource provisioning)."),
 	hidden: z.boolean().optional().describe("When true, this plugin is excluded from the template plugins manifest (appkit.plugins.json) during sync."),
+	devOnly: z.boolean().optional().describe("When true, this plugin is only registered when NODE_ENV === 'development'. In any other environment createApp skips it entirely (not constructed, no routes, resources not validated). Use for dev-only tooling that must never run in a deployed app."),
 	stability: z.enum(["beta", "ga"]).optional().describe("Plugin stability level. Beta plugins may have breaking API changes between minor releases but are on a path to GA. GA (general availability) plugins follow semver strictly."),
 	scaffolding: z.object({ rules: pluginScaffoldingRulesSchema.optional().describe("Structured rules for scaffolding agents declared at the plugin level.") }).strict().optional().describe("Plugin-level scaffolding metadata consumed by scaffolding agents. Symmetric with template-level `scaffolding`.")
 }).strict().describe("Schema for Databricks AppKit plugin manifest files. Defines plugin metadata, resource requirements, and configuration options.");