@hogoshi/ui 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/chrome-veil.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../lib/cn";
+
+const sides = {
+  top: "top-0 h-[calc(var(--safe-top)+2rem)] bg-gradient-to-b [mask-image:linear-gradient(to_bottom,black_30%,transparent)]",
+  bottom: "bottom-0 h-[var(--bottombar-space)] bg-gradient-to-t [mask-image:linear-gradient(to_top,black_30%,transparent)]",
+};
+
+export function ChromeVeil({ side, fixed = false, className }: { side: "top" | "bottom"; fixed?: boolean; className?: string }) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "from-bg pointer-events-none inset-x-0 to-transparent backdrop-blur-xl",
+        fixed ? "fixed z-[calc(var(--z-sticky)-1)]" : "absolute",
+        sides[side],
+        className,
+      )}
+    />
+  );
+}

package/src/components/context-menu.tsx

@@ -2,7 +2,7 @@
 
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { ClipboardIcon, Copy01Icon, ScissorIcon, TextIcon } from "@hugeicons-pro/core-stroke-rounded";
-import type { ComponentProps, ReactNode } from "react";
+import { useEffect, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import type { AppIcon } from "./icon";
 import { Icon } from "./icon";
@@ -16,6 +16,7 @@ export interface ContextMenuEntry {
   icon?: AppIcon;
   onSelect?: () => void;
   destructive?: boolean;
+  disabled?: boolean;
   items?: ContextMenuEntry[];
 }
 
@@ -23,55 +24,141 @@ function selectionText() {
   return window.getSelection()?.toString() ?? "";
 }
 
+type Field = HTMLInputElement | HTMLTextAreaElement;
+
+type SavedEdit = {
+  field: Field | null;
+  start: number;
+  end: number;
+  text: string;
+  value: string;
+};
+
+const emptyEdit: SavedEdit = { field: null, start: 0, end: 0, text: "", value: "" };
+let saved: SavedEdit = emptyEdit;
+let expanded: SavedEdit = emptyEdit;
+let collapsedAt = 0;
+let pasteText = "";
+const pasteListeners = new Set<(ready: boolean) => void>();
+
+function isField(node: EventTarget | null): node is Field {
+  return node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement;
+}
+
+function publishPaste(text: string) {
+  pasteText = text;
+  pasteListeners.forEach((listener) => listener(Boolean(text)));
+}
+
+function rememberField(field: Field, start: number, end: number) {
+  const next: SavedEdit = {
+    field,
+    start,
+    end,
+    text: field.value.slice(Math.min(start, end), Math.max(start, end)),
+    value: field.value,
+  };
+  saved = next;
+  if (start !== end) expanded = next;
+  else collapsedAt = performance.now();
+}
+
+function captureEditTarget() {
+  const active = document.activeElement;
+  if (isField(active)) {
+    const start = active.selectionStart ?? 0;
+    const end = active.selectionEnd ?? 0;
+    const clearedByClick =
+      start === end &&
+      expanded.field === active &&
+      expanded.start !== expanded.end &&
+      performance.now() - collapsedAt < 300;
+    if (clearedByClick) {
+      active.setSelectionRange(expanded.start, expanded.end);
+      saved = { ...expanded, value: active.value };
+    } else {
+      rememberField(active, start, end);
+    }
+  } else {
+    const text = selectionText();
+    saved = text ? { ...emptyEdit, text } : { ...emptyEdit };
+  }
+  void navigator.clipboard.readText().then(publishPaste).catch(() => publishPaste(""));
+}
+
+if (typeof document !== "undefined") {
+  document.addEventListener(
+    "selectionchange",
+    () => {
+      const active = document.activeElement;
+      if (!isField(active)) return;
+      rememberField(active, active.selectionStart ?? 0, active.selectionEnd ?? 0);
+    },
+    true,
+  );
+  document.addEventListener("contextmenu", captureEditTarget, true);
+}
+
+function restoreField() {
+  const field = saved.field;
+  if (!field || !field.isConnected) return null;
+  field.focus({ preventScroll: true });
+  field.setSelectionRange(saved.start, saved.end);
+  return field;
+}
+
+function writeField(next: string, cursor: number) {
+  const field = restoreField();
+  if (!field) return;
+  field.setRangeText(next, saved.start, saved.end, "end");
+  field.setSelectionRange(cursor, cursor);
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
 function cutSelection() {
-  const text = selectionText();
-  if (text) void navigator.clipboard.writeText(text);
-  document.execCommand("delete");
+  if (!saved.text || !saved.field) return;
+  void navigator.clipboard.writeText(saved.text);
+  writeField("", saved.start);
 }
 
 function copySelection() {
-  const text = selectionText();
-  if (text) void navigator.clipboard.writeText(text);
+  if (!saved.text) return;
+  void navigator.clipboard.writeText(saved.text);
+  restoreField();
 }
 
 async function pasteSelection() {
-  const text = await navigator.clipboard.readText();
-  const active = document.activeElement;
-  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
-    const start = active.selectionStart ?? active.value.length;
-    const end = active.selectionEnd ?? start;
-    active.setRangeText(text, start, end, "end");
-    active.dispatchEvent(new Event("input", { bubbles: true }));
-    return;
+  let text = pasteText;
+  if (!text) {
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      return;
+    }
   }
-  document.execCommand("insertText", false, text);
+  if (!text || !saved.field) return;
+  writeField(text, saved.start + text.length);
 }
 
 function selectAll() {
-  const active = document.activeElement;
-  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
-    active.select();
-    return;
-  }
-  const selection = window.getSelection();
-  const node = selection?.anchorNode?.parentElement;
-  if (!node || !selection) return;
-  const range = document.createRange();
-  range.selectNodeContents(node);
-  selection.removeAllRanges();
-  selection.addRange(range);
+  const field = saved.field;
+  if (!field || !field.value) return;
+  field.focus({ preventScroll: true });
+  field.setSelectionRange(0, field.value.length);
 }
 
-function editEntries(): ContextMenuEntry[] {
+function editEntries(canPaste: boolean): ContextMenuEntry[] {
+  const canEdit = Boolean(saved.text);
+  const canSelect = Boolean(saved.field?.value);
   return [
     {
       id: "edit",
       label: "Edit",
       items: [
-        { id: "cut", label: "Cut", icon: ScissorIcon, onSelect: cutSelection },
-        { id: "copy", label: "Copy", icon: Copy01Icon, onSelect: copySelection },
-        { id: "paste", label: "Paste", icon: ClipboardIcon, onSelect: () => void pasteSelection() },
-        { id: "select-all", label: "Select all", icon: TextIcon, onSelect: selectAll },
+        { id: "cut", label: "Cut", icon: ScissorIcon, onSelect: cutSelection, disabled: !canEdit || !saved.field },
+        { id: "copy", label: "Copy", icon: Copy01Icon, onSelect: copySelection, disabled: !canEdit },
+        { id: "paste", label: "Paste", icon: ClipboardIcon, onSelect: () => void pasteSelection(), disabled: !canPaste || !saved.field },
+        { id: "select-all", label: "Select all", icon: TextIcon, onSelect: selectAll, disabled: !canSelect },
       ],
     },
   ];
@@ -86,12 +173,27 @@ export function ContextMenuContent({
   children,
   ...props
 }: ComponentProps<typeof BaseContextMenu.Popup> & { edit?: boolean }) {
+  const [canPaste, setCanPaste] = useState(Boolean(pasteText));
+  useEffect(() => {
+    if (!edit) return;
+    const listener = (ready: boolean) => setCanPaste(ready);
+    pasteListeners.add(listener);
+    setCanPaste(Boolean(pasteText));
+    return () => {
+      pasteListeners.delete(listener);
+    };
+  }, [edit]);
+
   return (
     <BaseContextMenu.Portal>
       <BaseContextMenu.Positioner className="z-[var(--z-popover)]">
-        <BaseContextMenu.Popup className={cn(popupClass, className)} {...props}>
+        <BaseContextMenu.Popup
+          className={cn(popupClass, className)}
+          onMouseDown={(event) => event.preventDefault()}
+          {...props}
+        >
           <Glide selector={HIGHLIGHTED} />
-          {edit ? <EntryList items={editEntries()} /> : null}
+          {edit ? <EntryList items={editEntries(canPaste)} /> : null}
           {children ? (
             <>
               {edit ? <Separator className="my-1" /> : null}
@@ -118,8 +220,9 @@ function EntryList({ items }: { items: ContextMenuEntry[] }) {
     ) : (
       <ContextMenuItem
         key={item.id}
+        disabled={item.disabled}
         className={item.destructive ? "text-danger data-[highlighted]:text-danger" : undefined}
-        onClick={item.onSelect}
+        onClick={item.disabled ? undefined : item.onSelect}
       >
         {item.icon ? <Icon icon={item.icon} variant="stroke" size={16} /> : null}
         {item.label}

package/src/components/dialog.tsx

@@ -13,10 +13,18 @@ export const DialogClose = BaseDialog.Close;
 export const DialogTitle = BaseDialog.Title;
 export const DialogDescription = BaseDialog.Description;
 
-export function DialogContent({ className, children, ...props }: ComponentProps<typeof BaseDialog.Popup>) {
+export function DialogContent({
+  className,
+  children,
+  backdropProps,
+  ...props
+}: ComponentProps<typeof BaseDialog.Popup> & { backdropProps?: ComponentProps<typeof BaseDialog.Backdrop> }) {
   return (
     <BaseDialog.Portal>
-      <BaseDialog.Backdrop className={cn("fixed inset-0 z-[var(--z-overlay)] bg-transparent", backdropMotion)} />
+      <BaseDialog.Backdrop
+        className={cn("fixed inset-0 z-[var(--z-overlay)] bg-transparent", backdropMotion)}
+        {...backdropProps}
+      />
       <BaseDialog.Popup
         className={cn(
           "border-border bg-bg-elevated/70 fixed top-1/2 left-1/2 z-[var(--z-modal)] grid max-h-[calc(100dvh-max(1rem,var(--safe-top))-max(1rem,var(--safe-bottom)))] w-[min(32rem,calc(100vw-max(1rem,var(--safe-left))-max(1rem,var(--safe-right))))] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-[var(--radius-lg)] border p-6 shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none",

package/src/components/image-viewer.tsx

@@ -204,7 +204,7 @@ export function ImageViewer({
           }}
         >
           <BaseDialog.Title className="sr-only">{image.alt ?? fileName(image)}</BaseDialog.Title>
-          <div className="flex shrink-0 items-center gap-2 px-3 pt-[calc(0.75rem+var(--safe-top))] pr-[calc(0.75rem+var(--safe-right))] pb-3 pl-[calc(0.75rem+var(--safe-left))]">
+          <div className="flex shrink-0 items-center gap-2 px-3 pt-[max(3.25rem,calc(0.75rem+var(--safe-top)))] pr-[calc(0.75rem+var(--safe-right))] pb-3 pl-[max(1rem,var(--safe-left))]">
             <p className="text-fg-muted min-w-0 flex-1 truncate text-sm">
               {count > 1 ? <span className="text-fg mr-2 tabular-nums">{index + 1} / {count}</span> : null}
               {image.alt ?? fileName(image)}

package/src/components/navbar.tsx

@@ -5,6 +5,7 @@ import { NavigationMenu } from "@base-ui/react/navigation-menu";
 import { ArrowDown01Icon } from "@hugeicons-pro/core-stroke-rounded";
 import { useEffect, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { ChromeVeil } from "./chrome-veil";
 import { Glide, glideActive } from "./glide";
 import type { AppIcon } from "./icon";
 import { Icon } from "./icon";
@@ -31,12 +32,13 @@ export function TopBar({ contained = false, children, className }: { contained?:
 
   return (
     <header className={cn("pointer-events-none inset-x-0 top-0 z-[var(--z-sticky)]", contained ? "absolute" : "fixed", className)}>
+      <ChromeVeil side="top" />
       <div
         className={cn(
-          "pointer-events-auto relative mx-auto flex h-12 items-center border transition-[width,translate,border-radius,background-color,border-color,box-shadow] duration-[calc(var(--motion-duration)*4)] ease-[var(--motion-ease)]",
+          "pointer-events-auto relative mx-auto flex h-12 translate-y-[var(--topbar-offset)] items-center border transition-[width,border-radius,background-color,border-color,box-shadow] duration-[calc(var(--motion-duration)*4)] ease-[var(--motion-ease)]",
           compact
-            ? "border-border bg-bg-elevated w-[min(40rem,calc(100%-max(0.75rem,var(--safe-left))-max(0.75rem,var(--safe-right))))] translate-y-[calc(var(--safe-top)+0.75rem)] rounded-full px-2 shadow-[var(--shadow-md)]"
-            : "before:pointer-events-auto w-full translate-y-[var(--safe-top)] border-transparent bg-transparent pl-[max(0.75rem,var(--safe-left))] pr-[max(0.75rem,var(--safe-right))] before:absolute before:inset-x-0 before:bottom-full before:h-[var(--safe-top)] before:content-['']",
+            ? "border-border bg-bg-elevated w-[min(40rem,calc(100%-var(--edge-left)-var(--edge-right)))] rounded-full px-2 shadow-[var(--shadow-md)]"
+            : "w-full border-transparent bg-transparent pr-[var(--edge-right)] pl-[var(--edge-left)]",
         )}
       >
         <Navbar className="relative h-full w-full bg-transparent px-1 shadow-none backdrop-blur-none">{children}</Navbar>

package/src/components/otp.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { OTPField } from "@base-ui/react/otp-field";
-import { useRef, useState, type ComponentProps } from "react";
+import { useEffect, useRef, useState, type ComponentProps } from "react";
 import { cn } from "../lib/cn";
 
 const slotClass =
@@ -51,6 +51,7 @@ function OtpSlot({ text }: { text: string }) {
 type OtpProps = Omit<ComponentProps<typeof OTPField.Root>, "length" | "mask"> & {
   length?: number;
   mask?: boolean;
+  autoFocus?: boolean;
 };
 
 export function Otp({
@@ -61,12 +62,21 @@ export function Otp({
   defaultValue = "",
   onValueChange,
   onValueComplete,
+  autoFocus,
   ...props
 }: OtpProps) {
   const rootRef = useRef<HTMLDivElement>(null);
   const [inner, setInner] = useState(defaultValue);
   const current = value ?? inner;
 
+  useEffect(() => {
+    if (!autoFocus) return;
+    const id = requestAnimationFrame(() => {
+      rootRef.current?.querySelector<HTMLInputElement>("input")?.focus();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [autoFocus]);
+
   return (
     <OTPField.Root
       ref={rootRef}

package/src/components/sheet.tsx

@@ -18,10 +18,10 @@ const SideContext = createContext<SheetSide>("right");
 const direction = { top: "up", right: "right", bottom: "down", left: "left" } as const;
 
 const edge = {
-  top: "top-[calc(var(--safe-top)+0.75rem)]",
-  right: "right-[max(0.75rem,var(--safe-right))]",
-  bottom: "bottom-2",
-  left: "left-[max(0.75rem,var(--safe-left))]",
+  top: "top-[var(--topbar-offset)]",
+  right: "right-[var(--edge-right)]",
+  bottom: "bottom-[var(--bottombar-offset)]",
+  left: "left-[var(--edge-left)]",
 };
 
 const frame = {

package/src/components/shell.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Search01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { Icon } from "./icon";
+import { Kbd } from "./kbd";
+import { Logo } from "./logo";
+import { Sheet, SheetContent, SheetTitle } from "./sheet";
+import { SidebarHeader, SidebarInset, SidebarProvider, SidebarTrigger, sidebarLabel, useSidebar } from "./sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+export const shellGlass = "border-border bg-bg-elevated/70 hover:bg-bg-elevated border backdrop-blur-xl";
+
+const focusRing = "rounded-[var(--radius-sm)] outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+export function AppShell({
+  sidebar,
+  topBar,
+  bottomBar,
+  defaultCollapsed,
+  className,
+  contentClassName,
+  children,
+}: {
+  sidebar?: ReactNode;
+  topBar?: ReactNode;
+  bottomBar?: ReactNode;
+  defaultCollapsed?: boolean;
+  className?: string;
+  contentClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarProvider defaultCollapsed={defaultCollapsed}>
+      <div data-app-shell className={cn("bg-bg fixed inset-0 flex h-app overflow-hidden", className)}>
+        {sidebar}
+        <SidebarInset className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+          {topBar}
+          <div
+            data-scroll-root
+            className={cn(
+              "min-h-0 flex-1 touch-pan-y overflow-x-hidden overflow-y-scroll overscroll-y-contain pb-[var(--safe-bottom)]",
+              topBar && "pt-[var(--topbar-space)]",
+              bottomBar && "pb-[var(--bottombar-space)] md:pb-[var(--safe-bottom)]",
+              contentClassName,
+            )}
+          >
+            {children}
+          </div>
+        </SidebarInset>
+      </div>
+      {bottomBar}
+    </SidebarProvider>
+  );
+}
+
+export function ShellBrand({ href, label, className, ...props }: Omit<ComponentProps<"a">, "children"> & { label: string }) {
+  const { collapsed } = useSidebar();
+  return (
+    <SidebarHeader className={cn("group/header relative overflow-hidden px-2", className)}>
+      <a
+        href={href}
+        aria-label={label}
+        className={cn(
+          "flex min-w-0 items-center gap-2 px-1 whitespace-nowrap",
+          focusRing,
+          collapsed &&
+            "group-hover/header:pointer-events-none group-hover/header:opacity-0 [@media(hover:none)]:pointer-events-none [@media(hover:none)]:opacity-0",
+        )}
+        {...props}
+      >
+        <Logo size="sm" className="shrink-0" />
+        <span className={cn("text-sm font-semibold tracking-tight", sidebarLabel, collapsed && "opacity-0")}>{label}</span>
+      </a>
+      <SidebarTrigger
+        className={
+          collapsed
+            ? "pointer-events-none absolute top-3 left-3 opacity-0 transition-opacity group-hover/header:pointer-events-auto group-hover/header:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+            : "shrink-0"
+        }
+      />
+    </SidebarHeader>
+  );
+}
+
+export function ShellLogo({ href, label, className, children, ...props }: ComponentProps<"a"> & { label: string }) {
+  return (
+    <a href={href} aria-label={label} className={cn("flex shrink-0 items-center gap-2", focusRing, className)} {...props}>
+      <Logo size="sm" />
+      {children}
+    </a>
+  );
+}
+
+export function ShellTitle({ className, children }: { className?: string; children: ReactNode }) {
+  return (
+    <p className={cn("pointer-events-none absolute top-1/2 left-1/2 max-w-[70%] -translate-x-1/2 -translate-y-1/2", className)}>
+      <span
+        aria-hidden
+        className="absolute top-1/2 left-1/2 -z-10 h-[2.4em] w-[260%] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,var(--bg)_0%,color-mix(in_oklch,var(--bg)_82%,transparent)_36%,transparent_70%)]"
+      />
+      <span className="relative block truncate text-sm font-semibold">{children}</span>
+    </p>
+  );
+}
+
+export function ShellAction({ className, ...props }: ComponentProps<typeof Button>) {
+  return <Button variant="secondary" size="icon" className={cn(shellGlass, "rounded-full", className)} {...props} />;
+}
+
+export function ShellSearch({
+  onOpen,
+  shortcut = "⌘K",
+  label = "Search",
+  className,
+}: {
+  onOpen: () => void;
+  shortcut?: string;
+  label?: string;
+  className?: string;
+}) {
+  const { collapsed } = useSidebar();
+  const fade = cn(sidebarLabel, collapsed && "opacity-0");
+  const button = (
+    <Button
+      variant="outline"
+      aria-label={label}
+      className={cn(shellGlass, "w-full justify-between overflow-hidden px-3 font-normal whitespace-nowrap [&>span]:w-full [&>span>span]:w-full", className)}
+      onClick={onOpen}
+    >
+      <span className="flex w-full items-center justify-between gap-2">
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon icon={Search01Icon} variant="stroke" size={16} className="shrink-0" />
+          <span className={fade}>{label}</span>
+        </span>
+        <Kbd className={cn("shrink-0", fade)}>{shortcut}</Kbd>
+      </span>
+    </Button>
+  );
+  return (
+    <div className="shrink-0 px-2 pb-2">
+      <Tooltip disabled={!collapsed}>
+        <TooltipTrigger render={button} />
+        <TooltipContent side="right">{label}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+export function ShellMenu({
+  open,
+  onOpenChange,
+  brand,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  brand: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Sheet side="left" open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="right-auto px-2">
+        <SheetTitle className="px-3 pt-1 text-sm font-semibold">{brand}</SheetTitle>
+        <SidebarProvider>
+          <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+        </SidebarProvider>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/sidebar.tsx

@@ -4,6 +4,7 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { SidebarLeftIcon } from "@hugeicons-pro/core-stroke-rounded";
 import { createContext, useContext, useEffect, useMemo, useState, type ComponentProps, type ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { ChromeVeil } from "./chrome-veil";
 import type { AppIcon, IconVariant } from "./icon";
 import { Glide, glideActive } from "./glide";
 import { Icon } from "./icon";
@@ -41,7 +42,7 @@ export function Sidebar({ className, ...props }: ComponentProps<"aside">) {
     <aside
       data-collapsed={collapsed || undefined}
       className={cn(
-        "bg-bg-elevated border-border hidden h-full min-h-0 w-[calc(15rem+var(--safe-left))] shrink-0 flex-col overflow-hidden border-r pt-[calc(var(--safe-top)+0.5rem)] pb-2 pl-[var(--safe-left)] transition-[width] duration-[var(--motion-duration)] ease-[var(--motion-ease)] md:flex",
+        "bg-bg-elevated border-border hidden h-full min-h-0 w-[calc(15rem+var(--safe-left))] shrink-0 flex-col overflow-hidden border-r pt-[calc(var(--safe-top)+0.75rem)] pb-[calc(var(--safe-bottom)+0.75rem)] pl-[var(--safe-left)] transition-[width] duration-[var(--motion-duration)] ease-[var(--motion-ease)] md:flex",
         collapsed && "w-[calc(3.5rem+var(--safe-left))]",
         className,
       )}
@@ -152,18 +153,22 @@ export function SidebarItem({
 
 export function BottomBar({ className, children, ...props }: ComponentProps<"nav">) {
   return (
-    <nav
-      className={cn(
-        "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-[max(0.5rem,var(--safe-bottom))] left-[max(0.75rem,var(--safe-left))] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
-        className,
-      )}
-      {...props}
-    >
-      <div className="relative flex items-stretch justify-around">
-        <Glide selector={ACTIVE} className="bg-accent-muted/60 rounded-[var(--radius-md)]" />
-        {children}
-      </div>
-    </nav>
+    <>
+      <ChromeVeil side="bottom" fixed className="md:hidden" />
+      <nav
+        data-bottom-bar
+        className={cn(
+          "bg-bg-elevated/70 border-border fixed right-[var(--edge-right)] bottom-[var(--bottombar-offset)] left-[var(--edge-left)] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
+          className,
+        )}
+        {...props}
+      >
+        <div className="relative flex items-stretch justify-around">
+          <Glide selector={ACTIVE} className="bg-accent-muted/60 rounded-[var(--radius-md)]" />
+          {children}
+        </div>
+      </nav>
+    </>
   );
 }
 

package/src/components/toaster.tsx

@@ -13,13 +13,13 @@ export function Toaster() {
       position="bottom-right"
       closeButton
       offset={{
-        bottom: "1.5rem",
-        right: "1.5rem",
+        bottom: "var(--toast-bottom)",
+        right: "max(1.5rem, var(--safe-right))",
       }}
       mobileOffset={{
-        bottom: "5rem",
-        left: "1rem",
-        right: "1rem",
+        bottom: "var(--toast-bottom)",
+        left: "max(1rem, var(--safe-left))",
+        right: "max(1rem, var(--safe-right))",
       }}
       style={{ zIndex: "var(--z-toast)" }}
       toastOptions={{

package/src/index.ts

@@ -42,6 +42,8 @@ export { Progress } from "./components/progress";
 export { Logo } from "./components/logo";
 export { LOGO_PATH, LOGO_VIEWBOX, logoSvg } from "./components/logo-mark";
 export { Navbar, NavbarItem, NavbarMenu, NavbarMenuLink, NavbarMenus, TopBar } from "./components/navbar";
+export { ChromeVeil } from "./components/chrome-veil";
+export { AppShell, ShellAction, ShellBrand, ShellLogo, ShellMenu, ShellSearch, ShellTitle, shellGlass } from "./components/shell";
 export { Glide, glideActive } from "./components/glide";
 export type { GlideProps } from "./components/glide";
 export { Calendar } from "./components/calendar";

package/src/styles.css

@@ -77,10 +77,49 @@ body {
   --safe-right: env(safe-area-inset-right, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
   --safe-left: env(safe-area-inset-left, 0px);
+  --app-height: 100dvh;
+  --edge-x: 0.75rem;
+  --edge-left: max(var(--edge-x), var(--safe-left));
+  --edge-right: max(var(--edge-x), var(--safe-right));
+  --topbar-offset: calc(var(--safe-top) + 0.75rem);
+  --topbar-space: calc(var(--topbar-offset) + 3.75rem);
+  --bottombar-offset: calc(var(--safe-bottom) + 0.75rem);
+  --bottombar-space: calc(var(--bottombar-offset) + 4.25rem);
+  --toast-bottom: calc(var(--safe-bottom) + 1.5rem);
+}
+
+@media (display-mode: standalone) {
+  :root {
+    --app-height: 100vh;
+  }
+}
+
+@media (max-width: 47.99rem) {
+  html:has([data-bottom-bar]) {
+    --toast-bottom: var(--bottombar-space);
+  }
+}
+
+html,
+body {
+  min-height: var(--app-height);
+}
+
+@utility h-app {
+  height: var(--app-height);
+}
+
+@utility min-h-app {
+  min-height: var(--app-height);
+}
+
+@utility max-h-app {
+  max-height: var(--app-height);
 }
 
 html {
   scroll-behavior: auto;
+  touch-action: pan-x pan-y;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;