@waveinno/ui 0.3.0 → 0.5.0

package/dist/shell/mobile-nav.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import l from"next/link";import*as k from"react";import{WaveWordmark as N}from"../components/brand/logo.js";import{CountBadge as y}from"../components/ui/badge.js";import{Sheet as w,SheetContent as A,SheetTitle as S}from"../components/ui/sheet.js";import{cn as p}from"../lib/utils.js";import{useApp as C}from"../store/app-store.js";import{useUi as f}from"../store/ui-store.js";import{useActive as L}from"./use-active.js";function R(){const u=f(e=>e.mobileNavOpen),n=f(e=>e.setMobileNav),h=C(e=>e.setApp),{cfg:o,pathname:d,mod:b,app:c,rail:x,isEntitled:v}=L(),g=x.order;return k.useEffect(()=>{n(!1)},[d,n]),t(w,{open:u,onOpenChange:n,children:s(A,{side:"left",width:"w-[300px]",className:"lg:hidden",children:[s("div",{className:"shrink-0 border-b border-border px-4 py-3",children:[t(S,{asChild:!0,children:t(N,{size:"sm",suffix:c.name})}),o.scopeLabelled??o.scope?t("div",{className:"mt-2",children:o.scopeLabelled??o.scope}):null]}),o.apps.length>1&&o.showAppSwitcher!==!1?t("div",{className:"flex shrink-0 gap-1.5 overflow-x-auto border-b border-border px-3 py-2.5",children:o.apps.map(e=>{const a=e.icon,i=e.id===c.id,r=o.modules.find(m=>m.app===e.id&&v(m));return t(l,{href:r?.href??e.href,onClick:()=>h(e.id),"aria-label":e.name,"aria-current":i?"true":void 0,className:p("grid size-9 shrink-0 place-items-center rounded-ctl text-white transition-[box-shadow,transform] duration-150",i?"ring-2 ring-text ring-offset-2 ring-offset-raised":"opacity-90 hover:opacity-100"),style:{background:e.tint},children:t(a,{className:"size-4"})},e.id)})}):null,t("div",{className:"flex-1 overflow-y-auto p-2",children:g.map(e=>{const a=e.icon,i=e.key===b.key;return s("div",{children:[s(l,{href:e.href,className:p("flex h-item items-center gap-2.5 rounded-ctl px-2.5 text-[13px] transition-colors",i?"bg-primary-subtle font-medium text-primary":"text-body hover:bg-hover"),children:[t(a,{className:"size-4 shrink-0"}),t("span",{className:"flex-1 truncate",children:e.title}),e.badge?t(y,{value:e.badge,tone:e.badgeTone==="danger"?"danger":"neutral"}):null]}),i?t("ul",{className:"mb-2 ml-[26px] mt-0.5 border-l border-border pl-2",children:e.nav.filter(r=>r.kind==="item").map(r=>t("li",{children:s(l,{href:r.href,className:p("flex h-8 items-center gap-2 rounded-ctl px-2 text-[13px] transition-colors",d===r.href?"font-medium text-primary":"text-muted hover:bg-hover hover:text-text"),children:[t("span",{className:"flex-1 truncate",children:r.label}),r.count?t("span",{className:"num text-[11px]",children:r.count}):null]})},r.href))}):null]},e.key)})})]})})}export{R as MobileNav};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as k from"react";import{WaveWordmark as N}from"../components/brand/logo.js";import{CountBadge as y}from"../components/ui/badge.js";import{Sheet as w,SheetContent as A,SheetTitle as L}from"../components/ui/sheet.js";import{RouterLink as l}from"../hooks/use-router.js";import{cn as p}from"../lib/utils.js";import{useApp as S}from"../store/app-store.js";import{useUi as f}from"../store/ui-store.js";import{useActive as C}from"./use-active.js";function B(){const u=f(e=>e.mobileNavOpen),n=f(e=>e.setMobileNav),h=S(e=>e.setApp),{cfg:o,pathname:d,mod:b,app:c,rail:x,isEntitled:v}=C(),g=x.order;return k.useEffect(()=>{n(!1)},[d,n]),t(w,{open:u,onOpenChange:n,children:s(A,{side:"left",width:"w-[300px]",className:"lg:hidden",children:[s("div",{className:"shrink-0 border-b border-border px-4 py-3",children:[t(L,{asChild:!0,children:t(N,{size:"sm",suffix:c.name})}),o.scopeLabelled??o.scope?t("div",{className:"mt-2",children:o.scopeLabelled??o.scope}):null]}),o.apps.length>1&&o.showAppSwitcher!==!1?t("div",{className:"flex shrink-0 gap-1.5 overflow-x-auto border-b border-border px-3 py-2.5",children:o.apps.map(e=>{const a=e.icon,i=e.id===c.id,r=o.modules.find(m=>m.app===e.id&&v(m));return t(l,{href:r?.href??e.href,onClick:()=>h(e.id),"aria-label":e.name,"aria-current":i?"true":void 0,className:p("grid size-9 shrink-0 place-items-center rounded-ctl text-white transition-[box-shadow,transform] duration-150",i?"ring-2 ring-text ring-offset-2 ring-offset-raised":"opacity-90 hover:opacity-100"),style:{background:e.tint},children:t(a,{className:"size-4"})},e.id)})}):null,t("div",{className:"flex-1 overflow-y-auto p-2",children:g.map(e=>{const a=e.icon,i=e.key===b.key;return s("div",{children:[s(l,{href:e.href,className:p("flex h-item items-center gap-2.5 rounded-ctl px-2.5 text-[13px] transition-colors",i?"bg-primary-subtle font-medium text-primary":"text-body hover:bg-hover"),children:[t(a,{className:"size-4 shrink-0"}),t("span",{className:"flex-1 truncate",children:e.title}),e.badge?t(y,{value:e.badge,tone:e.badgeTone==="danger"?"danger":"neutral"}):null]}),i?t("ul",{className:"mb-2 ml-[26px] mt-0.5 border-l border-border pl-2",children:e.nav.filter(r=>r.kind==="item").map(r=>t("li",{children:s(l,{href:r.href,className:p("flex h-8 items-center gap-2 rounded-ctl px-2 text-[13px] transition-colors",d===r.href?"font-medium text-primary":"text-muted hover:bg-hover hover:text-text"),children:[t("span",{className:"flex-1 truncate",children:r.label}),r.count?t("span",{className:"num text-[11px]",children:r.count}):null]})},r.href))}):null]},e.key)})})]})})}export{B as MobileNav};

package/dist/shell/module-sidebar.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import d from"next/link";import*as r from"react";import{cn as i}from"../lib/utils.js";import{useActive as b}from"./use-active.js";function k(){const{pathname:c,mod:t,item:p}=b(),u=r.useRef(null),[s,f]=r.useState(null),m=r.useRef(t.key),[x,h]=r.useState(!1);return r.useLayoutEffect(()=>{const e=u.current?.querySelector('li[data-active="true"]'),n=m.current===t.key;m.current=t.key,h(n),f(e?{y:e.offsetTop,h:e.offsetHeight}:null)},[c,t.key]),o("nav",{"data-shell-panel":"","aria-label":`${t.title} sections`,className:"col-start-2 row-start-1 row-span-2 overflow-y-auto overflow-x-hidden border-r border-border bg-surface px-2.5 py-3",children:[a("h2",{className:"px-2.5 pb-2.5 pt-1.5 text-[13px] font-semibold leading-[18px] text-text",children:t.title}),o("ul",{ref:u,className:"relative",children:[s?a("li",{"aria-hidden":!0,className:i("pointer-events-none absolute inset-x-0 top-0 rounded-ctl bg-primary-subtle",x&&"transition-[transform,height] duration-[220ms] ease-wave"),style:{transform:`translateY(${s.y}px)`,height:s.h}}):null,t.nav.map((e,n)=>{if(e.kind==="group")return a("li",{className:"ov px-2.5 pb-1.5 pt-3.5",children:e.label},`g-${n}`);const l=p?.href===e.href;return a("li",{"data-active":l||void 0,children:o(d,{href:e.href,"aria-current":l?"page":void 0,className:i("relative mb-px flex h-item items-center gap-2.5 rounded-ctl px-2.5 text-[13px] transition-colors duration-150",l?"font-medium text-primary":"text-body hover:bg-hover hover:text-text"),children:[a("span",{className:"truncate",children:e.label}),e.count?a("span",{className:i("num ml-auto shrink-0 text-xs",l?"text-primary":e.hot?"font-semibold text-text":"text-muted"),children:e.count}):null]})},e.href)})]})]})}export{k as ModuleSidebar};
+"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{RouterLink as d}from"../hooks/use-router.js";import{cn as i}from"../lib/utils.js";import{useActive as b}from"./use-active.js";function k(){const{pathname:c,mod:t,item:p}=b(),u=r.useRef(null),[s,f]=r.useState(null),m=r.useRef(t.key),[x,h]=r.useState(!1);return r.useLayoutEffect(()=>{const e=u.current?.querySelector('li[data-active="true"]'),n=m.current===t.key;m.current=t.key,h(n),f(e?{y:e.offsetTop,h:e.offsetHeight}:null)},[c,t.key]),o("nav",{"data-shell-panel":"","aria-label":`${t.title} sections`,className:"col-start-2 row-start-1 row-span-2 overflow-y-auto overflow-x-hidden border-r border-border bg-surface px-2.5 py-3",children:[a("h2",{className:"px-2.5 pb-2.5 pt-1.5 text-[13px] font-semibold leading-[18px] text-text",children:t.title}),o("ul",{ref:u,className:"relative",children:[s?a("li",{"aria-hidden":!0,className:i("pointer-events-none absolute inset-x-0 top-0 rounded-ctl bg-primary-subtle",x&&"transition-[transform,height] duration-[220ms] ease-wave"),style:{transform:`translateY(${s.y}px)`,height:s.h}}):null,t.nav.map((e,n)=>{if(e.kind==="group")return a("li",{className:"ov px-2.5 pb-1.5 pt-3.5",children:e.label},`g-${n}`);const l=p?.href===e.href;return a("li",{"data-active":l||void 0,children:o(d,{href:e.href,"aria-current":l?"page":void 0,className:i("relative mb-px flex h-item items-center gap-2.5 rounded-ctl px-2.5 text-[13px] transition-colors duration-150",l?"font-medium text-primary":"text-body hover:bg-hover hover:text-text"),children:[a("span",{className:"truncate",children:e.label}),e.count?a("span",{className:i("num ml-auto shrink-0 text-xs",l?"text-primary":e.hot?"font-semibold text-text":"text-muted"),children:e.count}):null]})},e.href)})]})]})}export{k as ModuleSidebar};

package/dist/shell/notifications.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Bell as p}from"lucide-react";import n from"next/link";import{Badge as m}from"../components/ui/badge.js";import{Button as s}from"../components/ui/button.js";import{Popover as c,PopoverContent as d,PopoverTrigger as x}from"../components/ui/popover.js";import{Tooltip as f}from"../components/ui/tooltip.js";import{fmtRelative as u}from"../lib/format.js";import{useShell as N}from"./config.js";function C(){const o=N(),r=o.notifications??[],i=r.filter(t=>!t.read).length,l=o.now??new Date;return a(c,{onOpenChange:t=>t&&o.onNotificationsOpen?.(),children:[e(f,{label:"Notifications",children:e(x,{asChild:!0,children:a(s,{variant:"ghost",size:"icon",className:"relative","aria-label":`Notifications, ${i} unread`,children:[e(p,{}),i>0?e("span",{className:"num absolute right-[3px] top-[3px] grid h-4 min-w-4 place-items-center rounded-full bg-danger px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-canvas","aria-hidden":!0,children:i>9?"9+":i}):null]})})}),a(d,{align:"end",className:"w-[380px] max-w-[calc(100vw-32px)] p-0",children:[a("div",{className:"flex items-center justify-between border-b border-border px-3.5 py-2.5",children:[e("span",{className:"text-[13px] font-semibold text-text",children:"Notifications"}),i>0&&o.onNotificationsRead?e(s,{variant:"link",size:"sm",className:"h-auto",onClick:()=>o.onNotificationsRead?.("all"),children:"Mark all read"}):null]}),r.length===0?e("p",{className:"px-3.5 py-8 text-center text-[13px] text-muted",children:"You are all caught up."}):e("ul",{className:"max-h-[420px] overflow-y-auto",children:r.map(t=>e("li",{children:a(n,{href:t.href,onClick:()=>!t.read&&o.onNotificationsRead?.([t.id]),className:"flex gap-2.5 border-b border-border px-3.5 py-3 transition-colors last:border-0 hover:bg-hover",children:[e(m,{tone:t.tone,className:"mt-0.5 h-[18px] px-1.5",children:e("span",{className:"sr-only",children:t.tone})}),a("div",{className:"min-w-0 flex-1",children:[e("p",{className:"text-[13px] font-medium leading-[18px] text-text",children:t.title}),e("p",{className:"mt-0.5 truncate text-xs text-muted",children:t.detail}),a("p",{className:"mt-1 text-[11px] text-muted",children:[u(t.at,l)," \xB7 ",t.source]})]}),t.read?null:e("span",{className:"mt-2 size-1.5 shrink-0 rounded-full bg-primary","aria-label":"unread"})]})},t.id))}),o.notificationsHref?e("div",{className:"border-t border-border px-3.5 py-2",children:e(n,{href:o.notificationsHref,className:"text-xs font-medium text-primary hover:underline",children:o.notificationsHrefLabel??"Open activity"})}):null]})]})}export{C as Notifications};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Bell as p}from"lucide-react";import{Badge as m}from"../components/ui/badge.js";import{Button as n}from"../components/ui/button.js";import{Popover as c,PopoverContent as d,PopoverTrigger as x}from"../components/ui/popover.js";import{Tooltip as f}from"../components/ui/tooltip.js";import{RouterLink as s}from"../hooks/use-router.js";import{fmtRelative as u}from"../lib/format.js";import{useShell as N}from"./config.js";function C(){const o=N(),r=o.notifications??[],i=r.filter(t=>!t.read).length,l=o.now??new Date;return a(c,{onOpenChange:t=>t&&o.onNotificationsOpen?.(),children:[e(f,{label:"Notifications",children:e(x,{asChild:!0,children:a(n,{variant:"ghost",size:"icon",className:"relative","aria-label":`Notifications, ${i} unread`,children:[e(p,{}),i>0?e("span",{className:"num absolute right-[3px] top-[3px] grid h-4 min-w-4 place-items-center rounded-full bg-danger px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-canvas","aria-hidden":!0,children:i>9?"9+":i}):null]})})}),a(d,{align:"end",className:"w-[380px] max-w-[calc(100vw-32px)] p-0",children:[a("div",{className:"flex items-center justify-between border-b border-border px-3.5 py-2.5",children:[e("span",{className:"text-[13px] font-semibold text-text",children:"Notifications"}),i>0&&o.onNotificationsRead?e(n,{variant:"link",size:"sm",className:"h-auto",onClick:()=>o.onNotificationsRead?.("all"),children:"Mark all read"}):null]}),r.length===0?e("p",{className:"px-3.5 py-8 text-center text-[13px] text-muted",children:"You are all caught up."}):e("ul",{className:"max-h-[420px] overflow-y-auto",children:r.map(t=>e("li",{children:a(s,{href:t.href,onClick:()=>!t.read&&o.onNotificationsRead?.([t.id]),className:"flex gap-2.5 border-b border-border px-3.5 py-3 transition-colors last:border-0 hover:bg-hover",children:[e(m,{tone:t.tone,className:"mt-0.5 h-[18px] px-1.5",children:e("span",{className:"sr-only",children:t.tone})}),a("div",{className:"min-w-0 flex-1",children:[e("p",{className:"text-[13px] font-medium leading-[18px] text-text",children:t.title}),e("p",{className:"mt-0.5 truncate text-xs text-muted",children:t.detail}),a("p",{className:"mt-1 text-[11px] text-muted",children:[u(t.at,l)," \xB7 ",t.source]})]}),t.read?null:e("span",{className:"mt-2 size-1.5 shrink-0 rounded-full bg-primary","aria-label":"unread"})]})},t.id))}),o.notificationsHref?e("div",{className:"border-t border-border px-3.5 py-2",children:e(s,{href:o.notificationsHref,className:"text-xs font-medium text-primary hover:underline",children:o.notificationsHrefLabel??"Open activity"})}):null]})]})}export{C as Notifications};

package/dist/shell/placeholder-screen.js

@@ -1 +1 @@
-"use client";import{Fragment as y,jsx as a,jsxs as t}from"react/jsx-runtime";import{ArrowRight as h,Check as x,Database as f}from"lucide-react";import g from"next/link";import{PageHeader as u}from"../components/patterns/page-header.js";import{Card as m}from"../components/ui/card.js";import{useShell as b}from"./config.js";import{moduleFromPath as N,navItemFromPath as v}from"./registry.js";function I({pathname:n,plannedIn:o}){const i=b(),s=N(i.modules,n),d=v(n,s),l=d?.label??s.title,r=i.apps.find(e=>e.id===s.app),c=s.nav.filter(e=>e.kind==="item").filter(e=>e.href!==d?.href).slice(0,6),p=["Navigation, breadcrumb and page header","Plan / role gating from the registry","Data table \u2014 sort, pin, resize, export","Record drawer and command palette","Empty, loading and error states"];return t(y,{children:[a(u,{crumbs:[...i.homeCrumb?[i.homeCrumb]:[],...r&&r.href!==i.homeCrumb?.href?[{label:r.name,href:r.href}]:[],{label:s.title,href:s.href},{label:l}],title:l,description:s.description}),t("div",{className:"grid grid-cols-1 items-start gap-3 lg:grid-cols-[minmax(0,1fr)_320px]",children:[a(m,{className:"px-6 py-8",children:t("div",{className:"flex items-start gap-3.5",children:[a("span",{className:"grid size-9 shrink-0 place-items-center rounded-ctl bg-hover text-muted","aria-hidden":!0,children:a(f,{className:"size-4"})}),t("div",{className:"min-w-0",children:[t("h2",{className:"text-[15px] font-semibold text-text",children:[l," is designed but not built yet"]}),t("p",{className:"mt-1.5 max-w-[60ch] text-[13px] leading-5 text-muted",children:["The screen is in the navigation registry and inherits the page template. Its data contract is in the API specification; the page ships with its milestone",o?` (${o})`:"","."]})]})]})}),t("div",{className:"space-y-3",children:[t(m,{children:[a("h3",{className:"text-[13px] font-semibold text-text",children:"Already wired"}),a("ul",{className:"mt-2.5 space-y-2",children:p.map(e=>t("li",{className:"flex items-start gap-2 text-[13px] text-body",children:[a(x,{className:"mt-0.5 size-3.5 shrink-0 text-success"}),e]},e))})]}),c.length?t(m,{children:[t("h3",{className:"text-[13px] font-semibold text-text",children:["Elsewhere in ",s.title]}),a("ul",{className:"-mx-1.5 mt-2",children:c.map(e=>e.kind==="item"?a("li",{children:t(g,{href:e.href,className:"flex items-center gap-2 rounded-ctl px-1.5 py-1.5 text-[13px] text-body transition-colors hover:bg-hover hover:text-text",children:[a("span",{className:"min-w-0 flex-1 truncate",children:e.label}),a(h,{className:"size-3 shrink-0 text-muted"})]})},e.href):null)})]}):null]})]})]})}export{I as PlaceholderScreen};
+"use client";import{Fragment as y,jsx as a,jsxs as t}from"react/jsx-runtime";import{ArrowRight as h,Check as x,Database as f}from"lucide-react";import{PageHeader as g}from"../components/patterns/page-header.js";import{Card as m}from"../components/ui/card.js";import{RouterLink as u}from"../hooks/use-router.js";import{useShell as b}from"./config.js";import{moduleFromPath as N,navItemFromPath as v}from"./registry.js";function I({pathname:n,plannedIn:o}){const i=b(),s=N(i.modules,n),d=v(n,s),l=d?.label??s.title,r=i.apps.find(e=>e.id===s.app),c=s.nav.filter(e=>e.kind==="item").filter(e=>e.href!==d?.href).slice(0,6),p=["Navigation, breadcrumb and page header","Plan / role gating from the registry","Data table \u2014 sort, pin, resize, export","Record drawer and command palette","Empty, loading and error states"];return t(y,{children:[a(g,{crumbs:[...i.homeCrumb?[i.homeCrumb]:[],...r&&r.href!==i.homeCrumb?.href?[{label:r.name,href:r.href}]:[],{label:s.title,href:s.href},{label:l}],title:l,description:s.description}),t("div",{className:"grid grid-cols-1 items-start gap-3 lg:grid-cols-[minmax(0,1fr)_320px]",children:[a(m,{className:"px-6 py-8",children:t("div",{className:"flex items-start gap-3.5",children:[a("span",{className:"grid size-9 shrink-0 place-items-center rounded-ctl bg-hover text-muted","aria-hidden":!0,children:a(f,{className:"size-4"})}),t("div",{className:"min-w-0",children:[t("h2",{className:"text-[15px] font-semibold text-text",children:[l," is designed but not built yet"]}),t("p",{className:"mt-1.5 max-w-[60ch] text-[13px] leading-5 text-muted",children:["The screen is in the navigation registry and inherits the page template. Its data contract is in the API specification; the page ships with its milestone",o?` (${o})`:"","."]})]})]})}),t("div",{className:"space-y-3",children:[t(m,{children:[a("h3",{className:"text-[13px] font-semibold text-text",children:"Already wired"}),a("ul",{className:"mt-2.5 space-y-2",children:p.map(e=>t("li",{className:"flex items-start gap-2 text-[13px] text-body",children:[a(x,{className:"mt-0.5 size-3.5 shrink-0 text-success"}),e]},e))})]}),c.length?t(m,{children:[t("h3",{className:"text-[13px] font-semibold text-text",children:["Elsewhere in ",s.title]}),a("ul",{className:"-mx-1.5 mt-2",children:c.map(e=>e.kind==="item"?a("li",{children:t(u,{href:e.href,className:"flex items-center gap-2 rounded-ctl px-1.5 py-1.5 text-[13px] text-body transition-colors hover:bg-hover hover:text-text",children:[a("span",{className:"min-w-0 flex-1 truncate",children:e.label}),a(h,{className:"size-3 shrink-0 text-muted"})]})},e.href):null)})]}):null]})]})]})}export{I as PlaceholderScreen};

package/dist/shell/topbar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Menu as x,PanelLeft as h,Search as p}from"lucide-react";import{WaveMark as f}from"../components/brand/logo.js";import{Button as l}from"../components/ui/button.js";import{Tooltip as g}from"../components/ui/tooltip.js";import{cn as v}from"../lib/utils.js";import{useUi as s}from"../store/ui-store.js";import{AppSwitcher as N}from"./app-switcher.js";import{Notifications as k}from"./notifications.js";import{UserMenu as w}from"./user-menu.js";import{useActive as z}from"./use-active.js";function I(){const m=s(a=>a.togglePanel),i=s(a=>a.setPalette),c=s(a=>a.setMobileNav),u=s(a=>a.setLauncher),{cfg:t,app:r}=z(),b=r.icon,n=t.showAppSwitcher!==!1&&t.apps.length>1,d=t.searchClearance==="wide";return e("header",{className:"col-start-3 col-end-4 row-start-1 flex border-b border-border bg-canvas px-4 sm:px-6",children:o("div",{className:"@container relative mx-auto flex w-full max-w-[1600px] items-center gap-2 sm:gap-2.5",children:[o("div",{className:"flex min-w-0 items-center gap-2",children:[e(g,{label:"Toggle panel",shortcut:"\u2318B",children:e(l,{variant:"ghost",size:"icon",onClick:m,className:"-ml-2.5 hidden lg:inline-flex","aria-label":"Toggle module panel",children:e(h,{})})}),e(l,{variant:"ghost",size:"icon",onClick:()=>c(!0),className:"-ml-2.5 lg:hidden","aria-label":"Open navigation",children:e(x,{})}),o("button",{type:"button",onClick:()=>n?u(!0):c(!0),"aria-label":`WAVEINNO, ${r.name}`,className:"flex min-w-0 shrink items-center gap-2 rounded-full py-1 pl-0.5 pr-2 transition-colors hover:bg-hover lg:hidden",children:[o("span",{className:"relative shrink-0",children:[e(f,{size:"sm"}),e("span",{className:"absolute -bottom-0.5 -right-0.5 grid size-[13px] place-items-center rounded-full text-white ring-2 ring-canvas",style:{background:r.tint},children:e(b,{className:"size-2"})})]}),e("span",{className:`disp truncate text-[13px] font-semibold text-text ${n?"md:hidden":""}`,children:r.name})]})]}),o("button",{type:"button",onClick:()=>i(!0),className:v("absolute left-1/2 top-1/2 hidden h-[38px] -translate-x-1/2 -translate-y-1/2 cursor-text items-center gap-2.5 rounded-full border border-border bg-surface px-[15px] text-left transition-[background-color,border-color,box-shadow] hover:border-border2 focus-visible:border-primary focus-visible:bg-raised focus-visible:shadow-elev2",d?"w-[clamp(260px,calc(100%-960px),560px)] @min-[1220px]:flex":"w-[clamp(260px,calc(100%-720px),560px)] @min-[980px]:flex"),children:[e(p,{className:"size-4 shrink-0 text-muted"}),e("span",{className:"flex-1 truncate text-sm text-placeholder",children:t.searchPlaceholder??"Search screens and records\u2026"}),e("kbd",{className:"hidden rounded-[5px] border border-border2 px-1.5 text-[11px] font-medium text-muted md:inline",children:"\u2318K"})]}),o("div",{className:"ml-auto flex items-center gap-2 sm:gap-2.5",children:[e(l,{variant:"ghost",size:"icon",onClick:()=>i(!0),className:d?"@min-[1220px]:hidden":"@min-[980px]:hidden","aria-label":"Search",children:e(p,{})}),t.topbarExtra?e("div",{className:"hidden sm:block",children:t.topbarExtra}):null,t.scope?e("div",{className:"hidden sm:block",children:t.scope}):null,n?e("div",{className:"hidden md:block",children:e(N,{})}):null,e(k,{}),e(w,{})]})]})})}export{I as Topbar};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Menu as x,PanelLeft as h,Search as p}from"lucide-react";import{WaveMark as f}from"../components/brand/logo.js";import{Button as n}from"../components/ui/button.js";import{Tooltip as g}from"../components/ui/tooltip.js";import{cn as v}from"../lib/utils.js";import{useUi as s}from"../store/ui-store.js";import{AppSwitcher as N}from"./app-switcher.js";import{Notifications as k}from"./notifications.js";import{UserMenu as w}from"./user-menu.js";import{useActive as z}from"./use-active.js";function I(){const m=s(a=>a.togglePanel),i=s(a=>a.setPalette),c=s(a=>a.setMobileNav),u=s(a=>a.setLauncher),{cfg:t,app:r}=z(),b=r.icon,l=t.showAppSwitcher!==!1&&t.apps.length>1,d=t.searchClearance==="wide";return e("header",{className:"col-start-3 col-end-4 row-start-1 flex border-b border-border bg-canvas px-4 sm:px-6",children:o("div",{className:"@container relative mx-auto flex w-full max-w-[1600px] items-center gap-2 sm:gap-2.5",children:[o("div",{className:"flex min-w-0 items-center gap-2",children:[e(g,{label:"Toggle panel",shortcut:"\u2318B",children:e(n,{variant:"ghost",size:"icon",onClick:m,className:"-ml-2.5 hidden lg:inline-flex","aria-label":"Toggle module panel",children:e(h,{})})}),e(n,{variant:"ghost",size:"icon",onClick:()=>c(!0),className:"-ml-2.5 lg:hidden","aria-label":"Open navigation",children:e(x,{})}),o("button",{type:"button",onClick:()=>l?u(!0):c(!0),"aria-label":`WAVEINNO, ${r.name}`,className:"flex min-w-0 shrink items-center gap-2 rounded-full py-1 pl-0.5 pr-2 transition-colors hover:bg-hover lg:hidden",children:[o("span",{className:"relative shrink-0",children:[e(f,{size:"sm"}),e("span",{className:"absolute -bottom-0.5 -right-0.5 grid size-[13px] place-items-center rounded-full text-white ring-2 ring-canvas",style:{background:r.tint},children:e(b,{className:"size-2"})})]}),e("span",{className:`disp truncate text-[13px] font-semibold text-text ${l?"md:hidden":""}`,children:r.name})]})]}),o("button",{type:"button",onClick:()=>i(!0),className:v("absolute left-1/2 top-1/2 hidden h-[38px] -translate-x-1/2 -translate-y-1/2 cursor-text items-center gap-2.5 rounded-full border border-border bg-surface px-[15px] text-left transition-[background-color,border-color,box-shadow] hover:border-border2 focus-visible:border-primary focus-visible:bg-raised focus-visible:shadow-elev2",d?"w-[clamp(260px,calc(100%-960px),560px)] @min-[1220px]:flex":"w-[clamp(260px,calc(100%-720px),560px)] @min-[980px]:flex"),children:[e(p,{className:"size-4 shrink-0 text-muted"}),e("span",{className:"flex-1 truncate text-sm text-placeholder",children:t.searchPlaceholder??"Search screens and records\u2026"}),e("kbd",{className:"hidden rounded-[calc(5px*var(--radius-scale))] border border-border2 px-1.5 text-[11px] font-medium text-muted md:inline",children:"\u2318K"})]}),o("div",{className:"ml-auto flex items-center gap-2 sm:gap-2.5",children:[e(n,{variant:"ghost",size:"icon",onClick:()=>i(!0),className:d?"@min-[1220px]:hidden":"@min-[980px]:hidden","aria-label":"Search",children:e(p,{})}),t.topbarExtra?e("div",{className:"hidden sm:block",children:t.topbarExtra}):null,t.scope?e("div",{className:"hidden sm:block",children:t.scope}):null,l?e("div",{className:"hidden md:block",children:e(N,{})}):null,e(k,{}),e(w,{})]})]})})}export{I as Topbar};

package/dist/shell/use-active.js

@@ -1 +1 @@
-"use client";import{usePathname as l}from"next/navigation";import{useApp as u}from"../store/app-store.js";import{useShell as f}from"./config.js";import{moduleFromPath as h,navItemFromPath as v,railModules as I}from"./registry.js";function F(){const t=f(),e=l(),p=u(o=>o.appId),s=h(t.modules,e),m=v(e,s),a=o=>!!o&&t.apps.some(c=>c.id===o),r=s.app??(a(p)?p:t.apps[0].id),n=t.apps.find(o=>o.id===r)??t.apps[0],i=t.isEntitled??(()=>!0),d=I(t.modules,n.id,s.key,i);return{cfg:t,pathname:e,mod:s,item:m,app:n,rail:d,isEntitled:i}}export{F as useActive};
+"use client";import{useRouterAdapter as l}from"../hooks/use-router.js";import{useApp as u}from"../store/app-store.js";import{useShell as f}from"./config.js";import{moduleFromPath as h,navItemFromPath as v,railModules as A}from"./registry.js";function P(){const t=f(),{pathname:e}=l(),p=u(o=>o.appId),s=h(t.modules,e),r=v(e,s),m=o=>!!o&&t.apps.some(c=>c.id===o),a=s.app??(m(p)?p:t.apps[0].id),n=t.apps.find(o=>o.id===a)??t.apps[0],i=t.isEntitled??(()=>!0),d=A(t.modules,n.id,s.key,i);return{cfg:t,pathname:e,mod:s,item:r,app:n,rail:d,isEntitled:i}}export{P as useActive};

package/dist/shell/user-menu.js

@@ -1 +1 @@
-"use client";import{Fragment as D,jsx as e,jsxs as t}from"react/jsx-runtime";import{LogOut as l}from"lucide-react";import c from"next/link";import{Avatar as s}from"../components/ui/avatar.js";import{DropdownMenu as u,DropdownMenuContent as d,DropdownMenuItem as m,DropdownMenuLabel as x,DropdownMenuSeparator as a,DropdownMenuTrigger as g}from"../components/ui/dropdown-menu.js";import{DensityPicker as f,ThemeToggle as w}from"./appearance-controls.js";import{useShell as v}from"./config.js";function L(){const{user:n,userLinks:r=[],onSignOut:p}=v();return t(u,{children:[e(g,{className:"shrink-0 cursor-pointer rounded-full","aria-label":"Account menu",children:e(s,{name:n.name,src:n.avatar})}),t(d,{align:"end",className:"w-72",children:[t("div",{className:"flex items-center gap-2.5 px-2.5 py-2.5",children:[e(s,{name:n.name,size:"lg"}),t("div",{className:"min-w-0",children:[e("p",{className:"truncate text-[13px] font-semibold text-text",children:n.name}),e("p",{className:"truncate text-[11px] text-muted",children:n.email})]})]}),t("div",{className:"mx-2.5 mb-1 rounded-ctl bg-hover px-2.5 py-2",children:[e("p",{className:"ov",children:"Signed in as"}),e("p",{className:"mt-0.5 text-xs text-text",children:n.role}),n.context?e("p",{className:"mt-0.5 text-[11px] text-muted",children:n.context}):null]}),e(a,{}),e(x,{children:"Appearance"}),t("div",{className:"flex items-center justify-between gap-2 px-2.5 py-1.5",onClick:o=>o.stopPropagation(),children:[e("span",{className:"text-[13px] text-body",children:"Theme"}),e(w,{})]}),t("div",{className:"flex items-center justify-between gap-2 px-2.5 pb-2 pt-1",onClick:o=>o.stopPropagation(),children:[e("span",{className:"text-[13px] text-body",children:"Density"}),e(f,{compact:!0})]}),r.length?e(a,{}):null,r.map(o=>{const i=o.icon;return e(m,{asChild:!0,children:t(c,{href:o.href,children:[e(i,{}),o.label]})},o.href)}),p?t(D,{children:[e(a,{}),t(m,{danger:!0,onSelect:p,children:[e(l,{}),"Sign out"]})]}):null]})]})}export{L as UserMenu};
+"use client";import{Fragment as D,jsx as e,jsxs as t}from"react/jsx-runtime";import{LogOut as l}from"lucide-react";import{Avatar as s}from"../components/ui/avatar.js";import{DropdownMenu as c,DropdownMenuContent as u,DropdownMenuItem as m,DropdownMenuLabel as d,DropdownMenuSeparator as a,DropdownMenuTrigger as x}from"../components/ui/dropdown-menu.js";import{RouterLink as g}from"../hooks/use-router.js";import{DensityPicker as f,ThemeToggle as w}from"./appearance-controls.js";import{useShell as v}from"./config.js";function L(){const{user:n,userLinks:r=[],onSignOut:p}=v();return t(c,{children:[e(x,{className:"shrink-0 cursor-pointer rounded-full","aria-label":"Account menu",children:e(s,{name:n.name,src:n.avatar})}),t(u,{align:"end",className:"w-72",children:[t("div",{className:"flex items-center gap-2.5 px-2.5 py-2.5",children:[e(s,{name:n.name,size:"lg"}),t("div",{className:"min-w-0",children:[e("p",{className:"truncate text-[13px] font-semibold text-text",children:n.name}),e("p",{className:"truncate text-[11px] text-muted",children:n.email})]})]}),t("div",{className:"mx-2.5 mb-1 rounded-ctl bg-hover px-2.5 py-2",children:[e("p",{className:"ov",children:"Signed in as"}),e("p",{className:"mt-0.5 text-xs text-text",children:n.role}),n.context?e("p",{className:"mt-0.5 text-[11px] text-muted",children:n.context}):null]}),e(a,{}),e(d,{children:"Appearance"}),t("div",{className:"flex items-center justify-between gap-2 px-2.5 py-1.5",onClick:o=>o.stopPropagation(),children:[e("span",{className:"text-[13px] text-body",children:"Theme"}),e(w,{})]}),t("div",{className:"flex items-center justify-between gap-2 px-2.5 pb-2 pt-1",onClick:o=>o.stopPropagation(),children:[e("span",{className:"text-[13px] text-body",children:"Density"}),e(f,{compact:!0})]}),r.length?e(a,{}):null,r.map(o=>{const i=o.icon;return e(m,{asChild:!0,children:t(g,{href:o.href,children:[e(i,{}),o.label]})},o.href)}),p?t(D,{children:[e(a,{}),t(m,{danger:!0,onSelect:p,children:[e(l,{}),"Sign out"]})]}):null]})]})}export{L as UserMenu};

package/dist/styles.css

@@ -2,7 +2,7 @@
 /* @waveinno/ui — import after tailwindcss:
      @import "tailwindcss";
      @import "@waveinno/ui/styles.css";
-     @source "<path to node_modules>/@waveinno/ui/src";
+     @source "<path to node_modules>/@waveinno/ui/dist";
    The consumer owns the Tailwind entry so it controls @source and plugins. */
 
 /* ══════════════════════════════════════════════════════════════════════════
@@ -37,6 +37,12 @@
   --primary-subtle: #eef2ff;
   --primary-muted: #c7d2fe;
   --accent: #7c3aed;
+  /* The brand gradient, royal to violet (the logo's own), and the ink that
+     dark panels, value bubbles and command menus are drawn in. A theme that
+     changes these changes every gradient, glow and ink surface with them. */
+  --brand-1: #1f45ea;
+  --brand-2: #7560fd;
+  --ink: #140d33;
 
   /* ── intent ── */
   --success: #009767;
@@ -53,10 +59,14 @@
   --elev3: 0 16px 48px rgba(5, 8, 22, 0.16);
   --lit: 0 0 #0000;
 
-  /* ── radius ── */
-  --r-ctl: 8px;
-  --r-card: 10px;
-  --r-dlg: 14px;
+  /* ── radius ──
+     One scale for every corner: the three named radii and each component's
+     own (written as calc(Npx * var(--radius-scale))). 0 is square, 1 the
+     WAVEINNO default, 1.8 very round. Pills stay pills. */
+  --radius-scale: 1;
+  --r-ctl: calc(8px * var(--radius-scale));
+  --r-card: calc(10px * var(--radius-scale));
+  --r-dlg: calc(14px * var(--radius-scale));
 
   /* ── shell geometry ── */
   --rail: 72px;
@@ -171,6 +181,9 @@
   --color-primary-subtle: var(--primary-subtle);
   --color-primary-muted: var(--primary-muted);
   --color-accent: var(--accent);
+  --color-brand-1: var(--brand-1);
+  --color-brand-2: var(--brand-2);
+  --color-ink: var(--ink);
 
   --color-success: var(--success);
   --color-success-subtle: var(--success-subtle);
@@ -685,3 +698,76 @@ select {
     animation-iteration-count: infinite !important;
   }
 }
+
+/* Accordion content opens to its measured height (Radix sets the variable). */
+@keyframes wm-acc-down {
+  from { height: 0; opacity: 0 }
+  to { height: var(--radix-accordion-content-height); opacity: 1 }
+}
+@keyframes wm-acc-up {
+  from { height: var(--radix-accordion-content-height); opacity: 1 }
+  to { height: 0; opacity: 0 }
+}
+
+/* ConfirmDialog as a sheet: up from the bottom edge. */
+@keyframes wm-sheet-up {
+  from { opacity: 0; transform: translateY(24px) }
+  to { opacity: 1; transform: none }
+}
+@keyframes wm-sheet-down {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: translateY(24px) }
+}
+[data-confirm-sheet][data-state="open"] { animation: wm-sheet-up 300ms var(--ease) }
+[data-confirm-sheet][data-state="closed"] { animation: wm-sheet-down 180ms cubic-bezier(0.4, 0, 1, 1) both }
+
+/* ── OrgChart: the connectors between a person and their team ── */
+.wm-org ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 22px;
+}
+.wm-org > ul { padding-top: 0 }
+.wm-org li {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 22px 10px 0;
+}
+.wm-org > ul > li { padding-top: 0 }
+.wm-org li::before,
+.wm-org li::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: 50%;
+  height: 22px;
+  border-top: 1.5px solid var(--org-line, var(--border2));
+}
+.wm-org li::after {
+  right: auto;
+  left: 50%;
+  border-left: 1.5px solid var(--org-line, var(--border2));
+}
+.wm-org > ul > li::before,
+.wm-org > ul > li::after,
+.wm-org li:only-child::before { display: none }
+.wm-org li:only-child::after { border-top: 0; border-radius: 0 }
+.wm-org li:first-child::before,
+.wm-org li:last-child::after { border: 0 none }
+.wm-org li:last-child::before {
+  border-right: 1.5px solid var(--org-line, var(--border2));
+  border-radius: 0 12px 0 0;
+}
+.wm-org li:first-child::after { border-radius: 12px 0 0 0 }
+.wm-org ul ul::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 22px;
+  border-left: 1.5px solid var(--org-line, var(--border2));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "WAVEINNO design system — tokens, shell, primitives and patterns shared by every WAVEINNO product",
   "keywords": [
     "waveinno",
@@ -29,6 +29,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js",
+      "default": "./dist/next/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json",
     "./brand/*": "./dist/brand/*"
@@ -57,14 +62,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-progress": "^1.1.16",
     "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slider": "^1.4.7",
@@ -87,6 +95,11 @@
     "react-dom": ">=19",
     "tailwindcss": ">=4"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^26.6.2",
     "@types/react": "^19.3.0",