@viliha/vui-ui 1.4.1 → 1.5.0

package/AGENT.md

@@ -76,11 +76,18 @@ command palette, nav config, logo) and **demo pages** are scaffolded with:
 npx @viliha/vui-ui init          # interactive decision tree
 ```
 
-Files land in the consumer's repo (they own them). Two questions:
+Files land in the consumer's repo (they own them). Questions:
+0. **Next.js or Turborepo?** (`--nextjs` / `--turbo` + `--dir <path>`, default
+   `apps/web` — turbo scaffolds into that app directory)
 1. **Fresh project?** (`--fresh` / `--existing`)
 2. **Pre-built theme?** (`--prebuilt` = shell + demo pages / `--theme-only` = just
    the theme wiring you configure)
 
+For a fresh app, create it **without `--src-dir`** (the scaffold uses a root
+`app/` + `@/*` → `./*` and writes `next.config.ts`). `init` **auto-installs the
+dependencies** with the package manager it detects from the lockfile (npm / pnpm
+/ yarn / bun); `--yes` skips the prompt, `--no-install` skips installing.
+
 - **fresh + prebuilt** → full runnable app (config + shell + demo).
 - **fresh + theme-only** → just `globals.css` + `next.config` wiring; build your own.
 - **existing + prebuilt** → shell + demo added; config **never** overwritten —

package/README.md

@@ -61,23 +61,51 @@ Files are copied into *your* repo, so you own and edit them.
 | **Fresh** | full runnable app: config + shell + demo pages | just the theme wiring (`globals.css`, `next.config`) — build your own pages |
 | **Existing** | shell + demo added; your config is **never** overwritten (prints merge steps) | nothing copied; prints the wiring steps |
 
+It first asks whether this is a standalone **Next.js** app or a **Turborepo**
+(for a monorepo it scaffolds into a target app dir, e.g. `apps/web`).
+
 ```
 Flags (for CI / agents, skip the prompts):
+  --nextjs | --turbo          standalone app, or a Turborepo (Q0)
+  --dir <path>                Turborepo target app dir (default apps/web)
   --fresh | --existing        project type (Q1)
   --prebuilt | --theme-only   pre-built shell + demo, or just the theme (Q2)
-  --yes, -y                   accept defaults (fresh, prebuilt)
+  --yes, -y                   accept defaults (nextjs, fresh, prebuilt)
   --force                     overwrite existing files
   --dry-run                   preview without writing
 ```
 
-After a **pre-built** run, install the peer deps it prints, then `npm run dev` →
-`/dashboard`.
+`init` **auto-installs the dependencies** with your package manager (detected
+from the lockfile — npm, pnpm, yarn, or bun). It prompts first; pass `--yes` to
+skip, or `--no-install` to do it yourself.
 
 ### Fresh + pre-built (recommended for new apps)
 
-Start from a `create-next-app` base. This writes `next.config.mjs`,
-`app/globals.css`, the shell, and the demo pages (overwriting the create-next-app
-boilerplate), so the demo runs out of the box.
+Start from a `create-next-app` base **without `--src-dir`** (the scaffold uses a
+root `app/` + `@/*` → `./*`), then run `init` — it scaffolds, installs deps, and
+you're ready for `dev`. Use whichever package manager you like:
+
+```bash
+# npm
+npx create-next-app@latest my-app --ts --tailwind --app --no-src-dir --use-npm
+cd my-app && npx @viliha/vui-ui init && npm run dev
+
+# pnpm
+pnpm create next-app my-app --ts --tailwind --app --no-src-dir
+cd my-app && pnpm dlx @viliha/vui-ui init && pnpm dev
+
+# yarn
+yarn create next-app my-app --ts --tailwind --app --no-src-dir
+cd my-app && yarn dlx @viliha/vui-ui init && yarn dev
+
+# bun
+bun create next-app my-app --ts --tailwind --app --no-src-dir
+cd my-app && bunx @viliha/vui-ui init && bun dev
+```
+
+`init` writes `next.config.ts`, `tsconfig.json`, `app/globals.css`, the shell,
+and the demo pages (overwriting the create-next-app boilerplate) and installs the
+deps, so the demo runs out of the box at `/dashboard`.
 
 ### ⚠️ Existing project — read this first
 

package/bin/vui.mjs

@@ -16,6 +16,7 @@ import { dirname, join, relative, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createInterface } from "node:readline/promises";
 import { stdin, stdout } from "node:process";
+import { execSync } from "node:child_process";
 
 const TEMPLATE = fileURLToPath(new URL("../template/", import.meta.url));
 const args = process.argv.slice(2);
@@ -42,13 +43,11 @@ const DEPS = [
   "recharts",
   "sonner",
   "tailwind-merge",
-  // theme's globals.css imports these:
-  "tw-animate-css",
   "zod",
 ].join(" ");
 
 const WIRING_STEPS = `  1. Install peer deps (those your components use):
-       npm i ${DEPS}
+       npm i @viliha/vui-ui ${DEPS}
   2. app/globals.css:
        @import "tailwindcss";
        @import "@viliha/vui-ui/theme.css";
@@ -98,7 +97,7 @@ async function ask(question, def) {
 
 // Theme wiring config an existing project already has — never clobbered there.
 const WIRING = new Set([
-  "next.config.mjs",
+  "next.config.ts",
   "postcss.config.mjs",
   ".env.example",
   "app/globals.css",
@@ -123,6 +122,21 @@ function category(rel) {
   return "shell";
 }
 
+// Detect the package manager from lockfiles (falls back to npm).
+function detectPM(root) {
+  if (existsSync(join(root, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(root, "yarn.lock"))) return "yarn";
+  if (existsSync(join(root, "bun.lockb")) || existsSync(join(root, "bun.lock")))
+    return "bun";
+  return "npm";
+}
+const ADD_CMD = {
+  npm: "npm install",
+  pnpm: "pnpm add",
+  yarn: "yarn add",
+  bun: "bun add",
+};
+
 function allFiles(dir, out = []) {
   for (const entry of readdirSync(dir, { withFileTypes: true })) {
     const abs = join(dir, entry.name);
@@ -225,12 +239,46 @@ async function main() {
     `\nDone — ${created} file(s) ${dry ? "would be added" : "added"}, ${skipped} skipped.`,
   );
 
+  // Install dependencies. Turborepo installs are workspace-specific, so we only
+  // auto-install for a standalone Next.js app; turbo gets manual instructions.
+  const pm = detectPM(targetRoot);
+  const installList = `@viliha/vui-ui ${DEPS}`;
+  let installed = false;
+  if (!turbo) {
+    let doInstall = has("--no-install")
+      ? false
+      : has("--yes") || has("-y")
+        ? true
+        : null;
+    if (doInstall === null) {
+      const a = await ask(`Install dependencies now with ${pm}? [Y/n] `, "y");
+      doInstall = !a.startsWith("n");
+    }
+    if (doInstall && !dry) {
+      console.log(`\nInstalling dependencies with ${pm}…\n`);
+      try {
+        execSync(`${ADD_CMD[pm]} ${installList}`, {
+          cwd: targetRoot,
+          stdio: "inherit",
+        });
+        installed = true;
+      } catch {
+        console.error(
+          `\nInstall failed — run it manually:\n  ${ADD_CMD[pm]} ${installList}\n`,
+        );
+      }
+    }
+  }
+
   // Per-leaf next steps.
+  const installStep = installed
+    ? ""
+    : `  1. ${ADD_CMD[pm]} ${installList}\n`;
+  const devStepNum = installed ? "1" : "2";
   if (fresh && prebuilt) {
     console.log(`
 Next steps:
-  1. npm i ${DEPS}
-  2. npm run dev   ->   http://localhost:3000  (redirects to /dashboard)
+${installStep}  ${devStepNum}. ${pm === "npm" ? "npm run dev" : `${pm} dev`}   ->   http://localhost:3000  (redirects to /dashboard)
 
 Everything is in YOUR repo — edit app/_components/nav-config.ts, set your logo
 (NEXT_PUBLIC_LOGO_URL in .env), and delete demo pages you don't need.
@@ -240,8 +288,7 @@ Everything is in YOUR repo — edit app/_components/nav-config.ts, set your logo
 Theme wired (globals.css + next.config). No shell or demo pages — build your own.
 
 Next steps:
-  1. npm i ${DEPS}
-  2. Import components from @viliha/vui-ui/* in your pages, then: npm run dev
+${installStep}  ${devStepNum}. Import components from @viliha/vui-ui/* in your pages, then run dev.
 `);
   } else {
     // existing + prebuilt
@@ -260,10 +307,10 @@ The shell + demo were added under app/(app)/ and app/_components/ — review the
 
   if (turbo) {
     console.log(`Turborepo notes (target: ${appDir}):
-  • Add "@viliha/vui-ui" to ${appDir}/package.json dependencies.
+  • Add the deps to that app: ${ADD_CMD[pm]} ${installList}
+    (from the app dir, or with your PM's workspace filter).
   • Ensure your workspace globs include this app (pnpm-workspace.yaml / workspaces).
-  • Run install + dev from the repo root or with a filter, e.g.
-      pnpm --filter <app-name> dev
+  • Run dev with a filter, e.g. ${pm} --filter <app-name> dev
 `);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/template/.env.example

@@ -18,3 +18,10 @@ NEXT_PUBLIC_LICENSE="MIT Licensed"
 # Max pages kept open in the tab strip (client-side). Default 5, min 1. Opening
 # more evicts the oldest tab with a warning.
 NEXT_PUBLIC_MAX_TABS="5"
+
+# How a collapsed sidebar rail reveals a group's sub-items. One of:
+#   inline        — expands underneath the icon, in the rail itself
+#   flyout-click  — click the icon to open a floating panel beside the rail
+#   flyout-hover  — hover the icon to open it (click still works too)
+# Default: flyout-hover
+NEXT_PUBLIC_SIDEBAR_GROUP_MODE="flyout-hover"

package/template/app/_components/app-sidebar.tsx

@@ -13,6 +13,7 @@ import {
 } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
+import { Menu as MenuPanel } from "@viliha/vui-ui/menu";
 import { Logo } from "./logo";
 import { QuickActionsLauncher } from "./quick-actions";
 import { useOpenTabs } from "./open-tabs";
@@ -29,6 +30,25 @@ function isActive(pathname: string, href: string): boolean {
   return pathname === href || pathname.startsWith(`${href}/`);
 }
 
+/** How a collapsed-rail group with sub-items reveals its children. Set via
+ *  `NEXT_PUBLIC_SIDEBAR_GROUP_MODE` (build-time) — see .env.example. */
+type CollapsedGroupMode = "inline" | "flyout-click" | "flyout-hover";
+const COLLAPSED_GROUP_MODES: readonly CollapsedGroupMode[] = [
+  "inline",
+  "flyout-click",
+  "flyout-hover",
+];
+function readCollapsedGroupMode(): CollapsedGroupMode {
+  const raw = process.env.NEXT_PUBLIC_SIDEBAR_GROUP_MODE;
+  return (COLLAPSED_GROUP_MODES as readonly string[]).includes(raw ?? "")
+    ? (raw as CollapsedGroupMode)
+    : "flyout-hover";
+}
+const GROUP_MODE = readCollapsedGroupMode();
+/** Delay before a hover-flyout closes, so the cursor can travel diagonally
+ *  from the trigger into the panel without it disappearing mid-move. */
+const FLYOUT_HOVER_CLOSE_DELAY_MS = 150;
+
 /** Nav glyph. All icons share one size for a consistent left-aligned column.
     Top-level icons are bordered chips (from the global icon rule): inactive keep
     their brand color, active inverts (dark fill, light glyph). Sub-menu icons are
@@ -95,17 +115,109 @@ function SidebarBody({
     }
     return open;
   });
+  const usesFlyout = collapsed && GROUP_MODE !== "inline";
+
   const toggleGroup = (label: string) =>
     setOpenGroups((prev) => {
+      // Flyout modes show one group at a time (menu-style); inline mode lets
+      // several collapsed groups stay expanded at once, like the expanded rail.
+      if (usesFlyout) return prev.has(label) ? new Set() : new Set([label]);
       const next = new Set(prev);
       if (next.has(label)) next.delete(label);
       else next.add(label);
       return next;
     });
 
+  // flyout-hover: open on enter, close on leave after a short delay so the
+  // cursor can travel from the trigger into the panel. A pending close is
+  // cancelled if the pointer re-enters the trigger or the panel first.
+  const hoverCloseTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelHoverClose = () => {
+    if (hoverCloseTimer.current) {
+      clearTimeout(hoverCloseTimer.current);
+      hoverCloseTimer.current = null;
+    }
+  };
+  const scheduleHoverClose = () => {
+    cancelHoverClose();
+    hoverCloseTimer.current = setTimeout(() => {
+      setOpenGroups(new Set());
+    }, FLYOUT_HOVER_CLOSE_DELAY_MS);
+  };
+  const openGroupOnHover = (label: string) => {
+    cancelHoverClose();
+    setOpenGroups(new Set([label]));
+  };
+  React.useEffect(() => () => cancelHoverClose(), []);
+
+  // Flyout modes: the open group's panel renders `position: fixed` at a rect
+  // computed from its trigger button, so it escapes the nav's
+  // `overflow-y-auto` clipping instead of being cut off at the rail edge.
+  const navRef = React.useRef<HTMLElement | null>(null);
+  const flyoutRef = React.useRef<HTMLDivElement | null>(null);
+  const groupButtonRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
+  const [flyoutPos, setFlyoutPos] = React.useState<{ top: number; left: number } | null>(null);
+  const openGroupLabel = usesFlyout ? Array.from(openGroups)[0] : undefined;
+
+  React.useLayoutEffect(() => {
+    if (!openGroupLabel) {
+      setFlyoutPos(null);
+      return;
+    }
+    const btn = groupButtonRefs.current.get(openGroupLabel);
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    setFlyoutPos({ top: rect.top, left: rect.right + 4 });
+  }, [openGroupLabel]);
+
+  // Clamp the panel to the viewport once its real height is known — a group
+  // near the bottom of the rail would otherwise render partly (or fully)
+  // below the fold and be invisible.
+  React.useLayoutEffect(() => {
+    if (!flyoutPos || !flyoutRef.current) return;
+    const margin = 8;
+    const rect = flyoutRef.current.getBoundingClientRect();
+    const maxTop = Math.max(margin, window.innerHeight - rect.height - margin);
+    if (rect.top > maxTop) {
+      setFlyoutPos((prev) => (prev ? { ...prev, top: maxTop } : prev));
+    }
+  }, [flyoutPos]);
+
+  React.useEffect(() => {
+    if (!openGroupLabel) return;
+    const close = () => setOpenGroups(new Set());
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (navRef.current?.contains(target)) return;
+      if (flyoutRef.current?.contains(target)) return;
+      close();
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", close);
+    };
+  }, [openGroupLabel]);
+
+  const openGroupEntry = React.useMemo(() => {
+    if (!openGroupLabel) return undefined;
+    for (const section of NAV) {
+      for (const entry of section.items) {
+        if (isGroup(entry) && entry.label === openGroupLabel) return entry;
+      }
+    }
+    return undefined;
+  }, [openGroupLabel]);
+
   const { openTab } = useOpenTabs();
 
-  const renderLink = (item: NavLink, sub = false) => {
+  const renderLink = (item: NavLink, sub = false, inFlyout = false) => {
     const active = isActive(pathname, item.href);
     const onClick = (e: React.MouseEvent) => {
       // ⌘/Ctrl+click → open in a background tab (stay on the current page),
@@ -115,27 +227,30 @@ function SidebarBody({
         openTab(item.href, { background: true });
         return;
       }
+      setOpenGroups((prev) => (collapsed && prev.size ? new Set() : prev));
       onNavigate?.();
     };
+    const showLabel = inFlyout || !collapsed;
     return (
       <Link
         key={item.href}
         href={item.href}
         onClick={onClick}
         aria-current={active ? "page" : undefined}
-        title={collapsed ? `${item.label} — ⌘-click for a new tab` : undefined}
+        title={collapsed && !inFlyout ? `${item.label} — ⌘-click for a new tab` : undefined}
         className={cn(
-          "group/nav flex items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors",
+          "group/nav flex h-9 items-center rounded-md transition-colors",
+          collapsed && !inFlyout ? "w-9 justify-center px-0" : "gap-2.5 px-2",
           active
             ? "bg-sidebar-accent text-sidebar-foreground"
             : cn(
                 "hover:bg-sidebar-accent hover:text-sidebar-foreground",
-                sub ? "text-muted-foreground" : "text-sidebar-foreground",
+                sub && !inFlyout ? "text-muted-foreground" : "text-sidebar-foreground",
               ),
         )}
       >
-        <NavIcon icon={item.icon} active={active} color={item.color} plain={sub} />
-        {!collapsed && <span className="truncate">{item.label}</span>}
+        <NavIcon icon={item.icon} active={active} color={item.color} plain={sub && !inFlyout} />
+        {showLabel && <span className="truncate">{item.label}</span>}
       </Link>
     );
   };
@@ -147,9 +262,10 @@ function SidebarBody({
     const anyActive = entry.children.some((c) => isActive(pathname, c.href));
     const GroupIcon = entry.icon;
 
-    // Collapsed rail: show the PARENT icon with an expand chevron beside it;
-    // its children reveal inline (indented, smaller) when toggled open.
-    if (collapsed)
+    // Collapsed rail — inline mode: the icon plus a small corner chevron
+    // badge (not inline beside it, so it never overflows the icon's own box);
+    // children reveal indented underneath when toggled open.
+    if (collapsed && GROUP_MODE === "inline")
       return (
         <div key={entry.label} className="space-y-1">
           <button
@@ -158,16 +274,14 @@ function SidebarBody({
             aria-expanded={open}
             title={entry.label}
             className={cn(
-              "group/nav flex w-full items-center gap-0.5 rounded-md px-2 py-1.5 transition-colors",
-              anyActive
-                ? "text-sidebar-foreground"
-                : "hover:bg-sidebar-accent",
+              "group/nav relative flex size-9 items-center justify-center rounded-md transition-colors",
+              anyActive ? "text-sidebar-foreground" : "hover:bg-sidebar-accent",
             )}
           >
             <NavIcon icon={GroupIcon} active={anyActive} color={entry.color} />
             <ChevronRight
               className={cn(
-                "size-3 shrink-0 text-muted-foreground transition-transform",
+                "absolute right-0.5 top-1/2 size-2.5 shrink-0 -translate-y-1/2 text-muted-foreground transition-transform",
                 open && "rotate-90",
               )}
               aria-hidden="true"
@@ -181,6 +295,37 @@ function SidebarBody({
         </div>
       );
 
+    // Collapsed rail — flyout modes: the icon alone represents the group
+    // (matching the leaf icons around it, no overlapping chevron); opening
+    // its children panel (rendered separately, fixed-positioned) is either
+    // click- or hover-triggered depending on GROUP_MODE.
+    if (collapsed)
+      return (
+        <button
+          key={entry.label}
+          ref={(el) => {
+            if (el) groupButtonRefs.current.set(entry.label, el);
+            else groupButtonRefs.current.delete(entry.label);
+          }}
+          type="button"
+          onClick={() => toggleGroup(entry.label)}
+          onMouseEnter={
+            GROUP_MODE === "flyout-hover" ? () => openGroupOnHover(entry.label) : undefined
+          }
+          onMouseLeave={GROUP_MODE === "flyout-hover" ? scheduleHoverClose : undefined}
+          aria-expanded={open}
+          aria-haspopup="menu"
+          title={entry.label}
+          className={cn(
+            "group/nav flex size-9 items-center justify-center rounded-md transition-colors",
+            open && "bg-sidebar-accent",
+            anyActive ? "text-sidebar-foreground" : "hover:bg-sidebar-accent",
+          )}
+        >
+          <NavIcon icon={GroupIcon} active={anyActive} color={entry.color} />
+        </button>
+      );
+
     return (
       <div key={entry.label} className="space-y-1">
         <button
@@ -188,7 +333,7 @@ function SidebarBody({
           onClick={() => toggleGroup(entry.label)}
           aria-expanded={open}
           className={cn(
-            "group/nav flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors",
+            "group/nav flex h-9 w-full items-center gap-2.5 rounded-md px-2 transition-colors",
             anyActive
               ? "text-sidebar-foreground"
               : "text-sidebar-foreground hover:bg-sidebar-accent",
@@ -220,8 +365,8 @@ function SidebarBody({
         <button
           type="button"
           className={cn(
-            "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-sidebar-accent",
-            collapsed && "justify-center px-0",
+            "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-sidebar-accent",
+            collapsed ? "w-9 shrink-0 justify-center px-0" : "flex-1",
           )}
           aria-label="Switch workspace"
           title={collapsed ? "Vui Starter" : undefined}
@@ -241,17 +386,12 @@ function SidebarBody({
 
       {/* Quick actions — fixed above the scrolling nav, with a full-width
           divider and comfortable top/bottom padding. */}
-      <div
-        className={cn(
-          "border-b border-sidebar-border px-3 py-3",
-          collapsed && "flex justify-center",
-        )}
-      >
+      <div className="border-b border-sidebar-border px-3 py-3">
         <QuickActionsLauncher collapsed={collapsed} />
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 space-y-4 overflow-y-auto px-3 py-3">
+      <nav ref={navRef} className="flex-1 space-y-4 overflow-y-auto px-3 py-3">
         {NAV.map((section, index) => (
           <React.Fragment key={section.title ?? `section-${index}`}>
             {/* Collapsed group separator — a nav-level sibling so the nav's
@@ -274,6 +414,28 @@ function SidebarBody({
         ))}
       </nav>
 
+      {/* Collapsed-group flyout: fixed-positioned beside its trigger so it
+          escapes the nav's overflow-y-auto clipping instead of the old
+          inline-expand, which overflowed the rail and clipped the chevron. */}
+      {openGroupEntry && flyoutPos && (
+        <div
+          ref={flyoutRef}
+          style={{ top: flyoutPos.top, left: flyoutPos.left }}
+          onMouseEnter={GROUP_MODE === "flyout-hover" ? cancelHoverClose : undefined}
+          onMouseLeave={GROUP_MODE === "flyout-hover" ? scheduleHoverClose : undefined}
+          className="fixed z-50 min-w-44"
+        >
+          <MenuPanel
+            tabIndex={-1}
+            className="space-y-0.5 border-sidebar-border bg-sidebar p-1 shadow-lg"
+          >
+            <p className="truncate px-2 pb-1 pt-1 text-xs font-medium text-muted-foreground">
+              {openGroupEntry.label}
+            </p>
+            {openGroupEntry.children.map((child) => renderLink(child, false, true))}
+          </MenuPanel>
+        </div>
+      )}
     </>
   );
 }

package/template/app/_components/quick-actions.tsx

@@ -124,15 +124,17 @@ export function QuickActionsLauncher({ collapsed = false }: { collapsed?: boolea
       aria-label="Quick actions"
       title="Quick actions (⌘K)"
       className={cn(
-        "flex items-center gap-2 rounded-md border border-sidebar-border bg-background text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-foreground",
-        collapsed ? "size-9 justify-center px-0" : "w-full px-2.5 py-2",
+        "flex h-9 items-center gap-2 whitespace-nowrap rounded-md border border-sidebar-border bg-background text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-foreground",
+        collapsed ? "w-9 justify-center px-0" : "w-full px-2.5",
       )}
     >
       <LightningBoltIcon className="size-4 shrink-0 text-amber-500" aria-hidden="true" />
       {!collapsed && (
         <>
-          <span className="flex-1 text-left text-sm font-medium">Quick actions</span>
-          <Shortcut keys={["⌘", "K"]} />
+          <span className="min-w-0 flex-1 truncate text-left text-sm font-medium">
+            Quick actions
+          </span>
+          <Shortcut keys={["⌘", "K"]} className="shrink-0" />
         </>
       )}
     </button>

package/template/app/globals.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
 /* Shared VUI Starter design system (tokens, theme mapping, base reset).
    Package path (not a relative one) so it survives folder moves. */

package/template/{next.config.mjs → next.config.ts}

@@ -1,5 +1,6 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
   reactStrictMode: true,
   // VUI ships as TypeScript source — Next must transpile it.
   transpilePackages: ["@viliha/vui-ui"],