@leduchai/vmeta-ui-shell 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -22,6 +22,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   VmetaAppShell: () => VmetaAppShell,
+  VmetaBrandMark: () => VmetaBrandMark,
+  VmetaCollapseIcon: () => VmetaCollapseIcon,
   VmetaSidebar: () => VmetaSidebar,
   isMenuItemActive: () => isMenuItemActive
 });
@@ -29,6 +31,25 @@ module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var allowAllPermissions = () => true;
+function VmetaBrandMark({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, viewBox: "0 0 64 64", role: "img", "aria-label": "VMETA", focusable: "false", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M7 10h13l12 31 12-31h13L38 55H26L7 10Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "m25 10 7 18 7-18h10L32 48 15 10h10Z", opacity: ".42" })
+  ] });
+}
+function VmetaCollapseIcon({ collapsed }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: collapsed ? "m9 5 7 7-7 7" : "m15 5-7 7 7 7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.8"
+    }
+  ) });
+}
 function isMenuItemActive(item, activePath) {
   if (item.match === "exact") return activePath === item.href;
   if (item.match === "prefix") return activePath === item.href || activePath.startsWith(`${item.href}/`);
@@ -60,6 +81,7 @@ function VmetaSidebar({
   activePath,
   collapsed = false,
   storageKey = `vmeta:${app.appId}:menu-groups`,
+  idPrefix,
   account,
   footer,
   showCollapse = false,
@@ -67,6 +89,8 @@ function VmetaSidebar({
   onNavigate,
   onCollapsedChange
 }) {
+  const generatedId = (0, import_react.useId)().replace(/:/g, "");
+  const groupIdPrefix = idPrefix ?? `vmeta-menu-${app.appId}-${generatedId}`;
   const visibleGroups = (0, import_react.useMemo)(
     () => groups.map((group) => ({
       ...group,
@@ -111,13 +135,7 @@ function VmetaSidebar({
   };
   const menuItems = collapsed ? visibleGroups.flatMap((group) => group.children) : [];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: `vmeta-sidebar ${collapsed ? "is-collapsed" : ""}`, "aria-label": `Dieu huong ${app.appName}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: [
-      app.logoSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vmeta-sidebar__mark", "aria-hidden": "true", children: "V" }),
-      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "vmeta-sidebar__brand-copy", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: app.appName }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: app.appSubtitle })
-      ] })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: app.logoSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaBrandMark, { className: "vmeta-sidebar__mark" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "vmeta-sidebar__nav", children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-sidebar__collapsed-items", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), collapsed: true, onNavigate: navigate }, item.key)) }) : visibleGroups.map((group) => {
       const open = openKeys.includes(group.key);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "vmeta-menu-group", children: [
@@ -128,14 +146,14 @@ function VmetaSidebar({
             className: "vmeta-menu-group__toggle",
             onClick: () => toggleGroup(group.key),
             "aria-expanded": open,
-            "aria-controls": `vmeta-menu-group-${group.key}`,
+            "aria-controls": `${groupIdPrefix}-${group.key}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: group.label }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `vmeta-menu-group__chevron ${open ? "is-open" : ""}`, "aria-hidden": "true", children: "\u2304" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: `vmeta-menu-group-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: group.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: `${groupIdPrefix}-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: group.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
       ] }, group.key);
     }) }),
     footer && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-sidebar__footer", children: footer }),
@@ -155,7 +173,7 @@ function VmetaSidebar({
         onClick: () => onCollapsedChange?.(!collapsed),
         "aria-label": collapsed ? "Mo rong thanh dieu huong" : "Thu gon thanh dieu huong",
         title: collapsed ? "Mo rong menu" : "Thu gon menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: collapsed ? "\u203A" : "\u2039" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaCollapseIcon, { collapsed })
       }
     )
   ] });
@@ -196,15 +214,24 @@ function VmetaAppShell({
   canAccess,
   onNavigate
 }) {
-  const [collapsed, setCollapsed] = (0, import_react.useState)(() => readStoredBoolean(storageKey, false));
+  const [collapsed, setCollapsed] = (0, import_react.useState)(false);
   const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setCollapsed(readStoredBoolean(storageKey, false));
+  }, [storageKey]);
   const updateCollapsed = (value) => {
     setCollapsed(value);
     writeStorage(storageKey, String(value));
   };
   const navigate = (item) => {
     setMenuOpen(false);
-    onNavigate?.(item);
+    if (onNavigate) {
+      onNavigate(item);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
+    else window.location.assign(item.href);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: `vmeta-app-shell ${collapsed ? "is-collapsed" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -250,6 +277,7 @@ function VmetaAppShell({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "vmeta-app-shell__menu-button", onClick: () => setMenuOpen(true), "aria-label": "Mo menu dieu huong", children: "\u2630" }),
           header.leading,
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vmeta-app-shell__title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "vmeta-app-shell__app-name", children: app.appName }),
             header.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: header.eyebrow }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: header.title }),
             header.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: header.description })
@@ -264,6 +292,8 @@ function VmetaAppShell({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   VmetaAppShell,
+  VmetaBrandMark,
+  VmetaCollapseIcon,
   VmetaSidebar,
   isMenuItemActive
 });

package/dist/index.d.cts

@@ -41,6 +41,12 @@ type VmetaHeader = {
     leading?: ReactNode;
 };
 type VmetaPermissionResolver = (permission: string | string[]) => boolean;
+declare function VmetaBrandMark({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function VmetaCollapseIcon({ collapsed }: {
+    collapsed: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function isMenuItemActive(item: VmetaMenuItem, activePath: string): boolean;
 interface VmetaSidebarProps {
     app: VmetaAppIdentity;
@@ -48,6 +54,7 @@ interface VmetaSidebarProps {
     activePath: string;
     collapsed?: boolean;
     storageKey?: string;
+    idPrefix?: string;
     account?: VmetaAccount;
     footer?: ReactNode;
     showCollapse?: boolean;
@@ -55,7 +62,7 @@ interface VmetaSidebarProps {
     onNavigate?: (item: VmetaMenuItem) => void;
     onCollapsedChange?: (collapsed: boolean) => void;
 }
-declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
+declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, idPrefix, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
 interface VmetaAppShellProps {
     app: VmetaAppIdentity;
     groups: VmetaMenuGroup[];
@@ -71,4 +78,4 @@ interface VmetaAppShellProps {
 }
 declare function VmetaAppShell({ app, groups, activePath, header, children, account, sidebarFooter, contentClassName, storageKey, canAccess, onNavigate, }: VmetaAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type VmetaAccount, type VmetaAppIdentity, VmetaAppShell, type VmetaAppShellProps, type VmetaHeader, type VmetaMenuGroup, type VmetaMenuItem, type VmetaMenuMatch, type VmetaPermissionResolver, VmetaSidebar, type VmetaSidebarProps, isMenuItemActive };
+export { type VmetaAccount, type VmetaAppIdentity, VmetaAppShell, type VmetaAppShellProps, VmetaBrandMark, VmetaCollapseIcon, type VmetaHeader, type VmetaMenuGroup, type VmetaMenuItem, type VmetaMenuMatch, type VmetaPermissionResolver, VmetaSidebar, type VmetaSidebarProps, isMenuItemActive };

package/dist/index.d.ts

@@ -41,6 +41,12 @@ type VmetaHeader = {
     leading?: ReactNode;
 };
 type VmetaPermissionResolver = (permission: string | string[]) => boolean;
+declare function VmetaBrandMark({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function VmetaCollapseIcon({ collapsed }: {
+    collapsed: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function isMenuItemActive(item: VmetaMenuItem, activePath: string): boolean;
 interface VmetaSidebarProps {
     app: VmetaAppIdentity;
@@ -48,6 +54,7 @@ interface VmetaSidebarProps {
     activePath: string;
     collapsed?: boolean;
     storageKey?: string;
+    idPrefix?: string;
     account?: VmetaAccount;
     footer?: ReactNode;
     showCollapse?: boolean;
@@ -55,7 +62,7 @@ interface VmetaSidebarProps {
     onNavigate?: (item: VmetaMenuItem) => void;
     onCollapsedChange?: (collapsed: boolean) => void;
 }
-declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
+declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, idPrefix, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
 interface VmetaAppShellProps {
     app: VmetaAppIdentity;
     groups: VmetaMenuGroup[];
@@ -71,4 +78,4 @@ interface VmetaAppShellProps {
 }
 declare function VmetaAppShell({ app, groups, activePath, header, children, account, sidebarFooter, contentClassName, storageKey, canAccess, onNavigate, }: VmetaAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type VmetaAccount, type VmetaAppIdentity, VmetaAppShell, type VmetaAppShellProps, type VmetaHeader, type VmetaMenuGroup, type VmetaMenuItem, type VmetaMenuMatch, type VmetaPermissionResolver, VmetaSidebar, type VmetaSidebarProps, isMenuItemActive };
+export { type VmetaAccount, type VmetaAppIdentity, VmetaAppShell, type VmetaAppShellProps, VmetaBrandMark, VmetaCollapseIcon, type VmetaHeader, type VmetaMenuGroup, type VmetaMenuItem, type VmetaMenuMatch, type VmetaPermissionResolver, VmetaSidebar, type VmetaSidebarProps, isMenuItemActive };

package/dist/index.js

@@ -1,9 +1,28 @@
 "use client";
 
 // src/index.tsx
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var allowAllPermissions = () => true;
+function VmetaBrandMark({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 64 64", role: "img", "aria-label": "VMETA", focusable: "false", children: [
+    /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M7 10h13l12 31 12-31h13L38 55H26L7 10Z" }),
+    /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m25 10 7 18 7-18h10L32 48 15 10h10Z", opacity: ".42" })
+  ] });
+}
+function VmetaCollapseIcon({ collapsed }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: collapsed ? "m9 5 7 7-7 7" : "m15 5-7 7 7 7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.8"
+    }
+  ) });
+}
 function isMenuItemActive(item, activePath) {
   if (item.match === "exact") return activePath === item.href;
   if (item.match === "prefix") return activePath === item.href || activePath.startsWith(`${item.href}/`);
@@ -35,6 +54,7 @@ function VmetaSidebar({
   activePath,
   collapsed = false,
   storageKey = `vmeta:${app.appId}:menu-groups`,
+  idPrefix,
   account,
   footer,
   showCollapse = false,
@@ -42,6 +62,8 @@ function VmetaSidebar({
   onNavigate,
   onCollapsedChange
 }) {
+  const generatedId = useId().replace(/:/g, "");
+  const groupIdPrefix = idPrefix ?? `vmeta-menu-${app.appId}-${generatedId}`;
   const visibleGroups = useMemo(
     () => groups.map((group) => ({
       ...group,
@@ -86,13 +108,7 @@ function VmetaSidebar({
   };
   const menuItems = collapsed ? visibleGroups.flatMap((group) => group.children) : [];
   return /* @__PURE__ */ jsxs("aside", { className: `vmeta-sidebar ${collapsed ? "is-collapsed" : ""}`, "aria-label": `Dieu huong ${app.appName}`, children: [
-    /* @__PURE__ */ jsxs("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: [
-      app.logoSrc ? /* @__PURE__ */ jsx("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ jsx("span", { className: "vmeta-sidebar__mark", "aria-hidden": "true", children: "V" }),
-      !collapsed && /* @__PURE__ */ jsxs("span", { className: "vmeta-sidebar__brand-copy", children: [
-        /* @__PURE__ */ jsx("strong", { children: app.appName }),
-        /* @__PURE__ */ jsx("small", { children: app.appSubtitle })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx("a", { className: "vmeta-sidebar__brand", href: app.homeHref ?? "/", "aria-label": `${app.appName} - ${app.appSubtitle}`, children: app.logoSrc ? /* @__PURE__ */ jsx("img", { src: app.logoSrc, alt: app.logoAlt ?? "", className: "vmeta-sidebar__logo" }) : /* @__PURE__ */ jsx(VmetaBrandMark, { className: "vmeta-sidebar__mark" }) }),
     /* @__PURE__ */ jsx("nav", { className: "vmeta-sidebar__nav", children: collapsed ? /* @__PURE__ */ jsx("div", { className: "vmeta-sidebar__collapsed-items", children: menuItems.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), collapsed: true, onNavigate: navigate }, item.key)) }) : visibleGroups.map((group) => {
       const open = openKeys.includes(group.key);
       return /* @__PURE__ */ jsxs("section", { className: "vmeta-menu-group", children: [
@@ -103,14 +119,14 @@ function VmetaSidebar({
             className: "vmeta-menu-group__toggle",
             onClick: () => toggleGroup(group.key),
             "aria-expanded": open,
-            "aria-controls": `vmeta-menu-group-${group.key}`,
+            "aria-controls": `${groupIdPrefix}-${group.key}`,
             children: [
               /* @__PURE__ */ jsx("span", { children: group.label }),
               /* @__PURE__ */ jsx("span", { className: `vmeta-menu-group__chevron ${open ? "is-open" : ""}`, "aria-hidden": "true", children: "\u2304" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { id: `vmeta-menu-group-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ jsx("div", { children: group.children.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
+        /* @__PURE__ */ jsx("div", { id: `${groupIdPrefix}-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ jsx("div", { children: group.children.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
       ] }, group.key);
     }) }),
     footer && !collapsed && /* @__PURE__ */ jsx("div", { className: "vmeta-sidebar__footer", children: footer }),
@@ -130,7 +146,7 @@ function VmetaSidebar({
         onClick: () => onCollapsedChange?.(!collapsed),
         "aria-label": collapsed ? "Mo rong thanh dieu huong" : "Thu gon thanh dieu huong",
         title: collapsed ? "Mo rong menu" : "Thu gon menu",
-        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: collapsed ? "\u203A" : "\u2039" })
+        children: /* @__PURE__ */ jsx(VmetaCollapseIcon, { collapsed })
       }
     )
   ] });
@@ -171,15 +187,24 @@ function VmetaAppShell({
   canAccess,
   onNavigate
 }) {
-  const [collapsed, setCollapsed] = useState(() => readStoredBoolean(storageKey, false));
+  const [collapsed, setCollapsed] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    setCollapsed(readStoredBoolean(storageKey, false));
+  }, [storageKey]);
   const updateCollapsed = (value) => {
     setCollapsed(value);
     writeStorage(storageKey, String(value));
   };
   const navigate = (item) => {
     setMenuOpen(false);
-    onNavigate?.(item);
+    if (onNavigate) {
+      onNavigate(item);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
+    else window.location.assign(item.href);
   };
   return /* @__PURE__ */ jsxs("main", { className: `vmeta-app-shell ${collapsed ? "is-collapsed" : ""}`, children: [
     /* @__PURE__ */ jsx(
@@ -225,6 +250,7 @@ function VmetaAppShell({
           /* @__PURE__ */ jsx("button", { type: "button", className: "vmeta-app-shell__menu-button", onClick: () => setMenuOpen(true), "aria-label": "Mo menu dieu huong", children: "\u2630" }),
           header.leading,
           /* @__PURE__ */ jsxs("div", { className: "vmeta-app-shell__title", children: [
+            /* @__PURE__ */ jsx("p", { className: "vmeta-app-shell__app-name", children: app.appName }),
             header.eyebrow && /* @__PURE__ */ jsx("p", { children: header.eyebrow }),
             /* @__PURE__ */ jsx("h1", { children: header.title }),
             header.description && /* @__PURE__ */ jsx("span", { children: header.description })
@@ -238,6 +264,8 @@ function VmetaAppShell({
 }
 export {
   VmetaAppShell,
+  VmetaBrandMark,
+  VmetaCollapseIcon,
   VmetaSidebar,
   isMenuItemActive
 };

package/dist/styles.css

@@ -7,7 +7,9 @@
 .vmeta-app-shell__header { position: sticky; top: 0; z-index: var(--z-header, 40); min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--page-gutter-desktop, 28px); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 94%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(16px); }
 .vmeta-app-shell__header-copy { min-width: 0; display: flex; align-items: center; gap: 12px; }
 .vmeta-app-shell__title { min-width: 0; }
+.vmeta-app-shell__app-name { margin: 0 0 2px; color: var(--color-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
 .vmeta-app-shell__title p { margin: 0; color: var(--color-primary); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
+.vmeta-app-shell__title .vmeta-app-shell__app-name { margin-bottom: 2px; font-size: 9px; font-weight: 800; }
 .vmeta-app-shell__title h1 { margin: 3px 0 0; color: var(--color-ink); font-size: clamp(20px, 2.5vw, 26px); line-height: 1.2; letter-spacing: -.035em; }
 .vmeta-app-shell__title span { display: block; max-width: 740px; margin-top: 4px; overflow: hidden; color: var(--color-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
 .vmeta-app-shell__header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
@@ -15,10 +17,10 @@
 .vmeta-app-shell__content { min-width: 0; padding: var(--page-gutter-tablet, 20px) var(--page-gutter-desktop, 28px) 48px; }
 .vmeta-app-shell__overlay { display: none; }
 .vmeta-sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--color-border); color: var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-md); }
-.vmeta-sidebar__brand { min-height: 82px; display: flex; align-items: center; gap: 11px; margin: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 20px; color: inherit; text-decoration: none; background: var(--color-surface); box-shadow: 0 5px 18px rgb(7 19 13 / 5%); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
+.vmeta-sidebar__brand { min-height: 82px; display: flex; align-items: center; justify-content: center; margin: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 20px; color: inherit; text-decoration: none; background: var(--color-surface); box-shadow: 0 5px 18px rgb(7 19 13 / 5%); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
 .vmeta-sidebar__brand:hover { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
 .vmeta-sidebar__logo { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; }
-.vmeta-sidebar__mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: var(--color-primary); font-size: 34px; font-weight: 850; letter-spacing: -.13em; transform: translateX(-2px); }
+.vmeta-sidebar__mark { width: 42px; height: 42px; flex: 0 0 42px; display: block; color: var(--color-primary); }
 .vmeta-sidebar__brand-copy { min-width: 0; line-height: 1.15; }
 .vmeta-sidebar__brand-copy strong, .vmeta-sidebar__brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .vmeta-sidebar__brand-copy strong { color: var(--color-primary); font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
@@ -54,7 +56,7 @@
 .vmeta-sidebar__account-actions { flex: 0 0 auto; }
 .vmeta-sidebar__collapse { min-height: 46px; display: grid; place-items: center; border: 0; border-top: 1px solid var(--color-border); color: var(--color-muted); background: transparent; font-size: 22px; }
 .vmeta-sidebar__collapse:hover { color: var(--color-primary); background: var(--color-primary-soft); }
-.vmeta-sidebar.is-collapsed .vmeta-sidebar__brand { justify-content: center; min-height: 60px; margin: 9px; padding: 8px; }
+.vmeta-sidebar.is-collapsed .vmeta-sidebar__brand { min-height: 60px; margin: 9px; padding: 8px; }
 .vmeta-sidebar.is-collapsed .vmeta-sidebar__logo, .vmeta-sidebar.is-collapsed .vmeta-sidebar__mark { width: 36px; height: 36px; flex-basis: 36px; }
 .vmeta-sidebar.is-collapsed .vmeta-sidebar__nav { padding-inline: 9px; }
 .vmeta-sidebar__collapsed-items { display: grid; gap: 4px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leduchai/vmeta-ui-shell",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Application shell, sidebar, menu va header dung chung cua VMETA.",
   "license": "MIT",
   "type": "module",
@@ -21,7 +21,7 @@
     "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external react-dom && node ../../scripts/copy-file.mjs src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@leduchai/vmeta-ui-tokens": "0.1.4"
+    "@leduchai/vmeta-ui-tokens": "0.1.6"
   },
   "peerDependencies": {
     "react": ">=18 <20",