@nanisoft/prism-ui 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -1
- package/dist/blocks/data-table-01/data-table.d.ts +10 -0
- package/dist/blocks/data-table-01/data-table.d.ts.map +1 -1
- package/dist/blocks/data-table-01/data-table.js +2 -1
- package/dist/blocks/page-header-01/page-header.d.ts +7 -0
- package/dist/blocks/page-header-01/page-header.d.ts.map +1 -1
- package/dist/blocks/page-header-01/page-header.js +9 -1
- package/dist/blocks/run-console-01/run-console.d.ts.map +1 -1
- package/dist/blocks/run-console-01/run-console.js +2 -1
- package/dist/blocks/site-footer/site-footer.d.ts +16 -0
- package/dist/blocks/site-footer/site-footer.d.ts.map +1 -1
- package/dist/blocks/site-footer/site-footer.js +17 -1
- package/dist/blocks/stack-grid-01/stack-grid.d.ts +13 -0
- package/dist/blocks/stack-grid-01/stack-grid.d.ts.map +1 -1
- package/dist/blocks/stack-grid-01/stack-grid.js +14 -1
- package/dist/components/ui/diagram.d.ts +38 -7
- package/dist/components/ui/diagram.d.ts.map +1 -1
- package/dist/components/ui/diagram.js +134 -52
- package/dist/components/ui/fact-list.d.ts +17 -0
- package/dist/components/ui/fact-list.d.ts.map +1 -1
- package/dist/components/ui/fact-list.js +18 -1
- package/dist/components/ui/prose.d.ts +11 -0
- package/dist/components/ui/prose.d.ts.map +1 -1
- package/dist/components/ui/prose.js +12 -1
- package/dist/components/ui/pulse-graph.d.ts +36 -4
- package/dist/components/ui/pulse-graph.d.ts.map +1 -1
- package/dist/components/ui/pulse-graph.js +174 -60
- package/dist/components/ui/section.d.ts +33 -31
- package/dist/components/ui/section.d.ts.map +1 -1
- package/dist/components/ui/section.js +33 -31
- package/dist/lib/figure.d.ts +149 -0
- package/dist/lib/figure.d.ts.map +1 -0
- package/dist/lib/figure.js +242 -0
- package/dist/live/run-stream-01/run-stream.d.ts.map +1 -1
- package/dist/live/run-stream-01/run-stream.js +2 -1
- package/dist/pages/blog-post-page/index.d.ts +36 -15
- package/dist/pages/blog-post-page/index.d.ts.map +1 -1
- package/dist/pages/blog-post-page/index.js +35 -10
- package/dist/pages/docs-shell/docs-shell.d.ts +120 -18
- package/dist/pages/docs-shell/docs-shell.d.ts.map +1 -1
- package/dist/pages/docs-shell/docs-shell.js +208 -24
- package/dist/pages/error-page/index.d.ts.map +1 -1
- package/dist/pages/error-page/index.js +7 -3
- package/dist/pages/not-found-page/index.d.ts.map +1 -1
- package/dist/pages/not-found-page/index.js +4 -3
- package/dist/styles.css +107 -12
- package/package.json +2 -2
|
@@ -73,6 +73,16 @@ export type DataTable01Props = {
|
|
|
73
73
|
* and this is a Block that a product puts inside a settings page or a drawer as
|
|
74
74
|
* readily as it puts at the top of a page, where a fixed level makes the table a
|
|
75
75
|
* sibling of the section it belongs to.
|
|
76
|
+
*
|
|
77
|
+
* It decides the size as well as the tag, because the Block asks
|
|
78
|
+
* `headingSizeClass` for it rather than naming a step. It wrote `text-lg` here,
|
|
79
|
+
* so a table composed as a page's `h2` and one composed as an `h3` drew their
|
|
80
|
+
* titles at the same size, which is the one-size defect inside a single Block:
|
|
81
|
+
* forwarding the level changed nothing a reader could see. The other two halves
|
|
82
|
+
* of the heading come with it, because the ladder states weight, tracking and
|
|
83
|
+
* balance as one package and `SectionHeading` carries all three at every rung: a
|
|
84
|
+
* title that moved from 18 pixels to 36 is worse unwrapped than the 18 pixel one
|
|
85
|
+
* it replaced.
|
|
76
86
|
*/
|
|
77
87
|
headingLevel?: HeadingLevel;
|
|
78
88
|
/** Adds the selection column and the selection summary. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table-01/data-table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBjE,OAAO,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table-01/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
|
|
|
8
8
|
import { Input } from '../../components/ui/input.js';
|
|
9
9
|
import { Pagination, PaginationContent, PaginationItem } from '../../components/ui/pagination.js';
|
|
10
10
|
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover.js';
|
|
11
|
+
import { headingSizeClass } from '../../components/ui/section.js';
|
|
11
12
|
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from '../../components/ui/table.js';
|
|
12
13
|
/** The page numbers to show, with `ellipsis` where a run is held back. */
|
|
13
14
|
function pageWindow(page, pageCount) {
|
|
@@ -106,7 +107,7 @@ export function DataTable01({ title, description, columns, rows, getRowId, capti
|
|
|
106
107
|
setHiddenColumns((previous) => visible ? previous.filter((item) => item !== id) : [...previous, id]);
|
|
107
108
|
}
|
|
108
109
|
const activeFilterCount = Object.values(activeFilters).filter(Boolean).length;
|
|
109
|
-
return (_jsxs("div", { className: "flex flex-col gap-4", children: [title || description ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title ? (_jsx(Heading, { id: headingId, className:
|
|
110
|
+
return (_jsxs("div", { className: "flex flex-col gap-4", children: [title || description ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title ? (_jsx(Heading, { id: headingId, className: `font-semibold tracking-tight text-balance ${headingSizeClass(headingLevel)}`, children: title })) : null, description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: description })) : null] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" }), _jsx(Input, { value: search, onChange: (event) => changeSearch(event.target.value), placeholder: labels.search, "aria-label": labels.search, className: "h-9 w-56 pl-8" })] }), filters?.length ? (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { children: [_jsx(ListFilter, { className: "size-4" }), labels.filters, activeFilterCount > 0 ? (_jsx("span", { className: "bg-primary text-primary-foreground rounded-full px-1.5 text-xs", children: activeFilterCount })) : null] }), _jsxs(PopoverContent, { align: "start", className: "flex w-64 flex-col gap-4", children: [filters.map((filter) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: filter.label }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: filter.options.map((option) => {
|
|
110
111
|
const active = activeFilters[filter.id] === option.value;
|
|
111
112
|
return (_jsx(Button, { type: "button", size: "sm", variant: active ? 'default' : 'outline', onClick: () => changeFilter(filter.id, active ? undefined : option.value), children: option.label }, option.value));
|
|
112
113
|
}) })] }, filter.id))), _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: activeFilterCount === 0, onClick: resetFilters, children: labels.reset })] })] })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [toolbarActions, _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { children: [labels.viewColumns, _jsx(ChevronDown, { className: "size-4" })] }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: labels.columns }), _jsx(DropdownMenuSeparator, {}), columns.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: !hiddenColumns.includes(column.id), closeOnClick: false, onCheckedChange: (checked) => toggleColumn(column.id, checked), children: column.label ?? column.id }, column.id)))] })] })] })] }), _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsxs(Table, { "aria-labelledby": caption === undefined && title ? headingId : undefined, children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable ? (_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allSelected, indeterminate: !allSelected && someSelected, onCheckedChange: toggleAll, "aria-label": labels.selectAll }) })) : null, visibleColumns.map((column) => (_jsx(TableHead, { className: column.className, children: column.header }, column.id))), hasRowActions ? (_jsx(TableHead, { className: "w-10", children: _jsx("span", { className: "sr-only", children: labels.rowActions }) })) : null] }) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => {
|
|
@@ -155,6 +155,13 @@ export type PageHeader01Props = {
|
|
|
155
155
|
* member and render each one as a `Button`, which is a focusable control announced
|
|
156
156
|
* as a button that activates to nothing, at the top of a screen. See
|
|
157
157
|
* `PageHeaderAction`.
|
|
158
|
+
*
|
|
159
|
+
* **The title's size is asked of the level rather than written here.** It used to
|
|
160
|
+
* pass `size="3xl"` to `Heading`, and `3xl` is a step of the scale rather than a
|
|
161
|
+
* rung of the ladder, so this band drew its title at one fixed size whether the
|
|
162
|
+
* caller composed it as the page's `h1` or as a section's `h2`, and at a size the
|
|
163
|
+
* ladder's ceiling had already left two steps behind. It now asks
|
|
164
|
+
* `headingSizeClass`, which is the same answer `SectionHeading` and `Cta01` ask.
|
|
158
165
|
*/
|
|
159
166
|
export declare function PageHeader01({ breadcrumbs, title, description, actions, headingLevel, }: PageHeader01Props): import("react").JSX.Element;
|
|
160
167
|
export default PageHeader01;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/blocks/page-header-01/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/blocks/page-header-01/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAahD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;IACvD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;;;;;OAOG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAA;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAA;IAC/B,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,cAAc,CAAA;CAC9B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,WAAW,EACX,OAAY,EACZ,YAAmB,GACpB,EAAE,iBAAiB,+BA6EnB;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { Fragment } from 'react';
|
|
|
3
3
|
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '../../components/ui/breadcrumb.js';
|
|
4
4
|
import { CtaLink } from '../../components/ui/cta-link.js';
|
|
5
5
|
import { Separator } from '../../components/ui/separator.js';
|
|
6
|
+
import { headingSizeClass } from '../../components/ui/section.js';
|
|
6
7
|
import { Heading, Text } from '../../components/ui/typography.js';
|
|
7
8
|
/**
|
|
8
9
|
* A page title band.
|
|
@@ -18,6 +19,13 @@ import { Heading, Text } from '../../components/ui/typography.js';
|
|
|
18
19
|
* member and render each one as a `Button`, which is a focusable control announced
|
|
19
20
|
* as a button that activates to nothing, at the top of a screen. See
|
|
20
21
|
* `PageHeaderAction`.
|
|
22
|
+
*
|
|
23
|
+
* **The title's size is asked of the level rather than written here.** It used to
|
|
24
|
+
* pass `size="3xl"` to `Heading`, and `3xl` is a step of the scale rather than a
|
|
25
|
+
* rung of the ladder, so this band drew its title at one fixed size whether the
|
|
26
|
+
* caller composed it as the page's `h1` or as a section's `h2`, and at a size the
|
|
27
|
+
* ladder's ceiling had already left two steps behind. It now asks
|
|
28
|
+
* `headingSizeClass`, which is the same answer `SectionHeading` and `Cta01` ask.
|
|
21
29
|
*/
|
|
22
30
|
export function PageHeader01({ breadcrumbs, title, description, actions = [], headingLevel = 'h2', }) {
|
|
23
31
|
const hasTrail = Boolean(breadcrumbs?.length);
|
|
@@ -38,6 +46,6 @@ export function PageHeader01({ breadcrumbs, title, description, actions = [], he
|
|
|
38
46
|
return _jsx(Fragment, { children: action.slot }, index);
|
|
39
47
|
}
|
|
40
48
|
return (_jsx(CtaLink, { href: action.href, newTab: action.newTab, variant: action.variant ?? (index === 0 ? 'default' : 'outline'), size: action.size, children: action.label }, index));
|
|
41
|
-
}) })) : null] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Heading, { as: headingLevel,
|
|
49
|
+
}) })) : null] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Heading, { as: headingLevel, className: headingSizeClass(headingLevel), children: title }), description ? (_jsx(Text, { size: "lg", tone: "muted", children: description })) : null] }), _jsx(Separator, {})] }));
|
|
42
50
|
}
|
|
43
51
|
export default PageHeader01;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-console.d.ts","sourceRoot":"","sources":["../../../src/blocks/run-console-01/run-console.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"run-console.d.ts","sourceRoot":"","sources":["../../../src/blocks/run-console-01/run-console.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AACjF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAG3E;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnD,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAA;IAClB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,yCAAyC;AACzC,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,IAAI,EAAE,gBAAgB,CAAA;IACtB,oDAAoD;IACpD,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE;QACP,2BAA2B;QAC3B,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,GAAG,EAAE,MAAM,CAAA;QACX,2EAA2E;QAC3E,UAAU,CAAC,EAAE,SAAS;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;SAAE,EAAE,CAAA;KAChG,CAAA;IACD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAiB,EACjB,YAAmB,EACnB,SAAS,GACV,EAAE,iBAAiB,+BAkGnB;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { LiveRegion } from '../../components/ui/live-region.js';
|
|
3
3
|
import { Meter } from '../../components/ui/meter.js';
|
|
4
|
+
import { headingSizeClass } from '../../components/ui/section.js';
|
|
4
5
|
import { Timeline } from '../../components/ui/timeline.js';
|
|
5
6
|
import { cn } from '../../lib/utils.js';
|
|
6
7
|
/**
|
|
@@ -44,6 +45,6 @@ export function RunConsole01({ title, copy, steps, budget, detail, streaming = f
|
|
|
44
45
|
// rendering cannot drift apart. Two copies of this markup would be two answers
|
|
45
46
|
// to what a run looks like, and the second one is the one that goes stale.
|
|
46
47
|
const body = waiting ? (_jsx("p", { "data-slot": "run-console-01-waiting", className: "text-muted-foreground text-sm", children: copy.waiting })) : (_jsx(Timeline, { entries: steps, label: copy.stepsLabel, empty: copy.waiting }));
|
|
47
|
-
return (_jsxs("div", { "data-slot": "run-console-01", className: cn('border-border bg-card flex flex-col gap-6 rounded-lg border p-5', className), children: [_jsxs("header", { "data-slot": "run-console-01-header", className: "flex flex-col gap-1", children: [_jsx(Heading, { className:
|
|
48
|
+
return (_jsxs("div", { "data-slot": "run-console-01", className: cn('border-border bg-card flex flex-col gap-6 rounded-lg border p-5', className), children: [_jsxs("header", { "data-slot": "run-console-01-header", className: "flex flex-col gap-1", children: [_jsx(Heading, { className: cn('text-foreground font-semibold tracking-tight text-balance', headingSizeClass(headingLevel)), children: title }), detail === undefined ? null : (_jsx("p", { className: "text-muted-foreground text-sm", children: detail }))] }), budget === undefined ? null : (_jsx("div", { "data-slot": "run-console-01-budget", children: _jsx(Meter, { value: budget.value, max: budget.max, label: copy.budgetLabel, valueText: copy.budgetValue(budget.value, budget.max), thresholds: budget.thresholds, children: _jsx("span", { children: copy.budgetValue(budget.value, budget.max) }) }) })), streaming ? (_jsx(LiveRegion, { busy: true, label: copy.stepsLabel, className: "min-w-0", children: body })) : (body)] }));
|
|
48
49
|
}
|
|
49
50
|
export default RunConsole01;
|
|
@@ -143,6 +143,22 @@ export type SiteFooterProps = {
|
|
|
143
143
|
* overrides it: Prism does not decide which destinations are external, so the
|
|
144
144
|
* per-link prop wins over the default rather than the other way round.
|
|
145
145
|
*
|
|
146
|
+
* **Every link this Block renders carries a 24 pixel target floor, and it is a
|
|
147
|
+
* floor on the box rather than on the type.** A link drawn as a bare inline anchor
|
|
148
|
+
* has no box at all: what a pointer aims at is the font's content area, which for
|
|
149
|
+
* the shipped face at `text-sm` is 16.94 pixels tall, and a row of six to eight of
|
|
150
|
+
* them is the densest target cluster on four sites. The fix is
|
|
151
|
+
* `flex min-h-6 items-center`, so the anchor is a block that is at least
|
|
152
|
+
* `--spacing-6` tall with the same fourteen-pixel type inside it, and the visual
|
|
153
|
+
* weight of the link is untouched. It is the same arrangement `mobile-nav` uses for
|
|
154
|
+
* a stacked link at the coarse-pointer floor, one step lower and at every pointer.
|
|
155
|
+
* `DESIGN.md` records the rule under **The target-size floor**.
|
|
156
|
+
*
|
|
157
|
+
* It changes no height anywhere. A column link sat in a line box built from the
|
|
158
|
+
* footer's inherited sixteen-pixel body, so each row was already twenty-four pixels
|
|
159
|
+
* tall before the floor and the row is the same twenty-four after it; only the
|
|
160
|
+
* seventeen pixels of target inside it grew, and a reader's eye is where it was.
|
|
161
|
+
*
|
|
146
162
|
* It is a server Component. It fetches nothing, it holds no state, and it
|
|
147
163
|
* imports no router: a consumer renders it from a server file and the links are
|
|
148
164
|
* plain anchors the consumer's own router can intercept.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED
|
|
1
|
+
{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BA+DjB;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -36,12 +36,28 @@ import { cn } from '../../lib/utils.js';
|
|
|
36
36
|
* overrides it: Prism does not decide which destinations are external, so the
|
|
37
37
|
* per-link prop wins over the default rather than the other way round.
|
|
38
38
|
*
|
|
39
|
+
* **Every link this Block renders carries a 24 pixel target floor, and it is a
|
|
40
|
+
* floor on the box rather than on the type.** A link drawn as a bare inline anchor
|
|
41
|
+
* has no box at all: what a pointer aims at is the font's content area, which for
|
|
42
|
+
* the shipped face at `text-sm` is 16.94 pixels tall, and a row of six to eight of
|
|
43
|
+
* them is the densest target cluster on four sites. The fix is
|
|
44
|
+
* `flex min-h-6 items-center`, so the anchor is a block that is at least
|
|
45
|
+
* `--spacing-6` tall with the same fourteen-pixel type inside it, and the visual
|
|
46
|
+
* weight of the link is untouched. It is the same arrangement `mobile-nav` uses for
|
|
47
|
+
* a stacked link at the coarse-pointer floor, one step lower and at every pointer.
|
|
48
|
+
* `DESIGN.md` records the rule under **The target-size floor**.
|
|
49
|
+
*
|
|
50
|
+
* It changes no height anywhere. A column link sat in a line box built from the
|
|
51
|
+
* footer's inherited sixteen-pixel body, so each row was already twenty-four pixels
|
|
52
|
+
* tall before the floor and the row is the same twenty-four after it; only the
|
|
53
|
+
* seventeen pixels of target inside it grew, and a reader's eye is where it was.
|
|
54
|
+
*
|
|
39
55
|
* It is a server Component. It fetches nothing, it holds no state, and it
|
|
40
56
|
* imports no router: a consumer renders it from a server file and the links are
|
|
41
57
|
* plain anchors the consumer's own router can intercept.
|
|
42
58
|
*/
|
|
43
59
|
export function SiteFooter({ product, columns, social, legal, headingLevel = 'h2', className, }) {
|
|
44
60
|
const ColumnTitle = headingLevel;
|
|
45
|
-
return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "lg" }), social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground
|
|
61
|
+
return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "lg" }), social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center gap-2 rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: [link.icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center", children: link.icon })) : null, link.label] }) }, link.href))) })) : null] }), columns && columns.length > 0 ? (_jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, className: "flex flex-col gap-3", children: [_jsx(ColumnTitle, { className: "text-sm font-semibold", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center rounded-sm text-sm transition-colors duration-fast ease-out", children: link.label }) }, link.href))) })] }, column.title))) })) : null] }), legal ? _jsx("div", { className: "text-muted-foreground text-sm", children: legal }) : null] }) }));
|
|
46
62
|
}
|
|
47
63
|
export default SiteFooter;
|
|
@@ -129,6 +129,19 @@ export type StackGrid01Props = {
|
|
|
129
129
|
* is a fill for a large area and never a signal, and a tile of pastel behind one
|
|
130
130
|
* word is a signal a reader has to learn.
|
|
131
131
|
*
|
|
132
|
+
* **The two groups set their type identically, and it is the same two steps in
|
|
133
|
+
* both.** They happened to agree on the steps and to be wrong on both of them,
|
|
134
|
+
* which is the harder defect to see: a grid whose second group is quieter than its
|
|
135
|
+
* first is a grid saying the in-house work matters less than the assembled parts,
|
|
136
|
+
* which is the opposite of what the group is for. A tile name is a card title, so
|
|
137
|
+
* it sits at Body the way `CardTitle` says a card title sits at Body, and a role
|
|
138
|
+
* and a blurb are both supporting copy at the step `DESIGN.md` gives supporting
|
|
139
|
+
* copy. Below those two floors was the measured state of both arms: names at
|
|
140
|
+
* fourteen pixels and the line under them at twelve, so a heading rendered smaller
|
|
141
|
+
* than the copy around it and the tile read as a caption rather than as a tile. The
|
|
142
|
+
* mono annotation over an in-house name and under a codename is left at `text-xs`
|
|
143
|
+
* on purpose, because that is a machine annotation and not a run of prose.
|
|
144
|
+
*
|
|
132
145
|
* `ownLabel` is required when `own` is passed, because the group is a claim and
|
|
133
146
|
* the claim is the caller's words. Three of the four sites write three different
|
|
134
147
|
* ones, and the Block does not choose.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/stack-grid-01/stack-grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED
|
|
1
|
+
{"version":3,"file":"stack-grid.d.ts","sourceRoot":"","sources":["../../../src/blocks/stack-grid-01/stack-grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,QAAQ,EACR,OAAO,EACP,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,+BA6ElB;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -28,6 +28,19 @@ import { cn } from '../../lib/utils.js';
|
|
|
28
28
|
* is a fill for a large area and never a signal, and a tile of pastel behind one
|
|
29
29
|
* word is a signal a reader has to learn.
|
|
30
30
|
*
|
|
31
|
+
* **The two groups set their type identically, and it is the same two steps in
|
|
32
|
+
* both.** They happened to agree on the steps and to be wrong on both of them,
|
|
33
|
+
* which is the harder defect to see: a grid whose second group is quieter than its
|
|
34
|
+
* first is a grid saying the in-house work matters less than the assembled parts,
|
|
35
|
+
* which is the opposite of what the group is for. A tile name is a card title, so
|
|
36
|
+
* it sits at Body the way `CardTitle` says a card title sits at Body, and a role
|
|
37
|
+
* and a blurb are both supporting copy at the step `DESIGN.md` gives supporting
|
|
38
|
+
* copy. Below those two floors was the measured state of both arms: names at
|
|
39
|
+
* fourteen pixels and the line under them at twelve, so a heading rendered smaller
|
|
40
|
+
* than the copy around it and the tile read as a caption rather than as a tile. The
|
|
41
|
+
* mono annotation over an in-house name and under a codename is left at `text-xs`
|
|
42
|
+
* on purpose, because that is a machine annotation and not a run of prose.
|
|
43
|
+
*
|
|
31
44
|
* `ownLabel` is required when `own` is passed, because the group is a claim and
|
|
32
45
|
* the claim is the caller's words. Three of the four sites write three different
|
|
33
46
|
* ones, and the Block does not choose.
|
|
@@ -52,6 +65,6 @@ export function StackGrid01({ eyebrow, title, description, parts, own, ownLabel,
|
|
|
52
65
|
'"this part is ours" in a shape and leave the words to a reader to infer. Pass the words you mean, ' +
|
|
53
66
|
'or omit the group.');
|
|
54
67
|
}
|
|
55
|
-
return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsxs("div", { "data-slot": "stack-grid", className: cn('flex flex-col gap-10', className), children: [_jsx("ul", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: parts.map((part) => (_jsx("li", { children: _jsxs(Card, { className: "bg-muted h-full gap-2 py-4", children: [_jsxs(CardHeader, { className: "gap-1", children: [_jsx(CardTitle, { className: "text-
|
|
68
|
+
return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsxs("div", { "data-slot": "stack-grid", className: cn('flex flex-col gap-10', className), children: [_jsx("ul", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: parts.map((part) => (_jsx("li", { children: _jsxs(Card, { className: "bg-muted h-full gap-2 py-4", children: [_jsxs(CardHeader, { className: "gap-1", children: [_jsx(CardTitle, { className: "text-lg", children: _jsx(Title, { children: part.name }) }), part.realName ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: part.realName })) : null] }), _jsx(CardContent, { children: _jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: part.role }) })] }) }, part.name))) }), own && own.length > 0 ? (_jsx("ul", { "data-slot": "stack-grid-own", className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: own.map((entry) => (_jsx("li", { children: _jsxs(Card, { className: "border-primary shadow-md h-full gap-2 py-4", children: [_jsxs(CardHeader, { className: "gap-1", children: [_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: ownLabel }), _jsx(CardTitle, { className: "text-lg", children: _jsx(Title, { children: entry.name }) })] }), _jsx(CardContent, { children: _jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: entry.blurb }) })] }) }, entry.name))) })) : null] }), caption ? _jsx("p", { className: "text-muted-foreground mt-6 text-pretty text-sm", children: caption }) : null] }));
|
|
56
69
|
}
|
|
57
70
|
export default StackGrid01;
|
|
@@ -73,11 +73,19 @@ export type DiagramNode = {
|
|
|
73
73
|
/**
|
|
74
74
|
* One relation between two nodes, with the word that says what it is.
|
|
75
75
|
*
|
|
76
|
-
* A relation is drawn as a straight line
|
|
77
|
-
* geometry a caller lays out is the geometry a reader sees. The
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
76
|
+
* A relation is drawn as a straight line from one mark towards another, so the
|
|
77
|
+
* geometry a caller lays out is the geometry a reader sees. The line stops at the
|
|
78
|
+
* mark's own edge with the ink clearance between, or at whichever label printed
|
|
79
|
+
* under that mark the line would otherwise run through, which is what keeps an edge
|
|
80
|
+
* heading downward from running through the name printed under its own node while a
|
|
81
|
+
* relation leaving sideways still reaches the mark it joins.
|
|
82
|
+
*
|
|
83
|
+
* The label is placed beside the line rather than on it, because a label drawn
|
|
84
|
+
* over a line has to be knocked out with a halo, and a halo has to be filled with
|
|
85
|
+
* the colour of the surface the diagram happens to sit on, which the component is
|
|
86
|
+
* not told. How far beside is the label's own extent measured across the line,
|
|
87
|
+
* not a fixed number, because a label's width runs along a horizontal line and
|
|
88
|
+
* across a vertical one, and one number clears the first and not the second.
|
|
81
89
|
*
|
|
82
90
|
* `indirect` draws the line dashed. That is the standing convention for "this
|
|
83
91
|
* holds, but not by this route", and it is chosen over fading the line because
|
|
@@ -211,8 +219,31 @@ export type DiagramProps = DiagramFigure & ({
|
|
|
211
219
|
* caller `stroke`, so the surface is `nodes`, `relations`, `label`,
|
|
212
220
|
* `decorative` and `className` and nothing else.
|
|
213
221
|
*
|
|
214
|
-
*
|
|
215
|
-
*
|
|
222
|
+
* **No stroke crosses a label, and every relation still reaches the marks it
|
|
223
|
+
* joins.** A relation used to run from one mark's centre to the other, and a node's
|
|
224
|
+
* name is printed under its mark, so every edge heading downward struck through the
|
|
225
|
+
* name of the node it left. Each label a node prints is now its own obstacle rather
|
|
226
|
+
* than part of one box enclosing the whole node, and a relation is trimmed only
|
|
227
|
+
* against the labels it would actually enter. That direction is the whole of the
|
|
228
|
+
* rule: a name and its second line both sit below their mark, so a relation
|
|
229
|
+
* leaving sideways runs along the mark's centre line and clears both, and it stops
|
|
230
|
+
* at the mark's own edge with the ink clearance between. Backing every relation off
|
|
231
|
+
* the widest label at its node instead detached them from the marks they connect,
|
|
232
|
+
* which is a drawing of a shape with no relations on it. The Component cannot know
|
|
233
|
+
* that two labels will not collide with one another, which is the caller's
|
|
234
|
+
* positions to settle, and it does know every mark's radius, both label offsets and
|
|
235
|
+
* every label's own width, because a monospaced label's width is its character
|
|
236
|
+
* count. A relation's
|
|
237
|
+
* own label is offset by its own extent across the line. Those are two pieces of
|
|
238
|
+
* geometry the drawing had and did not use, and `test/diagram.test.tsx` asserts
|
|
239
|
+
* both halves as geometry rather than the presence of a class name.
|
|
240
|
+
*
|
|
241
|
+
* **No label is drawn below `text-xs`.** The drawing is wrapped in a container
|
|
242
|
+
* that scrolls sideways, and the drawing itself holds a floor of its own
|
|
243
|
+
* coordinate space, so a phone sees the whole diagram at a legible size rather
|
|
244
|
+
* than the whole diagram at six pixels. That is the same bargain `Table` strikes
|
|
245
|
+
* with seven columns, and it is a bargain rather than an accident because the
|
|
246
|
+
* alternative is a picture of a shape with nothing written on it. A relation
|
|
216
247
|
* naming a node that is not in `nodes` is dropped, and the count of dropped
|
|
217
248
|
* relations is on the element as `data-unresolved-relations` rather than
|
|
218
249
|
* swallowed, because a line that silently did not draw is the failure this
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAc3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,gDAAgD;AAChD,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,oGAAoG;IACpG,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,GACD;IACE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AA8KH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAsHd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
|