@snow-labs/brutal-ui 0.1.0 → 0.2.0

package/dist/components/views/kanban-board.js

@@ -0,0 +1,153 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useRef, useState, useEffect } from 'react';
+import { dropTargetForElements, draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function KanbanBoard({
+  columns,
+  renderCard,
+  onCardMove,
+  onCardAdd,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-4 overflow-x-auto pb-4", className), children: columns.map((column) => /* @__PURE__ */ jsx(
+    KanbanColumnComponent,
+    {
+      column,
+      renderCard,
+      onCardMove,
+      onCardAdd
+    },
+    column.id
+  )) });
+}
+function KanbanColumnComponent({
+  column,
+  renderCard,
+  onCardMove,
+  onCardAdd
+}) {
+  const ref = useRef(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [addText, setAddText] = useState("");
+  useEffect(() => {
+    if (!ref.current) return;
+    return dropTargetForElements({
+      element: ref.current,
+      getData: () => ({ columnId: column.id }),
+      onDragEnter: () => setIsDragOver(true),
+      onDragLeave: () => setIsDragOver(false),
+      onDrop: ({ source }) => {
+        setIsDragOver(false);
+        const data = source.data;
+        if (data.columnId !== column.id) {
+          onCardMove?.(
+            data.cardId,
+            data.columnId,
+            column.id,
+            column.cards.length
+          );
+        }
+      }
+    });
+  }, [column.id, column.cards.length, onCardMove]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex min-w-[280px] flex-col border-brutal border-foreground bg-secondary/30 p-3",
+        isDragOver && "ring-2 ring-brand"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "brutal-label mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: column.title }),
+          /* @__PURE__ */ jsx("span", { className: "bg-foreground px-1.5 font-mono text-xs text-background", children: column.cards.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: column.cards.map((card) => /* @__PURE__ */ jsx(
+          KanbanCard,
+          {
+            card,
+            columnId: column.id,
+            renderCard
+          },
+          card.id
+        )) }),
+        onCardAdd && /* @__PURE__ */ jsx(
+          "form",
+          {
+            className: "mt-3",
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (addText.trim()) {
+                onCardAdd(column.id, addText.trim());
+                setAddText("");
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: addText,
+                onChange: (e) => setAddText(e.target.value),
+                placeholder: "+ Add card...",
+                className: "text-sm"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function KanbanCard({
+  card,
+  columnId,
+  renderCard
+}) {
+  const ref = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  useEffect(() => {
+    if (!ref.current) return;
+    return draggable({
+      element: ref.current,
+      getInitialData: () => ({ cardId: card.id, columnId }),
+      onDragStart: () => setIsDragging(true),
+      onDrop: () => setIsDragging(false)
+    });
+  }, [card.id, columnId]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "cursor-grab border-brutal border-foreground bg-background p-3 shadow-brutal-sm transition-opacity active:cursor-grabbing",
+        isDragging && "opacity-50"
+      ),
+      children: renderCard(card)
+    }
+  );
+}
+
+export { KanbanBoard };
+//# sourceMappingURL=kanban-board.js.map
+//# sourceMappingURL=kanban-board.js.map

package/dist/components/views/kanban-board.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/input.tsx","../../../src/components/views/kanban-board.tsx"],"names":["InputPrimitive","jsx"],"mappings":"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","file":"kanban-board.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\";\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { useEffect, useRef, useState, useCallback } from \"react\";\nimport {\n  draggable,\n  dropTargetForElements,\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\nimport { Input } from \"../ui/input\";\n\ninterface KanbanColumn<TCard> {\n  id: string;\n  title: string;\n  cards: TCard[];\n}\n\ninterface KanbanBoardProps<TCard extends { id: string }> {\n  columns: KanbanColumn<TCard>[];\n  renderCard: (card: TCard) => React.ReactNode;\n  onCardMove?: (\n    cardId: string,\n    fromColumn: string,\n    toColumn: string,\n    index: number\n  ) => void;\n  onCardAdd?: (columnId: string, title: string) => void;\n  className?: string;\n}\n\nexport function KanbanBoard<TCard extends { id: string }>({\n  columns,\n  renderCard,\n  onCardMove,\n  onCardAdd,\n  className,\n}: KanbanBoardProps<TCard>) {\n  return (\n    <div className={cn(\"flex gap-4 overflow-x-auto pb-4\", className)}>\n      {columns.map((column) => (\n        <KanbanColumnComponent\n          key={column.id}\n          column={column}\n          renderCard={renderCard}\n          onCardMove={onCardMove}\n          onCardAdd={onCardAdd}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction KanbanColumnComponent<TCard extends { id: string }>({\n  column,\n  renderCard,\n  onCardMove,\n  onCardAdd,\n}: {\n  column: KanbanColumn<TCard>;\n  renderCard: (card: TCard) => React.ReactNode;\n  onCardMove?: (\n    cardId: string,\n    fromColumn: string,\n    toColumn: string,\n    index: number\n  ) => void;\n  onCardAdd?: (columnId: string, title: string) => void;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [addText, setAddText] = useState(\"\");\n\n  useEffect(() => {\n    if (!ref.current) return;\n    return dropTargetForElements({\n      element: ref.current,\n      getData: () => ({ columnId: column.id }),\n      onDragEnter: () => setIsDragOver(true),\n      onDragLeave: () => setIsDragOver(false),\n      onDrop: ({ source }) => {\n        setIsDragOver(false);\n        const data = source.data as { cardId: string; columnId: string };\n        if (data.columnId !== column.id) {\n          onCardMove?.(\n            data.cardId as string,\n            data.columnId as string,\n            column.id,\n            column.cards.length\n          );\n        }\n      },\n    });\n  }, [column.id, column.cards.length, onCardMove]);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex min-w-[280px] flex-col border-brutal border-foreground bg-secondary/30 p-3\",\n        isDragOver && \"ring-2 ring-brand\"\n      )}\n    >\n      <div className=\"brutal-label mb-3 flex items-center justify-between\">\n        <span>{column.title}</span>\n        <span className=\"bg-foreground px-1.5 font-mono text-xs text-background\">\n          {column.cards.length}\n        </span>\n      </div>\n      <div className=\"flex flex-1 flex-col gap-2\">\n        {column.cards.map((card) => (\n          <KanbanCard\n            key={card.id}\n            card={card}\n            columnId={column.id}\n            renderCard={renderCard}\n          />\n        ))}\n      </div>\n      {onCardAdd && (\n        <form\n          className=\"mt-3\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (addText.trim()) {\n              onCardAdd(column.id, addText.trim());\n              setAddText(\"\");\n            }\n          }}\n        >\n          <Input\n            value={addText}\n            onChange={(e) => setAddText(e.target.value)}\n            placeholder=\"+ Add card...\"\n            className=\"text-sm\"\n          />\n        </form>\n      )}\n    </div>\n  );\n}\n\nfunction KanbanCard<TCard extends { id: string }>({\n  card,\n  columnId,\n  renderCard,\n}: {\n  card: TCard;\n  columnId: string;\n  renderCard: (card: TCard) => React.ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    return draggable({\n      element: ref.current,\n      getInitialData: () => ({ cardId: card.id, columnId }),\n      onDragStart: () => setIsDragging(true),\n      onDrop: () => setIsDragging(false),\n    });\n  }, [card.id, columnId]);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"cursor-grab border-brutal border-foreground bg-background p-3 shadow-brutal-sm transition-opacity active:cursor-grabbing\",\n        isDragging && \"opacity-50\"\n      )}\n    >\n      {renderCard(card)}\n    </div>\n  );\n}\n"]}

package/dist/components/views/list-view.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ListItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    avatar?: string;
+    metadata?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+interface ListViewProps {
+    items: ListItem[];
+    onItemClick?: (item: ListItem) => void;
+    emptyMessage?: string;
+    className?: string;
+}
+declare function ListView({ items, onItemClick, emptyMessage, className, }: ListViewProps): react_jsx_runtime.JSX.Element;
+
+export { ListView };

package/dist/components/views/list-view.js

@@ -0,0 +1,96 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ListView({
+  items,
+  onItemClick,
+  emptyMessage = "No items",
+  className
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("border-brutal border-foreground shadow-brutal", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onItemClick?.(item),
+      className: cn(
+        "flex items-center gap-4 px-4 py-3 transition-colors",
+        onItemClick && "cursor-pointer",
+        "hover:bg-secondary/50",
+        i < items.length - 1 && "border-b border-foreground/10"
+      ),
+      children: [
+        item.avatar && /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: item.avatar, alt: item.title }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: item.title[0] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: item.title }),
+          item.subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: item.subtitle })
+        ] }),
+        item.metadata && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: item.metadata }),
+        item.actions && /* @__PURE__ */ jsx("div", { children: item.actions })
+      ]
+    },
+    item.id
+  )) });
+}
+
+export { ListView };
+//# sourceMappingURL=list-view.js.map
+//# sourceMappingURL=list-view.js.map

package/dist/components/views/list-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/avatar.tsx","../../../src/components/views/list-view.tsx"],"names":["AvatarPrimitive","jsx"],"mappings":"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","file":"list-view.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n","import { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\n\ninterface ListItem {\n  id: string;\n  title: string;\n  subtitle?: string;\n  avatar?: string;\n  metadata?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\ninterface ListViewProps {\n  items: ListItem[];\n  onItemClick?: (item: ListItem) => void;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport function ListView({\n  items,\n  onItemClick,\n  emptyMessage = \"No items\",\n  className,\n}: ListViewProps) {\n  if (items.length === 0) {\n    return (\n      <p className=\"py-8 text-center text-muted-foreground\">{emptyMessage}</p>\n    );\n  }\n\n  return (\n    <div className={cn(\"border-brutal border-foreground shadow-brutal\", className)}>\n      {items.map((item, i) => (\n        <div\n          key={item.id}\n          onClick={() => onItemClick?.(item)}\n          className={cn(\n            \"flex items-center gap-4 px-4 py-3 transition-colors\",\n            onItemClick && \"cursor-pointer\",\n            \"hover:bg-secondary/50\",\n            i < items.length - 1 && \"border-b border-foreground/10\"\n          )}\n        >\n          {item.avatar && (\n            <Avatar className=\"size-8\">\n              <AvatarImage src={item.avatar} alt={item.title} />\n              <AvatarFallback>{item.title[0]}</AvatarFallback>\n            </Avatar>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-sm font-bold\">{item.title}</p>\n            {item.subtitle && (\n              <p className=\"truncate text-xs text-muted-foreground\">\n                {item.subtitle}\n              </p>\n            )}\n          </div>\n          {item.metadata && (\n            <div className=\"text-sm text-muted-foreground\">{item.metadata}</div>\n          )}\n          {item.actions && <div>{item.actions}</div>}\n        </div>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -35,15 +35,38 @@ export { Textarea } from './components/ui/textarea.js';
 export { Toggle, toggleVariants } from './components/ui/toggle.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/tooltip.js';
-export { BrutalSection } from './components/brutal/section.js';
+export { defaultTransition, fadeIn, fadeInUp, scaleIn, slideInLeft, slideInRight, springTransition, staggerContainer } from './lib/animations.js';
+export { BrutalSection, SectionColor, SectionPattern } from './components/brutal/section.js';
+export { SectionDivider, SectionDivider as WaveDivider } from './components/brutal/section-divider.js';
 export { BrutalHero } from './components/brutal/hero.js';
-export { WaveDivider } from './components/brutal/wave-divider.js';
 export { BrutalFeatureGrid } from './components/brutal/feature-grid.js';
-export { BrutalTestimonials } from './components/brutal/testimonials.js';
+export { BrutalTestimonials, Testimonial } from './components/brutal/testimonials.js';
 export { BrutalIntegrationGrid } from './components/brutal/integration-grid.js';
 export { BrutalCTA } from './components/brutal/cta-section.js';
 export { BrutalNav } from './components/brutal/nav.js';
 export { BrutalFooter } from './components/brutal/footer.js';
+export { PricingTable } from './components/brutal/pricing-table.js';
+export { LogoCloud } from './components/brutal/logo-cloud.js';
+export { StatsBar } from './components/brutal/stats-bar.js';
+export { FAQ } from './components/brutal/faq.js';
+export { Newsletter } from './components/brutal/newsletter.js';
+export { AppShell, useAppShell } from './components/dashboard/app-shell.js';
+export { Sidebar } from './components/dashboard/sidebar.js';
+export { StatCard } from './components/dashboard/stat-card.js';
+export { ViewSwitcher } from './components/dashboard/view-switcher.js';
+export { SearchBar } from './components/dashboard/search-bar.js';
+export { UserMenu } from './components/dashboard/user-menu.js';
+export { EmptyState } from './components/dashboard/empty-state.js';
+export { ActivityFeed } from './components/dashboard/activity-feed.js';
+export { FileUpload } from './components/dashboard/file-upload.js';
+export { DataTable } from './components/views/data-table.js';
+export { KanbanBoard } from './components/views/kanban-board.js';
+export { GridView } from './components/views/grid-view.js';
+export { CalendarView } from './components/views/calendar-view.js';
+export { ListView } from './components/views/list-view.js';
+export { SaaSLaunchTemplate } from './templates/saas-launch.js';
+export { StudioTemplate } from './templates/studio.js';
+export { DashboardTemplate } from './templates/dashboard.js';
 import 'clsx';
 import 'react/jsx-runtime';
 import '@base-ui/react/accordion';
@@ -76,3 +99,4 @@ import '@base-ui/react/tabs';
 import '@base-ui/react/toggle';
 import '@base-ui/react/toggle-group';
 import '@base-ui/react/tooltip';
+import '@tanstack/react-table';