@botiverse/raft-ui 0.78.0 → 0.80.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/CHANGELOG.md +25 -0
- package/dist/components/message-attachment/message-image-gallery.recipe.mjs +1 -1
- package/dist/components/message-forwarded-bundle/message-forwarded-bundle.recipe.mjs +3 -3
- package/dist/components/panel/panel-header.recipe.mjs +3 -3
- package/dist/components/sidebar/sidebar-item.recipe.mjs +3 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
## [0.80.0](https://github.com/botiverse/raft-design/compare/v0.79.0...v0.80.0) (2026-11-09)
|
|
2
|
+
|
|
3
|
+
### Changed
|
|
4
|
+
|
|
5
|
+
- **A panel head is one line from 768px by touch too**: `PanelHeaderContent` puts the `PanelMeta` after the title on its line from 768px at any pointer, where it used to do so only with a mouse; a phone still puts it under the title.
|
|
6
|
+
- Why: a touch tablet stacked the title and its count while a laptop showed them on one line, so the same page looked different on the two, and the Raft app had started overriding the layout page by page (xxchan, Kirby, #proj-workspace:dc3c9fc9).
|
|
7
|
+
- Affects: on a touch screen 768px or wider, every panel head (Tasks, Artifacts, a thread, a profile, a channel) shows its subtitle on the title's line, and the subtitle truncates first. Head heights don't change (56px by touch). An app that stacked them itself can drop its override.
|
|
8
|
+
- Docs: https://raft-design.botiverse.build/components/panel/#anatomy
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
|
|
12
|
+
- **A gallery row of three images sits three across**: `MessageImageGalleryRow` with three images (`count: 3`) lays them out three across at every width, on the shorter rows already sized for three, where it used to put two over one.
|
|
13
|
+
- Why: six images showed as rows of 2, 1, 2, 1 and read as an F (xxchan, #triage:c3c22ffb).
|
|
14
|
+
- Affects: three, six and nine images in a message now show three to a row; each image is narrower (about 117px instead of 178px in a 360px gallery), so a wide screenshot is cropped more in the thumbnail. Opening an image still shows all of it.
|
|
15
|
+
- Docs: https://raft-design.botiverse.build/components/message-attachment/#rules
|
|
16
|
+
|
|
17
|
+
## [0.79.0](https://github.com/botiverse/raft-design/compare/v0.78.0...v0.79.0) (2026-11-09)
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- **A sidebar row out of view isn't laid out or painted**: `SidebarItem` sets `content-visibility: auto`, with one line (`1lh`) as its content height until it has been laid out (the last laid-out height after that, for a row that wraps) and a 2px `overflow-clip-margin`.
|
|
22
|
+
- Why: a server with hundreds of channels relaid every row whenever the window's width changed, about 115ms per relayout at 300 channels (InNOut, #proj-frontend:57f32c96). On a 300-row sidebar, a width sweep's layout time drops from 95–122ms to 29–33ms (70 width changes, 3 runs each).
|
|
23
|
+
- Affects: nothing visible. The selected row's outer sticker edge, which reaches 1.5px past the row, still paints. A browser without `overflow-clip-margin` keeps laying every row out. Something an app draws past a row's box by more than 2px gets clipped.
|
|
24
|
+
- Docs: https://raft-design.botiverse.build/components/sidebar/#behavior
|
|
25
|
+
|
|
1
26
|
## [0.78.0](https://github.com/botiverse/raft-design/compare/v0.77.1...v0.78.0) (2026-11-08)
|
|
2
27
|
|
|
3
28
|
### Changed
|
|
@@ -44,7 +44,7 @@ const messageImageGallery = tv({
|
|
|
44
44
|
count: {
|
|
45
45
|
1: { row: "grid-cols-1" },
|
|
46
46
|
2: { row: "grid-cols-2" },
|
|
47
|
-
3: { row: "grid-cols-
|
|
47
|
+
3: { row: "grid-cols-3" }
|
|
48
48
|
},
|
|
49
49
|
/** A single-image gallery keeps the image's proportions instead of a row height. */
|
|
50
50
|
single: { true: { item: ["inline-block w-fit max-w-[26rem] justify-self-start", "rounded-container"] } },
|
|
@@ -72,9 +72,9 @@ const messageForwardedBundleGallery = tv({
|
|
|
72
72
|
tile: ["[&_img]:block [&_img]:size-full [&_img]:object-cover"]
|
|
73
73
|
},
|
|
74
74
|
variants: { count: {
|
|
75
|
-
1: { row: "grid-cols-1 auto-rows-
|
|
76
|
-
2: { row: "grid-cols-2 auto-rows-
|
|
77
|
-
3: { row: "grid-cols-
|
|
75
|
+
1: { row: "grid-cols-1 auto-rows-32 @min-[360px]/bundle:auto-rows-36" },
|
|
76
|
+
2: { row: "grid-cols-2 auto-rows-32 @min-[360px]/bundle:auto-rows-36" },
|
|
77
|
+
3: { row: "grid-cols-3 auto-rows-28 @min-[360px]/bundle:auto-rows-32" }
|
|
78
78
|
} }
|
|
79
79
|
});
|
|
80
80
|
//#endregion
|
|
@@ -34,10 +34,10 @@ const panelHeader = tv({
|
|
|
34
34
|
"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
|
|
35
35
|
"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
|
|
36
36
|
],
|
|
37
|
-
headerContent: ["flex min-w-0 flex-1 flex-col justify-center", "md:
|
|
37
|
+
headerContent: ["flex min-w-0 flex-1 flex-col justify-center", "md:flex-row md:items-baseline md:justify-start md:gap-2"],
|
|
38
38
|
heading: "flex min-w-0 items-center gap-2",
|
|
39
39
|
title: "truncate font-sans text-headline font-bold text-foreground",
|
|
40
|
-
meta: ["min-w-0 truncate font-sans text-caption text-foreground-hint", "md:
|
|
40
|
+
meta: ["min-w-0 truncate font-sans text-caption text-foreground-hint", "md:flex-1 md:shrink-1000"],
|
|
41
41
|
status: [
|
|
42
42
|
"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
|
|
43
43
|
"font-sans text-caption font-medium normal-case text-foreground-hint",
|
|
@@ -67,7 +67,7 @@ const panelHeader = tv({
|
|
|
67
67
|
slots: ["sectionHeader"],
|
|
68
68
|
class: [
|
|
69
69
|
"max-md:bg-layer-frame max-md:text-foreground-on-frame",
|
|
70
|
-
"max-md
|
|
70
|
+
"max-md:*:data-[slot=panel-header-icon]:hidden",
|
|
71
71
|
"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
|
|
72
72
|
"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
|
|
73
73
|
"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
|
|
@@ -7,7 +7,9 @@ const sidebarItemRecipe = tv({
|
|
|
7
7
|
"group/sidebar-item flex w-full items-center text-left",
|
|
8
8
|
listCell,
|
|
9
9
|
"h-(--row-height) gap-2 rounded-none border-0 py-0",
|
|
10
|
-
"
|
|
10
|
+
"supports-[overflow-clip-margin:2px]:[content-visibility:auto] [overflow-clip-margin:2px]",
|
|
11
|
+
"[contain-intrinsic-block-size:auto_1lh]",
|
|
12
|
+
"md:pointer-fine:*:data-[slot=avatar]:mr-[-3px]",
|
|
11
13
|
"md:py-0 md:[@media(max-height:600px)]:py-0",
|
|
12
14
|
"max-md:h-auto max-md:min-h-11 max-md:py-2.5",
|
|
13
15
|
"font-sans text-subhead font-medium text-foreground",
|