@colineapp/ui 0.3.1 → 0.4.0

package/AGENTS.md

@@ -58,10 +58,9 @@ as `Button`, `Card`, `Input`, `Textarea`, `Badge`, `Dialog`, `Select`,
 `Checkbox`, `Switch`, `Tabs`, `Table`, `Skeleton`, and `Tooltip`. Check the
 component source and declaration output before documenting a new prop.
 
-The client bundle is built by Coline. The app submits `main.tsx` and its
-source files; it does not submit `node_modules` or install packages in the
-sandbox. Keep client imports limited to the scaffold dependencies and app
-source.
+The CLI bundles `main.tsx`, installed client dependencies, and imported CSS.
+Coline rebuilds the uploaded artifact; the sandbox does not install packages.
+Browser-compatible npm dependencies can be added to the app package.
 
 ## Verification and release
 
@@ -71,3 +70,33 @@ source.
 - Update README examples and the scaffold skill when an app-facing contract
   changes. The generated app must be able to use the documented API after a
   clean `npm install`.
+
+## SDK 0.4 / CLI 2.4 workflow
+
+Run `coline-app check` before pushing: it checks types, the manifest, hosted logic,
+and the React bundle without uploading. `dev --internal` updates one development
+version; install it in the workspace and reload after changes. The CLI bundles
+from the app's installed dependencies and preserves imported CSS and inline assets.
+CLI 2.5 compiles app-specific Tailwind v4 and ordinary CSS automatically.
+Import UI styles, then app.css; use complete class names. Local `preview` uses
+the public test workspace and sandbox bridge, requires no credentials, and can
+capture light/dark/mobile/error states with `--screenshots <directory>`.
+
+The starter includes a React home and editor, tree mobile fallback, and a tool.
+Use `coline.tools.invoke` or `actions.invokeTool` to run the same declared tool
+from UI that Kairo runs. Save with `expectedVersion` to detect concurrent edits.
+Homes/editors can write within grants; previews and server render handlers cannot.
+`createTestWorkspace(app).client()` tests the interactive contract and
+`grantedPermissions` simulates revoked consent.
+
+New `tasks`, `calendar`, `messages`, and `references` capabilities require their
+explicit manifest permissions and retain the invoking user's workspace access.
+Use `files.list({ scope: "workspace" })` for shared files; document writes stay
+with the owning app. Collections are install-private. Code integration and a
+native mobile React runtime are separate work.
+
+`src/live-collection.ts` wraps the SDK's canonical live-record implementation.
+Keep state/conflict/sync logic in the SDK; React owns only subscriptions and
+lifecycle. Inline serializable query objects must not restart the view on each
+render. React Strict Mode cleanup/start must remain supported. Never infer record
+permission from optimistic state or broadcast private fields to an install room.

package/README.md

@@ -64,3 +64,50 @@ Used inside a Coline App's react-tier surface (`{ tier: "react", entry:
 Full guides at [coline.app/developers/docs](https://coline.app/developers/docs).
 
 MIT © Coline
+
+## SDK 0.4 / CLI 2.5 workflow
+
+Run `coline-app check` before pushing: it checks types, the manifest, hosted logic,
+and the React bundle without uploading. `dev --internal` updates one development
+version; install it in the workspace and reload after changes. The CLI bundles
+from the app's installed dependencies and preserves imported CSS and inline assets.
+App-specific Tailwind v4 utilities compile automatically with CLI 2.5. Import
+`@colineapp/ui/styles.css` and then `./app.css`; use complete class names.
+
+The starter includes a React home and editor, tree mobile fallback, and a tool.
+Use `coline.tools.invoke` or `actions.invokeTool` to run the same declared tool
+from UI that Kairo runs. Save with `expectedVersion` to detect concurrent edits.
+Homes/editors can write within grants; previews and server render handlers cannot.
+`createTestWorkspace(app).client()` tests the interactive contract and
+`grantedPermissions` simulates revoked consent.
+
+New `tasks`, `calendar`, `messages`, and `references` capabilities require their
+explicit manifest permissions and retain the invoking user's workspace access.
+Use `files.list({ scope: "workspace" })` for shared files; document writes stay
+with the owning app. Collections are install-private. Code integration and a
+native mobile React runtime are separate work.
+
+### Live data
+
+`useLiveCollection<RecordType>("collection", { where, orderBy, limit })` returns
+`records`, `pending`, `status`, `error`, `nextCursor`, `insert`, `update`, `delete`,
+`setAccess`, and `refresh`. Inline query objects are supported. Mutations update
+local UI immediately and reject on conflicts or permission failures; catch their
+promises to present the error. The hook owns subscription cleanup and reconnect
+recovery. Use filtered/paged views (at most 200 records), not an entire workspace
+in one hook. Structured-record sync does not imply CRDT text editing or offline
+write persistence.
+
+## Screen patterns
+
+Use `AppPage` and `PageToolbar` for consistent hierarchy, `RecordTable` with
+`SplitView`/`DetailPanel` for queues, `Board`/`BoardColumn`/`BoardCard` for stages,
+and `SettingsSection` for configuration. `EmptyState`, `AppErrorState`,
+`AppLoadingState`, and `StatusBadge` cover common states. Their CSS ships in
+`@colineapp/ui/styles.css`; they require no app-side utility generation.
+
+Patterns compose around your domain and capabilities. They do not supply data,
+routing, drag-and-drop, or persistence. `RecordTable` provides a first-cell button
+when `onOpen` is set (don't nest a second control there); secondary columns hide
+at narrow widths. Split details stack on mobile; the app owns focus management.
+See the scaffold's `examples/` for complete interactive references.

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import { ClassValue } from 'clsx';
 import * as React$1 from 'react';
 import { SandboxContext } from '@colineapp/app-runtime';
-import { ColineCapabilities } from '@colineapp/sdk/v2';
+import * as _colineapp_sdk_v2 from '@colineapp/sdk/v2';
+import { ColineCapabilities, ColineRecordQuery, LiveCollectionOptions } from '@colineapp/sdk/v2';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { Checkbox as Checkbox$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Popover as Popover$1, Progress as Progress$1, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, Tooltip as Tooltip$1 } from 'radix-ui';
@@ -10,7 +11,7 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare function ColineAppProvider({ children }: {
     children: React$1.ReactNode;
-}): React$1.JSX.Element | null;
+}): React$1.JSX.Element;
 declare function useColine(): ColineCapabilities;
 declare function useColineContext(): SandboxContext;
 declare function useColorScheme(): "light" | "dark";
@@ -200,4 +201,99 @@ declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.R
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): React$1.JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): React$1.JSX.Element;
 
-export { Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColineAppProvider, type ColineQueryState, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Slider, Switch, TABS_LAYOUT_SPRING, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, toggleVariants, useColine, useColineContext, useColineQuery, useColorScheme };
+/** Inline query objects are safe: equivalent inputs retain the same live view. */
+declare function useLiveCollection<T extends Record<string, unknown>>(name: string, query?: ColineRecordQuery<T>, options?: LiveCollectionOptions): {
+    insert: (data: T, access?: _colineapp_sdk_v2.ColineRecordAccess) => Promise<_colineapp_sdk_v2.ColineRecordEnvelope<T> | null>;
+    update: (id: string, patch: Partial<T>) => Promise<_colineapp_sdk_v2.ColineRecordEnvelope<T> | null>;
+    delete: (id: string) => Promise<_colineapp_sdk_v2.ColineRecordEnvelope<T> | null>;
+    setAccess: (id: string, access: _colineapp_sdk_v2.ColineRecordAccess) => Promise<_colineapp_sdk_v2.ColineRecordEnvelope<T> | null>;
+    refresh: () => Promise<void>;
+    records: readonly _colineapp_sdk_v2.ColineRecordEnvelope<T>[];
+    nextCursor: string | null;
+    status: "loading" | "ready" | "syncing" | "error";
+    pending: number;
+    error: Error | null;
+};
+
+declare function AppPage({ title, description, eyebrow, actions, children, width, className, }: {
+    title: string;
+    description?: React$1.ReactNode;
+    eyebrow?: React$1.ReactNode;
+    actions?: React$1.ReactNode;
+    children: React$1.ReactNode;
+    width?: "wide" | "reading";
+    className?: string;
+}): React$1.JSX.Element;
+declare function PageToolbar({ children, label, className, }: {
+    children: React$1.ReactNode;
+    label?: string;
+    className?: string;
+}): React$1.JSX.Element;
+declare function EmptyState({ title, description, action, icon, }: {
+    title: string;
+    description?: React$1.ReactNode;
+    action?: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function AppErrorState({ message, onRetry }: {
+    message: string;
+    onRetry?: () => void;
+}): React$1.JSX.Element;
+declare function AppLoadingState({ label, rows, }: {
+    label?: string;
+    rows?: number;
+}): React$1.JSX.Element;
+declare function StatusBadge({ children, tone, }: {
+    children: React$1.ReactNode;
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+}): React$1.JSX.Element;
+declare function SplitView({ list, detail, label, }: {
+    list: React$1.ReactNode;
+    detail?: React$1.ReactNode;
+    label?: string;
+}): React$1.JSX.Element;
+declare function DetailPanel({ title, subtitle, onClose, children, actions, }: {
+    title: string;
+    subtitle?: React$1.ReactNode;
+    onClose?: () => void;
+    children: React$1.ReactNode;
+    actions?: React$1.ReactNode;
+}): React$1.JSX.Element;
+interface RecordColumn<T> {
+    key: string;
+    label: string;
+    render: (record: T) => React$1.ReactNode;
+    secondary?: boolean;
+    align?: "start" | "end";
+}
+declare function RecordTable<T>({ records, columns, rowKey, onOpen, label, empty, }: {
+    records: readonly T[];
+    columns: readonly RecordColumn<T>[];
+    rowKey: (record: T) => string;
+    onOpen?: (record: T) => void;
+    label?: string;
+    empty?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function Board({ children, label, }: {
+    children: React$1.ReactNode;
+    label?: string;
+}): React$1.JSX.Element;
+declare function BoardColumn({ title, count, children, action, }: {
+    title: string;
+    count?: number;
+    children: React$1.ReactNode;
+    action?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function BoardCard({ title, children, footer, onOpen, }: {
+    title: string;
+    children?: React$1.ReactNode;
+    footer?: React$1.ReactNode;
+    onOpen?: () => void;
+}): React$1.JSX.Element;
+declare function SettingsSection({ title, description, children, }: {
+    title: string;
+    description?: string;
+    children: React$1.ReactNode;
+}): React$1.JSX.Element;
+
+export { AppErrorState, AppLoadingState, AppPage, Badge, Board, BoardCard, BoardColumn, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColineAppProvider, type ColineQueryState, DetailPanel, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, Label, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type RecordColumn, RecordTable, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsSection, Skeleton, Slider, SplitView, StatusBadge, Switch, TABS_LAYOUT_SPRING, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, toggleVariants, useColine, useColineContext, useColineQuery, useColorScheme, useLiveCollection };

package/dist/index.js

@@ -24,18 +24,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 +47,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,7 +65,7 @@ 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 });
 }
@@ -1857,8 +1864,233 @@ 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, jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
+function AppPage({
+  title,
+  description,
+  eyebrow,
+  actions,
+  children,
+  width = "wide",
+  className
+}) {
+  return /* @__PURE__ */ jsxs6("main", { className: cn("coline-page", className), "data-width": width, children: [
+    /* @__PURE__ */ jsxs6("header", { className: "coline-page-header", children: [
+      /* @__PURE__ */ jsxs6("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__ */ jsxs6("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__ */ jsxs6("section", { className: "coline-error", role: "alert", children: [
+    /* @__PURE__ */ jsxs6("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__ */ jsxs6("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__ */ jsxs6("span", { className: "coline-status", "data-tone": tone, children: [
+    /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }),
+    children
+  ] });
+}
+function SplitView({
+  list,
+  detail,
+  label = "Details"
+}) {
+  return /* @__PURE__ */ jsxs6("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__ */ jsxs6("section", { className: "coline-detail", children: [
+    /* @__PURE__ */ jsxs6("header", { children: [
+      /* @__PURE__ */ jsxs6("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(Fragment, { children: empty ?? /* @__PURE__ */ jsx24(EmptyState, { title: "No results", description: "Try changing your filters." }) });
+  return /* @__PURE__ */ jsx24("div", { className: "coline-table-scroll", children: /* @__PURE__ */ jsxs6("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__ */ jsxs6("section", { className: "coline-board-column", children: [
+    /* @__PURE__ */ jsxs6("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__ */ jsxs6("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__ */ jsxs6("section", { className: "coline-settings-section", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx24("h2", { id, children: title }),
+      description && /* @__PURE__ */ jsx24("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "coline-settings-fields", children })
+  ] });
+}
 export {
+  AppErrorState,
+  AppLoadingState,
+  AppPage,
   Badge,
+  Board,
+  BoardCard,
+  BoardColumn,
   Button,
   Card,
   CardAction,
@@ -1869,6 +2101,7 @@ export {
   CardTitle,
   Checkbox,
   ColineAppProvider,
+  DetailPanel,
   Dialog,
   DialogClose,
   DialogContent,
@@ -1894,6 +2127,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EmptyState,
   Field,
   FieldContent,
   FieldDescription,
@@ -1906,6 +2140,7 @@ export {
   FieldTitle,
   Input,
   Label,
+  PageToolbar,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -1914,6 +2149,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  RecordTable,
   Select,
   SelectContent,
   SelectGroup,
@@ -1925,8 +2161,11 @@ export {
   SelectTrigger,
   SelectValue,
   Separator,
+  SettingsSection,
   Skeleton,
   Slider,
+  SplitView,
+  StatusBadge,
   Switch,
   TABS_LAYOUT_SPRING,
   Table,
@@ -1956,6 +2195,7 @@ export {
   useColine,
   useColineContext,
   useColineQuery,
-  useColorScheme
+  useColorScheme,
+  useLiveCollection
 };
 //# sourceMappingURL=index.js.map