ClintchizandClaude Opus 5
790b81330a
Three separate problems, all traceable to `git add -A` sweeping up a working
tree I had not inspected.
Commit 69020b25 ("docs: make the component sections executable") committed far
more than docs: 79 files of a half-scaffolded inter-app example, and four of
those files were truncated mid-statement. That broke `bun run typecheck` on
main. The example is reverted to its last green six-file form. The truncated
fragments and the fuller working copy are NOT in this commit -- if any of that
workspace was wanted, it needs to be reconstructed deliberately and committed on
its own, not as a side effect of a docs change.
Separately, `scripts/generate-ui-complete-catalog.mjs` was run while checking
which helper scripts still work. It rewrites components in place, so it
flattened six of them to stubs, deleted 24 more and lower-cased four filenames
before crashing. Contents were restored from HEAD, but the renames survived
that restore: Windows is case-insensitive, so `git status` reported clean while
Card, Container, Divider and Grid sat on disk under the wrong names. The index
now tracks the capitalised names, which is what the components declare and what
ui-redesign-contract.test.ts reads -- that test would have failed on any
case-sensitive checkout.
Documented both as 4.7 and 4.8 in the remediation plan, with the general rule:
no script that rewrites packages/ui/components/ may write in place. Also fixes
the heading level on 4.6, which was rendering outside section 4.
bun run check is green: 1,433 pass, 0 fail.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
139 lines
3.2 KiB
Plaintext
139 lines
3.2 KiB
Plaintext
// Grid -- an equal-track grid that collapses on small screens.
|
|
//
|
|
// <Grid columns={3} gap="lg">...</Grid>
|
|
//
|
|
// Pass minItemWidth to let the browser decide the count instead: the track
|
|
// list becomes auto-fit, which reflows continuously rather than at fixed
|
|
// breakpoints and suits card decks whose item count is not known.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component Grid {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
columns: number = 2
|
|
gap: string = "md"
|
|
maxWidth: string = "xl"
|
|
// When set, the count is derived from the available width instead of the
|
|
// columns prop. Accepts any CSS length.
|
|
minItemWidth: string = ""
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function columnCount() {
|
|
var value = Number(columns)
|
|
if (!value || value < 1) {
|
|
return 1
|
|
}
|
|
return Math.min(6, value)
|
|
}
|
|
|
|
shared function autoTrack() {
|
|
return minItemWidth ? "repeat(auto-fit, minmax(" + minItemWidth + ", 1fr))" : ""
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Grid"
|
|
class='wire-grid {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-gap='{gap}'
|
|
data-max-width='{maxWidth}'
|
|
data-columns='{columnCount()}'
|
|
data-auto='{minItemWidth ? "true" : "false"}'
|
|
style='--grid-auto-track:{autoTrack()};'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wire-grid {
|
|
--grid-gap: 1.25rem;
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--grid-gap);
|
|
grid-template-columns: 1fr;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.wire-grid[data-size="compact"] {
|
|
align-items: start;
|
|
}
|
|
|
|
.wire-grid[data-max-width="md"] {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.wire-grid[data-max-width="lg"] {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wire-grid[data-max-width="xl"] {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wire-grid[data-max-width="2xl"] {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.wire-grid[data-max-width="full"] {
|
|
max-width: none;
|
|
}
|
|
|
|
.wire-grid[data-gap="xs"] {
|
|
--grid-gap: 0.5rem;
|
|
}
|
|
|
|
.wire-grid[data-gap="sm"] {
|
|
--grid-gap: 0.75rem;
|
|
}
|
|
|
|
.wire-grid[data-gap="lg"] {
|
|
--grid-gap: 2rem;
|
|
}
|
|
|
|
.wire-grid[data-gap="xl"] {
|
|
--grid-gap: 2.5rem;
|
|
}
|
|
|
|
/*
|
|
* auto-fit needs no breakpoints, so it wins over the fixed counts below
|
|
* and applies at every width.
|
|
*/
|
|
.wire-grid[data-auto="true"] {
|
|
grid-template-columns: var(--grid-auto-track);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.wire-grid[data-auto="false"]:not([data-columns="1"]) {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wire-grid[data-auto="false"][data-columns="3"] {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-grid[data-auto="false"][data-columns="4"] {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-grid[data-auto="false"][data-columns="5"] {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.wire-grid[data-auto="false"][data-columns="6"] {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|