@vvedantb/ui 0.5.2 → 0.5.4

package/README.md

@@ -69,7 +69,7 @@ import { InputArea, InputBanners, buildComposerSlashItems } from "@vvedantb/ui";
 
 | Prop | Default | Notes |
 | --- | --- | --- |
-| `value`, `onChange`, `defaultValue` | uncontrolled, `""` | `onSubmit` clears the draft through `onChange("")` first. Restore it yourself if sending fails. |
+| `value`, `onChange`, `defaultValue` | uncontrolled, `""` | `onSubmit` clears the draft through `onChange("")` first. Restore it yourself if sending fails. A value of `"\n"` shows as an empty editor with the placeholder, and the editor never reports a trailing line holder newline (0.5.4). |
 | `onSubmit(text)` | none | Trimmed text. Not called while `isSending`, or when send is disabled. |
 | `onStop`, `isStreaming`, `isSending`, `isUploading` | off | While streaming, stop shows next to send, and send queues. Sending or uploading shows a spinner and disables send. |
 | `canSubmit` | text, or `fileCount` or `chipCount` above 0 | Overrides when send is enabled. |
@@ -250,7 +250,7 @@ import {
 - `SelectField`: a labelled single select built from `Select`. Children are `SelectItem`s. An empty `value` shows the placeholder. `id` goes to the trigger and the label points at it. `className` merges onto the trigger.
 - Motion: `springTransition`, `springFastTransition` and `fadeUpSpring` presets. `FadePresence` takes optional `variants` (`hidden`, `show`, `exit`); omitted, it keeps its opacity fade. `PanelTransition` wraps children in React `ViewTransition` with `default="none"` and `enter`/`exit` classes (`vt-panel-in`, `vt-panel-out` by default). It needs a React build that exports `ViewTransition`, and the app supplies the `::view-transition-*` CSS.
 
-## App shell (0.5.0 to 0.5.2)
+## App shell (0.5.0 to 0.5.4)
 
 A sidebar and main page layout, extracted from existing app markup. It is router-free: pass your own links (with `asChild`), state and media query result. Tooltips need a `TooltipProvider` above the shell.
 
@@ -291,9 +291,9 @@ import {
 
 - Widths: `AppShell` sets `--app-shell-rail-width` (default `4rem`), `--app-shell-sidebar-width` (rail plus panel, default `20rem`) and `--app-shell-mobile-header-height` (default `calc(3.5rem + env(safe-area-inset-top, 0px))`) as inline style. Change them with `railWidth`, `sidebarWidth` and `mobileHeaderHeight`. The other pieces read these variables. Outside `AppShell`, set the variables yourself or pass a width class with `className`.
 - `AppShell`: `sidebar`, `children`, `panelHidden` (main offsets by the rail width instead of the sidebar width), `skipLinkLabel` (`"Skip to main content"`), `mainId` (`"main-content"`), `className`, `mainClassName`, `contentClassName`.
-- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileHeaderActions` (0.5.2; trailing actions such as icon buttons, in place of the end spacer), `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
+- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileHeaderActions` (0.5.2; trailing actions such as icon buttons, in place of the end spacer), `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app. The mobile header is a three-column grid, so the title and trailing actions stay on one row and a long title truncates (0.5.4).
 - `SidebarRail`: `top`, `children` (scroll body), `footer`, `showDivider`, `bodyAsChild` (the single child, for example a tabs list, becomes the body), `className`, `topClassName`, `bodyClassName`, `footerClassName`. Other HTML attributes (`id`, `data-*`, `aria-*`) go to the root `<div>`. The top and footer wrappers render only when their slot is set.
-- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a ghost `Button`; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
+- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a native `<button type="button">` (0.5.3), so icons keep their authored size; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
 - `RailDivider`, `SidebarIconTooltip` (`label`, `enabled`, `side` `"right"`, `sideOffset` 8).
 - `SidebarPanel`: `title`, `headerTrailing`, `onClose` (adds the close button; pass it on the mobile drawer only), `closeLabel`, `closeButtonClassName`, `collapsed` (`md:hidden`), `className`, `children`.
 - `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). 0.5.2 adds `badge` (unread dot beside the trigger, in a `relative` wrapper around the menu, so the trigger's dimming and press scale skip it: `true` shows it, `false` fades it out, omitted renders no wrapper and no dot), `triggerProps` (spread onto the trigger `Button` after the defaults; `className` merges last) and `contentProps` (spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`; no `className`, use `contentClassName`). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/shell/src/AppSidebar.tsx

@@ -96,9 +96,10 @@ export function AppSidebar({
 
   return (
     <>
+      {/* Three columns keep the title centred and stop it overlapping the actions: it truncates instead. */}
       <header
         onKeyDown={closeOnEscape}
-        className="fixed inset-x-0 top-0 z-30 flex h-[var(--app-shell-mobile-header-height)] items-center gap-2 bg-background/80 px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] backdrop-blur-md md:hidden"
+        className="fixed inset-x-0 top-0 z-30 grid h-[var(--app-shell-mobile-header-height)] grid-cols-[minmax(max-content,1fr)_minmax(0,auto)_minmax(max-content,1fr)] items-center gap-2 bg-surface px-3 pt-[env(safe-area-inset-top,0px)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] md:hidden"
       >
         <Button
           type="button"
@@ -108,21 +109,26 @@ export function AppSidebar({
           aria-label={mobileMenuLabel}
           aria-expanded={mobileOpen}
           aria-controls={drawerId}
-          className={mobileMenuButtonClass}
+          className={cn(mobileMenuButtonClass, "justify-self-start")}
         >
           {mobileMenuIcon(mobileOpen)}
         </Button>
         {mobileTitle ? (
-          <h1 className="pointer-events-none absolute inset-x-14 top-[env(safe-area-inset-top,0px)] bottom-0 flex items-center justify-center truncate text-center text-base font-semibold leading-none tracking-tight text-foreground text-balance">
+          <h1 className="pointer-events-none min-w-0 truncate text-center text-base font-semibold leading-tight tracking-tight text-foreground">
             {mobileTitle}
           </h1>
-        ) : null}
+        ) : (
+          <span aria-hidden="true" />
+        )}
         {mobileHeaderActions ? (
-          <div data-app-sidebar-mobile-actions="" className="ml-auto flex shrink-0 items-center gap-2">
+          <div
+            data-app-sidebar-mobile-actions=""
+            className="flex shrink-0 items-center justify-self-end gap-2"
+          >
             {mobileHeaderActions}
           </div>
         ) : (
-          <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+          <div className="h-11 w-11 shrink-0 justify-self-end" aria-hidden="true" />
         )}
       </header>
 

package/shell/src/SidebarRail.tsx

@@ -1,7 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { Button } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
 import { railTileClass, railTileStateClass } from "./app-shell-classes";
 import { SidebarIconTooltip } from "./SidebarIconTooltip";
@@ -99,7 +98,7 @@ export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children">
   children: ReactNode;
 };
 
-/** Rail tile with a right-side tooltip. Renders a ghost `Button`, its child with `asChild`, or a tabs trigger with `tabValue`. */
+/** Rail tile with a right-side tooltip. Renders a native `<button>`, its child with `asChild`, or a tabs trigger with `tabValue`. */
 export function RailTile({
   label,
   active = false,
@@ -135,16 +134,15 @@ export function RailTile({
           {badge}
         </Slot>
       ) : (
-        <Button
+        <button
           type="button"
-          variant="ghost"
           {...props}
           aria-label={label}
-          className={cn(railTileClass, "group h-11 w-11 p-0", railTileStateClass(active), className)}
+          className={cn(railTileClass, "group", railTileStateClass(active), className)}
         >
           {children}
           {badge}
-        </Button>
+        </button>
       )}
     </SidebarIconTooltip>
   );

package/src/composer/input-area/InputAreaEditor.tsx

@@ -30,16 +30,33 @@ const CHIPS_HOST_CLASS = "contents empty:hidden [&>*]:mr-1.5";
 
 const ZERO_WIDTH_SPACE = "\u200b";
 
-/** Reads the plain text of the editor. Skips the chips host. */
+/**
+ * A value of "\n" is an empty draft: Shift+Enter on an empty editor, or a
+ * stray line holder that apps stored before 0.5.4. Mirrors `isComposerCompact`.
+ */
+function isEmptyDraft(value: string): boolean {
+  return value === "" || value === "\n";
+}
+
+/**
+ * Reads the plain text of the editor. Skips the chips host. Under `pre-wrap` a
+ * single trailing "\n" renders no line, so Chromium ends the text with an extra
+ * "\n" that only holds the last line open. That holder, or a trailing `<br>`,
+ * is dropped once.
+ */
 export function extractEditorText(root: HTMLElement): string {
   let out = "";
+  let heldByBr = false;
   const walk = (node: Node, isRoot: boolean) => {
     node.childNodes.forEach((child, index) => {
       if (child instanceof HTMLElement) {
         if (child.hasAttribute(CHIPS_HOST_ATTR)) return;
         if (child.tagName === "BR") {
           // A trailing <br> only holds the line open.
-          if (isRoot && index === node.childNodes.length - 1) return;
+          if (isRoot && index === node.childNodes.length - 1) {
+            heldByBr = true;
+            return;
+          }
           out += "\n";
           return;
         }
@@ -57,7 +74,29 @@ export function extractEditorText(root: HTMLElement): string {
     });
   };
   walk(root, true);
-  return out;
+  return !heldByBr && out.endsWith("\n") ? out.slice(0, -1) : out;
+}
+
+/** The DOM text for a value: a trailing "\n" gets its line holder. */
+function editorTextFor(value: string): string {
+  return value.endsWith("\n") ? `${value}\n` : value;
+}
+
+/** Every editor node except the chips host: the anchor, text and line breaks. */
+function textNodes(root: HTMLElement): ChildNode[] {
+  return Array.from(root.childNodes).filter(
+    (child) => !(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR)),
+  );
+}
+
+/**
+ * True when the DOM shows `shown`. An empty draft must be the bare U+200B
+ * anchor: a stray "\n" or `<br>` reads as "" but pushes the placeholder down.
+ */
+function editorShows(root: HTMLElement, shown: string): boolean {
+  if (shown !== "") return extractEditorText(root) === shown;
+  const [only, ...rest] = textNodes(root);
+  return rest.length === 0 && only instanceof Text && only.data === ZERO_WIDTH_SPACE;
 }
 
 function chipsHost(root: HTMLElement): HTMLElement | null {
@@ -96,11 +135,14 @@ function setSelection(
   window.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
 }
 
-/** End of the text: the last text node, or the end of the editor after a line break. */
+/**
+ * End of the text: the last text node before its trailing line holder, or the
+ * end of the editor after a line break.
+ */
 function textEnd(root: HTMLElement): [Node, number] {
   ensureCaretAnchor(root);
   const last = root.lastChild;
-  if (last instanceof Text) return [last, last.length];
+  if (last instanceof Text) return [last, last.data.endsWith("\n") ? last.length - 1 : last.length];
   return [root, root.childNodes.length];
 }
 
@@ -276,13 +318,10 @@ export function InputAreaEditor({
   useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root || composingRef.current) return;
-    if (extractEditorText(root) !== value) {
-      Array.from(root.childNodes).forEach((child) => {
-        if (!(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR))) {
-          root.removeChild(child);
-        }
-      });
-      root.appendChild(document.createTextNode(ZERO_WIDTH_SPACE + value));
+    const shown = isEmptyDraft(value) ? "" : value;
+    if (!editorShows(root, shown)) {
+      textNodes(root).forEach((child) => root.removeChild(child));
+      root.appendChild(document.createTextNode(ZERO_WIDTH_SPACE + editorTextFor(shown)));
       if (document.activeElement === root) placeCaretAtEnd(root);
     }
     ensureCaretAnchor(root);
@@ -361,7 +400,7 @@ export function InputAreaEditor({
         aria-multiline
         {...ariaProps}
         role="combobox"
-        data-empty={value === "" ? "" : undefined}
+        data-empty={isEmptyDraft(value) ? "" : undefined}
         data-placeholder={placeholder}
         data-suggestion={suggestion || undefined}
         className={cn(INLINE_EDITOR_CLASS, className)}