tembro 4.0.0 → 4.0.1

package/dist/src/components/layout/workspace-layout.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({viewport:e=!0,className:n,...i}){return(0,r.jsx)(`div`,{"data-slot":`workspace-layout`,"data-viewport":e||void 0,className:t.cn(`flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground`,e&&`h-dvh overflow-hidden`,n),...i})}function a({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`workspace-content`,className:t.cn(`flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden`,e),...n})}function o({scrollable:e=!0,padded:n=!1,className:i,...a}){return(0,r.jsx)(`main`,{"data-slot":`workspace-main`,"data-scrollable":e||void 0,className:t.cn(`min-h-0 min-w-0 flex-1`,e&&`overflow-x-hidden overflow-y-auto overscroll-contain`,n&&`p-4 md:p-6`,i),...a})}exports.WorkspaceContent=a,exports.WorkspaceLayout=i,exports.WorkspaceMain=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({viewport:e=!0,className:n,...i}){return(0,r.jsx)(`div`,{"data-slot":`workspace-layout`,"data-viewport":e||void 0,className:t.cn(`flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground`,e&&`h-dvh max-h-dvh w-full overflow-hidden overscroll-none`,n),...i})}function a({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`workspace-content`,className:t.cn(`isolate flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden`,e),...n})}function o({scrollable:e=!0,padded:n=!1,className:i,...a}){return(0,r.jsx)(`main`,{"data-slot":`workspace-main`,"data-scrollable":e||void 0,className:t.cn(`min-h-0 min-w-0 flex-1`,e&&`overflow-x-hidden overflow-y-auto overscroll-contain [scrollbar-gutter:stable]`,n&&`p-4 md:p-6`,i),...a})}exports.WorkspaceContent=a,exports.WorkspaceLayout=i,exports.WorkspaceMain=o;

package/dist/src/components/layout/workspace-layout.js

@@ -6,14 +6,14 @@ function n({ viewport: n = !0, className: r, ...i }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "workspace-layout",
 		"data-viewport": n || void 0,
-		className: e("flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground", n && "h-dvh overflow-hidden", r),
+		className: e("flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground", n && "h-dvh max-h-dvh w-full overflow-hidden overscroll-none", r),
 		...i
 	});
 }
 function r({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "workspace-content",
-		className: e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", n),
+		className: e("isolate flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", n),
 		...r
 	});
 }
@@ -21,7 +21,7 @@ function i({ scrollable: n = !0, padded: r = !1, className: i, ...a }) {
 	return /* @__PURE__ */ t("main", {
 		"data-slot": "workspace-main",
 		"data-scrollable": n || void 0,
-		className: e("min-h-0 min-w-0 flex-1", n && "overflow-x-hidden overflow-y-auto overscroll-contain", r && "p-4 md:p-6", i),
+		className: e("min-h-0 min-w-0 flex-1", n && "overflow-x-hidden overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", r && "p-4 md:p-6", i),
 		...a
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tembro",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Reusable React UI kit with dashboard-ready components, CLI registry helpers, and TypeScript support.",
   "keywords": [
     "react",

package/packages/cli/dist/index.cjs

@@ -2002,4 +2002,4 @@ ${t}`),i.forEach(o=>{let n=R[o],s=nr(o),a=jo(o,n.category),c=n.registryDependenc
 ${s}`),a.sort().forEach(c=>{let d=R[c],l=nr(c),u=jo(c,d.category),h=d.registryDependencies?.length?` -> ${d.registryDependencies.join(", ")}`:"";console.log(`  ${c} [${l}/${u}]${h}`);});console.log(`
 Status:`),console.log("  stable = safe public API"),console.log("  preview = usable but API may change"),console.log("  experimental = not ready for stable app contracts"),console.log("  internal = helper metadata"),console.log(`
 Distribution:`),console.log("  foundation = small runtime-safe primitives, hooks, and helpers"),console.log("  source-copy = copy into app source with init/add and edit locally"),console.log("  system = larger product surfaces and patterns; prefer source-copy only"),console.log(`
-Usage:`),console.log(`  ${re("add button input data-table")}`),console.log(`  ${re("add form --overwrite")}`),console.log(`  ${re("list --category data-table")}`),console.log(`  ${re("list --json")}`);}var mt=be(qe());function Ja(t){try{return mt.default.readJsonSync(t)}catch{return null}}function nw(t){try{return mt.default.readFileSync(t,"utf8")}catch{return null}}function FP(t,e){return e?L__default.default.resolve(t,e):null}function sw(t){let e=t.paths?.components??t.componentsPath??"src/components",r=t.paths?.ui??t.componentsPath??L__default.default.join(e,"ui"),i=t.paths?.lib??L__default.default.dirname(t.utilsPath??"src/lib/utils.ts"),o=t.paths?.hooks??"src/hooks",n=t.utilsPath??L__default.default.join(i,"utils.ts");return {componentsRoot:e,uiPath:r,libPath:i,hooksPath:o,utilsPath:n}}function jP(t,e){let r=sw(e);return t.replace("{components}",r.componentsRoot).replace("{ui}",r.uiPath).replace("{hooks}",r.hooksPath).replace("{lib}",r.libPath).replace("{utils}",r.utilsPath)}function iw(t,e){return ["tsconfig.app.json","tsconfig.json"].map(i=>L__default.default.join(t,i)).some(i=>!!Ja(i)?.compilerOptions?.paths?.[`${e}/*`])}function ow(t,e){return ["vite.config.ts","vite.config.js","vite.config.mjs"].map(i=>L__default.default.join(t,i)).some(i=>{let o=nw(i);return !!(o?.includes(`"${e}"`)||o?.includes(`'${e}'`))})}function aw(t,e){let r=Ja(L__default.default.join(t,"package.json")),i=new Set([...Object.keys(r?.dependencies??{}),...Object.keys(r?.devDependencies??{})]);return e.filter(o=>!i.has(o))}function Ya(t,e){return (t.files??[]).map(r=>({source:r.source,target:jP(r.target,e)}))}function NP(t,e){return At.map(r=>R[r]).filter(r=>r.category!=="lib").filter(r=>!r.migrationAliasFor).filter(r=>r.files?.length).filter(r=>Ya(r,e).some(i=>mt.default.existsSync(L__default.default.join(t,i.target))))}function qP(t,e){let r=NP(t,e),i=[],o=[],n=new Set;for(let s of r){for(let a of Ya(s,e))mt.default.existsSync(L__default.default.join(t,a.target))||i.push(`${s.name}: ${a.target}`);for(let a of s.registryDependencies??[]){let c=R[a];if(!c?.files?.length)continue;Ya(c,e).some(l=>mt.default.existsSync(L__default.default.join(t,l.target)))||o.push(`${s.name} -> ${a}`);}for(let a of s.dependencies??[])n.add(a);}return {copiedItems:r,missingFiles:i,missingRegistryDependencies:o,missingPackages:aw(t,Array.from(n).sort())}}function Ze(t,e){t.push(e);}function LP(t){return t?t.includes("/* tembro:start */")||t.includes("--aui-")||t.includes("--az-"):false}function cw(t={}){let e=process.cwd(),r=[],i=L__default.default.join(e,"package.json"),o=L__default.default.join(e,"tembro.json"),n=mt.default.existsSync(i),s=Ja(o);if(Ze(r,{name:"package.json",status:n?"pass":"fail",message:n?"package.json topildi.":"package.json topilmadi. Commandni React, Vite yoki Next project ichida ishlating."}),Ze(r,{name:"tembro.json",status:s?"pass":"fail",message:s?"tembro.json topildi.":`tembro.json topilmadi. Avval ${re("init")} ishlating.`}),s){let d=s.alias??"@",{componentsRoot:l,uiPath:u,libPath:h,hooksPath:p}=sw(s),f=s.cssPath??"src/index.css",b=[["components",l],["ui",u],["lib",h],["hooks",p]].filter(([,C])=>{let M=FP(e,C);return !M||!mt.default.existsSync(M)});Ze(r,{name:"paths",status:b.length?"warn":"pass",message:b.length?`Yetishmayotgan pathlar: ${b.map(([C,M])=>`${C}=${M}`).join(", ")}`:"Configured source paths mavjud."}),Ze(r,{name:"alias",status:iw(e,d)||ow(e,d)?"pass":"warn",message:iw(e,d)||ow(e,d)?`${d} alias tsconfig yoki vite configda topildi.`:`${d} alias topilmadi. Import pathlar ishlamasligi mumkin.`});let y=nw(L__default.default.join(e,f)),w=LP(y);Ze(r,{name:"theme-css",status:w?"pass":"warn",message:w?`${f} ichida Tembro tokenlari bor.`:`${f} ichida Tembro tokenlari topilmadi. ${re(`theme ${f}`)} ishlating.`});let S=qP(e,s);Ze(r,{name:"component-files",status:S.missingFiles.length?"warn":"pass",message:S.missingFiles.length?`Yetishmayotgan component fayllari: ${S.missingFiles.slice(0,8).join(", ")}${S.missingFiles.length>8?` (+${S.missingFiles.length-8})`:""}`:`${S.copiedItems.length} ta copied component file set tekshirildi.`}),Ze(r,{name:"registry-dependencies",status:S.missingRegistryDependencies.length?"warn":"pass",message:S.missingRegistryDependencies.length?`Yetishmayotgan registry dependencylar: ${S.missingRegistryDependencies.slice(0,8).join(", ")}${S.missingRegistryDependencies.length>8?` (+${S.missingRegistryDependencies.length-8})`:""}`:"Copied componentlar uchun registry dependencylar joyida."}),Ze(r,{name:"component-dependencies",status:S.missingPackages.length?"warn":"pass",message:S.missingPackages.length?`Copied componentlar uchun yetishmayotgan package dependencylar: ${S.missingPackages.join(", ")}`:"Copied component package dependencylari package.json ichida bor."});}if(n){let d=aw(e,["@fontsource-variable/geist","clsx","tailwind-merge","tw-animate-css"]);Ze(r,{name:"base-dependencies",status:d.length?"warn":"pass",message:d.length?`Yetishmayotgan dependencylar: ${d.join(", ")}`:"Base dependencylar package.json ichida bor."});}let a=r.filter(d=>d.status==="fail"),c=r.filter(d=>d.status==="warn");if(t.json){console.log(JSON.stringify({ok:a.length===0,checks:r},null,2));return}for(let d of r){let l=`${d.status.toUpperCase()} ${d.name}: ${d.message}`;d.status==="pass"&&x.success(l),d.status==="warn"&&x.warn(l),d.status==="fail"&&x.error(l);}if(a.length&&(x.error(`Doctor failed: ${a.length} fail, ${c.length} warn.`),process.exit(1)),c.length){x.warn(`Doctor completed with ${c.length} warning.`);return}x.success("Doctor passed. Project Tembro setup looks ready.");}var Ka=be(qe());async function lw(t){let e=process.cwd(),r=L__default.default.join(e,"tembro.json"),i=Ka.default.existsSync(r)?await Ka.default.readJson(r):{},o=t??i.cssPath??i.globalCssPath??"src/index.css",n=i.paths?.components??i.componentsPath??"src/components",s=await Mo({cwd:e,cssPath:o,componentsPath:n});x.success(`Tembro theme CSS yangilandi: ${s}`);}var dw={minimal:["button","input","card","badge"],dashboard:["button","input","card","badge","dropdown-menu","skeleton","tabs","page-state","filter-bar","description-list","info-card","data-table"]};async function uw(t,e={}){let r=dw[t];r||(x.error(`Preset topilmadi: ${t}`),process.exit(1)),await Dt(r,e);}var Qe=new $t;Qe.name("tembro").description("Tembro source-copy CLI").version("4.0.0");Qe.command("init").description("Initialize local Tembro source files in your project").option("--template <template>","Project defaults: vite or next").option("--skip-install","Do not install base dependencies").option("--showcase","Add every component and write a local Tembro workbench").option("-y, --defaults","Use template defaults without interactive prompts").action(Ky);Qe.command("preset").description("Add a source-copy preset to your project").argument("<name>","preset name: minimal or dashboard").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(uw);Qe.command("list").description("List available registry components").option("--category <category>","Filter by registry category").option("--status <status>","Filter by status: stable, preview, experimental, internal").option("--json","Print machine-readable JSON").action(rw);Qe.command("doctor").description("Check local project setup for Tembro source-copy usage").option("--json","Print machine-readable JSON").action(cw);Qe.command("add").description("Copy component source files into your project").argument("[components...]","components to add").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--plan","print machine-readable copy plan without writing").option("--skip-install","do not install package dependencies").action(Dt);Qe.command("showcase").description("Add every component and write a local Tembro workbench").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(t=>Dt(["showcase"],t));Qe.command("theme").description("Write or update Tembro theme CSS in your global CSS file").argument("[cssPath]","global CSS path, default from tembro.json or src/index.css").action(lw);Qe.parse();
+Usage:`),console.log(`  ${re("add button input data-table")}`),console.log(`  ${re("add form --overwrite")}`),console.log(`  ${re("list --category data-table")}`),console.log(`  ${re("list --json")}`);}var mt=be(qe());function Ja(t){try{return mt.default.readJsonSync(t)}catch{return null}}function nw(t){try{return mt.default.readFileSync(t,"utf8")}catch{return null}}function FP(t,e){return e?L__default.default.resolve(t,e):null}function sw(t){let e=t.paths?.components??t.componentsPath??"src/components",r=t.paths?.ui??t.componentsPath??L__default.default.join(e,"ui"),i=t.paths?.lib??L__default.default.dirname(t.utilsPath??"src/lib/utils.ts"),o=t.paths?.hooks??"src/hooks",n=t.utilsPath??L__default.default.join(i,"utils.ts");return {componentsRoot:e,uiPath:r,libPath:i,hooksPath:o,utilsPath:n}}function jP(t,e){let r=sw(e);return t.replace("{components}",r.componentsRoot).replace("{ui}",r.uiPath).replace("{hooks}",r.hooksPath).replace("{lib}",r.libPath).replace("{utils}",r.utilsPath)}function iw(t,e){return ["tsconfig.app.json","tsconfig.json"].map(i=>L__default.default.join(t,i)).some(i=>!!Ja(i)?.compilerOptions?.paths?.[`${e}/*`])}function ow(t,e){return ["vite.config.ts","vite.config.js","vite.config.mjs"].map(i=>L__default.default.join(t,i)).some(i=>{let o=nw(i);return !!(o?.includes(`"${e}"`)||o?.includes(`'${e}'`))})}function aw(t,e){let r=Ja(L__default.default.join(t,"package.json")),i=new Set([...Object.keys(r?.dependencies??{}),...Object.keys(r?.devDependencies??{})]);return e.filter(o=>!i.has(o))}function Ya(t,e){return (t.files??[]).map(r=>({source:r.source,target:jP(r.target,e)}))}function NP(t,e){return At.map(r=>R[r]).filter(r=>r.category!=="lib").filter(r=>!r.migrationAliasFor).filter(r=>r.files?.length).filter(r=>Ya(r,e).some(i=>mt.default.existsSync(L__default.default.join(t,i.target))))}function qP(t,e){let r=NP(t,e),i=[],o=[],n=new Set;for(let s of r){for(let a of Ya(s,e))mt.default.existsSync(L__default.default.join(t,a.target))||i.push(`${s.name}: ${a.target}`);for(let a of s.registryDependencies??[]){let c=R[a];if(!c?.files?.length)continue;Ya(c,e).some(l=>mt.default.existsSync(L__default.default.join(t,l.target)))||o.push(`${s.name} -> ${a}`);}for(let a of s.dependencies??[])n.add(a);}return {copiedItems:r,missingFiles:i,missingRegistryDependencies:o,missingPackages:aw(t,Array.from(n).sort())}}function Ze(t,e){t.push(e);}function LP(t){return t?t.includes("/* tembro:start */")||t.includes("--aui-")||t.includes("--az-"):false}function cw(t={}){let e=process.cwd(),r=[],i=L__default.default.join(e,"package.json"),o=L__default.default.join(e,"tembro.json"),n=mt.default.existsSync(i),s=Ja(o);if(Ze(r,{name:"package.json",status:n?"pass":"fail",message:n?"package.json topildi.":"package.json topilmadi. Commandni React, Vite yoki Next project ichida ishlating."}),Ze(r,{name:"tembro.json",status:s?"pass":"fail",message:s?"tembro.json topildi.":`tembro.json topilmadi. Avval ${re("init")} ishlating.`}),s){let d=s.alias??"@",{componentsRoot:l,uiPath:u,libPath:h,hooksPath:p}=sw(s),f=s.cssPath??"src/index.css",b=[["components",l],["ui",u],["lib",h],["hooks",p]].filter(([,C])=>{let M=FP(e,C);return !M||!mt.default.existsSync(M)});Ze(r,{name:"paths",status:b.length?"warn":"pass",message:b.length?`Yetishmayotgan pathlar: ${b.map(([C,M])=>`${C}=${M}`).join(", ")}`:"Configured source paths mavjud."}),Ze(r,{name:"alias",status:iw(e,d)||ow(e,d)?"pass":"warn",message:iw(e,d)||ow(e,d)?`${d} alias tsconfig yoki vite configda topildi.`:`${d} alias topilmadi. Import pathlar ishlamasligi mumkin.`});let y=nw(L__default.default.join(e,f)),w=LP(y);Ze(r,{name:"theme-css",status:w?"pass":"warn",message:w?`${f} ichida Tembro tokenlari bor.`:`${f} ichida Tembro tokenlari topilmadi. ${re(`theme ${f}`)} ishlating.`});let S=qP(e,s);Ze(r,{name:"component-files",status:S.missingFiles.length?"warn":"pass",message:S.missingFiles.length?`Yetishmayotgan component fayllari: ${S.missingFiles.slice(0,8).join(", ")}${S.missingFiles.length>8?` (+${S.missingFiles.length-8})`:""}`:`${S.copiedItems.length} ta copied component file set tekshirildi.`}),Ze(r,{name:"registry-dependencies",status:S.missingRegistryDependencies.length?"warn":"pass",message:S.missingRegistryDependencies.length?`Yetishmayotgan registry dependencylar: ${S.missingRegistryDependencies.slice(0,8).join(", ")}${S.missingRegistryDependencies.length>8?` (+${S.missingRegistryDependencies.length-8})`:""}`:"Copied componentlar uchun registry dependencylar joyida."}),Ze(r,{name:"component-dependencies",status:S.missingPackages.length?"warn":"pass",message:S.missingPackages.length?`Copied componentlar uchun yetishmayotgan package dependencylar: ${S.missingPackages.join(", ")}`:"Copied component package dependencylari package.json ichida bor."});}if(n){let d=aw(e,["@fontsource-variable/geist","clsx","tailwind-merge","tw-animate-css"]);Ze(r,{name:"base-dependencies",status:d.length?"warn":"pass",message:d.length?`Yetishmayotgan dependencylar: ${d.join(", ")}`:"Base dependencylar package.json ichida bor."});}let a=r.filter(d=>d.status==="fail"),c=r.filter(d=>d.status==="warn");if(t.json){console.log(JSON.stringify({ok:a.length===0,checks:r},null,2));return}for(let d of r){let l=`${d.status.toUpperCase()} ${d.name}: ${d.message}`;d.status==="pass"&&x.success(l),d.status==="warn"&&x.warn(l),d.status==="fail"&&x.error(l);}if(a.length&&(x.error(`Doctor failed: ${a.length} fail, ${c.length} warn.`),process.exit(1)),c.length){x.warn(`Doctor completed with ${c.length} warning.`);return}x.success("Doctor passed. Project Tembro setup looks ready.");}var Ka=be(qe());async function lw(t){let e=process.cwd(),r=L__default.default.join(e,"tembro.json"),i=Ka.default.existsSync(r)?await Ka.default.readJson(r):{},o=t??i.cssPath??i.globalCssPath??"src/index.css",n=i.paths?.components??i.componentsPath??"src/components",s=await Mo({cwd:e,cssPath:o,componentsPath:n});x.success(`Tembro theme CSS yangilandi: ${s}`);}var dw={minimal:["button","input","card","badge"],dashboard:["button","input","card","badge","dropdown-menu","skeleton","tabs","page-state","filter-bar","description-list","info-card","data-table"]};async function uw(t,e={}){let r=dw[t];r||(x.error(`Preset topilmadi: ${t}`),process.exit(1)),await Dt(r,e);}var Qe=new $t;Qe.name("tembro").description("Tembro source-copy CLI").version("4.0.1");Qe.command("init").description("Initialize local Tembro source files in your project").option("--template <template>","Project defaults: vite or next").option("--skip-install","Do not install base dependencies").option("--showcase","Add every component and write a local Tembro workbench").option("-y, --defaults","Use template defaults without interactive prompts").action(Ky);Qe.command("preset").description("Add a source-copy preset to your project").argument("<name>","preset name: minimal or dashboard").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(uw);Qe.command("list").description("List available registry components").option("--category <category>","Filter by registry category").option("--status <status>","Filter by status: stable, preview, experimental, internal").option("--json","Print machine-readable JSON").action(rw);Qe.command("doctor").description("Check local project setup for Tembro source-copy usage").option("--json","Print machine-readable JSON").action(cw);Qe.command("add").description("Copy component source files into your project").argument("[components...]","components to add").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--plan","print machine-readable copy plan without writing").option("--skip-install","do not install package dependencies").action(Dt);Qe.command("showcase").description("Add every component and write a local Tembro workbench").option("-o, --overwrite","overwrite existing files").option("--dry-run","show files without writing").option("--skip-install","do not install package dependencies").action(t=>Dt(["showcase"],t));Qe.command("theme").description("Write or update Tembro theme CSS in your global CSS file").argument("[cssPath]","global CSS path, default from tembro.json or src/index.css").action(lw);Qe.parse();

package/packages/cli/vendor/src/components/charts/charts.tsx

@@ -36,6 +36,8 @@ export type ChartSeries = {
   color?: string
 }
 
+export type ChartCurve = "linear" | "monotone" | "natural" | "step"
+
 export type ChartAxisLabel = string | number | React.ReactNode
 export type ChartSize = "sm" | "md" | "lg"
 export type ChartState = "ready" | "loading" | "empty"
@@ -77,6 +79,18 @@ function ChartDataTable({ data, valueFormatter, caption }: { data: ChartDatum[];
   )
 }
 
+function ChartSeriesDataTable({ labels, series, valueFormatter, caption }: { labels: ChartAxisLabel[]; series: ChartSeries[]; valueFormatter?: (value: number) => React.ReactNode; caption: string }) {
+  return (
+    <div className="sr-only">
+      <table>
+        <caption>{caption}</caption>
+        <thead><tr><th scope="col">Label</th>{series.map((item) => <th scope="col" key={item.key}>{item.label}</th>)}</tr></thead>
+        <tbody>{labels.map((label, index) => <tr key={index}><th scope="row">{label}</th>{series.map((item) => <td key={item.key}>{formatChartValue(item.data[index] ?? 0, valueFormatter)}</td>)}</tr>)}</tbody>
+      </table>
+    </div>
+  )
+}
+
 export type ChartTooltipContentProps = {
   active?: boolean
   label?: React.ReactNode
@@ -129,7 +143,8 @@ function ChartFrame({ title, description, action, state = "ready", emptyLabel =
 }
 
 export type BarChartProps = React.ComponentProps<"div"> & {
-  data: ChartDatum[]
+  data?: ChartDatum[]
+  series?: ChartSeries[]
   size?: ChartSize
   max?: number
   showLabels?: boolean
@@ -142,13 +157,23 @@ export type BarChartProps = React.ComponentProps<"div"> & {
   barClassName?: string
   domain?: ChartDomain
   ariaLabel?: string
+  stacked?: boolean
+  showLegend?: boolean
+  barRadius?: number
 }
 
-function BarChart({ data, size = "md", max, showLabels = true, showValues = false, showGrid = true, showTooltip = true, valueFormatter, state = "ready", emptyLabel = "No chart data.", barClassName, domain, ariaLabel = "Bar chart", className, ...props }: BarChartProps) {
+function BarChart({ data = [], series, size = "md", max, showLabels = true, showValues = false, showGrid = true, showTooltip = true, valueFormatter, state = "ready", emptyLabel = "No chart data.", barClassName, domain, ariaLabel = "Bar chart", stacked = false, showLegend = Boolean(series?.length), barRadius = 6, className, ...props }: BarChartProps) {
   const height = chartHeightBySize[size]
-  const status = state === "ready" && data.length === 0 ? "empty" : state
+  const activeSeries = series?.length ? series : [{ key: "value", label: "Value", data: data.map((item) => item.value) }]
+  const itemCount = Math.max(data.length, ...activeSeries.map((item) => item.data.length))
+  const status = state === "ready" && itemCount === 0 ? "empty" : state
   if (status !== "ready") return <ChartStatus state={status} emptyLabel={emptyLabel} height={height} />
-  const chartData = data.map((item, index) => ({ name: toText(item.label, `Item ${index + 1}`), value: item.value, fill: getChartColor(index, item.color), originalLabel: item.label, description: item.description }))
+  const labels = Array.from({ length: itemCount }, (_, index) => data[index]?.label ?? `Item ${index + 1}`)
+  const chartData = labels.map((label, index) => Object.fromEntries([
+    ["name", toText(label, `Item ${index + 1}`)],
+    ["originalLabel", label],
+    ...activeSeries.map((item) => [item.key, item.data[index] ?? 0]),
+  ]))
   const resolvedDomain: ChartDomain = domain ?? (max !== undefined ? ["auto", max] : ["auto", "auto"])
 
   return (
@@ -160,19 +185,23 @@ function BarChart({ data, size = "md", max, showLabels = true, showValues = fals
             <XAxis dataKey="name" hide={!showLabels} axisLine={false} tickLine={false} tick={{ fill: "var(--muted-foreground)", fontSize: 12 }} interval="preserveStartEnd" />
             <YAxis hide domain={resolvedDomain} />
             {showTooltip ? <RechartsTooltip cursor={{ fill: "var(--muted)", opacity: 0.35 }} content={<ChartTooltipContent valueFormatter={valueFormatter} />} /> : null}
-            <Bar dataKey="value" name="Value" radius={[6, 6, 2, 2]} className={barClassName} isAnimationActive={false} label={showValues ? { position: "top", fill: "var(--muted-foreground)", fontSize: 11, formatter: (value: unknown) => String(formatChartValue(Number(value), valueFormatter)) } : false}>
-              {chartData.map((item) => <Cell key={item.name} fill={item.fill} />)}
-            </Bar>
+            {activeSeries.map((item, seriesIndex) => (
+              <Bar key={item.key} dataKey={item.key} name={toText(item.label, item.key)} fill={getChartColor(seriesIndex, item.color)} stackId={stacked ? "total" : undefined} radius={[barRadius, barRadius, 2, 2]} className={barClassName} isAnimationActive={false} label={showValues && (!stacked || seriesIndex === activeSeries.length - 1) ? { position: "top", fill: "var(--muted-foreground)", fontSize: 11, formatter: (value: unknown) => String(formatChartValue(Number(value), valueFormatter)) } : false}>
+                {!series?.length ? data.map((datum, index) => <Cell key={index} fill={getChartColor(index, datum.color)} />) : null}
+              </Bar>
+            ))}
           </RechartsBarChart>
         </ResponsiveContainer>
       </div>
-      <ChartDataTable data={data} valueFormatter={valueFormatter} caption={ariaLabel} />
+      {showLegend && activeSeries.length > 1 ? <ChartLegend className="mt-3" data={activeSeries.map((item, index) => ({ label: item.label, value: 0, color: getChartColor(index, item.color) }))} /> : null}
+      {series?.length ? <ChartSeriesDataTable labels={labels} series={activeSeries} valueFormatter={valueFormatter} caption={ariaLabel} /> : <ChartDataTable data={data} valueFormatter={valueFormatter} caption={ariaLabel} />}
     </div>
   )
 }
 
 export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
-  values: number[]
+  values?: number[]
+  series?: ChartSeries[]
   size?: ChartSize
   width?: number
   height?: number
@@ -187,13 +216,22 @@ export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
   emptyLabel?: React.ReactNode
   domain?: ChartDomain
   ariaLabel?: string
+  curve?: ChartCurve
+  showDots?: boolean
+  showLegend?: boolean
+  gradient?: boolean
+  strokeWidth?: number
 }
 
-function LineChart({ values, size = "md", width = 560, height: heightProp, showArea = false, showGrid = true, showAxis = false, showTooltip = true, labels, valueFormatter, stroke = "var(--primary)", state = "ready", emptyLabel = "No line data.", domain = ["auto", "auto"], ariaLabel = showArea ? "Area chart" : "Line chart", className, style, ...props }: LineChartProps) {
+function LineChart({ values = [], series, size = "md", width = 560, height: heightProp, showArea = false, showGrid = true, showAxis = false, showTooltip = true, labels, valueFormatter, stroke = "var(--primary)", state = "ready", emptyLabel = "No line data.", domain = ["auto", "auto"], ariaLabel = showArea ? "Area chart" : "Line chart", curve = "monotone", showDots = !showArea, showLegend = Boolean(series?.length), gradient = showArea, strokeWidth = 2.5, className, style, ...props }: LineChartProps) {
   const height = heightProp ?? chartHeightBySize[size]
-  const status = state === "ready" && values.length === 0 ? "empty" : state
+  const gradientId = React.useId().replace(/:/g, "")
+  const activeSeries = series?.length ? series : [{ key: "value", label: "Value", data: values, color: stroke }]
+  const itemCount = Math.max(...activeSeries.map((item) => item.data.length), 0)
+  const status = state === "ready" && itemCount === 0 ? "empty" : state
   if (status !== "ready") return <ChartStatus state={status} emptyLabel={emptyLabel} height={height} />
-  const data = values.map((value, index) => ({ name: toText(labels?.[index], String(index + 1)), value, originalLabel: labels?.[index] ?? String(index + 1) }))
+  const resolvedLabels = Array.from({ length: itemCount }, (_, index) => labels?.[index] ?? String(index + 1))
+  const data = resolvedLabels.map((label, index) => Object.fromEntries([["name", toText(label, String(index + 1))], ["originalLabel", label], ...activeSeries.map((item) => [item.key, item.data[index] ?? 0])]))
   const Engine = showArea ? RechartsAreaChart : RechartsLineChart
 
   return (
@@ -201,22 +239,24 @@ function LineChart({ values, size = "md", width = 560, height: heightProp, showA
       <div style={{ height }}>
         <ResponsiveContainer width="100%" height="100%" minWidth={1} minHeight={1}>
           <Engine data={data} margin={{ top: 10, right: 10, bottom: showAxis ? 8 : 0, left: showAxis ? -12 : 0 }}>
+            {showArea && gradient ? <defs>{activeSeries.map((item, index) => { const color = getChartColor(index, item.color); return <linearGradient key={item.key} id={`${gradientId}-${item.key}`} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity={0.34} /><stop offset="92%" stopColor={color} stopOpacity={0.02} /></linearGradient> })}</defs> : null}
             {showGrid ? <CartesianGrid vertical={false} stroke="var(--border)" strokeDasharray="4 6" /> : null}
             <XAxis dataKey="name" hide={!showAxis} axisLine={false} tickLine={false} tick={{ fill: "var(--muted-foreground)", fontSize: 12 }} interval="preserveStartEnd" />
             <YAxis hide={!showAxis} domain={domain} axisLine={false} tickLine={false} width={44} tick={{ fill: "var(--muted-foreground)", fontSize: 11 }} />
             {showTooltip ? <RechartsTooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} /> : null}
-            {showArea ? <Area type="monotone" dataKey="value" name="Value" stroke={stroke} strokeWidth={2.5} fill={stroke} fillOpacity={0.14} activeDot={{ r: 5 }} isAnimationActive={false} /> : <Line type="monotone" dataKey="value" name="Value" stroke={stroke} strokeWidth={2.5} dot={{ r: 3.5, fill: stroke }} activeDot={{ r: 5 }} isAnimationActive={false} />}
+            {activeSeries.map((item, index) => { const color = getChartColor(index, item.color); return showArea ? <Area key={item.key} type={curve} dataKey={item.key} name={toText(item.label, item.key)} stroke={color} strokeWidth={strokeWidth} fill={gradient ? `url(#${gradientId}-${item.key})` : color} fillOpacity={gradient ? 1 : 0.12} dot={showDots ? { r: 3, fill: color, strokeWidth: 2, stroke: "var(--background)" } : false} activeDot={{ r: 5, strokeWidth: 2, stroke: "var(--background)" }} isAnimationActive={false} /> : <Line key={item.key} type={curve} dataKey={item.key} name={toText(item.label, item.key)} stroke={color} strokeWidth={strokeWidth} dot={showDots ? { r: 3, fill: color, strokeWidth: 2, stroke: "var(--background)" } : false} activeDot={{ r: 5, strokeWidth: 2, stroke: "var(--background)" }} isAnimationActive={false} /> })}
           </Engine>
         </ResponsiveContainer>
       </div>
-      <ChartDataTable data={values.map((value, index) => ({ label: labels?.[index] ?? index + 1, value }))} valueFormatter={valueFormatter} caption={ariaLabel} />
+      {showLegend && activeSeries.length > 1 ? <ChartLegend className="mt-3" data={activeSeries.map((item, index) => ({ label: item.label, value: 0, color: getChartColor(index, item.color) }))} /> : null}
+      <ChartSeriesDataTable labels={resolvedLabels} series={activeSeries} valueFormatter={valueFormatter} caption={ariaLabel} />
     </div>
   )
 }
 
 function AreaChart(props: Omit<LineChartProps, "showArea">) { return <LineChart showArea {...props} /> }
 
-export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis"> & { values: number[]; positive?: boolean }
+export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis" | "series" | "showLegend"> & { values: number[]; positive?: boolean }
 
 function Sparkline({ values, positive = true, stroke, className, showTooltip = false, ...props }: SparklineProps) {
   return <LineChart values={values} size="sm" stroke={stroke ?? (positive ? "var(--aui-success,var(--primary))" : "var(--destructive)")} showGrid={false} showAxis={false} showTooltip={showTooltip} className={cn("max-w-44", className)} ariaLabel="Sparkline" {...props} />

package/packages/cli/vendor/src/components/layout/workspace-layout.tsx

@@ -13,7 +13,7 @@ function WorkspaceLayout({ viewport = true, className, ...props }: WorkspaceLayo
       data-viewport={viewport || undefined}
       className={cn(
         "flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground",
-        viewport && "h-dvh overflow-hidden",
+        viewport && "h-dvh max-h-dvh w-full overflow-hidden overscroll-none",
         className
       )}
       {...props}
@@ -27,7 +27,7 @@ function WorkspaceContent({ className, ...props }: WorkspaceContentProps) {
   return (
     <div
       data-slot="workspace-content"
-      className={cn("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}
+      className={cn("isolate flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}
       {...props}
     />
   )
@@ -45,7 +45,7 @@ function WorkspaceMain({ scrollable = true, padded = false, className, ...props
       data-scrollable={scrollable || undefined}
       className={cn(
         "min-h-0 min-w-0 flex-1",
-        scrollable && "overflow-x-hidden overflow-y-auto overscroll-contain",
+        scrollable && "overflow-x-hidden overflow-y-auto overscroll-contain [scrollbar-gutter:stable]",
         padded && "p-4 md:p-6",
         className
       )}

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@4.0.0 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@4.0.1 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@4.0.0" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@4.0.1" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@4.0.0",
+          label: "tembro@4.0.1",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/packages/cli/vendor/templates/styles/globals.css

@@ -128,17 +128,17 @@
   --aui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --aui-disabled-opacity: 0.52;
   --aui-shadow-xs: 0 1px 2px oklch(0.24 0.02 255 / 5%);
-  --aui-shadow-sm: 0 1px 3px oklch(0.24 0.02 255 / 7%);
-  --aui-shadow-md: 0 8px 24px oklch(0.24 0.02 255 / 8%);
-  --aui-shadow-lg: 0 16px 36px oklch(0.24 0.02 255 / 10%);
+  --aui-shadow-sm: 0 1px 2px oklch(0.24 0.02 255 / 6%), 0 1px 6px oklch(0.24 0.02 255 / 4%);
+  --aui-shadow-md: 0 10px 28px -12px oklch(0.24 0.02 255 / 18%), 0 2px 8px oklch(0.24 0.02 255 / 5%);
+  --aui-shadow-lg: 0 24px 56px -20px oklch(0.24 0.02 255 / 26%), 0 8px 18px oklch(0.24 0.02 255 / 6%);
   --aui-surface-base: var(--background);
   --aui-surface-raised: color-mix(in oklch, var(--background), white 42%);
   --aui-surface-muted: color-mix(in oklch, var(--muted), var(--background) 52%);
   --aui-border-strong: color-mix(in oklch, var(--border), var(--foreground) 7%);
 
   --aui-control-radius: var(--aui-radius-control);
-  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 44%);
-  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 82%);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 22%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 78%);
   --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 48%);
   --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 86%);
   --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 48%);
@@ -150,13 +150,13 @@
   --aui-control-surface-readonly: color-mix(in oklch, var(--muted), var(--background) 78%);
   --aui-control-shadow: var(--aui-shadow-sm);
   --aui-control-border-strong: var(--aui-border-strong);
-  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 68%);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 42%);
   --aui-control-panel-bg: var(--aui-surface-raised);
   --aui-control-panel-shadow: var(--aui-shadow-md);
   --aui-card-radius: var(--aui-radius-surface);
   --aui-card-border: var(--border);
   --aui-card-shadow: var(--aui-shadow-xs);
-  --aui-card-shadow-hover: var(--aui-shadow-md);
+  --aui-card-shadow-hover: 0 18px 42px -18px oklch(0.24 0.02 255 / 24%), 0 3px 10px oklch(0.24 0.02 255 / 6%);
   --aui-card-soft-bg: color-mix(in oklch, var(--muted), var(--background) 34%);
   --aui-card-outline-bg: var(--aui-surface-raised);
   --aui-popover-shadow: var(--aui-shadow-lg);
@@ -234,8 +234,8 @@
   --aui-danger: var(--destructive);
   --aui-danger-foreground: oklch(0.19 0.012 255);
 
-  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 40%);
-  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 80%);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 18%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 72%);
   --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 46%);
   --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 84%);
   --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 46%);
@@ -243,9 +243,9 @@
   --aui-radius-control: var(--radius-lg);
   --aui-radius-surface: var(--radius-xl);
   --aui-shadow-xs: 0 1px 2px oklch(0 0 0 / 12%);
-  --aui-shadow-sm: 0 1px 3px oklch(0 0 0 / 16%);
-  --aui-shadow-md: 0 12px 30px oklch(0 0 0 / 26%);
-  --aui-shadow-lg: 0 22px 54px oklch(0 0 0 / 36%);
+  --aui-shadow-sm: 0 1px 2px oklch(0 0 0 / 20%), 0 2px 8px oklch(0 0 0 / 12%);
+  --aui-shadow-md: 0 16px 36px -16px oklch(0 0 0 / 62%), 0 3px 12px oklch(0 0 0 / 20%);
+  --aui-shadow-lg: 0 28px 64px -20px oklch(0 0 0 / 72%), 0 10px 24px oklch(0 0 0 / 24%);
   --aui-surface-base: var(--background);
   --aui-surface-raised: oklch(1 0 0 / 4%);
   --aui-surface-muted: oklch(1 0 0 / 6%);
@@ -286,7 +286,7 @@
   --aui-table-border: oklch(1 0 0 / 8%);
   --aui-table-selection-surface: oklch(1 0 0 / 4%);
   --aui-control-border-strong: var(--aui-border-strong);
-  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 72%);
+  --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 44%);
   --aui-control-panel-bg: var(--aui-surface-raised);
   --aui-control-panel-shadow: var(--aui-shadow-md);
   --aui-button-primary-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 18px 40px color-mix(in oklch, var(--primary), transparent 82%);
@@ -317,6 +317,20 @@
 
   body {
     @apply bg-background text-foreground antialiased;
+    margin: 0;
+  }
+
+  html:has([data-slot="workspace-layout"][data-viewport="true"]),
+  body:has([data-slot="workspace-layout"][data-viewport="true"]) {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+
+  body:has([data-slot="workspace-layout"][data-viewport="true"]) > #root {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
   }
 }
 
@@ -552,7 +566,9 @@
   }
 
   [data-slot="button"][data-slot="button"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    position: relative;
+    z-index: 1;
+    box-shadow: var(--aui-control-shadow), 0 0 0 2px var(--background), 0 0 0 4px var(--aui-focus-ring);
   }
 
   [data-slot="button"][data-slot="button"]:not(:disabled):not([aria-disabled="true"]):hover {
@@ -568,8 +584,9 @@
   }
 
   [data-slot="button"][data-variant="default"]:not(:disabled):not([aria-disabled="true"]):hover {
-    background: color-mix(in oklch, var(--primary), white 10%);
-    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 18%), 0 20px 42px color-mix(in oklch, var(--primary), transparent 74%);
+    border-color: color-mix(in oklch, var(--primary), black 16%);
+    background: color-mix(in oklch, var(--primary), white 7%);
+    box-shadow: 0 8px 20px -10px color-mix(in oklch, var(--primary), transparent 35%);
   }
 
   [data-slot="button"][data-variant="secondary"] {
@@ -585,7 +602,9 @@
   }
 
   [data-slot="button"][data-variant="outline"]:not(:disabled):not([aria-disabled="true"]):hover {
-    background: color-mix(in oklch, var(--background), transparent 14%);
+    border-color: var(--aui-control-hover-border);
+    background: var(--accent);
+    color: var(--accent-foreground);
   }
 
   [data-slot="button"][data-variant="ghost"] {
@@ -596,8 +615,9 @@
   }
 
   [data-slot="button"][data-variant="ghost"]:not(:disabled):not([aria-disabled="true"]):hover {
-    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
-    background: color-mix(in oklch, var(--accent), transparent 22%);
+    border-color: transparent;
+    background: var(--accent);
+    color: var(--accent-foreground);
   }
 
   [data-slot="button"][data-variant="destructive"] {
@@ -688,7 +708,8 @@
   [data-slot="input"][data-slot="input"]:focus-visible,
   [data-slot="textarea"][data-slot="textarea"]:focus-visible,
   [data-slot="select-trigger"][data-slot="select-trigger"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    border-color: var(--ring);
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--background), 0 0 0 3px var(--aui-focus-ring);
   }
 
   [data-slot="input"][data-slot="input"]:disabled,
@@ -867,7 +888,7 @@
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:hover {
     color: var(--foreground);
-    background: color-mix(in oklch, var(--background), transparent 18%);
+    background: var(--accent);
   }
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"][data-selected] {
@@ -878,13 +899,13 @@
   }
 
   [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:focus-visible {
-    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--aui-focus-ring);
   }
 
   :is([data-slot="card"], [data-card]) {
     border: 1px solid var(--aui-card-border);
     border-radius: var(--aui-card-radius);
-    background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
+    background: var(--card);
     box-shadow: var(--aui-card-shadow);
   }
 
@@ -945,6 +966,7 @@
   :is([data-slot="card"], [data-card])[data-interactive="true"]:hover {
     border-color: var(--aui-control-hover-border);
     box-shadow: var(--aui-card-shadow-hover);
+    transform: translateY(-1px);
   }
 
   :is([data-slot="card"], [data-card])[data-interactive="true"]:focus-visible {

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [