@tangle-network/ui 11.30.0 → 11.30.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.30.2
+
+### Patch Changes
+
+- df8514f: `Toolbar` keeps its filters at content width on one `lg` line while they fit, and gives search the rest between a 16rem floor and `max-w-sm`. The even split had clipped the Assets bar's third field (Schedule for) at the scroll edge at 1440px while search sat at 384px. Filters now shrink and scroll only once search is at its floor.
+
+## 11.30.1
+
+### Patch Changes
+
+- 0b6d379: `Toolbar` wraps its filters below `lg` instead of scrolling them as one line, so a phone shows every filter: at 390px the second select had started at 403px, off screen. From `lg` up the filters still share one scrollable line. `SidebarDropZone` sets its title on the label size (`--font-size-label`, 14px) and its description on the help size (`--font-size-help`, 12px) instead of 12px and 10px literals, and `UploadProgress` sets its size and error lines on the help size.
+
 ## 11.30.0
 
 ### Minor Changes

package/dist/primitives/sidebar-drop-zone.js

@@ -73,11 +73,11 @@ function SidebarDropZone({ onDrop, accept, disabled, title = "Drop files here",
 					children: icon ?? /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" })
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: cn("text-xs font-medium", dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"),
+					className: cn("text-[length:var(--font-size-label,0.875rem)] font-medium", dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"),
 					children: title
 				}),
 				description && /* @__PURE__ */ jsx("p", {
-					className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]",
+					className: "text-[length:var(--font-size-help,0.75rem)] text-[var(--text-muted,hsl(var(--muted-foreground)))]",
 					children: description
 				})
 			]

package/dist/primitives/toolbar.d.ts

@@ -10,20 +10,22 @@ import * as React from "react";
  * own visual language, so one row carried a native `<select>`, a custom input
  * and a segmented control side by side.
  *
- * So search and filters SHARE the free space and `actions` stays at its content
- * width, and the row is the one place those controls are composed, which is what
- * keeps them looking like one set.
+ * So on one `lg` line the filters keep their content width while it fits,
+ * search takes what is left between a 16rem floor and `max-w-sm`, and `actions`
+ * stays at its content width. The row is the one place those controls are
+ * composed, which is what keeps them looking like one set.
  *
- * Sharing is deliberate, and the alternative is worse. Giving the filter row its
- * content width starves search: measured with a 537px filter row in an 832px
- * toolbar, the search field collapses to 89px. Letting both flex bounds the
- * filter row instead, so it scrolls within its half — 313px each in that same
- * case — and search stays usable however many filters a page adds. `max-w-sm`
- * then stops search claiming more than it can use when there are few filters.
+ * Both earlier layouts failed one side. Filters at content width with no floor
+ * starved search: a 537px filter row in an 832px toolbar left it 89px. Splitting
+ * the row evenly clipped filters that would have fitted: at 1440px the Assets
+ * bar cut its third field at the scroll edge while search sat at 384px. With the
+ * floor, filters shrink and scroll only once search is down to 16rem.
  *
- * On a narrow viewport the row becomes a column and the filters scroll
- * horizontally as a group rather than wrapping into a tall stack that pushes
- * the table itself below the fold.
+ * Below `lg` the row becomes a column and the filters wrap onto as many lines
+ * as they need. Scrolling them as one line hid every filter past the first
+ * behind the screen edge on a phone: at 390px the second select started at
+ * 403px and a third at 652px, with nothing to say more were there. From `lg`
+ * up they sit on one line as above.
  */
 /**
  * Slots only — `children` is omitted deliberately. A free child would render as
@@ -34,7 +36,7 @@ import * as React from "react";
 export interface ToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** The one control that expands to fill the row. */
   search?: React.ReactNode;
-  /** Filters, in reading order. Kept on one scrollable line when space runs out. */
+  /** Filters, in reading order. Wrapped below `lg`; one scrollable line from `lg` up. */
   filters?: React.ReactNode;
   /** View switches and exports, pinned to the end. */
   actions?: React.ReactNode;

package/dist/primitives/toolbar.js

@@ -8,11 +8,11 @@ const Toolbar = React.forwardRef(({ className, search, filters, actions, ...prop
 	...props,
 	children: [
 		search && /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 lg:max-w-sm lg:flex-1",
+			className: "min-w-0 lg:min-w-64 lg:max-w-sm lg:flex-1",
 			children: search
 		}),
 		filters && /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 items-center gap-2 overflow-x-auto py-1 lg:flex-1",
+			className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-initial lg:flex-nowrap lg:gap-2 lg:overflow-x-auto",
 			children: filters
 		}),
 		actions && /* @__PURE__ */ jsx("div", {

package/dist/primitives/upload-progress.js

@@ -33,7 +33,7 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 								className: "truncate font-medium text-foreground",
 								children: file.name
 							}), /* @__PURE__ */ jsx("span", {
-								className: "shrink-0 text-xs text-muted-foreground",
+								className: "shrink-0 text-[length:var(--font-size-help,0.75rem)] text-muted-foreground",
 								children: formatSize(file.size)
 							})]
 						}),
@@ -45,7 +45,7 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 							})
 						}),
 						file.status === "error" && file.error && /* @__PURE__ */ jsx("p", {
-							className: "mt-0.5 text-xs text-[var(--surface-danger-text)]",
+							className: "mt-0.5 text-[length:var(--font-size-help,0.75rem)] text-[var(--surface-danger-text)]",
 							children: file.error
 						})
 					]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.30.0",
+  "version": "11.30.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.19.2",
+    "@tangle-network/brand": "^1.19.3",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/sidebar-drop-zone.tsx

@@ -130,7 +130,7 @@ export function SidebarDropZone({
             {icon ?? <Upload className="h-4 w-4" />}
           </div>
           <p className={cn(
-            "text-xs font-medium",
+            "text-[length:var(--font-size-label,0.875rem)] font-medium",
             dragOver
               ? "text-[var(--text-primary,hsl(var(--foreground)))]"
               : "text-[var(--text-muted,hsl(var(--muted-foreground)))]",
@@ -138,7 +138,7 @@ export function SidebarDropZone({
             {title}
           </p>
           {description && (
-            <p className="text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]">
+            <p className="text-[length:var(--font-size-help,0.75rem)] text-[var(--text-muted,hsl(var(--muted-foreground)))]">
               {description}
             </p>
           )}

package/src/primitives/toolbar.test.tsx

@@ -24,11 +24,10 @@ describe("Toolbar", () => {
     expect(row.children).toHaveLength(1);
   });
 
-  // Search and filters both flex, on purpose: giving the filter row its content
-  // width starves search — a 537px filter row in an 832px toolbar collapses the
-  // search field to 89px. Sharing bounds the filter row so it scrolls within its
-  // half and search stays usable. Only `actions` sits at content width.
-  it("lets search and filters share the row, holding actions at content width", () => {
+  // Filters keep their content width while it fits and shrink (scrolling) only
+  // once search reaches its 16rem floor; an even split clipped a third filter at
+  // 1440px, and no floor left search 89px wide in an 832px toolbar.
+  it("keeps filters at content width above a search floor, actions at content width", () => {
     const { container } = render(
       <Toolbar
         actions={<button type="button">Export</button>}
@@ -39,21 +38,25 @@ describe("Toolbar", () => {
     const [searchSlot, filterSlot, actionsSlot] = Array.from(
       (container.firstElementChild as HTMLElement).children,
     ) as HTMLElement[];
-    expect(searchSlot.className).toContain("lg:flex-1");
-    expect(searchSlot.className).toContain("min-w-0");
-    // Both flex, so neither can starve the other.
-    expect(filterSlot.className).toContain("lg:flex-1");
-    expect(filterSlot.className).toContain("min-w-0");
+    const search = searchSlot.className.split(" ");
+    const filters = filterSlot.className.split(" ");
+    expect(search).toEqual(expect.arrayContaining(["lg:flex-1", "lg:min-w-64", "lg:max-w-sm", "min-w-0"]));
+    expect(filters).toEqual(expect.arrayContaining(["lg:flex-initial", "min-w-0", "lg:overflow-x-auto"]));
+    expect(filters).not.toContain("lg:flex-1");
     expect(actionsSlot.className).toContain("shrink-0");
     expect(actionsSlot.className).not.toContain("flex-1");
   });
 
-  it("scrolls the filter row instead of wrapping it", () => {
+  it("wraps the filters on a phone and scrolls one line from lg up", () => {
     const { container } = render(<Toolbar filters={<span>Product</span>} />);
     const filterSlot = (container.firstElementChild as HTMLElement)
       .children[0] as HTMLElement;
-    expect(filterSlot.className).toContain("overflow-x-auto");
-    expect(filterSlot.className).toContain("min-w-0");
+    const classes = filterSlot.className.split(" ");
+    expect(classes).toContain("flex-wrap");
+    expect(classes).not.toContain("overflow-x-auto");
+    expect(classes).toContain("lg:flex-nowrap");
+    expect(classes).toContain("lg:overflow-x-auto");
+    expect(classes).toContain("min-w-0");
   });
 
   // A free child would render as a bare flex item with none of the slots'

package/src/primitives/toolbar.tsx

@@ -11,20 +11,22 @@ import { cn } from "../lib/utils";
  * own visual language, so one row carried a native `<select>`, a custom input
  * and a segmented control side by side.
  *
- * So search and filters SHARE the free space and `actions` stays at its content
- * width, and the row is the one place those controls are composed, which is what
- * keeps them looking like one set.
+ * So on one `lg` line the filters keep their content width while it fits,
+ * search takes what is left between a 16rem floor and `max-w-sm`, and `actions`
+ * stays at its content width. The row is the one place those controls are
+ * composed, which is what keeps them looking like one set.
  *
- * Sharing is deliberate, and the alternative is worse. Giving the filter row its
- * content width starves search: measured with a 537px filter row in an 832px
- * toolbar, the search field collapses to 89px. Letting both flex bounds the
- * filter row instead, so it scrolls within its half — 313px each in that same
- * case — and search stays usable however many filters a page adds. `max-w-sm`
- * then stops search claiming more than it can use when there are few filters.
+ * Both earlier layouts failed one side. Filters at content width with no floor
+ * starved search: a 537px filter row in an 832px toolbar left it 89px. Splitting
+ * the row evenly clipped filters that would have fitted: at 1440px the Assets
+ * bar cut its third field at the scroll edge while search sat at 384px. With the
+ * floor, filters shrink and scroll only once search is down to 16rem.
  *
- * On a narrow viewport the row becomes a column and the filters scroll
- * horizontally as a group rather than wrapping into a tall stack that pushes
- * the table itself below the fold.
+ * Below `lg` the row becomes a column and the filters wrap onto as many lines
+ * as they need. Scrolling them as one line hid every filter past the first
+ * behind the screen edge on a phone: at 390px the second select started at
+ * 403px and a third at 652px, with nothing to say more were there. From `lg`
+ * up they sit on one line as above.
  */
 /**
  * Slots only — `children` is omitted deliberately. A free child would render as
@@ -36,7 +38,7 @@ export interface ToolbarProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** The one control that expands to fill the row. */
   search?: React.ReactNode;
-  /** Filters, in reading order. Kept on one scrollable line when space runs out. */
+  /** Filters, in reading order. Wrapped below `lg`; one scrollable line from `lg` up. */
   filters?: React.ReactNode;
   /** View switches and exports, pinned to the end. */
   actions?: React.ReactNode;
@@ -54,13 +56,14 @@ const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
       )}
       {...props}
     >
-      {search && <div className="min-w-0 lg:max-w-sm lg:flex-1">{search}</div>}
+      {search && <div className="min-w-0 lg:min-w-64 lg:max-w-sm lg:flex-1">{search}</div>}
       {filters && (
-        // `py-1` leaves room for a focus ring above and below; horizontally the
-        // scroll container clips it, which is the trade a single-line filter row
-        // makes. No negative margin — pulling the row wider than its parent is
-        // what made every page report 4px of horizontal overflow.
-        <div className="flex min-w-0 items-center gap-2 overflow-x-auto py-1 lg:flex-1">
+        // `py-1` leaves room for a focus ring above and below; on the single
+        // `lg` line the scroll container clips it horizontally, which is the
+        // trade a one-line filter row makes. No negative margin — pulling the
+        // row wider than its parent is what made every page report 4px of
+        // horizontal overflow.
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-initial lg:flex-nowrap lg:gap-2 lg:overflow-x-auto">
           {filters}
         </div>
       )}

package/src/primitives/upload-progress.tsx

@@ -65,7 +65,7 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               <span className="truncate font-medium text-foreground">{file.name}</span>
-              <span className="shrink-0 text-xs text-muted-foreground">{formatSize(file.size)}</span>
+              <span className="shrink-0 text-[length:var(--font-size-help,0.75rem)] text-muted-foreground">{formatSize(file.size)}</span>
             </div>
             {/* Progress bar */}
             {file.status === "uploading" && file.progress !== undefined && (
@@ -78,7 +78,7 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
             )}
             {/* Error message */}
             {file.status === "error" && file.error && (
-              <p className="mt-0.5 text-xs text-[var(--surface-danger-text)]">{file.error}</p>
+              <p className="mt-0.5 text-[length:var(--font-size-help,0.75rem)] text-[var(--surface-danger-text)]">{file.error}</p>
             )}
           </div>