@surflane/ui 0.2.0 → 0.3.0

package/dist/app-shell.d.ts

@@ -7,6 +7,7 @@ export declare const AppShell: {
     Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
     Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
     Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
@@ -17,7 +18,7 @@ export declare const AppShell: {
 export declare const AppShellRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     collapsed?: boolean;
     layout?: "header" | "workspace";
-} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
+} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
     icon: React.ReactNode;
     label: string;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/dist/app-shell.js

@@ -15,6 +15,13 @@ const Sidebar = React.forwardRef(function AppShellSidebar({ className, ...props
 const Content = React.forwardRef(function AppShellContent({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-content', className) }));
 });
+/**
+ * The page surface inside a workspace Content. It insets from the shell on every
+ * side but the sidebar's; without the sidebar, on narrow screens, it insets evenly.
+ */
+const Page = React.forwardRef(function AppShellPage({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-page', className) }));
+});
 const Footer = React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-footer', className) }));
 });
@@ -24,6 +31,15 @@ const Label = React.forwardRef(function AppShellLabel({ className, ...props }, r
 const Link = React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
     return (_jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: skin('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }));
 });
-export const AppShell = { Root, Header, Sidebar, Content, Footer, Label, Link };
+export const AppShell = {
+    Root,
+    Header,
+    Sidebar,
+    Content,
+    Page,
+    Footer,
+    Label,
+    Link,
+};
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, Content: AppShellContent, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;
+export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;

package/dist/data.d.ts

@@ -8,6 +8,41 @@ declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.De
 } & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label: string;
 } & React.RefAttributes<HTMLDivElement>>;
+export type TableDensity = 'default' | 'compact';
+declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableElement>, "ref"> & {
+    /** compact tightens rows for scanning many records with a pointer. */
+    density?: TableDensity;
+    /** Keeps the header visible while a bounded Container scrolls vertically. */
+    stickyHeader?: boolean;
+} & React.RefAttributes<HTMLTableElement>>;
+type CellLayout = {
+    align?: 'start' | 'center' | 'end';
+    /** Aligns to the end with tabular figures, so digits line up down the column. */
+    numeric?: boolean;
+};
+declare const TableHeaderCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+export type TableSort = 'ascending' | 'descending';
+/** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
+declare const TableSortHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>, "ref">, "scope" | "aria-sort" | "onClick"> & {
+    sort?: TableSort;
+    onSort: () => void;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
+/** One-line text that ends in an ellipsis. String content also becomes the title. */
+declare const TableTruncate: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/** A full-width body row for loading, empty, error and permission messages. It has no hover. */
+declare const TableMessage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    colSpan: number;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     selected?: boolean;
 } & React.RefAttributes<HTMLTableRowElement>>;
@@ -21,8 +56,13 @@ export declare const Table: {
     } & React.RefAttributes<HTMLDivElement>, "ref"> & {
         label: string;
     } & React.RefAttributes<HTMLDivElement>>;
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableElement>, "ref"> & {
+        /** compact tightens rows for scanning many records with a pointer. */
+        density?: TableDensity;
+        /** Keeps the header visible while a bounded Container scrolls vertically. */
+        stickyHeader?: boolean;
     } & React.RefAttributes<HTMLTableElement>>;
     Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -39,11 +79,22 @@ export declare const Table: {
     Row: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         selected?: boolean;
     } & React.RefAttributes<HTMLTableRowElement>>;
-    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+    SortHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>, "ref">, "scope" | "aria-sort" | "onClick"> & {
+        sort?: TableSort;
+        onSort: () => void;
+        disabled?: boolean;
     } & React.RefAttributes<HTMLTableCellElement>>;
-    Cell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
+    Cell: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLTableCellElement>, "ref">, "align"> & CellLayout & React.RefAttributes<HTMLTableCellElement>>;
+    Truncate: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Message: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        colSpan: number;
     } & React.RefAttributes<HTMLTableCellElement>>;
 };
 declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
@@ -68,7 +119,7 @@ export declare const List: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export { ListRoot, ListItem, TableContainer, TableRow };
+export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
@@ -78,9 +129,7 @@ export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<Reac
 } & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableElement>>, TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableCaptionElement>>, TableHead: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
@@ -88,8 +137,4 @@ export declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<React.
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableSectionElement>>, TableFoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableSectionElement>>, TableHeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableCellElement>>, TableCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/data.js

@@ -1,24 +1,66 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Button } from './button.js';
 import { part } from './parts.js';
 import { ScrollArea } from './scroll-area.js';
 const TableContainer = React.forwardRef(function TableContainer(props, ref) {
     return _jsx(ScrollArea, { ...props, ref: ref });
 });
+const RootPart = part('table', 'pui-table');
+const TableRoot = React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
+    return (_jsx(RootPart, { ...props, ref: ref, "data-density": density === 'compact' ? 'compact' : undefined, "data-sticky-header": stickyHeader || undefined }));
+});
+const layout = ({ align, numeric }) => ({
+    'data-align': numeric ? 'end' : align,
+    'data-numeric': numeric || undefined,
+});
+const HeaderCellPart = part('th', 'pui-table-cell pui-table-header');
+const CellPart = part('td', 'pui-table-cell');
+// align replaces the obsolete HTML align attribute of th and td.
+const TableHeaderCell = React.forwardRef(function TableHeaderCell({ align, numeric, ...props }, ref) {
+    return _jsx(HeaderCellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+const TableCell = React.forwardRef(function TableCell({ align, numeric, ...props }, ref) {
+    return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
+});
+function SortIcon({ sort }) {
+    return (_jsx("svg", { className: 'pui-table-sort-icon', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: _jsx("path", { d: sort === 'ascending'
+                ? 'M12 19V5m-6 6 6-6 6 6'
+                : sort === 'descending'
+                    ? 'M12 5v14m-6-6 6 6 6-6'
+                    : 'm8 9 4-4 4 4m-8 6 4 4 4-4' }) }));
+}
+/** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
+const TableSortHeader = React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
+    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: ['pui-table-sort-header', className].filter(Boolean).join(' '), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
+});
+/** One-line text that ends in an ellipsis. String content also becomes the title. */
+const TableTruncate = React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: ['pui-table-truncate', className].filter(Boolean).join(' '), children: children }));
+});
+/** A full-width body row for loading, empty, error and permission messages. It has no hover. */
+const TableMessage = React.forwardRef(function TableMessage({ className, ...props }, ref) {
+    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: ['pui-table-cell pui-table-message', className]
+                .filter(Boolean)
+                .join(' ') }) }));
+});
 const TableRow = React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
     return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
 });
 export const Table = {
     Container: TableContainer,
-    Root: part('table', 'pui-table'),
+    Root: TableRoot,
     Caption: part('caption', 'pui-table-caption'),
     Head: part('thead', 'pui-table-head'),
     Body: part('tbody', 'pui-table-body'),
     Foot: part('tfoot', 'pui-table-foot'),
     Row: TableRow,
-    HeaderCell: part('th', 'pui-table-cell pui-table-header'),
-    Cell: part('td', 'pui-table-cell'),
+    HeaderCell: TableHeaderCell,
+    SortHeader: TableSortHeader,
+    Cell: TableCell,
+    Truncate: TableTruncate,
+    Message: TableMessage,
 };
 const ListRoot = React.forwardRef(function ListRoot({ className, ...props }, ref) {
     return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
@@ -35,6 +77,6 @@ export const List = {
     Actions: part('div', 'pui-list-actions'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export { ListRoot, ListItem, TableContainer, TableRow };
+export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export const { Content: ListContent, Title: ListTitle, Description: ListDescription, Actions: ListActions, } = List;
-export const { Root: TableRoot, Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, HeaderCell: TableHeaderCell, Cell: TableCell, } = Table;
+export const { Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, } = Table;

package/dist/icon.d.ts

@@ -8,6 +8,7 @@ declare const shapes: {
     alert: React.JSX.Element;
     warning: React.JSX.Element;
     menu: React.JSX.Element;
+    more: React.JSX.Element;
     sun: React.JSX.Element;
     moon: React.JSX.Element;
     monitor: React.JSX.Element;

package/dist/icon.js

@@ -10,6 +10,7 @@ const shapes = {
     alert: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })),
     warning: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })),
     menu: _jsx("path", { d: 'M4 6h16M4 12h16M4 18h16' }),
+    more: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '5', cy: '12', r: '1' }), _jsx("circle", { cx: '12', cy: '12', r: '1' }), _jsx("circle", { cx: '19', cy: '12', r: '1' })] })),
     sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '4' }), _jsx("path", { d: 'M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5' })] })),
     moon: _jsx("path", { d: 'M20.5 13.2A8.5 8.5 0 0 1 10.8 3.5 8.5 8.5 0 1 0 20.5 13.2Z' }),
     monitor: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '13', rx: '2' }), _jsx("path", { d: 'M8 21h8m-4-4v4' })] })),

package/dist/index.d.ts

@@ -14,7 +14,8 @@ export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioG
 export { Tabs, Accordion, Collapsible, Avatar, Separator, Link, Breadcrumbs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './navigation.js';
 export { Badge, StatusBadge, type BadgeProps, type StatusTone, } from './status.js';
 export { Progress, Meter, Spinner, Skeleton, type SpinnerProps, type SkeletonProps, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './feedback.js';
-export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableCell, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './data.js';
+export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, type TableDensity, type TableSort, } from './data.js';
+export { useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table-selection.js';
 export { InlineMessage, EmptyState, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from './messages.js';
 export { Card, CodeBlock, type CodeBlockProps, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './content.js';
 export { Pagination, type PaginationProps } from './pagination.js';
@@ -29,7 +30,7 @@ export { Toast, type ToastRootProps, type ToastViewportProps, ToastAction, Toast
 export { FileUpload, type FileUploadProps, type UploadTransport, type FileUploadLabels, type FileChangeDetails, type FileRejection, type UploadState, } from './file-upload.js';
 export { Icon, iconNames, type IconName, type IconProps } from './icon.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { Tree, type TreeNode, type TreeProps } from './tree.js';
 export { DatePicker, DateRangePicker, TimeField, DateLocaleProvider, type DatePickerProps, type DateRangePickerProps, type TimeFieldProps, type DateValue, type TimeValue, } from './date-picker.js';
 export { Chart, type ChartDatum, type ChartSeries, type ChartProps, } from './chart.js';

package/dist/index.js

@@ -15,7 +15,8 @@ export { Field, Fieldset, Form, Textarea, Checkbox, CheckboxGroup, Radio, RadioG
 export { Tabs, Accordion, Collapsible, Avatar, Separator, Link, Breadcrumbs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger, AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus, BreadcrumbsRoot, BreadcrumbsList, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsSeparator, BreadcrumbsCurrent, } from './navigation.js';
 export { Badge, StatusBadge, } from './status.js';
 export { Progress, Meter, Spinner, Skeleton, ProgressIndicator, ProgressLabel, ProgressRoot, ProgressTrack, ProgressValue, MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue, } from './feedback.js';
-export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableCell, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './data.js';
+export { Table, List, TableContainer, TableRoot, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, ListRoot, ListItem, ListContent, ListTitle, ListDescription, ListActions, } from './data.js';
+export { useTableSelection, } from './table-selection.js';
 export { InlineMessage, EmptyState, InlineMessageRoot, InlineMessageIcon, InlineMessageContent, InlineMessageTitle, InlineMessageDescription, InlineMessageActions, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from './messages.js';
 export { Card, CodeBlock, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, } from './content.js';
 export { Pagination } from './pagination.js';
@@ -30,7 +31,7 @@ export { Toast, ToastAction, ToastArrow, ToastClose, ToastContent, ToastDescript
 export { FileUpload, } from './file-upload.js';
 export { Icon, iconNames } from './icon.js';
 export { FilterBar, FilterBarRoot, FilterBarControls, FilterBarField, FilterBarActions, FilterBarSummary, } from './filter-bar.js';
-export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
+export { AppShell, AppShellRoot, AppShellHeader, AppShellSidebar, AppShellContent, AppShellPage, AppShellFooter, AppShellLabel, AppShellLink, } from './app-shell.js';
 export { Tree } from './tree.js';
 export { DatePicker, DateRangePicker, TimeField, DateLocaleProvider, } from './date-picker.js';
 export { Chart, } from './chart.js';

package/dist/table-selection.d.ts

@@ -0,0 +1,31 @@
+export type TableSelectionOptions<Row> = {
+    /** Rows on the current page, in display order. */
+    rows: readonly Row[];
+    getId: (row: Row) => string;
+    /** Rows that fail stay unselectable, such as read-only resources. */
+    canSelect?: (row: Row) => boolean;
+    selected?: readonly string[];
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (selected: string[]) => void;
+};
+export type TableSelectionCheckbox = {
+    checked: boolean;
+    indeterminate?: boolean;
+    disabled: boolean;
+    onCheckedChange: (checked: boolean) => void;
+};
+/**
+ * Row selection by stable ID that survives paging, sorting and filtering.
+ * The page checkbox covers only the selectable rows on the current page;
+ * hiddenCount reports selections the reader cannot see.
+ */
+export declare function useTableSelection<Row>({ rows, getId, canSelect, selected: controlled, defaultSelected, onSelectedChange, }: TableSelectionOptions<Row>): {
+    selected: readonly string[];
+    isSelected: (id: string) => boolean;
+    toggle: (id: string, checked: boolean) => void;
+    clear: () => void;
+    /** Selected rows that are not on the current page. */
+    hiddenCount: number;
+    pageCheckbox: TableSelectionCheckbox;
+    rowCheckbox: (row: Row) => TableSelectionCheckbox;
+};

package/dist/table-selection.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from 'react';
+/**
+ * Row selection by stable ID that survives paging, sorting and filtering.
+ * The page checkbox covers only the selectable rows on the current page;
+ * hiddenCount reports selections the reader cannot see.
+ */
+export function useTableSelection({ rows, getId, canSelect = () => true, selected: controlled, defaultSelected = [], onSelectedChange, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultSelected);
+    const selected = controlled ?? uncontrolled;
+    const update = (next) => {
+        if (controlled === undefined)
+            setUncontrolled(next);
+        onSelectedChange?.(next);
+    };
+    const chosen = new Set(selected);
+    const onPage = new Set(rows.map(getId));
+    const selectable = rows.filter(canSelect).map(getId);
+    const pageChosen = selectable.filter((id) => chosen.has(id)).length;
+    const toggle = (id, checked) => update(checked
+        ? chosen.has(id)
+            ? [...selected]
+            : [...selected, id]
+        : selected.filter((other) => other !== id));
+    const pageCheckbox = {
+        checked: selectable.length > 0 && pageChosen === selectable.length,
+        indeterminate: pageChosen > 0 && pageChosen < selectable.length,
+        disabled: selectable.length === 0,
+        onCheckedChange: (checked) => update(checked
+            ? [...new Set([...selected, ...selectable])]
+            : selected.filter((id) => !selectable.includes(id))),
+    };
+    return {
+        selected: selected,
+        isSelected: (id) => chosen.has(id),
+        toggle,
+        clear: () => update([]),
+        /** Selected rows that are not on the current page. */
+        hiddenCount: selected.filter((id) => !onPage.has(id)).length,
+        pageCheckbox,
+        rowCheckbox: (row) => {
+            const id = getId(row);
+            return {
+                checked: chosen.has(id),
+                disabled: !canSelect(row),
+                onCheckedChange: (checked) => toggle(id, checked),
+            };
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -101,7 +101,7 @@
     "shiki": "4.5.0"
   },
   "peerDependencies": {
-    "@surflane/design-tokens": "^0.2.0",
+    "@surflane/design-tokens": "^0.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/styles.css

@@ -300,6 +300,14 @@
 .pui-scrollbar:hover .pui-scroll-thumb {
   opacity: 0.8;
 }
+/* On touch-only screens a scrollbar is a position indicator, as native mobile
+ * scrollbars are: content scrolls by swiping, so the bar overlaying its edge
+ * never takes a tap meant for the link or control beneath it. */
+@media (hover: none) and (pointer: coarse) {
+  .pui-scrollbar {
+    pointer-events: none;
+  }
+}
 @media (forced-colors: active) {
   .pui-scrollbar {
     opacity: 1;
@@ -2711,6 +2719,31 @@
   background: transparent;
   border-radius: 0;
 }
+/* The page surface: concentric with the shell, inset on every side but the
+ * sidebar's. Stretch or size it from its container: a percentage height here
+ * would resolve against a scroll content that sizes from the page itself. */
+.pui-app-shell-page {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  margin: var(--app-shell-inset);
+  margin-inline-start: 0;
+  padding: var(--space-6);
+  background: var(--canvas);
+  border-radius: max(
+    0px,
+    calc(var(--app-shell-radius) - var(--app-shell-inset))
+  );
+}
+/* Without the sidebar the page insets evenly. Below a mobile header it starts flush. */
+@media (max-width: 760px) {
+  .pui-app-shell-page {
+    margin: var(--app-shell-inset);
+    padding: var(--space-4);
+  }
+  .pui-app-shell:has(> .pui-app-shell-header) .pui-app-shell-page {
+    margin-block-start: 0;
+  }
+}
 .pui-app-shell[data-layout='workspace'] .pui-app-shell-footer {
   padding: var(--space-4);
 }