feat: add Linear-style collection views

.changeset/linear-collection-views.md

@@ -0,0 +1,6 @@
+---
+"@karnstack/dowel": minor
+---
+
+Add collection view controls, advanced DataTable state and interactions, a
+TanStack Form adapter, and a darker dark-mode badge surface.

.gitignore

@@ -6,6 +6,7 @@ dist/
 # TanStack Start's scratch directory: the SSR bundle it builds only to render
 # the prerendered HTML, plus the route generator's temp files.
 .tanstack/
+.wrangler/
 test-results/
 playwright-report/
 blob-report/

apps/docs/package.json

@@ -4,7 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "agent-docs": "node scripts/generate-agent-docs.mjs",
+    "predev": "pnpm agent-docs",
     "dev": "vite dev",
+    "prebuild": "pnpm agent-docs",
     "build": "vite build",
     "typecheck": "tsc --noEmit",
     "test": "echo \"browser accessibility tests run with pnpm test:a11y\" && exit 0",

apps/docs/public/components/accordion.md

@@ -0,0 +1,9 @@
+# Accordion
+
+> A keyboard-accessible group of animated disclosure panels.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/accordion)
+- [Markdown documentation](https://dowel.sh/components/accordion.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/alert-dialog.md

@@ -0,0 +1,9 @@
+# Alert Dialog
+
+> A focused confirmation modal for consequential actions.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/alert-dialog)
+- [Markdown documentation](https://dowel.sh/components/alert-dialog.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/avatar.md

@@ -0,0 +1,9 @@
+# Avatar
+
+> An image or initials fallback with shape, size, and presence.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/avatar)
+- [Markdown documentation](https://dowel.sh/components/avatar.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/badge.md

@@ -0,0 +1,9 @@
+# Badge
+
+> A compact status or metadata pill in five tones.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/badge)
+- [Markdown documentation](https://dowel.sh/components/badge.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/breadcrumbs.md

@@ -0,0 +1,9 @@
+# Breadcrumbs
+
+> A compact location trail with automatic middle-item elision.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/breadcrumbs)
+- [Markdown documentation](https://dowel.sh/components/breadcrumbs.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/button.md

@@ -0,0 +1,9 @@
+# Button
+
+> The default action control. Five hierarchy levels, two sizes.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/button)
+- [Markdown documentation](https://dowel.sh/components/button.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/calendar.md

@@ -0,0 +1,9 @@
+# Calendar & Date Picker
+
+> An internationalized month grid and segmented date field.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/calendar)
+- [Markdown documentation](https://dowel.sh/components/calendar.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/callout.md

@@ -0,0 +1,9 @@
+# Callout
+
+> Persistent contextual guidance with optional actions and tone.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/callout)
+- [Markdown documentation](https://dowel.sh/components/callout.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/checkbox.md

@@ -0,0 +1,9 @@
+# Checkbox
+
+> Checked, unchecked, and mixed selection with native form values.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/checkbox)
+- [Markdown documentation](https://dowel.sh/components/checkbox.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/collapsible.md

@@ -0,0 +1,9 @@
+# Collapsible
+
+> An animated disclosure for one optional content region.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/collapsible)
+- [Markdown documentation](https://dowel.sh/components/collapsible.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/collection-controls.md

@@ -0,0 +1,9 @@
+# Collection Controls
+
+> Filters, view options, row actions, and bulk selection controls.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/collection-controls)
+- [Markdown documentation](https://dowel.sh/components/collection-controls.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/combobox.md

@@ -0,0 +1,9 @@
+# Combobox
+
+> A filterable single-choice field for larger collections.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/combobox)
+- [Markdown documentation](https://dowel.sh/components/combobox.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/command-menu.md

@@ -0,0 +1,9 @@
+# Command Menu
+
+> A modal search surface for grouped application commands.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/command-menu)
+- [Markdown documentation](https://dowel.sh/components/command-menu.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/composer.md

@@ -0,0 +1,9 @@
+# Composer
+
+> A borderless creation shell with metadata and action regions.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/composer)
+- [Markdown documentation](https://dowel.sh/components/composer.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/context-menu.md

@@ -0,0 +1,9 @@
+# Context Menu
+
+> A pointer-positioned menu for actions on a target surface.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/context-menu)
+- [Markdown documentation](https://dowel.sh/components/context-menu.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/data-table.md

@@ -0,0 +1,9 @@
+# Data Table
+
+> A borderless, sortable, selectable, and resizable data table.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/data-table)
+- [Markdown documentation](https://dowel.sh/components/data-table.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/dialog.md

@@ -0,0 +1,9 @@
+# Dialog
+
+> A modal on the modal elevation tier, labelled by its title.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/dialog)
+- [Markdown documentation](https://dowel.sh/components/dialog.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/drawer.md

@@ -0,0 +1,9 @@
+# Drawer
+
+> A swipe-dismissable edge panel for navigation and detail.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/drawer)
+- [Markdown documentation](https://dowel.sh/components/drawer.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/empty-state.md

@@ -0,0 +1,9 @@
+# Empty State
+
+> Structured guidance and actions for a surface without content.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/empty-state)
+- [Markdown documentation](https://dowel.sh/components/empty-state.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/file-upload.md

@@ -0,0 +1,9 @@
+# File Upload
+
+> A native file picker and dropzone with built-in validation.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/file-upload)
+- [Markdown documentation](https://dowel.sh/components/file-upload.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/form.md

@@ -0,0 +1,9 @@
+# Form
+
+> TanStack Form with Dowel fields and actions pre-bound.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/form)
+- [Markdown documentation](https://dowel.sh/components/form.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/icon-button.md

@@ -0,0 +1,9 @@
+# Icon Button
+
+> A square control for a single icon, with a required label.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/icon-button)
+- [Markdown documentation](https://dowel.sh/components/icon-button.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/index.md

@@ -0,0 +1,50 @@
+# Dowel components
+
+> The complete Dowel component catalog.
+
+- [Accordion](https://dowel.sh/components/accordion.md): A keyboard-accessible group of animated disclosure panels.
+- [Alert Dialog](https://dowel.sh/components/alert-dialog.md): A focused confirmation modal for consequential actions.
+- [Avatar](https://dowel.sh/components/avatar.md): An image or initials fallback with shape, size, and presence.
+- [Badge](https://dowel.sh/components/badge.md): A compact status or metadata pill in five tones.
+- [Breadcrumbs](https://dowel.sh/components/breadcrumbs.md): A compact location trail with automatic middle-item elision.
+- [Button](https://dowel.sh/components/button.md): The default action control. Five hierarchy levels, two sizes.
+- [Calendar & Date Picker](https://dowel.sh/components/calendar.md): An internationalized month grid and segmented date field.
+- [Callout](https://dowel.sh/components/callout.md): Persistent contextual guidance with optional actions and tone.
+- [Checkbox](https://dowel.sh/components/checkbox.md): Checked, unchecked, and mixed selection with native form values.
+- [Collapsible](https://dowel.sh/components/collapsible.md): An animated disclosure for one optional content region.
+- [Combobox](https://dowel.sh/components/combobox.md): A filterable single-choice field for larger collections.
+- [Command Menu](https://dowel.sh/components/command-menu.md): A modal search surface for grouped application commands.
+- [Collection Controls](https://dowel.sh/components/collection-controls.md): Filters, view options, row actions, and bulk selection controls.
+- [Composer](https://dowel.sh/components/composer.md): A borderless creation shell with metadata and action regions.
+- [Context Menu](https://dowel.sh/components/context-menu.md): A pointer-positioned menu for actions on a target surface.
+- [Data Table](https://dowel.sh/components/data-table.md): A borderless, sortable, selectable, and resizable data table.
+- [Dialog](https://dowel.sh/components/dialog.md): A modal on the modal elevation tier, labelled by its title.
+- [Drawer](https://dowel.sh/components/drawer.md): A swipe-dismissable edge panel for navigation and detail.
+- [Empty State](https://dowel.sh/components/empty-state.md): Structured guidance and actions for a surface without content.
+- [File Upload](https://dowel.sh/components/file-upload.md): A native file picker and dropzone with built-in validation.
+- [Form](https://dowel.sh/components/form.md): TanStack Form with Dowel fields and actions pre-bound.
+- [Icon Button](https://dowel.sh/components/icon-button.md): A square control for a single icon, with a required label.
+- [Input](https://dowel.sh/components/input.md): Surface and borderless fields for settings and rich composers.
+- [Kbd](https://dowel.sh/components/kbd.md): A keyboard shortcut rendered one key per cap.
+- [List](https://dowel.sh/components/list.md): Semantic grouped rows with cells, density, and selection.
+- [Menu](https://dowel.sh/components/menu.md): A dropdown with keyboard navigation and typeahead.
+- [Native Select](https://dowel.sh/components/native-select.md): A resilient native choice control with Dowel field styling.
+- [Pagination](https://dowel.sh/components/pagination.md): Controlled page navigation with compact number elision.
+- [Popover](https://dowel.sh/components/popover.md): An anchored surface for interactive controls and rich details.
+- [Property Picker](https://dowel.sh/components/property-picker.md): Searchable grouped metadata selection with a compact pill trigger.
+- [Progress](https://dowel.sh/components/progress.md): Determinate and indeterminate progress for long tasks.
+- [Radio Group](https://dowel.sh/components/radio-group.md): A single-choice group with native forms and arrow-key selection.
+- [Search Field](https://dowel.sh/components/search-field.md): A search input with icon, clear action, and shortcut hint.
+- [Separator](https://dowel.sh/components/separator.md): A quiet horizontal or vertical content divider.
+- [Select](https://dowel.sh/components/select.md): A grouped single-choice popup with native form submission.
+- [Sidebar](https://dowel.sh/components/sidebar.md): A responsive application rail with pointer and keyboard resize.
+- [Slider](https://dowel.sh/components/slider.md): A pointer and keyboard control for a numeric range.
+- [Skeleton](https://dowel.sh/components/skeleton.md): Reduced-motion-aware placeholders for pending content.
+- [Spinner](https://dowel.sh/components/spinner.md): Accessible indeterminate progress in three compact sizes.
+- [Status](https://dowel.sh/components/status.md): A lightweight state icon and label in semantic tones.
+- [Switch](https://dowel.sh/components/switch.md): A compact immediate setting for binary on and off state.
+- [Tabs](https://dowel.sh/components/tabs.md): Compact pill and line view switching with arrow-key activation.
+- [Toast](https://dowel.sh/components/toast.md): A global notification queue with actions and promises.
+- [Toggle Group](https://dowel.sh/components/toggle-group.md): A connected set of independently pressed view controls.
+- [Tooltip](https://dowel.sh/components/tooltip.md): A hover and focus label on the popover elevation tier.
+- [Tree View](https://dowel.sh/components/tree-view.md): A nested hierarchy with selection and keyboard navigation.

apps/docs/public/components/input.md

@@ -0,0 +1,9 @@
+# Input
+
+> Surface and borderless fields for settings and rich composers.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/input)
+- [Markdown documentation](https://dowel.sh/components/input.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/kbd.md

@@ -0,0 +1,9 @@
+# Kbd
+
+> A keyboard shortcut rendered one key per cap.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/kbd)
+- [Markdown documentation](https://dowel.sh/components/kbd.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/list.md

@@ -0,0 +1,9 @@
+# List
+
+> Semantic grouped rows with cells, density, and selection.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/list)
+- [Markdown documentation](https://dowel.sh/components/list.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/menu.md

@@ -0,0 +1,9 @@
+# Menu
+
+> A dropdown with keyboard navigation and typeahead.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/menu)
+- [Markdown documentation](https://dowel.sh/components/menu.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/native-select.md

@@ -0,0 +1,9 @@
+# Native Select
+
+> A resilient native choice control with Dowel field styling.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/native-select)
+- [Markdown documentation](https://dowel.sh/components/native-select.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/pagination.md

@@ -0,0 +1,9 @@
+# Pagination
+
+> Controlled page navigation with compact number elision.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/pagination)
+- [Markdown documentation](https://dowel.sh/components/pagination.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/popover.md

@@ -0,0 +1,9 @@
+# Popover
+
+> An anchored surface for interactive controls and rich details.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/popover)
+- [Markdown documentation](https://dowel.sh/components/popover.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/progress.md

@@ -0,0 +1,9 @@
+# Progress
+
+> Determinate and indeterminate progress for long tasks.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/progress)
+- [Markdown documentation](https://dowel.sh/components/progress.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/property-picker.md

@@ -0,0 +1,9 @@
+# Property Picker
+
+> Searchable grouped metadata selection with a compact pill trigger.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/property-picker)
+- [Markdown documentation](https://dowel.sh/components/property-picker.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/radio-group.md

@@ -0,0 +1,9 @@
+# Radio Group
+
+> A single-choice group with native forms and arrow-key selection.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/radio-group)
+- [Markdown documentation](https://dowel.sh/components/radio-group.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.