@tangle-network/ui 11.30.0 → 11.30.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 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

@@ -21,9 +21,11 @@ import * as React from "react";
  * 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.
  *
- * 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 share one line and scroll within their half, 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

@@ -12,7 +12,7 @@ const Toolbar = React.forwardRef(({ className, search, filters, actions, ...prop
 			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-1 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.1",
   "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

@@ -48,12 +48,16 @@ describe("Toolbar", () => {
     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

@@ -22,9 +22,11 @@ import { cn } from "../lib/utils";
  * 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.
  *
- * 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 share one line and scroll within their half, 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;
@@ -56,11 +58,12 @@ const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
     >
       {search && <div className="min-w-0 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-1 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>