canvas-ui-sdk 0.1.6 → 0.2.0

package/dist/cli/index.js

@@ -0,0 +1,516 @@
+// cli/src/index.ts
+import { Command } from "commander";
+
+// cli/src/commands/init.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+
+// cli/src/types.ts
+var DEFAULT_CONFIG = {
+  aliases: {
+    components: "@/components",
+    ui: "@/components/ui",
+    lib: "@/lib",
+    hooks: "@/hooks"
+  },
+  tailwind: {
+    css: "src/app/globals.css"
+  }
+};
+
+// cli/src/utils/installer.ts
+import { execa } from "execa";
+import fs from "fs-extra";
+import path from "path";
+function detectPackageManager(cwd) {
+  if (fs.existsSync(path.join(cwd, "bun.lockb")) || fs.existsSync(path.join(cwd, "bun.lock"))) return "bun";
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs.existsSync(path.join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+async function installPackages(packages, cwd) {
+  if (packages.length === 0) return;
+  const pm = detectPackageManager(cwd);
+  const args = pm === "npm" ? ["install", ...packages] : pm === "yarn" ? ["add", ...packages] : pm === "pnpm" ? ["add", ...packages] : ["add", ...packages];
+  await execa(pm, args, { cwd, stdio: "pipe" });
+}
+
+// cli/src/commands/init.ts
+var CONFIG_FILE = "canvas-ui.json";
+async function init() {
+  const cwd = process.cwd();
+  if (fs2.existsSync(path2.join(cwd, CONFIG_FILE))) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: `${CONFIG_FILE} already exists. Overwrite?`,
+      initial: false
+    });
+    if (!overwrite) {
+      console.log("Aborted.");
+      return;
+    }
+  }
+  if (!fs2.existsSync(path2.join(cwd, "package.json"))) {
+    console.log(
+      chalk.red("No package.json found. Please run this in a project directory.")
+    );
+    process.exit(1);
+  }
+  console.log(chalk.bold("\nInitializing Canvas UI SDK...\n"));
+  const answers = await prompts([
+    {
+      type: "text",
+      name: "cssPath",
+      message: "Where is your global CSS file?",
+      initial: DEFAULT_CONFIG.tailwind.css
+    },
+    {
+      type: "text",
+      name: "componentsAlias",
+      message: "Components import alias:",
+      initial: DEFAULT_CONFIG.aliases.components
+    },
+    {
+      type: "text",
+      name: "libAlias",
+      message: "Lib/utils import alias:",
+      initial: DEFAULT_CONFIG.aliases.lib
+    },
+    {
+      type: "text",
+      name: "hooksAlias",
+      message: "Hooks import alias:",
+      initial: DEFAULT_CONFIG.aliases.hooks
+    }
+  ]);
+  if (!answers.cssPath) {
+    console.log("Aborted.");
+    return;
+  }
+  const config = {
+    aliases: {
+      components: answers.componentsAlias,
+      ui: `${answers.componentsAlias}/ui`,
+      lib: answers.libAlias,
+      hooks: answers.hooksAlias
+    },
+    tailwind: {
+      css: answers.cssPath
+    }
+  };
+  const spinner = ora("Writing configuration...").start();
+  await fs2.writeJSON(path2.join(cwd, CONFIG_FILE), config, { spaces: 2 });
+  spinner.succeed("Created canvas-ui.json");
+  const pm = detectPackageManager(cwd);
+  spinner.start(`Installing canvas-ui-sdk via ${pm}...`);
+  try {
+    await installPackages(["canvas-ui-sdk"], cwd);
+    spinner.succeed("Installed canvas-ui-sdk");
+  } catch {
+    spinner.warn(
+      "Could not install canvas-ui-sdk automatically. Run: npm install canvas-ui-sdk"
+    );
+  }
+  spinner.start("Installing base dependencies...");
+  try {
+    await installPackages(["clsx", "tailwind-merge"], cwd);
+    spinner.succeed("Installed clsx and tailwind-merge");
+  } catch {
+    spinner.warn(
+      "Could not install base deps. Run: npm install clsx tailwind-merge"
+    );
+  }
+  spinner.start("Creating directory structure...");
+  const dirs = [
+    resolveAlias(config.aliases.ui, cwd),
+    path2.join(resolveAlias(config.aliases.components, cwd), "blocks"),
+    path2.join(resolveAlias(config.aliases.components, cwd), "layout"),
+    resolveAlias(config.aliases.lib, cwd),
+    resolveAlias(config.aliases.hooks, cwd)
+  ];
+  for (const dir of dirs) {
+    await fs2.ensureDir(dir);
+  }
+  spinner.succeed("Created component directories");
+  const cssPath = path2.join(cwd, config.tailwind.css);
+  if (fs2.existsSync(cssPath)) {
+    spinner.start("Updating globals.css...");
+    let css = await fs2.readFile(cssPath, "utf-8");
+    const importsToAdd = [
+      '@import "canvas-ui-sdk/tailwind";',
+      '@import "canvas-ui-sdk/styles";'
+    ];
+    let modified = false;
+    for (const imp of importsToAdd) {
+      if (!css.includes(imp)) {
+        const tailwindImport = '@import "tailwindcss"';
+        if (css.includes(tailwindImport)) {
+          const idx = css.indexOf(tailwindImport);
+          const lineEnd = css.indexOf("\n", idx);
+          css = css.slice(0, lineEnd + 1) + imp + "\n" + css.slice(lineEnd + 1);
+        } else {
+          css = imp + "\n" + css;
+        }
+        modified = true;
+      }
+    }
+    const sourceDirective = '@source "./components";';
+    if (!css.includes(sourceDirective) && !css.includes("@source")) {
+      const lastImport = css.lastIndexOf("@import");
+      if (lastImport !== -1) {
+        const lineEnd = css.indexOf("\n", css.indexOf(";", lastImport));
+        css = css.slice(0, lineEnd + 1) + sourceDirective + "\n" + css.slice(lineEnd + 1);
+      } else {
+        css = sourceDirective + "\n" + css;
+      }
+      modified = true;
+    }
+    if (modified) {
+      await fs2.writeFile(cssPath, css);
+      spinner.succeed("Updated globals.css with Canvas UI imports");
+    } else {
+      spinner.succeed("globals.css already has Canvas UI imports");
+    }
+  } else {
+    spinner.info(
+      `globals.css not found at ${config.tailwind.css}. You'll need to add the imports manually.`
+    );
+  }
+  spinner.start("Copying lib/utils.ts...");
+  const utilsContent = `import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+  const utilsPath = path2.join(
+    resolveAlias(config.aliases.lib, cwd),
+    "utils.ts"
+  );
+  await fs2.writeFile(utilsPath, utilsContent);
+  spinner.succeed("Created lib/utils.ts");
+  console.log(
+    chalk.green("\n\u2713 Canvas UI SDK initialized successfully!\n")
+  );
+  console.log("Next steps:");
+  console.log(
+    `  ${chalk.cyan("npx canvas-ui add button")}         Add a component`
+  );
+  console.log(
+    `  ${chalk.cyan("npx canvas-ui add dashboard-shell")} Add a layout shell`
+  );
+  console.log();
+}
+function resolveAlias(alias, cwd) {
+  const stripped = alias.replace(/^@\//, "").replace(/^~\//, "");
+  return path2.join(cwd, "src", stripped);
+}
+
+// cli/src/commands/add.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+import chalk2 from "chalk";
+import ora2 from "ora";
+
+// cli/src/utils/registry.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+function getRegistryDir() {
+  const candidates = [
+    path3.resolve(import.meta.dirname, "../../registry"),
+    path3.resolve(import.meta.dirname, "../../../registry"),
+    path3.resolve(process.cwd(), "node_modules/canvas-ui-sdk/registry")
+  ];
+  for (const candidate of candidates) {
+    if (fs3.existsSync(path3.join(candidate, "index.json"))) {
+      return candidate;
+    }
+  }
+  throw new Error(
+    "Could not find canvas-ui registry. Make sure canvas-ui-sdk is installed."
+  );
+}
+async function loadRegistryIndex() {
+  const registryDir = getRegistryDir();
+  const indexPath = path3.join(registryDir, "index.json");
+  return fs3.readJSON(indexPath);
+}
+async function loadRegistryItem(name) {
+  const registryDir = getRegistryDir();
+  for (const subdir of ["ui", "blocks", "layout", "hooks", "lib"]) {
+    const itemPath = path3.join(registryDir, subdir, `${name}.json`);
+    if (fs3.existsSync(itemPath)) {
+      return fs3.readJSON(itemPath);
+    }
+  }
+  return null;
+}
+
+// cli/src/utils/resolver.ts
+async function resolveAll(names) {
+  const resolved = /* @__PURE__ */ new Map();
+  const npmDeps = /* @__PURE__ */ new Set();
+  async function resolve(name) {
+    if (resolved.has(name)) return;
+    const item = await loadRegistryItem(name);
+    if (!item) {
+      console.warn(`  Warning: component "${name}" not found in registry, skipping`);
+      return;
+    }
+    resolved.set(name, item);
+    for (const dep of item.dependencies) {
+      npmDeps.add(dep);
+    }
+    for (const dep of item.registryDependencies) {
+      await resolve(dep);
+    }
+  }
+  for (const name of names) {
+    await resolve(name);
+  }
+  if (!resolved.has("utils")) {
+    await resolve("utils");
+  }
+  return {
+    items: [...resolved.values()],
+    npmDeps: [...npmDeps]
+  };
+}
+
+// cli/src/utils/transform.ts
+var NPM_PACKAGE_REWRITES = {
+  "../../context/theme-context": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  },
+  "../../lib/theme-defaults": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  },
+  "../../lib/css-variable-sync": {
+    pkg: "canvas-ui-sdk",
+    named: true
+  }
+};
+function transformSource(content, filePath, config) {
+  let result = content;
+  for (const [from, to] of Object.entries(NPM_PACKAGE_REWRITES)) {
+    result = result.replace(
+      new RegExp(`from\\s+["']${escapeRegex(from)}["']`, "g"),
+      `from "${to.pkg}"`
+    );
+  }
+  result = result.replace(
+    /from\s+["']\.\.\/\.\.\/lib\/(\w+)["']/g,
+    `from "${config.aliases.lib}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/\.\.\/hooks\/([\w-]+)["']/g,
+    `from "${config.aliases.hooks}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/ui\/([\w-]+)["']/g,
+    `from "${config.aliases.ui}/$1"`
+  );
+  result = result.replace(
+    /from\s+["']\.\.\/blocks\/([\w-]+)["']/g,
+    `from "${config.aliases.components}/blocks/$1"`
+  );
+  if (filePath.startsWith("components/layout/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/layout/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/marketing/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/marketing/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/pricing/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/pricing/$1"`
+    );
+  } else if (filePath.startsWith("components/blocks/")) {
+    result = result.replace(
+      /from\s+["']\.\/([\w-]+)["']/g,
+      `from "${config.aliases.components}/blocks/$1"`
+    );
+  }
+  return result;
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// cli/src/commands/add.ts
+var CONFIG_FILE2 = "canvas-ui.json";
+async function add(componentNames) {
+  const cwd = process.cwd();
+  const configPath = path4.join(cwd, CONFIG_FILE2);
+  if (!fs4.existsSync(configPath)) {
+    console.log(
+      chalk2.red(
+        `No ${CONFIG_FILE2} found. Run ${chalk2.cyan("npx canvas-ui init")} first.`
+      )
+    );
+    process.exit(1);
+  }
+  const config = await fs4.readJSON(configPath);
+  if (componentNames.length === 0) {
+    console.log(chalk2.red("Please specify at least one component to add."));
+    console.log(`
+Usage: ${chalk2.cyan("npx canvas-ui add <component> [component...]")}`);
+    console.log(`
+Run ${chalk2.cyan("npx canvas-ui list")} to see available components.`);
+    process.exit(1);
+  }
+  const spinner = ora2("Loading registry...").start();
+  const index = await loadRegistryIndex();
+  const validNames = new Set(index.items.map((i) => i.name));
+  const invalid = componentNames.filter((n) => !validNames.has(n));
+  if (invalid.length > 0) {
+    spinner.fail(`Unknown components: ${invalid.join(", ")}`);
+    console.log(`
+Run ${chalk2.cyan("npx canvas-ui list")} to see available components.`);
+    process.exit(1);
+  }
+  spinner.succeed("Registry loaded");
+  spinner.start("Resolving dependencies...");
+  const { items, npmDeps } = await resolveAll(componentNames);
+  spinner.succeed(
+    `Resolved ${items.length} components (${items.length - componentNames.length} dependencies)`
+  );
+  const existing = [];
+  const toWrite = [];
+  for (const item of items) {
+    for (const file of item.files) {
+      const targetPath = resolveFilePath(file.path, config, cwd);
+      if (fs4.existsSync(targetPath)) {
+        existing.push(file.path);
+      }
+      toWrite.push({ item, targetPath });
+    }
+  }
+  if (existing.length > 0) {
+    console.log(
+      chalk2.yellow(`
+  Files that already exist (will be overwritten):`)
+    );
+    for (const f of existing) {
+      console.log(chalk2.dim(`    ${f}`));
+    }
+    console.log();
+  }
+  spinner.start("Writing component files...");
+  let filesWritten = 0;
+  for (const { item, targetPath } of toWrite) {
+    for (const file of item.files) {
+      const transformed = transformSource(file.content, file.path, config);
+      await fs4.ensureDir(path4.dirname(targetPath));
+      await fs4.writeFile(targetPath, transformed);
+      filesWritten++;
+    }
+  }
+  spinner.succeed(`Wrote ${filesWritten} files`);
+  if (npmDeps.length > 0) {
+    const pkgJsonPath = path4.join(cwd, "package.json");
+    let installed = /* @__PURE__ */ new Set();
+    if (fs4.existsSync(pkgJsonPath)) {
+      const pkgJson = await fs4.readJSON(pkgJsonPath);
+      installed = /* @__PURE__ */ new Set([
+        ...Object.keys(pkgJson.dependencies || {}),
+        ...Object.keys(pkgJson.devDependencies || {})
+      ]);
+    }
+    const toInstall = npmDeps.filter((dep) => !installed.has(dep));
+    if (toInstall.length > 0) {
+      spinner.start(`Installing ${toInstall.length} npm packages...`);
+      try {
+        await installPackages(toInstall, cwd);
+        spinner.succeed(`Installed: ${toInstall.join(", ")}`);
+      } catch (err) {
+        spinner.warn(
+          `Could not auto-install packages. Run manually:
+  npm install ${toInstall.join(" ")}`
+        );
+      }
+    }
+  }
+  console.log(chalk2.green("\n\u2713 Components added successfully!\n"));
+  const requested = new Set(componentNames);
+  const deps = items.filter((i) => !requested.has(i.name));
+  for (const name of componentNames) {
+    const item = items.find((i) => i.name === name);
+    if (item) {
+      console.log(
+        `  ${chalk2.green("+")} ${chalk2.bold(name)} ${chalk2.dim(`\u2192 ${item.files[0]?.path}`)}`
+      );
+    }
+  }
+  if (deps.length > 0) {
+    console.log(chalk2.dim("\n  Dependencies:"));
+    for (const dep of deps) {
+      console.log(
+        `  ${chalk2.green("+")} ${dep.name} ${chalk2.dim(`\u2192 ${dep.files[0]?.path}`)}`
+      );
+    }
+  }
+  console.log();
+}
+async function list() {
+  const spinner = ora2("Loading registry...").start();
+  const index = await loadRegistryIndex();
+  spinner.stop();
+  const byType = {};
+  for (const item of index.items) {
+    const type = item.type.replace("registry:", "");
+    if (!byType[type]) byType[type] = [];
+    byType[type].push(item);
+  }
+  const typeLabels = {
+    ui: "UI Primitives",
+    block: "Blocks",
+    layout: "Layout Shells",
+    hook: "Hooks",
+    lib: "Utilities"
+  };
+  for (const [type, items] of Object.entries(byType)) {
+    console.log(chalk2.bold(`
+${typeLabels[type] || type} (${items.length})`));
+    for (const item of items) {
+      const desc = item.description ? chalk2.dim(` \u2014 ${item.description.slice(0, 60)}`) : "";
+      console.log(`  ${chalk2.cyan(item.name)}${desc}`);
+    }
+  }
+  console.log();
+}
+function resolveFilePath(registryPath, config, cwd) {
+  const aliasPrefix = config.aliases.components.replace(/^@\//, "").replace(/^~\//, "");
+  const libPrefix = config.aliases.lib.replace(/^@\//, "").replace(/^~\//, "");
+  const hooksPrefix = config.aliases.hooks.replace(/^@\//, "").replace(/^~\//, "");
+  let resolved;
+  if (registryPath.startsWith("components/")) {
+    resolved = registryPath.replace("components/", `${aliasPrefix}/`);
+  } else if (registryPath.startsWith("lib/")) {
+    resolved = registryPath.replace("lib/", `${libPrefix}/`);
+  } else if (registryPath.startsWith("hooks/")) {
+    resolved = registryPath.replace("hooks/", `${hooksPrefix}/`);
+  } else {
+    resolved = registryPath;
+  }
+  return path4.join(cwd, "src", resolved);
+}
+
+// cli/src/index.ts
+var program = new Command();
+program.name("canvas-ui").description("CLI for adding Canvas UI SDK components to your project").version("0.1.0");
+program.command("init").description("Initialize Canvas UI SDK in your project").action(init);
+program.command("add").description("Add components to your project").argument("<components...>", "Component names to add").action(add);
+program.command("list").description("List all available components").action(list);
+program.parse();

package/dist/index.d.ts

@@ -4704,16 +4704,80 @@ interface ThemeProviderProps {
  */
 declare function ThemeProvider({ children, images, branding, brandAssets, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-type PanelId = "colors" | "typography" | "buttons" | "inputs" | "export";
+interface BrandingState {
+    iconShape: IconShapeId$1;
+    iconName: string;
+    bgColor: string;
+    iconColor: string;
+    wordmark: string;
+}
+interface ThemeState {
+    variables: Record<string, string>;
+    overrides: Record<string, string>;
+    isDirty: boolean;
+    unsavedChangesCount: number;
+    setVariable: (name: string, value: string) => void;
+    resetCategory: (prefix: string) => void;
+    resetAll: () => void;
+    exportCSS: () => string;
+    exportJSON: () => string;
+    importJSON: (json: string) => boolean;
+    branding: BrandingState;
+    setBranding: (updates: Partial<BrandingState>) => void;
+    images: Record<ImageKey, string>;
+    setImage: (key: ImageKey, url: string) => void;
+    deleteImage: (key: ImageKey) => void;
+    customButtonStyles: CustomButtonStyle[];
+    addCustomButtonStyle: () => void;
+    updateCustomButtonStyle: (id: string, updates: Partial<CustomButtonStyle>) => void;
+    deleteCustomButtonStyle: (id: string) => void;
+    brandHue: number;
+    brandVibrancy: number;
+    syncRelatedColors: boolean;
+    setBrandHue: (hue: number) => void;
+    setBrandVibrancy: (vibrancy: number) => void;
+    setSyncRelatedColors: (sync: boolean) => void;
+    applyBrandHueVibrancy: (hue: number, vibrancy: number, skipPrimary?: boolean) => void;
+}
+
+type PanelId = "colors" | "images" | "typography" | "buttons" | "inputs" | "export";
 interface ThemeDrawerProps {
     devOnly?: boolean;
     triggerPosition?: "bottom-right" | "bottom-left";
     defaultOpen?: boolean;
     panels?: PanelId[];
     onThemeChange?: (overrides: Record<string, string>) => void;
+    onBrandingChange?: (branding: BrandingState) => void;
+    onImagesChange?: (images: Record<ImageKey, string>) => void;
+    onImageUpload?: (key: ImageKey, file: File) => Promise<string>;
     initialOverrides?: Record<string, string>;
     storageKey?: string;
+    title?: string;
+    width?: number;
+}
+declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, initialOverrides, storageKey, title, width, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+
+interface HslColorPickerProps {
+    value: string;
+    onChange: (hex: string) => void;
+}
+declare function HslColorPicker({ value, onChange }: HslColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface VariableOption {
+    value: string;
+    label: string;
 }
-declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, initialOverrides, storageKey, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+interface ColorInputRowProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    variableOptions?: VariableOption[];
+}
+/**
+ * Reusable color row: swatch (opens HSL picker) + label + hex input.
+ * When variableOptions is provided, shows a dropdown for CSS variable references
+ * with a "Custom Color" option that enables the HSL picker.
+ */
+declare function ColorInputRow({ label, value, onChange, variableOptions, }: ColorInputRowProps): react_jsx_runtime.JSX.Element;
 
-export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption$c as FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeImages, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, type BrandingState, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ColorInputRow, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption$c as FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeImages, ThemeProvider, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, type VariableOption, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };