@openwarelabs/blocks 0.9.0 → 0.10.1

package/README.md

@@ -2,6 +2,8 @@
 
 Whole page sections built from [Openware UI](https://github.com/openwarelabs/ui) (`@openwarelabs/ui`), as React components that take their content as props. Drop one in, pass your words, actions and screenshots, and it follows the theme, the brand colour and every screen width.
 
+See every block live, at every width, with its props: [openwarelabs.github.io/ui/#/blocks](https://openwarelabs.github.io/ui/#/blocks).
+
 ```sh
 npm install @openwarelabs/ui @openwarelabs/blocks
 ```
@@ -28,18 +30,42 @@ The page needs `data-theme` on `<html>` and `class="ow-app"` on `<body>`, as for
 
 ## Blocks
 
-| Component | What it is                                                     | Content                                                                                                |
-| --------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `Hero01`  | Centred, with a screenshot below that runs on into the page    | `title`, `description`, `primaryAction`, `secondaryAction`, `eyebrow`, `note`, `visual`                |
-| `Hero02`  | Split: words on the left, the product on the right             | the same, plus `points` (ticked reasons to believe)                                                    |
-| `Hero03`  | With an email field, for a waitlist or a trial                 | `submitLabel`, `onSubmit(email)`, `successTitle`, `successDescription`, `labels` for the field's words |
-| `Hero04`  | On Openware's dot grid, with room either side                  | `start`, `end`, `interactive`                                                                          |
-| `Hero05`  | With customers' logos below                                    | `logosTitle`, `logos: { name, logo }[]`                                                                |
-| `Hero06`  | Download buttons for a desktop app, the visitor's system first | `platforms: { id, name, requirement, href \| onDownload }[]`, `version`, `otherDownloads`              |
+All 95, by group and category. Each one's props, with their types and descriptions, are on its page in the docs and in the MCP server.
+
+### Marketing
+
+- **Headers**: `Header01` floating pill, `Header02` full-width bar, `Header03` centred logo, `Header04` with an announcement, `Header05` phone menu
+- **Heroes**: `Hero01` centred with a screenshot, `Hero02` split with an image, `Hero03` with an email field, `Hero04` on a dot grid, `Hero05` with logos below, `Hero06` download buttons
+- **Section headings**: `SectionHeading01` centred, `SectionHeading02` with a link, `SectionHeading03` split
+- **Features**: `Features01` three columns with icons, `Features02` alternating image and text, `Features03` bento grid, `Features04` tabs that change the screenshot, `Features05` checklist beside a screenshot
+- **Logo clouds**: `Logos01` single row, `Logos02` grid, `Logos03` scrolling
+- **Stats**: `Stats01` row of numbers, `Stats02` on cards, `Stats03` beside a heading
+- **Testimonials**: `Testimonial01` single quote, `Testimonial02` grid of quotes, `Testimonial03` with a company logo
+- **Pricing**: `Pricing01` three plans, `Pricing02` monthly or yearly, `Pricing03` comparison table, `Pricing04` one plan, `Pricing05` pay as you go
+- **FAQs**: `Faq01` accordion, `Faq02` two columns, `Faq03` with a contact card
+- **Calls to action**: `Cta01` banner, `Cta02` on the brand colour, `Cta03` split with an image
+- **Newsletter sign-up**: `Newsletter01` inline, `Newsletter02` card
+- **Blog and changelog**: `Blog01` post grid, `Blog02` featured post, `Blog03` changelog, `Blog04` article
+- **Team**: `Team01` avatar grid, `Team02` cards
+- **Contact**: `Contact01` form with details, `Contact02` support options
+- **Footers**: `Footer01` columns of links, `Footer02` simple, `Footer03` with a newsletter field, `Footer04` big brand mark
+
+### Application
 
-Actions are `{ label, href?, onClick?, startIcon?, endIcon? }`: with `href` they're links styled as buttons, so they work with any router. Every block also takes the attributes of its `<section>` (`className`, `id` and so on). The docs show each one live, with its props: `npm run dev` in the repository, then Blocks → Heroes.
+- **App shells**: `Shell01` sidebar, `Shell02` top bar, `Shell03` three panes, `Shell04` collapsible sidebar
+- **Page headings**: `PageHeading01` title and actions, `PageHeading02` with breadcrumbs and tabs, `PageHeading03` with search and filters
+- **Dashboards**: `Dashboard01` stats and a chart, `Dashboard02` activity, `Dashboard03` usage and billing
+- **Lists and tables**: `List01` table with a toolbar, `List02` bulk actions, `List03` stacked list, `List04` grid of cards
+- **Form layouts**: `Form01` single column, `Form02` sections with descriptions, `Form03` multi-step
+- **Settings**: `Settings01` settings dialog, `Settings02` settings page, `Settings03` API keys, `Settings04` members and roles, `Settings05` danger zone
+- **Sign in and sign up**: `SignIn01` sign-in card, `SignIn02` split with a picture, `SignIn03` magic link, `SignIn04` two-factor code, `SignIn05` reset password
+- **Onboarding**: `Onboarding01` checklist, `Onboarding02` choose how to start, `Onboarding03` welcome dialog
+- **Empty states**: `Empty01` first run, `Empty02` no results, `Empty03` couldn't load
+- **Error pages**: `ErrorPage01` not found, `ErrorPage02` something went wrong, `ErrorPage03` down for maintenance
+- **Notifications and activity**: `Notifications01` inbox popover, `Notifications02` activity feed, `Notifications03` notification settings
+- **Chat and agents**: `Chat01` chat thread, `Chat02` prompt box, `Chat03` agent run
 
-More blocks become components release by release; until then, the others in the docs are code to copy.
+Actions are `{ label, href?, onClick?, startIcon?, endIcon? }`: with `href` they're links styled as buttons, so they work with any router. Every block also takes the attributes of its root element (`className`, `id` and so on), and the words it shows itself (button labels, messages, aria labels) through an optional `labels` prop, with English defaults. Interactive blocks keep their own state and work with no callbacks; pass `onSubmit`, `onSelect` and the like to connect them, or `value` and `onChange` where a block can be controlled. Product pictures (`visual`, `cover`, a chart) are yours to pass in.
 
 ## With AI tools
 

package/dist/app-shells/Shell01/Shell01.d.cts

@@ -0,0 +1,6 @@
+import type { Shell01Props } from "./Shell01.types.cjs";
+/**
+ * An app's frame: navigation down the left on the canvas, the account at the bottom, and the page on a raised panel
+ * beside it. On phones the sidebar folds into a drawer behind a bar at the top.
+ */
+export declare function Shell01({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, account, accountMenu, commands, children, labels, className, ...props }: Shell01Props): import("react").JSX.Element;

package/dist/app-shells/Shell01/Shell01.d.ts

@@ -0,0 +1,6 @@
+import type { Shell01Props } from "./Shell01.types.js";
+/**
+ * An app's frame: navigation down the left on the canvas, the account at the bottom, and the page on a raised panel
+ * beside it. On phones the sidebar folds into a drawer behind a bar at the top.
+ */
+export declare function Shell01({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, account, accountMenu, commands, children, labels, className, ...props }: Shell01Props): import("react").JSX.Element;

package/dist/app-shells/Shell01/Shell01.types.d.cts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavGroup, AppWorkspace } from "../../shared/shared.types.cjs";
+export interface Shell01Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the phone bar's search button's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the sidebar for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The phone bar's menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+}
+export interface Shell01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the top of the sidebar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The places down the sidebar, in groups. On phones they move into a drawer behind a menu button. */
+    navigation: AppNavGroup[];
+    /** The current place's id, when you keep it yourself. */
+    current?: string;
+    /** The place that's current to start with. */
+    defaultCurrent?: string;
+    /** Called with a place's id when it's chosen, from the sidebar, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** The person signed in, at the bottom of the sidebar. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** The page, on a raised panel beside the sidebar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell01Labels;
+}

package/dist/app-shells/Shell01/Shell01.types.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavGroup, AppWorkspace } from "../../shared/shared.types.js";
+export interface Shell01Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the phone bar's search button's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the sidebar for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The phone bar's menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+}
+export interface Shell01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the top of the sidebar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The places down the sidebar, in groups. On phones they move into a drawer behind a menu button. */
+    navigation: AppNavGroup[];
+    /** The current place's id, when you keep it yourself. */
+    current?: string;
+    /** The place that's current to start with. */
+    defaultCurrent?: string;
+    /** Called with a place's id when it's chosen, from the sidebar, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** The person signed in, at the bottom of the sidebar. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** The page, on a raised panel beside the sidebar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell01Labels;
+}

package/dist/app-shells/Shell02/Shell02.d.cts

@@ -0,0 +1,7 @@
+import type { Shell02Props } from "./Shell02.types.cjs";
+/**
+ * An app's frame for a few sections: the workspace, the sections and the account across the top on the canvas, and
+ * the page on a raised panel under them. Under 1024px the search folds to its icon; on phones the sections and the
+ * account move into a drawer.
+ */
+export declare function Shell02({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, account, accountMenu, commands, children, labels, className, ...props }: Shell02Props): import("react").JSX.Element;

package/dist/app-shells/Shell02/Shell02.d.ts

@@ -0,0 +1,7 @@
+import type { Shell02Props } from "./Shell02.types.js";
+/**
+ * An app's frame for a few sections: the workspace, the sections and the account across the top on the canvas, and
+ * the page on a raised panel under them. Under 1024px the search folds to its icon; on phones the sections and the
+ * account move into a drawer.
+ */
+export declare function Shell02({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, account, accountMenu, commands, children, labels, className, ...props }: Shell02Props): import("react").JSX.Element;

package/dist/app-shells/Shell02/Shell02.types.d.cts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavItem, AppWorkspace } from "../../shared/shared.types.cjs";
+export interface Shell02Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the search icon's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the navigation for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The avatar button's name. @default "Account: Maya Chen" */
+    accountButton?(name: string): string;
+    /** The phone menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+}
+export interface Shell02Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the start of the bar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The app's few sections, across the bar. Their icons show in the phone drawer only. */
+    navigation: AppNavItem[];
+    /** The current section's id, when you keep it yourself. */
+    current?: string;
+    /** The section that's current to start with. @default the first */
+    defaultCurrent?: string;
+    /** Called with a section's id when it's chosen, from the bar, the drawer, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** The person signed in: an avatar at the end of the bar, and the foot of the phone drawer. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** The page, in a centred column on a raised panel under the bar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell02Labels;
+}

package/dist/app-shells/Shell02/Shell02.types.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavItem, AppWorkspace } from "../../shared/shared.types.js";
+export interface Shell02Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the search icon's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the navigation for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The avatar button's name. @default "Account: Maya Chen" */
+    accountButton?(name: string): string;
+    /** The phone menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+}
+export interface Shell02Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the start of the bar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The app's few sections, across the bar. Their icons show in the phone drawer only. */
+    navigation: AppNavItem[];
+    /** The current section's id, when you keep it yourself. */
+    current?: string;
+    /** The section that's current to start with. @default the first */
+    defaultCurrent?: string;
+    /** Called with a section's id when it's chosen, from the bar, the drawer, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** The person signed in: an avatar at the end of the bar, and the foot of the phone drawer. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** The page, in a centred column on a raised panel under the bar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell02Labels;
+}

package/dist/app-shells/Shell03/Shell03.d.cts

@@ -0,0 +1,6 @@
+import type { Shell03Props } from "./Shell03.types.cjs";
+/**
+ * Three panes: a list on the canvas, and the open item with an inspector beside it on a raised panel. Under 1024px
+ * the inspector takes the item's place when asked for; on phones one pane shows at a time, each with a way back.
+ */
+export declare function Shell03({ workspace, logo, workspaces, onNewWorkspace, listTitle, items, selected, defaultSelected, onSelect, newItem, account, accountMenu, children, inspectorTitle, inspector, defaultInspectorOpen, labels, className, ...props }: Shell03Props): import("react").JSX.Element;

package/dist/app-shells/Shell03/Shell03.d.ts

@@ -0,0 +1,6 @@
+import type { Shell03Props } from "./Shell03.types.js";
+/**
+ * Three panes: a list on the canvas, and the open item with an inspector beside it on a raised panel. Under 1024px
+ * the inspector takes the item's place when asked for; on phones one pane shows at a time, each with a way back.
+ */
+export declare function Shell03({ workspace, logo, workspaces, onNewWorkspace, listTitle, items, selected, defaultSelected, onSelect, newItem, account, accountMenu, children, inspectorTitle, inspector, defaultInspectorOpen, labels, className, ...props }: Shell03Props): import("react").JSX.Element;

package/dist/app-shells/Shell03/Shell03.types.d.cts

@@ -0,0 +1,73 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppMenuItem, AppWorkspace, BlockStatus } from "../../shared/shared.types.cjs";
+/** One thing in the list on the left. */
+export interface Shell03Item {
+    /** Unique in the list; what `selected` and `onSelect` use. */
+    id: string;
+    /** Its name. The list's filter matches it. */
+    label: string;
+    /** A small mark before the name: a coloured dot, a 15px icon. */
+    icon?: ReactNode;
+    /** A caption under the name: when it last changed. */
+    caption?: ReactNode;
+    /** Its state, as a badge at the item's end. */
+    status?: BlockStatus;
+}
+export interface Shell03Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The filter field's placeholder and name. @default "Filter" */
+    filter?: string;
+    /** What the list says when the filter matches nothing. @default "Nothing matches “…”." */
+    noMatch?(query: string): ReactNode;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The details button's name while the inspector shows. @default "Hide details" */
+    hideDetails?: string;
+    /** Its name while the inspector is hidden. @default "Show details" */
+    showDetails?: string;
+    /** The inspector's back button on tablets and phones. @default "Back to billing-api" */
+    backTo?(label: string): string;
+}
+export interface Shell03Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    /** The workspace's name, at the top of the list. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** What the list holds, as its heading, its crumb and its back button's words: "Projects". */
+    listTitle: string;
+    /** The things in the list, which a field above it filters. */
+    items: Shell03Item[];
+    /** The open item's id, when you keep it yourself. */
+    selected?: string;
+    /** The item open to start with. @default the first */
+    defaultSelected?: string;
+    /** Called with an item's id when it's opened. */
+    onSelect?(id: string): void;
+    /** An icon button beside the list's heading, with a tooltip: "New project". */
+    newItem?: {
+        label: string;
+        onClick?(): void;
+    };
+    /** The person signed in, at the bottom of the list. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** The open item's page, in the middle. Its h1 takes focus when a narrow screen swaps to it. */
+    children?: ReactNode;
+    /** The inspector's heading. @default "Details" */
+    inspectorTitle?: ReactNode;
+    /** What the inspector on the right shows about the open item. Under 1024px wide it takes the item's place. */
+    inspector?: ReactNode;
+    /** Whether the inspector shows to start with, on wide screens. @default true */
+    defaultInspectorOpen?: boolean;
+    /** Words that aren't content (names for screen readers, the filter), in English unless you pass your own. */
+    labels?: Shell03Labels;
+}
+export type Shell03View = "list" | "item" | "inspector";

package/dist/app-shells/Shell03/Shell03.types.d.ts

@@ -0,0 +1,73 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppMenuItem, AppWorkspace, BlockStatus } from "../../shared/shared.types.js";
+/** One thing in the list on the left. */
+export interface Shell03Item {
+    /** Unique in the list; what `selected` and `onSelect` use. */
+    id: string;
+    /** Its name. The list's filter matches it. */
+    label: string;
+    /** A small mark before the name: a coloured dot, a 15px icon. */
+    icon?: ReactNode;
+    /** A caption under the name: when it last changed. */
+    caption?: ReactNode;
+    /** Its state, as a badge at the item's end. */
+    status?: BlockStatus;
+}
+export interface Shell03Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The filter field's placeholder and name. @default "Filter" */
+    filter?: string;
+    /** What the list says when the filter matches nothing. @default "Nothing matches “…”." */
+    noMatch?(query: string): ReactNode;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The details button's name while the inspector shows. @default "Hide details" */
+    hideDetails?: string;
+    /** Its name while the inspector is hidden. @default "Show details" */
+    showDetails?: string;
+    /** The inspector's back button on tablets and phones. @default "Back to billing-api" */
+    backTo?(label: string): string;
+}
+export interface Shell03Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    /** The workspace's name, at the top of the list. */
+    workspace: string;
+    /** Its mark before the name, about 22px square. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** What the list holds, as its heading, its crumb and its back button's words: "Projects". */
+    listTitle: string;
+    /** The things in the list, which a field above it filters. */
+    items: Shell03Item[];
+    /** The open item's id, when you keep it yourself. */
+    selected?: string;
+    /** The item open to start with. @default the first */
+    defaultSelected?: string;
+    /** Called with an item's id when it's opened. */
+    onSelect?(id: string): void;
+    /** An icon button beside the list's heading, with a tooltip: "New project". */
+    newItem?: {
+        label: string;
+        onClick?(): void;
+    };
+    /** The person signed in, at the bottom of the list. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** The open item's page, in the middle. Its h1 takes focus when a narrow screen swaps to it. */
+    children?: ReactNode;
+    /** The inspector's heading. @default "Details" */
+    inspectorTitle?: ReactNode;
+    /** What the inspector on the right shows about the open item. Under 1024px wide it takes the item's place. */
+    inspector?: ReactNode;
+    /** Whether the inspector shows to start with, on wide screens. @default true */
+    defaultInspectorOpen?: boolean;
+    /** Words that aren't content (names for screen readers, the filter), in English unless you pass your own. */
+    labels?: Shell03Labels;
+}
+export type Shell03View = "list" | "item" | "inspector";

package/dist/app-shells/Shell04/Shell04.d.cts

@@ -0,0 +1,6 @@
+import type { Shell04Props } from "./Shell04.types.cjs";
+/**
+ * An app's frame with a sidebar that folds down to its icons, from a button in the page's toolbar: the labels fade
+ * and the edge closes over them, and each item is named in a tooltip. On phones the sidebar becomes a drawer.
+ */
+export declare function Shell04({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, defaultCollapsed, onCollapsedChange, account, accountMenu, commands, breadcrumbs, children, labels, className, ...props }: Shell04Props): import("react").JSX.Element;

package/dist/app-shells/Shell04/Shell04.d.ts

@@ -0,0 +1,6 @@
+import type { Shell04Props } from "./Shell04.types.js";
+/**
+ * An app's frame with a sidebar that folds down to its icons, from a button in the page's toolbar: the labels fade
+ * and the edge closes over them, and each item is named in a tooltip. On phones the sidebar becomes a drawer.
+ */
+export declare function Shell04({ workspace, logo, workspaces, onNewWorkspace, navigation, current, defaultCurrent, onNavigate, defaultCollapsed, onCollapsedChange, account, accountMenu, commands, breadcrumbs, children, labels, className, ...props }: Shell04Props): import("react").JSX.Element;

package/dist/app-shells/Shell04/Shell04.types.d.cts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavGroup, AppNavItem, AppWorkspace } from "../../shared/shared.types.cjs";
+/** A place in the sidebar, which can mark something new on its icon while the sidebar is folded. */
+export interface Shell04NavItem extends AppNavItem {
+    /** Puts a small brass dot on the icon while the sidebar is folded, where the count can't show. */
+    unread?: boolean;
+}
+/** A group of places in the sidebar. */
+export interface Shell04NavGroup extends Omit<AppNavGroup, "items"> {
+    /** Its places, in order. */
+    items: Shell04NavItem[];
+}
+export interface Shell04Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the phone bar's search button's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the sidebar for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The phone bar's menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+    /** The fold button's name while the sidebar is open. @default "Collapse sidebar" */
+    collapse?: string;
+    /** Its name while it's folded. @default "Expand sidebar" */
+    expand?: string;
+}
+export interface Shell04Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the top of the sidebar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square: it stays in view when the sidebar folds. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The places down the sidebar, in groups. Folded, only their icons show, each named in a tooltip. */
+    navigation: Shell04NavGroup[];
+    /** The current place's id, when you keep it yourself. */
+    current?: string;
+    /** The place that's current to start with. */
+    defaultCurrent?: string;
+    /** Called with a place's id when it's chosen, from the sidebar, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** Whether the sidebar starts folded to its icons. @default folded under 1024px wide, open above */
+    defaultCollapsed?: boolean;
+    /** Called when the sidebar folds or opens. */
+    onCollapsedChange?(collapsed: boolean): void;
+    /** The person signed in, at the bottom of the sidebar. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** Where the page sits, in the toolbar beside the fold button: the last is the page itself. */
+    breadcrumbs?: ReactNode[];
+    /** The page, on a raised panel beside the sidebar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell04Labels;
+}

package/dist/app-shells/Shell04/Shell04.types.d.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AppAccount, AppCommand, AppMenuItem, AppNavGroup, AppNavItem, AppWorkspace } from "../../shared/shared.types.js";
+/** A place in the sidebar, which can mark something new on its icon while the sidebar is folded. */
+export interface Shell04NavItem extends AppNavItem {
+    /** Puts a small brass dot on the icon while the sidebar is folded, where the count can't show. */
+    unread?: boolean;
+}
+/** A group of places in the sidebar. */
+export interface Shell04NavGroup extends Omit<AppNavGroup, "items"> {
+    /** Its places, in order. */
+    items: Shell04NavItem[];
+}
+export interface Shell04Labels {
+    /** The workspace menu's name and heading. @default "Workspaces" */
+    workspaces?: string;
+    /** The last item in the workspace menu. @default "New workspace" */
+    newWorkspace?: string;
+    /** The search button's words, and the phone bar's search button's name. @default "Search" */
+    search?: string;
+    /** The search box's placeholder. @default "Search…" */
+    searchPlaceholder?: string;
+    /** Names the sidebar for screen readers. @default "Main navigation" */
+    navigation?: string;
+    /** The account menu's name. @default "Account" */
+    account?: string;
+    /** The phone bar's menu button's name. @default "Open navigation" */
+    openNavigation?: string;
+    /** The phone drawer's title. @default "Menu" */
+    menu?: string;
+    /** The fold button's name while the sidebar is open. @default "Collapse sidebar" */
+    collapse?: string;
+    /** Its name while it's folded. @default "Expand sidebar" */
+    expand?: string;
+}
+export interface Shell04Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The workspace's name, at the top of the sidebar. */
+    workspace: string;
+    /** Its mark before the name, about 22px square: it stays in view when the sidebar folds. */
+    logo?: ReactNode;
+    /** The workspaces in its menu, the current one ticked. @default just this one */
+    workspaces?: AppWorkspace[];
+    /** Called by the workspace menu's last item, "New workspace". */
+    onNewWorkspace?(): void;
+    /** The places down the sidebar, in groups. Folded, only their icons show, each named in a tooltip. */
+    navigation: Shell04NavGroup[];
+    /** The current place's id, when you keep it yourself. */
+    current?: string;
+    /** The place that's current to start with. */
+    defaultCurrent?: string;
+    /** Called with a place's id when it's chosen, from the sidebar, a menu or the search. */
+    onNavigate?(id: string): void;
+    /** Whether the sidebar starts folded to its icons. @default folded under 1024px wide, open above */
+    defaultCollapsed?: boolean;
+    /** Called when the sidebar folds or opens. */
+    onCollapsedChange?(collapsed: boolean): void;
+    /** The person signed in, at the bottom of the sidebar. */
+    account: AppAccount;
+    /** The account menu: profile, settings, sign out. */
+    accountMenu?: AppMenuItem[];
+    /** What the search finds (⌘K). Without any, there's no search. */
+    commands?: AppCommand[];
+    /** Where the page sits, in the toolbar beside the fold button: the last is the page itself. */
+    breadcrumbs?: ReactNode[];
+    /** The page, on a raised panel beside the sidebar. */
+    children?: ReactNode;
+    /** Words that aren't content (menus' names, buttons for screen readers), in English unless you pass your own. */
+    labels?: Shell04Labels;
+}

package/dist/blog/Blog01/Blog01.d.cts

@@ -0,0 +1,3 @@
+import type { Blog01Props } from "./Blog01.types.cjs";
+/** A grid of post cards, each with a cover, its category and date, a title, an excerpt and the author, with a filter by category. */
+export declare function Blog01({ eyebrow, title, description, posts, categories, moreAction, labels, className, ...props }: Blog01Props): import("react").JSX.Element;

package/dist/blog/Blog01/Blog01.d.ts

@@ -0,0 +1,3 @@
+import type { Blog01Props } from "./Blog01.types.js";
+/** A grid of post cards, each with a cover, its category and date, a title, an excerpt and the author, with a filter by category. */
+export declare function Blog01({ eyebrow, title, description, posts, categories, moreAction, labels, className, ...props }: Blog01Props): import("react").JSX.Element;