@viliha/vui-ui 1.5.2 → 1.5.4

package/AGENT.md

@@ -150,6 +150,35 @@ Import the theme once. No extra transpilation needed.
 
 ---
 
+# Upgrading
+
+When you bump `@viliha/vui-ui`, follow these steps — the package version and the
+scaffolded files in the repo are two separate things.
+
+1. **Read the [CHANGELOG](./CHANGELOG.md) for the target version.** Note anything
+   under *Removed*, *Changed*, or *Breaking*, and any new peer dependency. The
+   project follows semver: patch/minor are backward-compatible, major may break.
+2. **Bump and install** with the project's package manager:
+   ```bash
+   npm i @viliha/vui-ui@latest      # or: pnpm up, yarn up, bun update
+   ```
+   In a monorepo, install in the specific app (or with a workspace filter, e.g.
+   `pnpm --filter <app> up @viliha/vui-ui`), never at the repo root.
+3. **No rebuild needed.** The package ships TypeScript source, so there's no
+   build/dts step — just restart the dev server. If a new version adds a peer
+   dependency, install it (the CHANGELOG and the "Module not found" error name it).
+4. **Scaffolded files are yours.** `init` copies the shell and demo pages into
+   the repo once; upgrading the package does **not** touch them. To pull
+   scaffolder improvements into an existing project, preview first with
+   `npx @viliha/vui-ui@latest init --dry-run`, then re-run with `--force` (commit
+   or stash your work first so you can review the diff) or copy in just the files
+   you want.
+5. **Re-check token overrides.** If you overrode any `theme.css` tokens, confirm
+   they still line up after the upgrade.
+6. **Verify** before you commit: run type-check, lint, and build.
+
+---
+
 # Design Tokens
 
 VUI is entirely token-driven. Never hardcode colors, spacing, radius, typography, shadows, or borders — reach for the semantic design token instead. For example: `--button-primary`, `--button-primary-hover`, `--background`, `--foreground`, `--border`, `--ring`, `--chart-1`, `--sidebar-primary`.

package/CHANGELOG.md

@@ -0,0 +1,122 @@
+# Changelog
+
+All notable changes to `@viliha/vui-ui` are documented here. The format follows
+[Keep a Changelog](https://keepachangelog.com/), and the project uses
+[semantic versioning](https://semver.org/): **patch** for fixes, **minor** for
+backward-compatible features, **major** for breaking changes.
+
+To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
+
+## 1.5.4 — 2026-07-24
+
+### Added
+
+- `NEXT_PUBLIC_APP_NAME` env var (in the scaffold) renames the app — the sidebar,
+  wordmark, auth screens, and page titles now read from one place (`SITE.name`)
+  instead of a hard-coded "Vui Starter".
+
+### Fixed
+
+- `ChartContainer` no longer triggers Recharts' "width(0) and height(0) … should
+  be greater than 0" warning when it renders inside a hidden container (e.g. a
+  kept-alive inactive tab). It waits for a measured size before mounting the
+  `ResponsiveContainer`.
+
+## 1.5.3 — 2026-07-24
+
+### Added
+
+- The changelog and the **[Upgrading](./AGENT.md#upgrading)** guide now ship in
+  the npm package. (They were authored for 1.5.2 but missed that tarball, which
+  was published a moment before.)
+
+## 1.5.2 — 2026-07-24
+
+### Changed
+
+- **Turborepo guidance throughout.** `init`'s monorepo note now walks you through
+  `cd`-ing into the target app (e.g. `apps/web`), installing deps in that app (or
+  via a workspace filter), checking workspace globs, and running with a filter —
+  and states clearly that turbo mode does not auto-install.
+- **Fuller `AGENT.md`.** Added an "Inside a Turborepo / monorepo" section and
+  end-to-end walkthroughs for new-standalone, new-in-monorepo, and existing apps.
+
+## 1.5.1 — 2026-07-24
+
+### Changed
+
+- Rewrote the README and `AGENT.md` prose to a clearer, more natural voice. No
+  API changes.
+
+## 1.5.0 — 2026-07-24
+
+### Added
+
+- **`init` installs dependencies for you**, using the package manager it detects
+  from your lockfile (npm, pnpm, yarn, or bun). It prompts first; `--yes` skips
+  the prompt and `--no-install` opts out. This ends the "Module not found"
+  cascade from running `dev` before installing peers.
+
+## 1.4.3 — 2026-07-24
+
+### Fixed
+
+- The scaffolded `globals.css` no longer imports `tw-animate-css`, so the theme
+  is self-contained and needs no extra CSS dependency (VUI's own animations live
+  in `theme.css`).
+
+## 1.4.1 — 2026-07-24
+
+### Added
+
+- **Turborepo support in `init`** (`--turbo` + `--dir`) — scaffolds into a target
+  app directory.
+- A `tsconfig.json` in the scaffold (`@/*` → `./*`) so the shell's imports
+  resolve, and a TypeScript `next.config.ts` (so a fresh scaffold overwrites
+  create-next-app's config instead of leaving two).
+
+### Fixed
+
+- Scaffolding into a fresh Next.js app now works end to end.
+- Pinned a patched `postcss` (`^8.5.12`) via pnpm overrides to clear a
+  high-severity advisory (GHSA-6g55-p6wh-862q).
+
+> 1.4.1 shipped `next.config.mjs` and 1.4.2 was an interim republish; use **1.4.3
+> or later**, which ship `next.config.ts` and the self-contained theme.
+
+## 1.4.0 — 2026-07-24
+
+### Added
+
+- **`init` decision tree**: fresh vs. existing project, and pre-built (shell +
+  demo) vs. theme-only (`--fresh`/`--existing`, `--prebuilt`/`--theme-only`).
+
+## 1.3.0 — 2026-07-24
+
+### Added
+
+- **`RecordFormPanel`** — the standard Add/Edit/View slide-over as a standalone
+  export, for use outside a table (e.g. a Kanban board).
+- `RecordField` gains an `input` type (`number`/`date`) and renders a `Select`
+  for `options` fields in the Add/Edit form.
+
+## 1.2.0 — 2026-07-23
+
+### Added
+
+- **`npx @viliha/vui-ui init`** — a scaffolder that copies the app shell (layout,
+  sidebar, open tabs, command palette, nav config, logo) and demo pages into your
+  repo. Ships a `bin` and a bundled `template/` regenerated from the reference app
+  on publish.
+- Navigation & open-tabs documentation.
+
+## 1.1.8 — 2026-07-23
+
+### Fixed
+
+- The slide-over record form auto-sizes its width to the content, so long field
+  labels no longer wrap or overflow.
+
+## 1.1.7 — 2026-07-23
+
+Baseline release.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "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",
@@ -36,6 +36,7 @@
     "bin",
     "template",
     "AGENT.md",
+    "CHANGELOG.md",
     "CLAUDE.template.md"
   ],
   "bin": {

package/src/chart.tsx

@@ -35,18 +35,38 @@ export function ChartContainer({
     Object.entries(config).map(([key, v]) => [`--color-${key}`, v.color]),
   ) as React.CSSProperties;
 
+  // Only mount the ResponsiveContainer once the wrapper has a real size.
+  // Keep-alive tabs render inactive pages with `display:none` (0×0), which makes
+  // Recharts warn "width(0) and height(0) … should be greater than 0"; gating on
+  // an observed size avoids that and mounts the chart the moment the tab shows.
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [sized, setSized] = React.useState(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      const r = entry?.contentRect;
+      setSized(!!r && r.width > 0 && r.height > 0);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   return (
     <ChartConfigContext.Provider value={config}>
       <div
+        ref={ref}
         style={cssVars}
         className={cn(
           "aspect-video w-full text-xs [&_.recharts-cartesian-grid_line]:stroke-border/60 [&_.recharts-text]:fill-muted-foreground",
           className,
         )}
       >
-        <ResponsiveContainer width="100%" height="100%">
-          {children}
-        </ResponsiveContainer>
+        {sized && (
+          <ResponsiveContainer width="100%" height="100%">
+            {children}
+          </ResponsiveContainer>
+        )}
       </div>
     </ChartConfigContext.Provider>
   );

package/template/.env.example

@@ -2,6 +2,9 @@
 # All are optional; defaults are used when unset. NEXT_PUBLIC_ vars are read at
 # build time and inlined into the exported site.
 
+# App / brand name shown in the sidebar, wordmark, auth screens, and page titles.
+NEXT_PUBLIC_APP_NAME="Vui Starter"
+
 NEXT_PUBLIC_COMPANY_NAME="VILIHA PTE. LTD."
 # Optional — links the company name in the footer:
 NEXT_PUBLIC_COMPANY_URL="https://viliha.com"

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

@@ -13,6 +13,7 @@ import {
 } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 import { Menu as MenuPanel } from "@viliha/vui-ui/menu";
 import { Logo } from "./logo";
 import { QuickActionsLauncher } from "./quick-actions";
@@ -369,13 +370,13 @@ function SidebarBody({
             collapsed ? "w-9 shrink-0 justify-center px-0" : "flex-1",
           )}
           aria-label="Switch workspace"
-          title={collapsed ? "Vui Starter" : undefined}
+          title={collapsed ? SITE.name : undefined}
         >
           <Logo variant="mark" className="h-6 w-6 shrink-0" />
           {!collapsed && (
             <>
               <span className="min-w-0 flex-1 truncate text-lg font-bold tracking-tight text-foreground">
-                Vui Starter
+                {SITE.name}
               </span>
               <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
             </>

package/template/app/_components/logo.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 
 type LogoProps = {
   /** Kept for call-site compatibility; the mark is the same either way. */
@@ -32,7 +33,7 @@ export function Logo({ className }: LogoProps) {
     <svg
       viewBox="0 0 24 24"
       role="img"
-      aria-label="Vui Starter"
+      aria-label={SITE.name}
       className={cn("h-6 w-6", className)}
     >
       <rect width="24" height="24" rx="6" fill="var(--brand-indigo)" />

package/template/app/_components/wordmark.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 import { Logo } from "./logo";
 
 /**
@@ -29,14 +30,14 @@ export function Wordmark({
           textClassName,
         )}
       >
-        Vui Starter
+        {SITE.name}
       </span>
     </>
   );
   const classes = cn("flex items-center gap-2", className);
 
   return href ? (
-    <Link href={href} aria-label="Vui Starter" className={classes}>
+    <Link href={href} aria-label={SITE.name} className={classes}>
       {content}
     </Link>
   ) : (

package/template/lib/seo.ts

@@ -3,7 +3,9 @@ import type { Metadata } from "next";
 /** Single source of truth for site-wide SEO. Deployed as a static export to a
  * custom domain (see ../CNAME), so URLs are absolute against SITE.url. */
 export const SITE = {
-  name: "Vui Starter",
+  // App/brand name shown in the sidebar, wordmark, auth screens, and page
+  // titles. Override per deployment via env (NEXT_PUBLIC_ = inlined at build).
+  name: process.env.NEXT_PUBLIC_APP_NAME ?? "Vui Starter",
   tagline: "React Admin & CRM Design System",
   url: "https://vui.viliha.com",
   description: