@colineapp/ui 0.3.1 → 0.4.1

package/dist/index.js

@@ -8,6 +8,7 @@ function cn(...inputs) {
 }
 
 // src/provider.tsx
+import { MotionConfig } from "framer-motion";
 import * as React from "react";
 import {
   connectGuestBridge
@@ -24,18 +25,22 @@ function applyTheme(theme, colorScheme) {
   root.classList.toggle("dark", colorScheme === "dark");
 }
 function ColineAppProvider({ children }) {
+  const [connectionError, setConnectionError] = React.useState(null);
   const [runtime, setRuntime] = React.useState(null);
   React.useEffect(() => {
     let disposed = false;
+    let activeBridge = null;
     let removeThemeListener = null;
     void connectGuestBridge().then((bridge) => {
-      if (disposed) return;
+      if (disposed) {
+        bridge.dispose();
+        return;
+      }
+      activeBridge = bridge;
       applyTheme(bridge.theme, bridge.colorScheme);
       removeThemeListener = bridge.onThemeChange((theme, colorScheme) => {
         applyTheme(theme, colorScheme);
-        setRuntime(
-          (current) => current ? { ...current, colorScheme } : current
-        );
+        setRuntime((current) => current ? { ...current, colorScheme } : current);
       });
       setRuntime({
         bridge,
@@ -43,9 +48,12 @@ function ColineAppProvider({ children }) {
         context: bridge.context,
         colorScheme: bridge.colorScheme
       });
+    }).catch((error) => {
+      if (!disposed) setConnectionError(error instanceof Error ? error.message : String(error));
     });
     return () => {
       disposed = true;
+      activeBridge?.dispose();
       removeThemeListener?.();
     };
   }, []);
@@ -58,9 +66,9 @@ function ColineAppProvider({ children }) {
     return () => observer.disconnect();
   }, [runtime]);
   if (!runtime) {
-    return null;
+    return /* @__PURE__ */ jsx("p", { role: connectionError ? "alert" : "status", children: connectionError ?? "Connecting to Coline\u2026" });
   }
-  return /* @__PURE__ */ jsx(ColineRuntimeContext.Provider, { value: runtime, children });
+  return /* @__PURE__ */ jsx(ColineRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", children }) });
 }
 function useColine() {
   const runtime = React.useContext(ColineRuntimeContext);
@@ -158,7 +166,7 @@ import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-white/20 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color] duration-200 ease-out outline-none select-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:border-white/[0.06] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "coline-button group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-white/20 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,transform,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] outline-none select-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:border-white/[0.06] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -191,6 +199,7 @@ var Button = React3.forwardRef(function Button2({
   variant = "default",
   size = "default",
   asChild = false,
+  type,
   ...props
 }, ref) {
   const Comp = asChild ? Slot2.Root : "button";
@@ -198,6 +207,7 @@ var Button = React3.forwardRef(function Button2({
     Comp,
     {
       ref,
+      ...!asChild ? { type: type ?? "button" } : type ? { type } : {},
       "data-slot": "button",
       "data-variant": variant,
       "data-size": size,
@@ -332,6 +342,11 @@ function Checkbox({
 import "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { IconX } from "@tabler/icons-react";
+
+// src/components/liquid-menu-surface.ts
+var liquidMenuSurfaceClasses = "rounded-2xl bg-popover/75 dark:bg-zinc-900/75 backdrop-blur-[3px] border border-black/[0.08] text-popover-foreground shadow-[0_4px_16px_-4px_rgba(0,0,0,0.08),0_16px_48px_-12px_rgba(0,0,0,0.28)] dark:border-white/[0.09] dark:bg-[#141417] dark:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.4),0_16px_48px_-12px_rgba(0,0,0,0.7)]";
+
+// src/components/dialog.tsx
 import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 function Dialog({
   ...props
@@ -362,7 +377,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
+        "coline-dialog-overlay fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
         className
       ),
       ...props
@@ -383,15 +398,16 @@ function DialogContent({
         "data-slot": "dialog-content",
         className: cn(
           // Mobile: bottom-sheet style, pinned to bottom with slide-up
-          "fixed z-50 grid w-full gap-4 bg-background/75 dark:bg-zinc-900/75 backdrop-blur-sm p-4 text-sm shadow-xl shadow-black/10 dark:shadow-black/30 ring-1 ring-white/15 dark:ring-white/10 inset-ring inset-ring-white/10 dark:inset-ring-white/5 outline-none",
-          "inset-x-0 bottom-0 max-h-[85dvh] overflow-y-auto rounded-t-3xl pb-[max(1rem,env(safe-area-inset-bottom))]",
+          "coline-dialog-content fixed z-50 grid w-full gap-4 p-4 text-sm outline-none",
+          liquidMenuSurfaceClasses,
+          "inset-x-0 bottom-0 max-h-[85dvh] overflow-y-auto rounded-b-none pb-[max(1rem,env(safe-area-inset-bottom))]",
           // Desktop: centered modal
-          "sm:inset-x-auto sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:max-w-md sm:max-h-[calc(100dvh-4rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-4xl sm:p-6 sm:gap-6 sm:pb-6",
+          "sm:inset-x-auto sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:max-w-md sm:max-h-[calc(100dvh-4rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl sm:p-6 sm:gap-6 sm:pb-6",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx6("div", { className: "mx-auto h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30 sm:hidden" }),
+          /* @__PURE__ */ jsx6("div", { className: "mx-auto h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30 sm:hidden", "aria-hidden": "true" }),
           children,
           showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
             Button,
@@ -415,7 +431,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2", className),
+      className: cn("flex flex-col gap-2 pr-8", className),
       ...props
     }
   );
@@ -477,9 +493,6 @@ import * as React8 from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { IconCheck as IconCheck2, IconChevronRight } from "@tabler/icons-react";
 
-// src/components/liquid-menu-surface.ts
-var liquidMenuSurfaceClasses = "rounded-2xl bg-popover/75 dark:bg-zinc-900/75 backdrop-blur-[3px] border border-black/[0.08] text-popover-foreground shadow-[0_4px_16px_-4px_rgba(0,0,0,0.08),0_16px_48px_-12px_rgba(0,0,0,0.28)] dark:border-white/[0.09] dark:bg-[#141417] dark:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.4),0_16px_48px_-12px_rgba(0,0,0,0.7)]";
-
 // src/components/menu-highlight.tsx
 import * as React7 from "react";
 import { motion } from "framer-motion";
@@ -1639,115 +1652,73 @@ function TableCaption({
 }
 
 // src/components/tabs.tsx
-import "react";
+import * as React18 from "react";
 import { cva as cva4 } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { motion as motion2 } from "framer-motion";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var TABS_LAYOUT_SPRING = {
-  type: "spring",
-  stiffness: 720,
-  damping: 46,
-  mass: 0.48
-};
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(
+import { motion as motion2, useReducedMotion } from "framer-motion";
+import { Fragment, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+var TABS_LAYOUT_SPRING = { type: "spring", stiffness: 300, damping: 26, mass: 1 };
+var TabsContext = React18.createContext(null);
+var ListVariantContext = React18.createContext("default");
+function Tabs({ className, orientation = "horizontal", value, defaultValue, onValueChange, ...props }) {
+  const [localValue, setLocalValue] = React18.useState(defaultValue);
+  const id = React18.useId();
+  const activeValue = value ?? localValue;
+  const context = React18.useMemo(() => ({ value: activeValue, id }), [activeValue, id]);
+  return /* @__PURE__ */ jsx20(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx20(
     TabsPrimitive.Root,
     {
+      ...props,
+      ...activeValue === void 0 ? {} : { value: activeValue },
+      orientation,
+      onValueChange: (next) => {
+        if (value === void 0) setLocalValue(next);
+        onValueChange?.(next);
+      },
       "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var tabsListVariants = cva4(
-  "group/tabs-list relative inline-flex w-fit items-center justify-center rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted/70 border border-black/4 shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)] dark:bg-white/4 dark:border-white/4 dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.3)]",
-        line: "gap-1 bg-transparent"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+      className: cn("coline-tabs", className)
     }
-  }
-);
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(
-    TabsPrimitive.List,
-    {
-      "data-slot": "tabs-list",
-      "data-variant": variant,
-      className: cn(tabsListVariants({ variant }), className),
-      ...props
-    }
-  );
+  ) });
 }
-function TabsTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(
-    TabsPrimitive.Trigger,
-    {
-      "data-slot": "tabs-trigger",
-      className: cn(
-        "relative z-1 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/50 transition-[color,background-color,border-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 hover:text-foreground/80 focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground/70 dark:hover:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:text-foreground data-active:hover:text-foreground dark:data-active:text-foreground dark:data-active:hover:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      ),
-      ...props
-    }
-  );
+var tabsListVariants = cva4("coline-tabs-list", {
+  variants: { variant: { default: "coline-tabs-raised", line: "coline-tabs-line" } },
+  defaultVariants: { variant: "default" }
+});
+function TabsList({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx20(ListVariantContext.Provider, { value: variant ?? "default", children: /* @__PURE__ */ jsx20(TabsPrimitive.List, { ...props, "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className) }) });
+}
+function hasIndicator(children) {
+  return React18.Children.toArray(children).some((child) => React18.isValidElement(child) && (child.type === TabsIndicator || hasIndicator(child.props.children)));
+}
+function TabsTrigger({ className, children, value, asChild = false, ...props }) {
+  const tabs = React18.useContext(TabsContext);
+  const variant = React18.useContext(ListVariantContext);
+  const indicator = tabs?.value === value && variant === "default" && !hasIndicator(children) ? /* @__PURE__ */ jsx20(TabsIndicator, {}) : null;
+  const content = asChild && React18.isValidElement(children) ? React18.cloneElement(children, void 0, indicator, children.props.children) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+    indicator,
+    children
+  ] });
+  return /* @__PURE__ */ jsx20(TabsPrimitive.Trigger, { ...props, value, asChild, "data-slot": "tabs-trigger", className: cn("coline-tabs-trigger", className), children: content });
 }
-function TabsIndicator({
-  className,
-  layoutId = "tabs-indicator"
-}) {
+function TabsIndicator({ className, layoutId = "selection" }) {
+  const tabs = React18.useContext(TabsContext);
+  const fallbackId = React18.useId();
+  const reducedMotion = useReducedMotion();
   return /* @__PURE__ */ jsx20(
     motion2.div,
     {
-      layout: "position",
-      layoutId,
-      className: cn(
-        "absolute inset-0 z-[-1] rounded-xl bg-background border border-black/6 shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] dark:bg-white/7 dark:border-white/6 dark:shadow-[0_1px_3px_0_rgba(0,0,0,0.3),inset_0_1px_0_0_rgba(255,255,255,0.04)]",
-        className
-      ),
-      transition: TABS_LAYOUT_SPRING
+      "aria-hidden": "true",
+      "data-slot": "tabs-indicator",
+      layout: true,
+      layoutId: `${tabs?.id ?? fallbackId}-${layoutId}`,
+      initial: false,
+      className: cn("coline-tabs-indicator", className),
+      transition: reducedMotion ? { duration: 0 } : TABS_LAYOUT_SPRING
     }
   );
 }
-function TabsContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(
-    TabsPrimitive.Content,
-    {
-      "data-slot": "tabs-content",
-      className: cn(
-        "flex-1 text-sm outline-none animate-in fade-in-0 slide-in-from-bottom-0.5 duration-100 ease-out",
-        className
-      ),
-      ...props
-    }
-  );
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(TabsPrimitive.Content, { ...props, "data-slot": "tabs-content", className: cn("coline-tabs-content", className) });
 }
 
 // src/components/textarea.tsx
@@ -1857,8 +1828,247 @@ function TooltipContent({
     }
   ) });
 }
+
+// src/live-collection.ts
+import * as React22 from "react";
+import {
+  createLiveCollection
+} from "@colineapp/sdk/v2";
+function useLiveCollection(name, query, options) {
+  const coline = useColine();
+  const context = useColineContext();
+  const key = JSON.stringify({
+    query,
+    options: { actorUserId: context.actor?.userId, installId: context.app.installId, ...options }
+  });
+  const live = React22.useMemo(() => {
+    const input = JSON.parse(key);
+    return createLiveCollection(coline, name, input.query, input.options);
+  }, [coline, name, key]);
+  React22.useEffect(() => {
+    void live.start();
+    return () => live.stop();
+  }, [live]);
+  const snapshot = React22.useSyncExternalStore(live.subscribe, live.getSnapshot, live.getSnapshot);
+  return {
+    ...snapshot,
+    insert: live.insert,
+    update: live.update,
+    delete: live.delete,
+    setAccess: live.setAccess,
+    refresh: live.refresh
+  };
+}
+
+// src/patterns/workspace.tsx
+import * as React23 from "react";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
+function AppPage({
+  title,
+  description,
+  eyebrow,
+  actions,
+  children,
+  width = "wide",
+  className
+}) {
+  return /* @__PURE__ */ jsxs7("main", { className: cn("coline-page", className), "data-width": width, children: [
+    /* @__PURE__ */ jsxs7("header", { className: "coline-page-header", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "coline-page-heading", children: [
+        eyebrow && /* @__PURE__ */ jsx24("div", { className: "coline-eyebrow", children: eyebrow }),
+        /* @__PURE__ */ jsx24("h1", { children: title }),
+        description && /* @__PURE__ */ jsx24("p", { className: "coline-page-description", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx24("div", { className: "coline-page-actions", children: actions })
+    ] }),
+    children
+  ] });
+}
+function PageToolbar({
+  children,
+  label = "View controls",
+  className
+}) {
+  return /* @__PURE__ */ jsx24("div", { className: cn("coline-toolbar", className), role: "group", "aria-label": label, children });
+}
+function EmptyState({
+  title,
+  description,
+  action,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs7("section", { className: "coline-empty", children: [
+    icon && /* @__PURE__ */ jsx24("div", { className: "coline-empty-icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx24("h2", { children: title }),
+    description && /* @__PURE__ */ jsx24("p", { children: description }),
+    action && /* @__PURE__ */ jsx24("div", { children: action })
+  ] });
+}
+function AppErrorState({ message, onRetry }) {
+  return /* @__PURE__ */ jsxs7("section", { className: "coline-error", role: "alert", children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx24("h2", { children: "Something went wrong" }),
+      /* @__PURE__ */ jsx24("p", { children: message })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx24(Button, { variant: "outline", onClick: onRetry, children: "Try again" })
+  ] });
+}
+function AppLoadingState({
+  label = "Loading",
+  rows = 5
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "coline-loading", role: "status", "aria-label": label, children: [
+    Array.from({ length: Math.max(1, Math.min(rows, 12)) }, (_, i) => /* @__PURE__ */ jsx24("div", { style: { width: `${92 - i % 3 * 14}%` } }, i)),
+    /* @__PURE__ */ jsx24("span", { className: "coline-sr-only", children: label })
+  ] });
+}
+function StatusBadge({
+  children,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsxs7("span", { className: "coline-status", "data-tone": tone, children: [
+    /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }),
+    children
+  ] });
+}
+function SplitView({
+  list,
+  detail,
+  label = "Details"
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "coline-split", "data-open": Boolean(detail), children: [
+    /* @__PURE__ */ jsx24("section", { className: "coline-split-list", children: list }),
+    detail && /* @__PURE__ */ jsx24("aside", { className: "coline-split-detail", "aria-label": label, children: detail })
+  ] });
+}
+function DetailPanel({
+  title,
+  subtitle,
+  onClose,
+  children,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs7("section", { className: "coline-detail", children: [
+    /* @__PURE__ */ jsxs7("header", { children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        subtitle && /* @__PURE__ */ jsx24("div", { className: "coline-eyebrow", children: subtitle }),
+        /* @__PURE__ */ jsx24("h2", { children: title })
+      ] }),
+      onClose && /* @__PURE__ */ jsx24(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close details", children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "coline-detail-body", children }),
+    actions && /* @__PURE__ */ jsx24("footer", { children: actions })
+  ] });
+}
+function RecordTable({
+  records,
+  columns,
+  rowKey,
+  onOpen,
+  label = "Records",
+  empty
+}) {
+  if (!records.length)
+    return /* @__PURE__ */ jsx24(Fragment2, { children: empty ?? /* @__PURE__ */ jsx24(EmptyState, { title: "No results", description: "Try changing your filters." }) });
+  return /* @__PURE__ */ jsx24("div", { className: "coline-table-scroll", children: /* @__PURE__ */ jsxs7("table", { className: "coline-record-table", "aria-label": label, children: [
+    /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsx24("tr", { children: columns.map((column) => /* @__PURE__ */ jsx24(
+      "th",
+      {
+        scope: "col",
+        "data-secondary": column.secondary || void 0,
+        "data-align": column.align,
+        children: column.label
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsx24("tbody", { children: records.map((record) => /* @__PURE__ */ jsx24("tr", { children: columns.map((column, i) => /* @__PURE__ */ jsx24(
+      "td",
+      {
+        "data-secondary": column.secondary || void 0,
+        "data-align": column.align,
+        children: i === 0 && onOpen ? /* @__PURE__ */ jsx24(
+          "button",
+          {
+            type: "button",
+            className: "coline-row-open",
+            onClick: () => onOpen(record),
+            children: column.render(record)
+          }
+        ) : column.render(record)
+      },
+      column.key
+    )) }, rowKey(record))) })
+  ] }) });
+}
+function Board({
+  children,
+  label = "Board"
+}) {
+  return /* @__PURE__ */ jsx24("div", { className: "coline-board", role: "region", "aria-label": label, tabIndex: 0, children });
+}
+function BoardColumn({
+  title,
+  count,
+  children,
+  action
+}) {
+  return /* @__PURE__ */ jsxs7("section", { className: "coline-board-column", children: [
+    /* @__PURE__ */ jsxs7("header", { children: [
+      /* @__PURE__ */ jsx24("h2", { children: title }),
+      count !== void 0 && /* @__PURE__ */ jsx24("span", { className: "coline-count", children: count }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "coline-board-items", children })
+  ] });
+}
+function BoardCard({
+  title,
+  children,
+  footer,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs7("article", { className: "coline-board-card", children: [
+    /* @__PURE__ */ jsx24("h3", { children: onOpen ? /* @__PURE__ */ jsx24("button", { type: "button", className: "coline-row-open", onClick: onOpen, children: title }) : title }),
+    children && /* @__PURE__ */ jsx24("div", { className: "coline-board-card-body", children }),
+    footer && /* @__PURE__ */ jsx24("footer", { children: footer })
+  ] });
+}
+function SettingsSection({
+  title,
+  description,
+  children
+}) {
+  const id = React23.useId();
+  return /* @__PURE__ */ jsxs7("section", { className: "coline-settings-section", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx24("h2", { id, children: title }),
+      description && /* @__PURE__ */ jsx24("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "coline-settings-fields", children })
+  ] });
+}
+
+// src/patterns/filter-menu.tsx
+import * as React24 from "react";
+import { IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+var FilterMenu = React24.forwardRef(function FilterMenu2({ value, options, onValueChange, className, disabled, "aria-label": label }, ref) {
+  return /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(Button, { ref, variant: "outline", disabled, "aria-label": label, className: cn("coline-filter-menu", className), children: [
+      /* @__PURE__ */ jsx25("span", { children: options.find((option) => option.value === value)?.label ?? label }),
+      /* @__PURE__ */ jsx25(IconChevronDown2, { "aria-hidden": "true" })
+    ] }) }),
+    /* @__PURE__ */ jsx25(DropdownMenuContent, { children: /* @__PURE__ */ jsx25(DropdownMenuRadioGroup, { "aria-label": label, value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsx25(DropdownMenuRadioItem, { value: option.value, disabled: option.disabled ?? false, children: option.label }, option.value)) }) })
+  ] });
+});
 export {
+  AppErrorState,
+  AppLoadingState,
+  AppPage,
   Badge,
+  Board,
+  BoardCard,
+  BoardColumn,
   Button,
   Card,
   CardAction,
@@ -1869,6 +2079,7 @@ export {
   CardTitle,
   Checkbox,
   ColineAppProvider,
+  DetailPanel,
   Dialog,
   DialogClose,
   DialogContent,
@@ -1894,6 +2105,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
   Field,
   FieldContent,
   FieldDescription,
@@ -1904,8 +2116,10 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  FilterMenu,
   Input,
   Label,
+  PageToolbar,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -1914,6 +2128,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  RecordTable,
   Select,
   SelectContent,
   SelectGroup,
@@ -1925,8 +2140,11 @@ export {
   SelectTrigger,
   SelectValue,
   Separator,
+  SettingsSection,
   Skeleton,
   Slider,
+  SplitView,
+  StatusBadge,
   Switch,
   TABS_LAYOUT_SPRING,
   Table,
@@ -1956,6 +2174,7 @@ export {
   useColine,
   useColineContext,
   useColineQuery,
-  useColorScheme
+  useColorScheme,
+  useLiveCollection
 };
 //# sourceMappingURL=index.js.map