@liberation-data/desk 0.2.0 → 0.3.0

package/README.md

@@ -144,6 +144,40 @@ item it goes in front of that one, and the fixed items are never split. A `movab
 the dock to a new place. `contextMenu` gives any item a right-click menu; an item that is `disabled` but has
 a menu stays reachable, so something that can no longer open can still be removed.
 
+## Inside a window: a pane
+
+```tsx
+import { Button, InfoTip, Pane, Toolbar } from '@liberation-data/desk/react'
+
+<Pane
+  label="Log"
+  header={
+    <Toolbar
+      label="Log controls"
+      trailing={<><Button onClick={pause}>Pause</Button><Button onClick={load}>Refresh</Button></>}
+    >
+      <TextField className="desk-grow" label="Filter" value={filter} onChange={…} />
+      <InfoTip label="About these logs">This process only, and nothing that survives a restart.</InfoTip>
+    </Toolbar>
+  }
+  footer={<p>{lines.length} lines</p>}
+>
+  {lines.map(line => <LogLine key={line.id} line={line} />)}
+</Pane>
+```
+
+A window is a fixed height, so something inside it has to give. A pane fills the window and scrolls only
+its middle: the toolbar and the footer stay where the pointer left them, and the window itself never
+scrolls. Name the pane and the scrolling part can be reached and scrolled from the keyboard. `bodyRef` and `onScroll`
+hand over the scrolling element itself, for a view that follows its own tail.
+
+`Toolbar` is one aligned row — every control on the same centre line whatever its own height, `trailing`
+pushed to the end, and `className="desk-grow"` on the one item that should take the spare room.
+
+`InfoTip` is an (i) holding what the view would explain if asked, so a window does not open with a
+paragraph everyone reads once. Explanation only: a warning belongs in front of people, not behind a
+disclosure.
+
 ## Controls
 
 ```tsx

package/dist/desk.css

@@ -2693,3 +2693,109 @@
 .desk-dock-item[data-desk-drop][data-over] {
   box-shadow: -6px 0 0 -2px var(--desk-accent);
 }
+
+/* ── The inside of a window: controls that stay, content that scrolls ── */
+
+.desk-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.desk-pane-header,
+.desk-pane-footer {
+  flex: none;
+}
+
+/* The only part that scrolls, so the toolbar never leaves with the content. */
+.desk-pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.desk-pane-body:focus-visible {
+  outline: 2px solid var(--desk-accent);
+  outline-offset: -2px;
+}
+
+/* A window whose whole content is a pane does not scroll itself: the pane's middle does. */
+.desk-body:has(> .desk-pane) {
+  overflow: hidden;
+}
+
+.desk-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--desk-space-2);
+  /* One centre line for everything in the row, whatever each control's own height is. */
+  min-height: calc(var(--desk-control-height) + var(--desk-space-2) * 2);
+  padding: var(--desk-space-2) var(--desk-space-3);
+  border-bottom: 1px solid var(--desk-rule);
+}
+
+.desk-toolbar > *,
+.desk-toolbar-trailing > * {
+  flex: none;
+}
+
+.desk-toolbar .desk-grow {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+.desk-toolbar-trailing {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--desk-space-2);
+}
+
+/* ── An (i): what a view would explain if asked ── */
+
+.desk-infotip {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--desk-rule);
+  border-radius: 50%;
+  background: none;
+  color: var(--desk-muted);
+  font-family: var(--desk-font);
+  font-size: 11px;
+  font-style: italic;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.desk-infotip:hover,
+.desk-infotip[data-open] {
+  border-color: var(--desk-accent);
+  color: var(--desk-accent);
+}
+
+.desk-infotip:focus-visible {
+  outline: 2px solid var(--desk-accent);
+  outline-offset: 2px;
+}
+
+.desk-infotip-body {
+  max-width: 34ch;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--desk-muted);
+}
+
+.desk-infotip-body > :first-child {
+  margin-top: 0;
+}
+
+.desk-infotip-body > :last-child {
+  margin-bottom: 0;
+}

package/dist/react/index.d.ts

@@ -14,6 +14,10 @@ export { lazyWindow } from './windowBoundary.js';
 export type { WindowFailed, WindowLoading } from './windowBoundary.js';
 export { Button, Checkbox, ChoiceGroup, RadioGroup, SegmentedControl, Slider, TextField, Toggle } from './controls.js';
 export type { ButtonIntent, ButtonProps, CheckboxProps, ChoiceGroupProps, ChoiceOption, RadioGroupProps, RadioOption, SegmentedControlProps, SegmentedOption, SliderProps, TextFieldProps, ToggleProps, } from './controls.js';
+export { Pane, Toolbar } from './pane.js';
+export type { PaneProps, ToolbarProps } from './pane.js';
+export { InfoTip } from './infoTip.js';
+export type { InfoTipProps } from './infoTip.js';
 export { Checklist, useTasks } from './tasks.js';
 export { localSetupStore, useSetupProgress } from './setupProgress.js';
 export type { SetupProgress, SetupProgressOptions, SetupRecord, SetupStore } from './setupProgress.js';

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}

package/dist/react/index.js

@@ -6,6 +6,8 @@ export { useCanPerform, useCommand, usePerform, useShortcuts } from './commands.
 export { Desktop } from './Desktop.js';
 export { lazyWindow } from './windowBoundary.js';
 export { Button, Checkbox, ChoiceGroup, RadioGroup, SegmentedControl, Slider, TextField, Toggle } from './controls.js';
+export { Pane, Toolbar } from './pane.js';
+export { InfoTip } from './infoTip.js';
 export { Checklist, useTasks } from './tasks.js';
 export { localSetupStore, useSetupProgress } from './setupProgress.js';
 export { PopUpButton } from './popup.js';

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE1E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAWhG,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAetH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEzE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAErG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC3G,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE1E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAWhG,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAetH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEzE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAErG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC3G,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}

package/dist/react/infoTip.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface InfoTipProps {
+    /** What it explains, e.g. "About these logs" — the button's name and the popover's. */
+    readonly label: string;
+    readonly children: ReactNode;
+    readonly placement?: 'below' | 'above';
+    readonly align?: 'start' | 'end';
+    readonly className?: string;
+}
+export declare function InfoTip({ label, children, placement, align, className }: InfoTipProps): import("react").JSX.Element;
+//# sourceMappingURL=infoTip.d.ts.map

package/dist/react/infoTip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoTip.d.ts","sourceRoot":"","sources":["../../src/react/infoTip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAYtC,MAAM,WAAW,YAAY;IAC3B,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAmB,EAAE,KAAe,EAAE,SAAS,EAAE,EAAE,YAAY,+BAyBzG"}

package/dist/react/infoTip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Popover } from './overlays.js';
+export function InfoTip({ label, children, placement = 'below', align = 'start', className }) {
+    const [open, setOpen] = useState(false);
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, label: label, placement: placement, align: align, trigger: props => (_jsx("button", { ...props, ref: props.ref, type: "button", className: ['desk-infotip', className].filter(Boolean).join(' '), "aria-label": label, "data-open": open || undefined, children: _jsx("span", { "aria-hidden": "true", children: "i" }) })), children: _jsx("div", { className: "desk-infotip-body", children: children }) }));
+}
+//# sourceMappingURL=infoTip.js.map

package/dist/react/infoTip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoTip.js","sourceRoot":"","sources":["../../src/react/infoTip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAoBvC,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAgB;IACxG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EACrB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAChB,oBACM,KAAK,EACT,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBACpD,KAAK,eACN,IAAI,IAAI,SAAS,YAE5B,8BAAkB,MAAM,kBAAS,GAC1B,CACV,YAED,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,GAC3C,CACX,CAAA;AACH,CAAC"}

package/dist/react/pane.d.ts

@@ -0,0 +1,28 @@
+import type { Ref, UIEvent, ReactNode } from 'react';
+export interface ToolbarProps {
+    /** Controls, in reading order. Anything given `className="desk-grow"` takes the spare room. */
+    readonly children: ReactNode;
+    /** Pushed to the trailing end: what acts on everything here, or the state of it. */
+    readonly trailing?: ReactNode;
+    /** Names the row for assistive technology when it holds more than one thing: "Log controls". */
+    readonly label?: string;
+    readonly className?: string;
+}
+/** One aligned row of controls. Every item sits on the same centre line, whatever its height. */
+export declare function Toolbar({ children, trailing, label, className }: ToolbarProps): import("react").JSX.Element;
+export interface PaneProps {
+    /** Stays put at the top: a Toolbar, usually. */
+    readonly header?: ReactNode;
+    /** Stays put at the bottom: a count, a status line, the buttons of a form. */
+    readonly footer?: ReactNode;
+    /** Fills what is left and scrolls, on its own. */
+    readonly children: ReactNode;
+    /** The scrolling part is the thing being read, so it can be named and reached by the keyboard. */
+    readonly label?: string;
+    /** The scrolling element itself: for reading where it sits, or sending it to the bottom. */
+    readonly bodyRef?: Ref<HTMLDivElement>;
+    readonly onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    readonly className?: string;
+}
+export declare function Pane({ header, footer, children, label, bodyRef, onScroll, className }: PaneProps): import("react").JSX.Element;
+//# sourceMappingURL=pane.d.ts.map

package/dist/react/pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../src/react/pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWpD,MAAM,WAAW,YAAY;IAC3B,+FAA+F;IAC/F,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,oFAAoF;IACpF,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,gGAAgG;IAChG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,iGAAiG;AACjG,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,YAAY,+BAU7E;AAED,MAAM,WAAW,SAAS;IACxB,gDAAgD;IAChD,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,kGAAkG;IAClG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,4FAA4F;IAC5F,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAC5D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,+BAehG"}

package/dist/react/pane.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One aligned row of controls. Every item sits on the same centre line, whatever its height. */
+export function Toolbar({ children, trailing, label, className }) {
+    return (_jsxs("div", { ...(label ? { role: 'group', 'aria-label': label } : {}), className: ['desk-toolbar', className].filter(Boolean).join(' '), children: [children, trailing != null && _jsx("div", { className: "desk-toolbar-trailing", children: trailing })] }));
+}
+export function Pane({ header, footer, children, label, bodyRef, onScroll, className }) {
+    return (_jsxs("div", { className: ['desk-pane', className].filter(Boolean).join(' '), children: [header != null && _jsx("div", { className: "desk-pane-header", children: header }), _jsx("div", { ref: bodyRef, className: "desk-pane-body", onScroll: onScroll, ...(label ? { role: 'region', 'aria-label': label, tabIndex: 0 } : {}), children: children }), footer != null && _jsx("div", { className: "desk-pane-footer", children: footer })] }));
+}
+//# sourceMappingURL=pane.js.map

package/dist/react/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../src/react/pane.tsx"],"names":[],"mappings":";AAqBA,iGAAiG;AACjG,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAgB;IAC5E,OAAO,CACL,kBACM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzD,SAAS,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE/D,QAAQ,EACR,QAAQ,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAO,IACxE,CACP,CAAA;AACH,CAAC;AAiBD,MAAM,UAAU,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa;IAC/F,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAC/D,MAAM,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAO,EACnE,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,QAAQ,KACd,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEtE,QAAQ,GACL,EACL,MAAM,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAO,IAC/D,CACP,CAAA;AACH,CAAC"}

package/llms.txt

@@ -202,6 +202,18 @@ Every window has its own Suspense and error boundary: one window loading or thro
 the menu bar or the dock. A failure is logged with `console.error` and shows Reload, which remounts the
 window; `lazyWindow` retries its import on reload, unlike `React.lazy`, which caches a failed import.
 
+### Inside a window
+
+```tsx
+<Pane label?={string} header?={ReactNode} footer?={ReactNode} bodyRef?={Ref} onScroll?={fn}>{scrolling content}</Pane>
+<Toolbar label?={string} trailing?={ReactNode}>{controls}</Toolbar>   // className="desk-grow" takes spare room
+<InfoTip label={string} placement?={'below'|'above'} align?={'start'|'end'}>{explanation}</InfoTip>
+```
+
+A pane fills its window and scrolls only its middle, so the window never scrolls and the toolbar stays put.
+A named pane is a focusable region, so it scrolls from the keyboard. InfoTip is an (i) popover for
+explanation only — never a warning, which belongs in front of people.
+
 ### Dock
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liberation-data/desk",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A desktop for the web, for React: windows, a dock, menus and commands, controls, tours and setup assistants.",
   "license": "Apache-2.0",
   "author": "Jasper Blues",

package/src/desk.css

@@ -2693,3 +2693,109 @@
 .desk-dock-item[data-desk-drop][data-over] {
   box-shadow: -6px 0 0 -2px var(--desk-accent);
 }
+
+/* ── The inside of a window: controls that stay, content that scrolls ── */
+
+.desk-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.desk-pane-header,
+.desk-pane-footer {
+  flex: none;
+}
+
+/* The only part that scrolls, so the toolbar never leaves with the content. */
+.desk-pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.desk-pane-body:focus-visible {
+  outline: 2px solid var(--desk-accent);
+  outline-offset: -2px;
+}
+
+/* A window whose whole content is a pane does not scroll itself: the pane's middle does. */
+.desk-body:has(> .desk-pane) {
+  overflow: hidden;
+}
+
+.desk-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--desk-space-2);
+  /* One centre line for everything in the row, whatever each control's own height is. */
+  min-height: calc(var(--desk-control-height) + var(--desk-space-2) * 2);
+  padding: var(--desk-space-2) var(--desk-space-3);
+  border-bottom: 1px solid var(--desk-rule);
+}
+
+.desk-toolbar > *,
+.desk-toolbar-trailing > * {
+  flex: none;
+}
+
+.desk-toolbar .desk-grow {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+.desk-toolbar-trailing {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--desk-space-2);
+}
+
+/* ── An (i): what a view would explain if asked ── */
+
+.desk-infotip {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--desk-rule);
+  border-radius: 50%;
+  background: none;
+  color: var(--desk-muted);
+  font-family: var(--desk-font);
+  font-size: 11px;
+  font-style: italic;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.desk-infotip:hover,
+.desk-infotip[data-open] {
+  border-color: var(--desk-accent);
+  color: var(--desk-accent);
+}
+
+.desk-infotip:focus-visible {
+  outline: 2px solid var(--desk-accent);
+  outline-offset: 2px;
+}
+
+.desk-infotip-body {
+  max-width: 34ch;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--desk-muted);
+}
+
+.desk-infotip-body > :first-child {
+  margin-top: 0;
+}
+
+.desk-infotip-body > :last-child {
+  margin-bottom: 0;
+}

package/src/react/index.ts

@@ -36,6 +36,10 @@ export type {
   TextFieldProps,
   ToggleProps,
 } from './controls.js'
+export { Pane, Toolbar } from './pane.js'
+export type { PaneProps, ToolbarProps } from './pane.js'
+export { InfoTip } from './infoTip.js'
+export type { InfoTipProps } from './infoTip.js'
 export { Checklist, useTasks } from './tasks.js'
 export { localSetupStore, useSetupProgress } from './setupProgress.js'
 export type { SetupProgress, SetupProgressOptions, SetupRecord, SetupStore } from './setupProgress.js'

package/src/react/infoTip.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { Popover } from './overlays.js'
+
+/*
+ * What a view would explain if asked. A window that opens with a paragraph makes everyone read it
+ * every time to reach the thing they came for; the same words behind an (i) are there for whoever
+ * has the question, once.
+ *
+ * Only for explanation. A warning, or anything that changes what someone is about to do, belongs
+ * in front of them — hiding that behind a disclosure is how it goes unread.
+ */
+
+export interface InfoTipProps {
+  /** What it explains, e.g. "About these logs" — the button's name and the popover's. */
+  readonly label: string
+  readonly children: ReactNode
+  readonly placement?: 'below' | 'above'
+  readonly align?: 'start' | 'end'
+  readonly className?: string
+}
+
+export function InfoTip({ label, children, placement = 'below', align = 'start', className }: InfoTipProps) {
+  const [open, setOpen] = useState(false)
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      label={label}
+      placement={placement}
+      align={align}
+      trigger={props => (
+        <button
+          {...props}
+          ref={props.ref}
+          type="button"
+          className={['desk-infotip', className].filter(Boolean).join(' ')}
+          aria-label={label}
+          data-open={open || undefined}
+        >
+          <span aria-hidden="true">i</span>
+        </button>
+      )}
+    >
+      <div className="desk-infotip-body">{children}</div>
+    </Popover>
+  )
+}

package/src/react/pane.tsx

@@ -0,0 +1,65 @@
+import type { Ref, UIEvent, ReactNode } from 'react'
+
+/*
+ * The inside of a window: a row of controls that stays put, and content that scrolls under it.
+ *
+ * A window is a fixed height, so something inside it has to give. When the content simply grows,
+ * the window grows with it and the whole thing scrolls — the toolbar leaves with it, and a log or a
+ * table has to be scrolled past to reach anything below. A pane fills the window instead and scrolls
+ * only its middle, so the controls stay where the pointer left them.
+ */
+
+export interface ToolbarProps {
+  /** Controls, in reading order. Anything given `className="desk-grow"` takes the spare room. */
+  readonly children: ReactNode
+  /** Pushed to the trailing end: what acts on everything here, or the state of it. */
+  readonly trailing?: ReactNode
+  /** Names the row for assistive technology when it holds more than one thing: "Log controls". */
+  readonly label?: string
+  readonly className?: string
+}
+
+/** One aligned row of controls. Every item sits on the same centre line, whatever its height. */
+export function Toolbar({ children, trailing, label, className }: ToolbarProps) {
+  return (
+    <div
+      {...(label ? { role: 'group', 'aria-label': label } : {})}
+      className={['desk-toolbar', className].filter(Boolean).join(' ')}
+    >
+      {children}
+      {trailing != null && <div className="desk-toolbar-trailing">{trailing}</div>}
+    </div>
+  )
+}
+
+export interface PaneProps {
+  /** Stays put at the top: a Toolbar, usually. */
+  readonly header?: ReactNode
+  /** Stays put at the bottom: a count, a status line, the buttons of a form. */
+  readonly footer?: ReactNode
+  /** Fills what is left and scrolls, on its own. */
+  readonly children: ReactNode
+  /** The scrolling part is the thing being read, so it can be named and reached by the keyboard. */
+  readonly label?: string
+  /** The scrolling element itself: for reading where it sits, or sending it to the bottom. */
+  readonly bodyRef?: Ref<HTMLDivElement>
+  readonly onScroll?: (event: UIEvent<HTMLDivElement>) => void
+  readonly className?: string
+}
+
+export function Pane({ header, footer, children, label, bodyRef, onScroll, className }: PaneProps) {
+  return (
+    <div className={['desk-pane', className].filter(Boolean).join(' ')}>
+      {header != null && <div className="desk-pane-header">{header}</div>}
+      <div
+        ref={bodyRef}
+        className="desk-pane-body"
+        onScroll={onScroll}
+        {...(label ? { role: 'region', 'aria-label': label, tabIndex: 0 } : {})}
+      >
+        {children}
+      </div>
+      {footer != null && <div className="desk-pane-footer">{footer}</div>}
+    </div>
+  )
+}