@colineapp/ui 0.4.0 → 0.4.1

package/AGENTS.md

@@ -100,3 +100,15 @@ 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.
+
+## UI 0.4.1 defaults
+
+Use `Tabs` / `TabsList` / `TabsTrigger` / `TabsContent` for app views. The raised
+sliding selection and content transition are automatic. Do not recreate tab
+buttons or choose the opt-in line variant for standard Coline navigation.
+Use `FilterMenu` for value filters, and `DropdownMenu` for actions. Both use the
+canonical Coline menu surface and highlight. `pnpm check:parity` enforces the
+vendored dropdown implementation; `pnpm sync:platform` refreshes it.
+Keep animation CSS in the package, respect reduced motion, and verify controls
+in a portalled dialog as well as on the page. A form submit button needs explicit
+`type="submit"`. Do not restyle shared controls with app-specific CSS.

package/README.md

@@ -111,3 +111,40 @@ routing, drag-and-drop, or persistence. `RecordTable` provides a first-cell butt
 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.
+
+## Shared controls and motion (0.4.1)
+
+`Tabs` uses the same raised selection as Coline and Upstream. Selection springs
+and content transitions are automatic; no indicator or animation wrapper is
+required. Each tabs group owns its indicator so multiple groups never collide.
+`TabsIndicator` remains available for existing custom compositions.
+
+```tsx
+<Tabs defaultValue="inbox">
+  <TabsList aria-label="Views">
+    <TabsTrigger value="inbox">Inbox</TabsTrigger>
+    <TabsTrigger value="roadmap">Roadmap</TabsTrigger>
+  </TabsList>
+  <TabsContent value="inbox">{/* Inbox */}</TabsContent>
+  <TabsContent value="roadmap">{/* Roadmap */}</TabsContent>
+</Tabs>
+<FilterMenu
+  aria-label="Filter by status"
+  value={status}
+  onValueChange={setStatus}
+  options={[{ value: "all", label: "All statuses" }, { value: "planned", label: "Planned" }]}
+/>
+```
+
+`FilterMenu` composes the exact Coline `DropdownMenu` radio group, surface, and
+sliding highlight. Use `DropdownMenu` directly for action menus. `PageToolbar`
+is borderless. `RecordTable` uses separated, rounded selection/hover rows.
+Dialogs and menus include their animation CSS; the provider respects reduced
+motion, including portals. Buttons default to `type="button"`; use
+`type="submit"` for a form's submit action.
+
+Use component defaults rather than copying their CSS into the app. Custom CSS
+variables scoped to `AppPage` do not reach portalled dialogs/menus. Keep decorative
+app variables at `:root` when they must cross portals, and retain host theme tokens.
+App bundles include their dependencies: upgrade, rebuild and push to adopt a UI
+release. Updating npm does not rewrite already-published app bundles.

package/dist/index.d.ts

@@ -168,21 +168,21 @@ declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">
 declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
 declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
 
-/** Shared spring for tab pill + trigger layout — keep in sync wherever `layout` runs alongside `TabsIndicator`. */
+/** Same raised selection and spring as Coline and Upstream navigation. */
 declare const TABS_LAYOUT_SPRING: {
     type: "spring";
     stiffness: number;
     damping: number;
     mass: number;
 };
-declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
+declare function Tabs({ className, orientation, value, defaultValue, onValueChange, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
-/** Animated sliding pill indicator for TabsList (Apple-style). */
-declare function TabsIndicator({ className, layoutId, }: {
+declare function TabsTrigger({ className, children, value, asChild, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
+/** Optional customization; the raised indicator is included automatically. */
+declare function TabsIndicator({ className, layoutId }: {
     className?: string;
     layoutId?: string;
 }): React$1.JSX.Element;
@@ -296,4 +296,18 @@ declare function SettingsSection({ title, description, children, }: {
     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 };
+/** A value picker using the same dropdown and sliding highlight as Coline. */
+declare const FilterMenu: React$1.ForwardRefExoticComponent<{
+    value: string;
+    options: readonly {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    onValueChange: (value: string) => void;
+    "aria-label": string;
+    disabled?: boolean;
+    className?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
+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, FilterMenu, 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

@@ -8,6 +8,7 @@ function cn(...inputs) {
 }
 
 // src/provider.tsx
+import { MotionConfig } from "framer-motion";
 import * as React from "react";
 import {
   connectGuestBridge
@@ -67,7 +68,7 @@ function ColineAppProvider({ children }) {
   if (!runtime) {
     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);
@@ -165,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: {
@@ -198,6 +199,7 @@ var Button = React3.forwardRef(function Button2({
   variant = "default",
   size = "default",
   asChild = false,
+  type,
   ...props
 }, ref) {
   const Comp = asChild ? Slot2.Root : "button";
@@ -205,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,
@@ -339,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
@@ -369,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
@@ -390,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,
@@ -422,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
     }
   );
@@ -484,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";
@@ -1646,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"
-    }
-  }
-);
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(
-    TabsPrimitive.List,
-    {
-      "data-slot": "tabs-list",
-      "data-variant": variant,
-      className: cn(tabsListVariants({ variant }), className),
-      ...props
+      className: cn("coline-tabs", className)
     }
-  );
+  ) });
 }
-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
@@ -1898,7 +1862,7 @@ function useLiveCollection(name, query, options) {
 
 // src/patterns/workspace.tsx
 import * as React23 from "react";
-import { Fragment, jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 function AppPage({
   title,
   description,
@@ -1908,9 +1872,9 @@ function AppPage({
   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: [
+  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 })
@@ -1933,7 +1897,7 @@ function EmptyState({
   action,
   icon
 }) {
-  return /* @__PURE__ */ jsxs6("section", { className: "coline-empty", children: [
+  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 }),
@@ -1941,8 +1905,8 @@ function EmptyState({
   ] });
 }
 function AppErrorState({ message, onRetry }) {
-  return /* @__PURE__ */ jsxs6("section", { className: "coline-error", role: "alert", children: [
-    /* @__PURE__ */ jsxs6("div", { children: [
+  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 })
     ] }),
@@ -1953,7 +1917,7 @@ function AppLoadingState({
   label = "Loading",
   rows = 5
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "coline-loading", role: "status", "aria-label": label, children: [
+  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 })
   ] });
@@ -1962,7 +1926,7 @@ function StatusBadge({
   children,
   tone = "neutral"
 }) {
-  return /* @__PURE__ */ jsxs6("span", { className: "coline-status", "data-tone": tone, children: [
+  return /* @__PURE__ */ jsxs7("span", { className: "coline-status", "data-tone": tone, children: [
     /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }),
     children
   ] });
@@ -1972,7 +1936,7 @@ function SplitView({
   detail,
   label = "Details"
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "coline-split", "data-open": Boolean(detail), children: [
+  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 })
   ] });
@@ -1984,9 +1948,9 @@ function DetailPanel({
   children,
   actions
 }) {
-  return /* @__PURE__ */ jsxs6("section", { className: "coline-detail", children: [
-    /* @__PURE__ */ jsxs6("header", { children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
+  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 })
       ] }),
@@ -2005,8 +1969,8 @@ function RecordTable({
   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: [
+    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",
       {
@@ -2048,8 +2012,8 @@ function BoardColumn({
   children,
   action
 }) {
-  return /* @__PURE__ */ jsxs6("section", { className: "coline-board-column", children: [
-    /* @__PURE__ */ jsxs6("header", { children: [
+  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
@@ -2063,7 +2027,7 @@ function BoardCard({
   footer,
   onOpen
 }) {
-  return /* @__PURE__ */ jsxs6("article", { className: "coline-board-card", children: [
+  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 })
@@ -2075,14 +2039,28 @@ function SettingsSection({
   children
 }) {
   const id = React23.useId();
-  return /* @__PURE__ */ jsxs6("section", { className: "coline-settings-section", "aria-labelledby": id, children: [
-    /* @__PURE__ */ jsxs6("div", { children: [
+  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,
@@ -2138,6 +2116,7 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  FilterMenu,
   Input,
   Label,
   PageToolbar,