@dfosco/storyboard-core 4.2.0-beta.4 → 4.2.1

package/src/featureFlags.js

@@ -16,6 +16,12 @@ import { getLocal, setLocal, removeLocal, getAllLocal } from './localStorage.js'
 const FLAG_PREFIX = 'flag.'
 const BODY_CLASS_PREFIX = 'sb-ff-'
 
+/** Built-in feature flag defaults — always available even if initFeatureFlags is never called. */
+const BUILTIN_DEFAULTS = {
+  'canvas-auto-reload': false,
+  'prototype-auto-reload': true,
+}
+
 /** Module-level storage for config defaults */
 let _defaults = {}
 
@@ -43,7 +49,7 @@ export function syncFlagBodyClasses() {
  * @param {Record<string, boolean>} defaults - Flag key → default value
  */
 export function initFeatureFlags(defaults = {}) {
-  _defaults = { ...defaults }
+  _defaults = { ...BUILTIN_DEFAULTS, ...defaults }
   for (const [key, value] of Object.entries(_defaults)) {
     if (getLocal(FLAG_PREFIX + key) === null) {
       setLocal(FLAG_PREFIX + key, String(value))
@@ -61,7 +67,7 @@ export function getFlag(key) {
   const localVal = getLocal(FLAG_PREFIX + key)
   if (localVal !== null) return localVal === 'true'
 
-  return _defaults[key] ?? false
+  return _defaults[key] ?? BUILTIN_DEFAULTS[key] ?? false
 }
 
 /**
@@ -87,10 +93,11 @@ export function toggleFlag(key) {
  * @returns {Record<string, { default: boolean, current: boolean }>}
  */
 export function getAllFlags() {
+  const allKeys = new Set([...Object.keys(BUILTIN_DEFAULTS), ...Object.keys(_defaults)])
   const result = {}
-  for (const key of Object.keys(_defaults)) {
+  for (const key of allKeys) {
     result[key] = {
-      default: _defaults[key] ?? false,
+      default: _defaults[key] ?? BUILTIN_DEFAULTS[key] ?? false,
       current: getFlag(key),
     }
   }
@@ -116,5 +123,5 @@ export function resetFlags() {
  * @returns {string[]}
  */
 export function getFlagKeys() {
-  return Object.keys(_defaults)
+  return [...new Set([...Object.keys(BUILTIN_DEFAULTS), ...Object.keys(_defaults)])]
 }

package/src/fuzzySearch.test.js

@@ -106,4 +106,14 @@ describe('fuzzySearch', () => {
     const results = fuzzySearch(data, 'val')
     expect(results).toHaveLength(1)
   })
+
+  it('ranks agent keyword matches above fuzzy component matches for "cop"', () => {
+    const data = [
+      { label: 'Component add widget create component component' },
+      { label: 'Agent add widget create agent copilot Copilot CLI' },
+    ]
+    const results = fuzzySearch(data, 'cop')
+    expect(results[0].item.label).toContain('Agent')
+    expect(results[0].score).toBeGreaterThan(results[1].score)
+  })
 })

package/src/index.js

@@ -82,7 +82,7 @@ export { initUIConfig, isMenuHidden, getHiddenItems } from './uiConfig.js'
 export { initToolRegistry, registerToolModule, setToolComponent, setToolGuardResult, getToolComponent, getToolModule, getToolsForToolbar, getToolConfig, getAllToolConfigs, subscribeToToolRegistry, getToolRegistrySnapshot } from './toolRegistry.js'
 
 // Toolbar config store (reactive layered overrides: core → custom → prototype → user)
-export { initToolbarConfig, setPrototypeToolbarConfig, clearPrototypeToolbarConfig, getToolbarConfig, subscribeToToolbarConfig, getToolbarConfigSnapshot } from './toolbarConfigStore.js'
+export { initToolbarConfig, setPrototypeToolbarConfig, clearPrototypeToolbarConfig, getToolbarConfig, subscribeToToolbarConfig, getToolbarConfigSnapshot, setClientToolbarOverrides, consumeClientToolbarOverrides } from './toolbarConfigStore.js'
 
 // Toolbar tool state management (runtime state for toolbar tools)
 export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates, getToolbarToolStatesSnapshot } from './toolStateStore.js'
@@ -91,8 +91,11 @@ export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarTool
 export { initCommentsConfig, getCommentsConfig, isCommentsEnabled } from './comments/config.js'
 
 // Canvas config (paste rules, canvas-level overrides)
-export { initCanvasConfig, getPasteRules, getTerminalConfig } from './canvasConfig.js'
-export { getCommandPaletteConfig } from './commandPaletteConfig.js'
+export { initCanvasConfig, getPasteRules, getTerminalConfig, getAgentsConfig, isTerminalResizable, getTerminalDimensions, getCanvasZoom } from './canvasConfig.js'
+export { getCommandPaletteConfig, initCommandPaletteConfig } from './commandPaletteConfig.js'
+
+// Unified config store
+export { initConfig, getConfig, setOverrides, clearOverrides, clearAllOverrides, subscribeToConfig, getConfigSnapshot } from './configStore.js'
 
 // Customer mode config
 export { initCustomerModeConfig, getCustomerModeConfig, isCustomerMode } from './customerModeConfig.js'
@@ -110,3 +113,12 @@ export {
 
 // Recent artifacts (command palette recents)
 export { trackRecent, getRecent, clearRecent } from './recentArtifacts.js'
+
+// Fuzzy search (scoring used by command palette custom filter)
+export { scoreMatch } from './fuzzySearch.js'
+
+// Icon component for UI rendering
+export { Icon, default as IconDefault } from './svelte-plugin-ui/components/Icon.jsx'
+
+// Shared UI components
+export { default as BranchSelect } from './BranchSelect.jsx'

package/src/lib/components/ui/alert/alert-action.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertAction = forwardRef(function AlertAction({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertAction;

package/src/lib/components/ui/alert/alert-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertDescription = forwardRef(function AlertDescription({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-description" className={cn("text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertDescription;

package/src/lib/components/ui/alert/alert-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-title" className={cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertTitle;

package/src/lib/components/ui/alert/alert.jsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+variants: {
+variant: {
+default: "bg-card text-card-foreground",
+destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+},
+},
+defaultVariants: {
+variant: "default",
+},
+});
+
+const Alert = forwardRef(function Alert({ className, variant = "default", children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
+{children}
+</div>
+);
+});
+export default Alert;

package/src/lib/components/ui/alert/index.js

@@ -1,17 +1,17 @@
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
-import Action from "./alert-action.svelte";
-export { alertVariants, } from "./alert.svelte";
+import Root, { alertVariants } from "./alert.jsx";
+import Description from "./alert-description.jsx";
+import Title from "./alert-title.jsx";
+import Action from "./alert-action.jsx";
 
 export {
-	Root,
-	Description,
-	Title,
-	Action,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle,
-	Action as AlertAction,
-};
+alertVariants,
+Root,
+Description,
+Title,
+Action,
+//
+Root as Alert,
+Description as AlertDescription,
+Title as AlertTitle,
+Action as AlertAction,
+};

package/src/lib/components/ui/avatar/avatar-badge.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarBadge = forwardRef(function AvatarBadge({ className, children, ...props }, ref) {
+return (
+<span
+ref={ref}
+data-slot="avatar-badge"
+className={cn(
+"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+className
+)}
+{...props}
+>
+{children}
+</span>
+);
+});
+export default AvatarBadge;

package/src/lib/components/ui/avatar/avatar-fallback.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const AvatarFallback = forwardRef(function AvatarFallback({ className, ...props }, ref) {
+return (
+<AvatarPrimitive.Fallback
+ref={ref}
+data-slot="avatar-fallback"
+className={cn(
+"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+className
+)}
+{...props}
+/>
+);
+});
+export default AvatarFallback;

package/src/lib/components/ui/avatar/avatar-group-count.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarGroupCount = forwardRef(function AvatarGroupCount({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="avatar-group-count"
+className={cn(
+"bg-muted text-muted-foreground size-8 rounded-full text-sm 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 ring-background relative flex shrink-0 items-center justify-center ring-2",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default AvatarGroupCount;

package/src/lib/components/ui/avatar/avatar-group.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarGroup = forwardRef(function AvatarGroup({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="avatar-group"
+className={cn(
+"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default AvatarGroup;

package/src/lib/components/ui/avatar/avatar-image.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const AvatarImage = forwardRef(function AvatarImage({ className, ...props }, ref) {
+return (
+<AvatarPrimitive.Image
+ref={ref}
+data-slot="avatar-image"
+className={cn("rounded-full aspect-square size-full object-cover", className)}
+{...props}
+/>
+);
+});
+export default AvatarImage;

package/src/lib/components/ui/avatar/avatar.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const Avatar = forwardRef(function Avatar({ className, size = "default", ...props }, ref) {
+return (
+<AvatarPrimitive.Root
+ref={ref}
+data-slot="avatar"
+data-size={size}
+className={cn(
+"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+className
+)}
+{...props}
+/>
+);
+});
+export default Avatar;

package/src/lib/components/ui/avatar/index.js

@@ -1,22 +1,22 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
-import Badge from "./avatar-badge.svelte";
-import Group from "./avatar-group.svelte";
-import GroupCount from "./avatar-group-count.svelte";
+import Root from "./avatar.jsx";
+import Image from "./avatar-image.jsx";
+import Fallback from "./avatar-fallback.jsx";
+import Badge from "./avatar-badge.jsx";
+import Group from "./avatar-group.jsx";
+import GroupCount from "./avatar-group-count.jsx";
 
 export {
-	Root,
-	Image,
-	Fallback,
-	Badge,
-	Group,
-	GroupCount,
-	//
-	Root as Avatar,
-	Image as AvatarImage,
-	Fallback as AvatarFallback,
-	Badge as AvatarBadge,
-	Group as AvatarGroup,
-	GroupCount as AvatarGroupCount,
-};
+Root,
+Image,
+Fallback,
+Badge,
+Group,
+GroupCount,
+//
+Root as Avatar,
+Image as AvatarImage,
+Fallback as AvatarFallback,
+Badge as AvatarBadge,
+Group as AvatarGroup,
+GroupCount as AvatarGroupCount,
+};

package/src/lib/components/ui/badge/badge.jsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const badgeVariants = tv({
+base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+variants: {
+variant: {
+default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+link: "text-primary underline-offset-4 hover:underline",
+},
+},
+defaultVariants: {
+variant: "default",
+},
+});
+
+const Badge = forwardRef(function Badge({ href, className, variant = "default", children, ...props }, ref) {
+const Component = href ? "a" : "span";
+return (
+<Component ref={ref} data-slot="badge" href={href} className={cn(badgeVariants({ variant }), className)} {...props}>
+{children}
+</Component>
+);
+});
+
+export default Badge;

package/src/lib/components/ui/badge/index.js

@@ -1,2 +1,2 @@
-export { default as Badge } from "./badge.svelte";
-export { badgeVariants, } from "./badge.svelte";
+export { default as Badge } from "./badge.jsx";
+export { badgeVariants } from "./badge.jsx";

package/src/lib/components/ui/button/button.jsx

@@ -0,0 +1,100 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const buttonVariants = tv({
+base: "focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 rounded-lg font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex size-full shrink-0 items-center justify-center whitespace-nowrap transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+variants: {
+variant: {
+default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+outline: "bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+trigger: "focus-visible:ring-0",
+secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive dark:hover:bg-destructive/30",
+link: "text-primary underline-offset-4 hover:underline",
+},
+size: {
+default: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+xs: "text-xs gap-1 rounded-[min(var(--sb--radius-md),10px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+sm: "text-[0.8rem] gap-1 rounded-[min(var(--sb--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+lg: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+xl: "text-base gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-5",
+"2xl": "text-lg gap-2.5 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 [&_svg:not([class*='size-'])]:size-6",
+icon: "text-sm",
+"icon-xs": "text-xs rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+"icon-sm": "text-[0.8rem] rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+"icon-lg": "text-sm",
+"icon-xl": "text-base [&_svg:not([class*='size-'])]:size-5",
+"icon-2xl": "text-lg [&_svg:not([class*='size-'])]:size-6",
+},
+},
+defaultVariants: {
+variant: "default",
+size: "default",
+},
+});
+
+export const wrapperVariants = tv({
+base: "inline-flex shrink-0 transition-transform",
+variants: {
+size: {
+default: "h-8",
+xs: "h-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+sm: "h-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+lg: "h-9",
+xl: "h-11",
+"2xl": "h-14",
+icon: "size-8",
+"icon-xs": "size-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+"icon-sm": "size-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+"icon-lg": "size-9",
+"icon-xl": "size-11",
+"icon-2xl": "size-14",
+},
+},
+defaultVariants: {
+size: "default",
+},
+});
+
+const Button = forwardRef(function Button(
+{ className, wrapperClass = "", variant = "default", size = "default", href, type = "button", disabled, children, ...props },
+ref
+) {
+return (
+<span
+data-slot="button-wrapper"
+className={cn(wrapperVariants({ size }), wrapperClass)}
+style={{ background: "var(--sb--sc-border-color, transparent)", padding: "var(--sb--sc-border-width, 0px)" }}
+>
+{href ? (
+<a
+ref={ref}
+className={cn(buttonVariants({ variant, size }), className)}
+href={disabled ? undefined : href}
+aria-disabled={disabled}
+role={disabled ? "link" : undefined}
+tabIndex={disabled ? -1 : undefined}
+data-slot="button"
+{...props}
+>
+{children}
+</a>
+) : (
+<button
+ref={ref}
+className={cn(buttonVariants({ variant, size }), className)}
+type={type}
+disabled={disabled}
+data-slot="button"
+{...props}
+>
+{children}
+</button>
+)}
+</span>
+);
+});
+
+export default Button;

package/src/lib/components/ui/button/index.js

@@ -1,12 +1,12 @@
 import Root, {
-	buttonVariants,
-	wrapperVariants,
-} from "./button.svelte";
+buttonVariants,
+wrapperVariants,
+} from "./button.jsx";
 
 export {
-	Root,
-	//
-	Root as Button,
-	buttonVariants,
-	wrapperVariants,
-};
+Root,
+//
+Root as Button,
+buttonVariants,
+wrapperVariants,
+};

package/src/lib/components/ui/card/card-action.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardAction = forwardRef(function CardAction({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-action" className={cn("cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardAction;

package/src/lib/components/ui/card/card-content.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardContent = forwardRef(function CardContent({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-content" className={cn("px-4 group-data-[size=sm]/card:px-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardContent;

package/src/lib/components/ui/card/card-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardDescription = forwardRef(function CardDescription({ className, children, ...props }, ref) {
+return (
+<p ref={ref} data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props}>
+{children}
+</p>
+);
+});
+export default CardDescription;

package/src/lib/components/ui/card/card-footer.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardFooter = forwardRef(function CardFooter({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-footer" className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardFooter;

package/src/lib/components/ui/card/card-header.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardHeader = forwardRef(function CardHeader({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="card-header"
+className={cn(
+"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default CardHeader;

package/src/lib/components/ui/card/card-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardTitle = forwardRef(function CardTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-title" className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardTitle;

package/src/lib/components/ui/card/card.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Card = forwardRef(function Card({ className, size = "default", children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="card"
+data-size={size}
+className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default Card;