feat: add compact workspace composition primitives

.changeset/tiny-workspaces-rest.md

@@ -0,0 +1,6 @@
+---
+"@karnstack/dowel": minor
+---
+
+Add compact PageHeader, SettingsSection, and SettingsRow composition
+primitives for application workspaces.

apps/docs/public/components/index.md

@@ -29,14 +29,16 @@
 - [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.
+- [Page Header](https://dowel.sh/components/page-header.md): A compact workspace heading with context, actions, and tabs.
 - [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.
+- [Separator](https://dowel.sh/components/separator.md): A quiet horizontal or vertical content divider.
+- [Settings](https://dowel.sh/components/settings.md): Divider-led sections and rows for compact preference screens.
 - [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.

apps/docs/public/components/page-header.md

@@ -0,0 +1,9 @@
+# Page Header
+
+> A compact workspace heading with context, actions, and tabs.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/page-header)
+- [Markdown documentation](https://dowel.sh/components/page-header.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/components/settings.md

@@ -0,0 +1,9 @@
+# Settings
+
+> Divider-led sections and rows for compact preference screens.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/settings)
+- [Markdown documentation](https://dowel.sh/components/settings.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.

apps/docs/public/llms-full.txt

@@ -343,6 +343,18 @@ Import public components and types from the package root. Import `@karnstack/dow
 
 ---
 
+## Page Header
+
+> A compact workspace heading with context, actions, and tabs.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/page-header)
+- [Markdown documentation](https://dowel.sh/components/page-header.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.
+
+---
+
 ## Pagination
 
 > Controlled page navigation with compact number elision.
@@ -415,6 +427,18 @@ Import public components and types from the package root. Import `@karnstack/dow
 
 ---
 
+## Select
+
+> A grouped single-choice popup with native form submission.
+
+- Package: `@karnstack/dowel`
+- [HTML documentation](https://dowel.sh/components/select)
+- [Markdown documentation](https://dowel.sh/components/select.md)
+
+Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.
+
+---
+
 ## Separator
 
 > A quiet horizontal or vertical content divider.
@@ -427,13 +451,13 @@ Import public components and types from the package root. Import `@karnstack/dow
 
 ---
 
-## Select
+## Settings
 
-> A grouped single-choice popup with native form submission.
+> Divider-led sections and rows for compact preference screens.
 
 - Package: `@karnstack/dowel`
-- [HTML documentation](https://dowel.sh/components/select)
-- [Markdown documentation](https://dowel.sh/components/select.md)
+- [HTML documentation](https://dowel.sh/components/settings)
+- [Markdown documentation](https://dowel.sh/components/settings.md)
 
 Import public components and types from the package root. Import `@karnstack/dowel/dowel.css` once at the application root.
 

apps/docs/public/llms.txt

@@ -33,14 +33,16 @@ Install `@karnstack/dowel`, import `@karnstack/dowel/dowel.css` once, and import
 - [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.
+- [Page Header](https://dowel.sh/components/page-header.md): A compact workspace heading with context, actions, and tabs.
 - [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.
+- [Separator](https://dowel.sh/components/separator.md): A quiet horizontal or vertical content divider.
+- [Settings](https://dowel.sh/components/settings.md): Divider-led sections and rows for compact preference screens.
 - [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.

apps/docs/src/components/component-gallery.tsx

@@ -31,6 +31,7 @@ import {
   Menu,
   NativeSelect,
   Pagination,
+  PageHeader,
   Popover,
   Progress,
   PropertyPicker,
@@ -39,6 +40,8 @@ import {
   SearchField,
   Separator,
   Select,
+  SettingsRow,
+  SettingsSection,
   Sidebar,
   Slider,
   Skeleton,
@@ -534,6 +537,30 @@ export function ComponentGallery() {
           <GalleryPagination />
         </GalleryItem>
 
+        <GalleryItem
+          title="Page Header"
+          to="/components/page-header"
+          layout="wide"
+        >
+          <PageHeader
+            headingLevel={3}
+            title="Project settings"
+            description="Manage defaults and access."
+            actions={<Button size="sm">Save</Button>}
+          />
+        </GalleryItem>
+
+        <GalleryItem title="Settings" to="/components/settings" layout="wide">
+          <SettingsSection headingLevel={3} title="Notifications">
+            <SettingsRow title="Issue activity">
+              <Switch aria-label="Issue activity preview" defaultChecked />
+            </SettingsRow>
+            <SettingsRow title="Weekly digest">
+              <Switch aria-label="Weekly digest preview" />
+            </SettingsRow>
+          </SettingsSection>
+        </GalleryItem>
+
         <GalleryItem title="Slider" to="/components/slider" layout="stack">
           <Slider.Root defaultValue={40}>
             <Slider.Label>Volume</Slider.Label>

apps/docs/src/lib/nav.ts

@@ -155,6 +155,11 @@ export const componentNav: NavItem[] = [
     to: "/components/native-select",
     summary: "A resilient native choice control with Dowel field styling.",
   },
+  {
+    title: "Page Header",
+    to: "/components/page-header",
+    summary: "A compact workspace heading with context, actions, and tabs.",
+  },
   {
     title: "Pagination",
     to: "/components/pagination",
@@ -186,15 +191,20 @@ export const componentNav: NavItem[] = [
     to: "/components/search-field",
     summary: "A search input with icon, clear action, and shortcut hint.",
   },
+  {
+    title: "Select",
+    to: "/components/select",
+    summary: "A grouped single-choice popup with native form submission.",
+  },
   {
     title: "Separator",
     to: "/components/separator",
     summary: "A quiet horizontal or vertical content divider.",
   },
   {
-    title: "Select",
-    to: "/components/select",
-    summary: "A grouped single-choice popup with native form submission.",
+    title: "Settings",
+    to: "/components/settings",
+    summary: "Divider-led sections and rows for compact preference screens.",
   },
   {
     title: "Sidebar",
@@ -293,6 +303,7 @@ export const componentSections: NavSection[] = [
     items: components(
       "/components/breadcrumbs",
       "/components/command-menu",
+      "/components/page-header",
       "/components/pagination",
       "/components/sidebar",
       "/components/tabs",
@@ -341,6 +352,7 @@ export const componentSections: NavSection[] = [
     items: components(
       "/components/collection-controls",
       "/components/composer",
+      "/components/settings",
     ),
   },
 ];