@hogoshi/ui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hogoshi/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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 },
       ],
     },
   ];
@@ -80,16 +167,36 @@ function editEntries(): ContextMenuEntry[] {
 export const ContextMenuRoot = BaseContextMenu.Root;
 export const ContextMenuTrigger = BaseContextMenu.Trigger;
 
-export function ContextMenuContent({ className, children, ...props }: ComponentProps<typeof BaseContextMenu.Popup>) {
+export function ContextMenuContent({
+  edit = true,
+  className,
+  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} />
-          <EntryList items={editEntries()} />
+          {edit ? <EntryList items={editEntries(canPaste)} /> : null}
           {children ? (
             <>
-              <Separator className="my-1" />
+              {edit ? <Separator className="my-1" /> : null}
               {children}
             </>
           ) : null}
@@ -113,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%-max(0.75rem,var(--safe-left))-max(0.75rem,var(--safe-right))))] rounded-full px-2 shadow-[var(--shadow-md)]"
+            : "w-full border-transparent bg-transparent pl-[max(0.75rem,var(--safe-left))] pr-[max(0.75rem,var(--safe-right))]",
         )}
       >
         <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/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";
@@ -152,18 +153,21 @@ 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
+        className={cn(
+          "bg-bg-elevated/70 border-border fixed right-[max(0.75rem,var(--safe-right))] bottom-[var(--bottombar-offset)] 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>
+    </>
   );
 }
 

package/src/index.ts

@@ -42,6 +42,7 @@ 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 { Glide, glideActive } from "./components/glide";
 export type { GlideProps } from "./components/glide";
 export { Calendar } from "./components/calendar";

package/src/styles.css

@@ -77,6 +77,34 @@ 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;
+  --topbar-offset: calc(var(--safe-top) + 0.75rem);
+  --topbar-space: calc(var(--topbar-offset) + 3.75rem);
+  --bottombar-offset: max(0.5rem, var(--safe-bottom));
+  --bottombar-space: calc(var(--bottombar-offset) + 4.25rem);
+}
+
+@media (display-mode: standalone) {
+  :root {
+    --app-height: 100vh;
+  }
+}
+
+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 {