@waveinno/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ prop, major = a renamed or removed export or prop.
 
 ## Unreleased
 
+## 0.6.0 — 2026-10-02
+
+- **OrgChart** is smooth: opening or closing a team never moves the person clicked (the chart is re-anchored
+  before paint), the connector draws down and the team springs in one by one, closing lifts it away, and the view
+  glides to show the new team (zooming out a little when it is wide). Panning glides on after a drag; Ctrl/⌘ + wheel
+  zooms at the pointer; double-click zooms in. Connectors are 2px in a brand tint with a dot where a stem meets its
+  team; no hairline gaps. The `list` look folds with a height animation.
+- **Toaster** positions: every corner and edge plus the middle of the screen (`middle-left`, `middle-center`,
+  `middle-right`); `ToastPosition` type. The loading spinner of a promise toast now sits in its icon tile.
+- Avatar: the status dot stays on the face when the avatar sits in a stretching flex row (a hover card, a list).
+
 ## 0.5.0 — 2026-10-02
 
 - **New components**: Accordion (line, card, contained; chevron or plus), Pagination (outline, pill, gradient,

package/dist/components/patterns/org-chart.d.ts

@@ -3,10 +3,13 @@ import * as React from "react";
  * OrgChart — who reports to whom: a company, a site's staff, a franchise.
  *
  * A top-down tree with rounded connectors. Each person with reports carries a
- * count that folds and unfolds their team; the toolbar zooms, fits the chart
- * to the box, and opens or closes every branch. Drag the background to pan,
- * Ctrl/⌘ + wheel to zoom. Departments get a colour (pass `departments`, or
- * one is chosen from the name) that marks each card.
+ * count that folds and unfolds their team. Opening a team never moves the
+ * person you clicked: the chart is re-anchored under them before the frame is
+ * painted, the connector draws down, the team springs in one by one, and the
+ * view glides to show all of it. Closing plays the same in reverse. Drag the
+ * background to pan (it glides on when let go), Ctrl/⌘ + wheel or the toolbar
+ * to zoom; Fit, Expand all and Collapse all are one click. Departments get a
+ * colour (pass `departments`, or one is chosen from the name).
  *
  * Looks:
  *  card     — the default: a card per person with photo, role and department.

package/dist/components/patterns/org-chart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{ChevronDown as H,ChevronRight as L,ChevronsDownUp as D,ChevronsUpDown as W,Maximize2 as A,Minus as V,Plus as B}from"lucide-react";import*as z from"react";import{cn as p}from"../../lib/utils.js";import{Avatar as C}from"../ui/avatar.js";const R=["#4f46e5","#0ea5e9","#10b981","#f59e0b","#e11d48","#7c3aed","#0d9488","#ea580c"],F=t=>[...t].reduce((u,d)=>u*31+d.charCodeAt(0)>>>0,7),S=t=>(t.children??[]).reduce((u,d)=>u+1+S(d),0),T=t=>[t.id,...(t.children??[]).flatMap(T)];function Z({data:t,variant:u="card",departments:d,defaultCollapsed:h,collapseDepth:w,selected:N,onSelect:k,height:c=520,className:r}){const x=z.useMemo(()=>{if(h)return new Set(h);if(w===void 0)return new Set;const g=new Set,f=(o,y)=>{y>=w&&o.children?.length&&g.add(o.id),o.children?.forEach(l=>f(l,y+1))};return f(t,0),g},[t,h,w]),[n,m]=z.useState(x),i=g=>m(f=>{const o=new Set(f);return o.has(g)?o.delete(g):o.add(g),o}),v=g=>g.department?d?.[g.department]??R[F(g.department)%R.length]:"var(--primary)";return u==="list"?e(U,{data:t,folded:n,toggle:i,tone:v,selected:N,onSelect:k,className:r}):e(I,{data:t,variant:u,folded:n,setFolded:m,toggle:i,tone:v,selected:N,onSelect:k,height:c,className:r})}function I({data:t,variant:u,folded:d,setFolded:h,toggle:w,tone:N,selected:k,onSelect:c,height:r,className:x}){const n=z.useRef(null),m=z.useRef(null),[i,v]=z.useState({x:0,y:24,z:1}),[g,f]=z.useState(!1),o=z.useRef(null),y=z.useCallback(()=>{const a=n.current,b=m.current;if(!a||!b)return;const _=Math.min(1,(a.clientWidth-48)/b.scrollWidth,(a.clientHeight-48)/b.scrollHeight);v({x:(a.clientWidth-b.scrollWidth*_)/2,y:24,z:Math.max(.3,_)})},[]);z.useLayoutEffect(y,[y]);const l=a=>{const b=n.current;b&&(f(!0),v(_=>{const $=Math.min(1.6,Math.max(.3,_.z*a)),M=b.clientWidth/2,E=b.clientHeight/2;return{z:$,x:M-(M-_.x)/_.z*$,y:E-(E-_.y)/_.z*$}}))},O="grid size-8 cursor-pointer place-items-center rounded-[calc(8px*var(--radius-scale))] text-muted outline-none transition-colors hover:bg-hover hover:text-text focus-visible:ring-2 focus-visible:ring-primary/40 [&_svg]:size-4";return s("div",{ref:n,className:p("relative overflow-hidden rounded-[calc(16px*var(--radius-scale))] border border-border bg-surface",x),style:{height:r,backgroundImage:"radial-gradient(color-mix(in srgb, var(--border2) 60%, transparent) 1px, transparent 1px)",backgroundSize:`${20*i.z}px ${20*i.z}px`,backgroundPosition:`${i.x}px ${i.y}px`,cursor:o.current?"grabbing":"grab"},onPointerDown:a=>{a.target.closest("button, a, input")||(f(!1),o.current={x:a.clientX,y:a.clientY,vx:i.x,vy:i.y},a.currentTarget.setPointerCapture(a.pointerId))},onPointerMove:a=>{const b=o.current;b&&v(_=>({..._,x:b.vx+a.clientX-b.x,y:b.vy+a.clientY-b.y}))},onPointerUp:()=>{o.current=null},onWheel:a=>{(a.ctrlKey||a.metaKey)&&(a.preventDefault(),l(a.deltaY<0?1.1:1/1.1))},children:[e("div",{ref:m,className:p("wm-org absolute left-0 top-0 w-max origin-top-left",g&&"transition-transform duration-300 ease-[var(--ease)]"),style:{transform:`translate(${i.x}px, ${i.y}px) scale(${i.z})`,"--org-line":u==="gradient"?"color-mix(in srgb, var(--primary) 35%, var(--border2))":"var(--border2)"},onTransitionEnd:()=>f(!1),children:e("ul",{children:e(P,{node:t,depth:0,variant:u,folded:d,toggle:w,tone:N,selected:k,onSelect:c})})}),s("div",{className:"absolute right-3 top-3 flex items-center gap-0.5 rounded-[calc(11px*var(--radius-scale))] border border-border bg-raised/90 p-1 shadow-[var(--lit),0_4px_14px_-6px_rgba(5,8,22,.25)] backdrop-blur",children:[e("button",{type:"button","aria-label":"Zoom out",className:O,onClick:()=>l(1/1.2),children:e(V,{})}),s("span",{className:"num w-11 text-center text-[11.5px] font-medium text-muted",children:[Math.round(i.z*100),"%"]}),e("button",{type:"button","aria-label":"Zoom in",className:O,onClick:()=>l(1.2),children:e(B,{})}),e("span",{className:"mx-0.5 h-5 w-px bg-border"}),e("button",{type:"button","aria-label":"Fit to the box",className:O,onClick:()=>{f(!0),y()},children:e(A,{})}),e("button",{type:"button","aria-label":"Expand everyone",className:O,onClick:()=>h(new Set),children:e(W,{})}),e("button",{type:"button","aria-label":"Collapse to the top",className:O,onClick:()=>h(new Set((t.children??[]).filter(a=>a.children?.length).map(a=>a.id))),children:e(D,{})})]})]})}function P({node:t,depth:u,variant:d,folded:h,toggle:w,tone:N,selected:k,onSelect:c}){const r=t.children??[],x=r.length>0&&!h.has(t.id),n=N(t),m=k===t.id,i=S(t),v=r.length?s("button",{type:"button",onClick:()=>w(t.id),"aria-expanded":x,"aria-label":`${x?"Hide":"Show"} ${t.name}'s team (${i})`,className:p("absolute -bottom-3 left-1/2 z-10 flex h-6 -translate-x-1/2 cursor-pointer items-center gap-0.5 rounded-full border px-2 text-[11px] font-semibold shadow-[0_2px_6px_-2px_rgba(5,8,22,.25)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary/40",x?"border-border bg-raised text-muted hover:text-text":"border-transparent bg-[linear-gradient(135deg,var(--brand-1),var(--brand-2))] text-white"),children:[e("span",{className:"num",children:i}),e(H,{className:p("size-3 transition-transform duration-200",x&&"rotate-180")})]}):null,g=c?()=>c(t):void 0,f=c?"button":"div",o=c?{type:"button",onClick:g}:{};let y;if(d==="avatar")y=s("div",{className:"relative flex w-36 flex-col items-center pb-4 text-center",children:[e(f,{...o,className:p("relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-primary/50",c&&"cursor-pointer"),children:e("span",{className:p("block rounded-full p-[3px] transition-shadow",m&&"shadow-[0_0_0_4px_var(--primary-subtle)]"),style:{background:`conic-gradient(from 210deg, ${n}, color-mix(in srgb, ${n} 30%, transparent), ${n})`},children:e("span",{className:"block rounded-full bg-raised p-[3px]",children:e(C,{name:t.name,src:t.avatar,size:"xl"})})})}),e("p",{className:"mt-2 text-[13.5px] font-semibold leading-5 text-text",children:t.name}),t.title?e("p",{className:"text-[11.5px] leading-4 text-muted",children:t.title}):null,t.badge?e("div",{className:"mt-1.5",children:t.badge}):null,v]});else if(d==="compact")y=s("div",{className:"relative pb-3",children:[s(f,{...o,className:p("flex h-10 max-w-[200px] items-center gap-2 rounded-full border bg-raised pl-1.5 pr-3.5 text-left shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06)] outline-none transition-[border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-primary/40",m?"border-primary shadow-[0_0_0_3px_var(--primary-subtle)]":"border-border hover:border-border2",c&&"cursor-pointer"),children:[e(C,{name:t.name,src:t.avatar,size:"md"}),s("span",{className:"min-w-0",children:[e("span",{className:"block truncate text-[12.5px] font-semibold leading-4 text-text",children:t.name}),t.title?e("span",{className:"block truncate text-[10.5px] leading-[14px] text-muted",children:t.title}):null]}),e("span",{className:"ml-1 size-2 shrink-0 rounded-full",style:{background:n}})]}),v]});else{const l=d==="gradient"&&u===0;y=s("div",{className:"relative pb-3",children:[s(f,{...o,className:p("relative flex w-[212px] flex-col overflow-hidden rounded-[calc(14px*var(--radius-scale))] border text-left outline-none transition-[border-color,box-shadow,transform] duration-200 focus-visible:ring-2 focus-visible:ring-primary/40",l?"border-transparent bg-[linear-gradient(140deg,var(--brand-1),color-mix(in_srgb,var(--brand-1)_78%,#000)_45%,var(--brand-2))] text-white shadow-[inset_0_1px_0_rgba(255,255,255,.25),0_16px_34px_-16px_var(--brand-1)] [--text:#fff] [--muted:rgba(255,255,255,.75)]":"border-border bg-raised shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.05),0_8px_20px_-14px_rgba(5,8,22,.25)]",m&&!l&&"border-primary shadow-[0_0_0_3px_var(--primary-subtle),0_10px_24px_-14px_color-mix(in_srgb,var(--primary)_60%,transparent)]",c&&"cursor-pointer hover:-translate-y-0.5"),children:[l?null:e("span",{"aria-hidden":!0,className:"h-[3px] w-full",style:{background:d==="gradient"?`linear-gradient(90deg, ${n}, color-mix(in srgb, ${n} 40%, transparent))`:n}}),s("span",{className:"flex items-center gap-3 p-3",children:[e("span",{className:p("rounded-full",l?"ring-2 ring-white/40":""),style:l?void 0:{boxShadow:`0 0 0 2px var(--raised), 0 0 0 3.5px color-mix(in srgb, ${n} 55%, transparent)`},children:e(C,{name:t.name,src:t.avatar,size:"lg"})}),s("span",{className:"min-w-0 flex-1",children:[s("span",{className:"flex items-center gap-1.5",children:[e("span",{className:"truncate text-[13.5px] font-semibold text-text",children:t.name}),t.badge]}),t.title?e("span",{className:"block truncate text-[12px] text-muted",children:t.title}):null]})]}),t.department?s("span",{className:p("mx-3 mb-3 inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-[10.5px] font-semibold",l?"bg-white/15 text-white":""),style:l?void 0:{background:`color-mix(in srgb, ${n} 12%, transparent)`,color:n},children:[e("span",{className:"size-1.5 rounded-full",style:{background:l?"#fff":n}}),t.department]}):null]}),v]})}return s("li",{children:[y,x?e("ul",{className:"animate-[wave-in_240ms_var(--ease)]",children:r.map(l=>e(P,{node:l,depth:u+1,variant:d,folded:h,toggle:w,tone:N,selected:k,onSelect:c},l.id))}):null]})}function U({data:t,folded:u,toggle:d,tone:h,selected:w,onSelect:N,className:k}){const c=(r,x)=>{const n=r.children??[],m=n.length>0&&!u.has(r.id),i=w===r.id;return s("li",{children:[s("div",{className:p("group/row flex items-center gap-2.5 rounded-[calc(10px*var(--radius-scale))] py-1.5 pr-2 transition-colors",i?"bg-primary-subtle":"hover:bg-hover"),style:{paddingLeft:6+x*22},children:[n.length?e("button",{type:"button","aria-expanded":m,"aria-label":`${m?"Hide":"Show"} ${r.name}'s team`,onClick:()=>d(r.id),className:"grid size-6 shrink-0 cursor-pointer place-items-center rounded-[6px] text-muted hover:bg-border/60 hover:text-text",children:e(L,{className:p("size-3.5 transition-transform duration-200",m&&"rotate-90")})}):e("span",{className:"size-6 shrink-0"}),s("button",{type:"button",onClick:N?()=>N(r):void 0,className:p("flex min-w-0 flex-1 items-center gap-2.5 text-left outline-none",N&&"cursor-pointer"),children:[e("span",{className:"rounded-full",style:{boxShadow:`0 0 0 2px var(--canvas), 0 0 0 3.5px color-mix(in srgb, ${h(r)} 60%, transparent)`},children:e(C,{name:r.name,src:r.avatar,size:"md"})}),s("span",{className:"min-w-0 flex-1",children:[s("span",{className:"flex items-center gap-1.5",children:[e("span",{className:p("truncate text-[13px] font-semibold",i?"text-primary":"text-text"),children:r.name}),r.badge]}),e("span",{className:"block truncate text-[11.5px] text-muted",children:[r.title,r.department].filter(Boolean).join(" \xB7 ")})]})]}),n.length?e("span",{className:"num shrink-0 rounded-full bg-hover px-2 py-px text-[11px] font-medium text-muted group-hover/row:bg-raised",children:S(r)}):null]}),m?s("ul",{className:"relative animate-[wave-in_200ms_var(--ease)]",children:[e("span",{"aria-hidden":!0,className:"absolute bottom-3 top-0 w-px bg-border",style:{left:18+x*22}}),n.map(v=>c(v,x+1))]}):null]},r.id)};return e("ul",{className:p("space-y-px",k),children:c(t,0)})}const j=T;export{Z as OrgChart,j as orgIds};
+"use client";import{jsx as r,jsxs as d}from"react/jsx-runtime";import{ChevronDown as ie,ChevronRight as oe,ChevronsDownUp as le,ChevronsUpDown as ce,Maximize2 as de,Minus as ue,Plus as pe}from"lucide-react";import*as h from"react";import{cn as w}from"../../lib/utils.js";import{Avatar as I}from"../ui/avatar.js";const re=["#4f46e5","#0ea5e9","#10b981","#f59e0b","#e11d48","#7c3aed","#0d9488","#ea580c"],ge=t=>[...t].reduce((_,y)=>_*31+y.charCodeAt(0)>>>0,7),j=t=>(t.children??[]).reduce((_,y)=>_+1+j(y),0),ne=t=>[t.id,...(t.children??[]).flatMap(ne)],me=220,U=()=>typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;function we({data:t,variant:_="card",departments:y,defaultCollapsed:v,collapseDepth:C,selected:k,onSelect:$,height:R=520,className:o}){const c=h.useMemo(()=>{if(v)return new Set(v);if(C===void 0)return new Set;const s=new Set,x=(O,N)=>{N>=C&&O.children?.length&&s.add(O.id),O.children?.forEach(P=>x(P,N+1))};return x(t,0),s},[t,v,C]),[p,a]=h.useState(c),g=s=>s.department?y?.[s.department]??re[ge(s.department)%re.length]:"var(--primary)";return _==="list"?r(xe,{data:t,folded:p,toggle:x=>a(O=>{const N=new Set(O);return N.has(x)?N.delete(x):N.add(x),N}),tone:g,selected:k,onSelect:$,className:o}):r(be,{data:t,variant:_,folded:p,setFolded:a,tone:g,selected:k,onSelect:$,height:R,className:o})}function be({data:t,variant:_,folded:y,setFolded:v,tone:C,selected:k,onSelect:$,height:R,className:o}){const c=h.useRef(null),p=h.useRef(null),[a,g]=h.useState({x:0,y:28,z:1}),[s,x]=h.useState(!1),[O,N]=h.useState(new Set),[P,H]=h.useState(!1),S=h.useRef(a);S.current=a;const E=h.useRef(null),T=h.useRef(null),m=h.useRef(void 0),A=e=>p.current?.querySelector(`[data-org-card="${CSS.escape(e)}"]`)?.getBoundingClientRect(),J=(e,n)=>{x(n&&!U()),g(e)},D=h.useCallback(e=>{const n=c.current,u=p.current;if(!n||!u)return;const l=u.offsetWidth,i=u.offsetHeight,b=Math.max(.3,Math.min(1,(n.clientWidth-64)/l,(n.clientHeight-64)/i));x(e&&!U()),g({x:(n.clientWidth-l*b)/2,y:Math.max(28,(n.clientHeight-i*b)/2),z:b})},[]);h.useLayoutEffect(()=>D(!1),[D]);const se=e=>{const n=A(e);if(y.has(e)){n&&(E.current={id:e,x:n.left,y:n.top,reveal:!0}),v(l=>{const i=new Set(l);return i.delete(e),i});return}N(l=>new Set(l).add(e)),window.setTimeout(()=>{const l=A(e);l&&(E.current={id:e,x:l.left,y:l.top,reveal:!1}),v(i=>new Set(i).add(e)),N(i=>{const b=new Set(i);return b.delete(e),b})},U()?0:me)},Q=e=>{const n=A(t.id);n&&(E.current={id:t.id,x:n.left,y:n.top,reveal:!1}),v(e),requestAnimationFrame(()=>requestAnimationFrame(()=>D(!0)))};h.useLayoutEffect(()=>{const e=E.current;if(!e)return;E.current=null;const n=A(e.id);if(!n)return;const u=S.current,l={...u,x:u.x+(e.x-n.left),y:u.y+(e.y-n.top)};x(!1),g(l),e.reveal&&window.setTimeout(()=>{const i=c.current,b=p.current?.querySelector(`[data-org-li="${CSS.escape(e.id)}"]`);if(!i||!b)return;const f=i.getBoundingClientRect(),L=b.getBoundingClientRect(),M=40,z=S.current;let F=z.z;L.width>f.width-M*2&&(F=Math.max(.35,z.z*((f.width-M*2)/L.width)));const q=F/z.z,V=(L.left-f.left-z.x)*q+z.x,K=(L.top-f.top-z.y)*q+z.y,W=L.width*q,te=L.height*q;let X=z.x,Z=z.y;W>f.width-M*2?X+=f.width/2-(V+W/2):V<M?X+=M-V:V+W>f.width-M&&(X+=f.width-M-(V+W)),K+te>f.height-M&&(Z+=Math.max(M-K,f.height-M-(K+te))),(X!==z.x||Z!==z.y||F!==z.z)&&J({x:X,y:Z,z:F},!0)},60)},[y]);const B=(e,n,u)=>{const l=c.current;if(!l)return;const i=S.current,b=Math.min(1.6,Math.max(.3,e)),f=n??l.clientWidth/2,L=u??l.clientHeight/2;J({z:b,x:f-(f-i.x)/i.z*b,y:L-(L-i.y)/i.z*b},!0)},ee=()=>{m.current&&cancelAnimationFrame(m.current),m.current=void 0};h.useEffect(()=>ee,[]);const Y="grid size-8 cursor-pointer place-items-center rounded-[calc(8px*var(--radius-scale))] text-muted outline-none transition-[background-color,color,transform] hover:bg-hover hover:text-text active:scale-90 focus-visible:ring-2 focus-visible:ring-primary/40 [&_svg]:size-4",G="520ms cubic-bezier(.22,1,.36,1)";return d("div",{ref:c,className:w("relative touch-none select-none overflow-hidden rounded-[calc(16px*var(--radius-scale))] border border-border bg-surface",P?"cursor-grabbing":"cursor-grab",o),style:{height:R,backgroundImage:"radial-gradient(color-mix(in srgb, var(--border2) 60%, transparent) 1px, transparent 1px)",backgroundSize:`${20*a.z}px ${20*a.z}px`,backgroundPosition:`${a.x}px ${a.y}px`,transition:s?`background-position ${G}, background-size ${G}`:void 0},onPointerDown:e=>{e.target.closest("button, a, input")||(ee(),x(!1),H(!0),T.current={x:e.clientX,y:e.clientY,vx:a.x,vy:a.y,t:performance.now(),speedX:0,speedY:0},e.currentTarget.setPointerCapture(e.pointerId))},onPointerMove:e=>{const n=T.current;if(!n)return;const u=performance.now(),l=n.vx+e.clientX-n.x,i=n.vy+e.clientY-n.y,b=S.current,f=Math.max(1,u-n.t);n.speedX=n.speedX*.6+(l-b.x)/f*.4,n.speedY=n.speedY*.6+(i-b.y)/f*.4,n.t=u,g({...b,x:l,y:i})},onPointerUp:()=>{const e=T.current;if(T.current=null,H(!1),!e||U())return;let n=e.speedX*16,u=e.speedY*16;if(Math.hypot(n,u)<1.5||performance.now()-e.t>80)return;const l=()=>{n*=.92,u*=.92,g(i=>({...i,x:i.x+n,y:i.y+u})),m.current=Math.hypot(n,u)>.4?requestAnimationFrame(l):void 0};m.current=requestAnimationFrame(l)},onWheel:e=>{if(!(e.ctrlKey||e.metaKey))return;e.preventDefault();const n=c.current.getBoundingClientRect();B(S.current.z*(e.deltaY<0?1.12:1/1.12),e.clientX-n.left,e.clientY-n.top)},onDoubleClick:e=>{if(e.target.closest("button, a, input"))return;const n=c.current.getBoundingClientRect();B(S.current.z*1.4,e.clientX-n.left,e.clientY-n.top)},children:[r("div",{ref:p,className:"wm-org absolute left-0 top-0 w-max origin-top-left will-change-transform",style:{transform:`translate3d(${a.x}px, ${a.y}px, 0) scale(${a.z})`,transition:s?`transform ${G}`:void 0,"--org-line":_==="gradient"?"color-mix(in srgb, var(--primary) 55%, var(--border2))":void 0},onTransitionEnd:e=>{e.target===e.currentTarget&&x(!1)},children:r("ul",{children:r(ae,{node:t,index:0,depth:0,variant:_,folded:y,leaving:O,toggle:se,tone:C,selected:k,onSelect:$})})}),d("div",{className:"absolute right-3 top-3 flex items-center gap-0.5 rounded-[calc(11px*var(--radius-scale))] border border-border bg-raised/90 p-1 shadow-[var(--lit),0_4px_14px_-6px_rgba(5,8,22,.25)] backdrop-blur",children:[r("button",{type:"button","aria-label":"Zoom out",className:Y,onClick:()=>B(a.z/1.25),children:r(ue,{})}),d("span",{className:"num w-11 text-center text-[11.5px] font-medium tabular-nums text-muted",children:[Math.round(a.z*100),"%"]}),r("button",{type:"button","aria-label":"Zoom in",className:Y,onClick:()=>B(a.z*1.25),children:r(pe,{})}),r("span",{className:"mx-0.5 h-5 w-px bg-border"}),r("button",{type:"button","aria-label":"Fit to the box",className:Y,onClick:()=>D(!0),children:r(de,{})}),r("button",{type:"button","aria-label":"Expand everyone",className:Y,onClick:()=>Q(new Set),children:r(ce,{})}),r("button",{type:"button","aria-label":"Collapse to the top",className:Y,onClick:()=>Q(new Set((t.children??[]).filter(e=>e.children?.length).map(e=>e.id))),children:r(le,{})})]})]})}function ae({node:t,index:_,depth:y,variant:v,folded:C,leaving:k,toggle:$,tone:R,selected:o,onSelect:c}){const p=t.children??[],a=p.length>0&&!C.has(t.id),g=k.has(t.id),s=R(t),x=o===t.id,O=j(t),N=p.length?d("button",{type:"button",onClick:()=>$(t.id),"aria-expanded":a&&!g,"aria-label":`${a&&!g?"Hide":"Show"} ${t.name}'s team (${O})`,className:w("absolute -bottom-3 left-1/2 z-10 flex h-6 -translate-x-1/2 cursor-pointer items-center gap-0.5 rounded-full border px-2 text-[11px] font-semibold outline-none","shadow-[0_2px_6px_-2px_rgba(5,8,22,.25)] transition-[background-color,color,border-color,transform,box-shadow] duration-300 ease-[cubic-bezier(.3,1.4,.5,1)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary/40",a&&!g?"border-border bg-raised text-muted hover:text-text":"border-transparent bg-[linear-gradient(135deg,var(--brand-1),var(--brand-2))] text-white hover:shadow-[0_6px_16px_-6px_var(--brand-1)]"),children:[r("span",{className:"num",children:O}),r(ie,{className:w("size-3 transition-transform duration-300 ease-[cubic-bezier(.3,1.4,.5,1)]",a&&!g&&"rotate-180")})]}):null,P=c?()=>c(t):void 0,H=c?"button":"div",S=c?{type:"button",onClick:P}:{},E="transition-[border-color,box-shadow,transform] duration-300 ease-[cubic-bezier(.22,1,.36,1)]";let T;if(v==="avatar")T=d("div",{"data-org-card":t.id,className:"relative flex w-36 flex-col items-center pb-4 text-center",children:[r(H,{...S,className:w("relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-primary/50",E,c&&"cursor-pointer hover:-translate-y-1"),children:r("span",{className:w("block rounded-full p-[3px] transition-shadow duration-300",x&&"shadow-[0_0_0_5px_var(--primary-subtle),0_12px_28px_-12px_var(--primary)]"),style:{background:`conic-gradient(from 210deg, ${s}, color-mix(in srgb, ${s} 30%, transparent), ${s})`},children:r("span",{className:"block rounded-full bg-raised p-[3px]",children:r(I,{name:t.name,src:t.avatar,size:"xl"})})})}),r("p",{className:"mt-2 text-[13.5px] font-semibold leading-5 text-text",children:t.name}),t.title?r("p",{className:"text-[11.5px] leading-4 text-muted",children:t.title}):null,t.badge?r("div",{className:"mt-1.5",children:t.badge}):null,N]});else if(v==="compact")T=d("div",{"data-org-card":t.id,className:"relative pb-3",children:[d(H,{...S,className:w("flex h-10 max-w-[200px] items-center gap-2 rounded-full border bg-raised pl-1.5 pr-3.5 text-left shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06)] outline-none focus-visible:ring-2 focus-visible:ring-primary/40",E,x?"border-primary shadow-[0_0_0_3px_var(--primary-subtle)]":"border-border hover:border-border2",c&&"cursor-pointer hover:-translate-y-0.5 hover:shadow-[var(--lit),0_8px_18px_-10px_rgba(5,8,22,.3)]"),children:[r(I,{name:t.name,src:t.avatar,size:"md"}),d("span",{className:"min-w-0",children:[r("span",{className:"block truncate text-[12.5px] font-semibold leading-4 text-text",children:t.name}),t.title?r("span",{className:"block truncate text-[10.5px] leading-[14px] text-muted",children:t.title}):null]}),r("span",{className:"ml-1 size-2 shrink-0 rounded-full",style:{background:s}})]}),N]});else{const m=v==="gradient"&&y===0;T=d("div",{"data-org-card":t.id,className:"relative pb-3",children:[d(H,{...S,className:w("relative flex w-[212px] flex-col overflow-hidden rounded-[calc(14px*var(--radius-scale))] border text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/40",E,m?"border-transparent bg-[linear-gradient(140deg,var(--brand-1),color-mix(in_srgb,var(--brand-1)_78%,#000)_45%,var(--brand-2))] text-white shadow-[inset_0_1px_0_rgba(255,255,255,.25),0_16px_34px_-16px_var(--brand-1)] [--muted:rgba(255,255,255,.75)] [--text:#fff]":"border-border bg-raised shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.05),0_8px_20px_-14px_rgba(5,8,22,.25)]",x&&!m&&"border-primary shadow-[0_0_0_3px_var(--primary-subtle),0_14px_30px_-16px_color-mix(in_srgb,var(--primary)_65%,transparent)]",c&&"cursor-pointer hover:-translate-y-1 hover:shadow-[var(--lit),0_18px_36px_-18px_rgba(5,8,22,.35)]"),children:[m?null:r("span",{"aria-hidden":!0,className:"h-[3px] w-full",style:{background:v==="gradient"?`linear-gradient(90deg, ${s}, color-mix(in srgb, ${s} 40%, transparent))`:s}}),d("span",{className:"flex items-center gap-3 p-3",children:[r("span",{className:w("rounded-full",m&&"ring-2 ring-white/40"),style:m?void 0:{boxShadow:`0 0 0 2px var(--raised), 0 0 0 3.5px color-mix(in srgb, ${s} 55%, transparent)`},children:r(I,{name:t.name,src:t.avatar,size:"lg"})}),d("span",{className:"min-w-0 flex-1",children:[d("span",{className:"flex items-center gap-1.5",children:[r("span",{className:"truncate text-[13.5px] font-semibold text-text",children:t.name}),t.badge]}),t.title?r("span",{className:"block truncate text-[12px] text-muted",children:t.title}):null]})]}),t.department?d("span",{className:w("mx-3 mb-3 inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-[10.5px] font-semibold",m&&"bg-white/15 text-white"),style:m?void 0:{background:`color-mix(in srgb, ${s} 12%, transparent)`,color:s},children:[r("span",{className:"size-1.5 rounded-full",style:{background:m?"#fff":s}}),t.department]}):null]}),N]})}return d("li",{"data-org-li":t.id,style:{"--i":_},children:[T,a?r("ul",{className:g?"wm-org-leave":"wm-org-enter",children:p.map((m,A)=>r(ae,{node:m,index:A,depth:y+1,variant:v,folded:C,leaving:k,toggle:$,tone:R,selected:o,onSelect:c},m.id))}):null]})}function xe({data:t,folded:_,toggle:y,tone:v,selected:C,onSelect:k,className:$}){const R=(o,c)=>{const p=o.children??[],a=p.length>0&&!_.has(o.id),g=C===o.id;return d("li",{children:[d("div",{className:w("group/row flex items-center gap-2.5 rounded-[calc(10px*var(--radius-scale))] py-1.5 pr-2 transition-colors duration-200",g?"bg-primary-subtle":"hover:bg-hover"),style:{paddingLeft:6+c*22},children:[p.length?r("button",{type:"button","aria-expanded":a,"aria-label":`${a?"Hide":"Show"} ${o.name}'s team`,onClick:()=>y(o.id),className:"grid size-6 shrink-0 cursor-pointer place-items-center rounded-[6px] text-muted transition-colors hover:bg-border/60 hover:text-text",children:r(oe,{className:w("size-3.5 transition-transform duration-300 ease-[cubic-bezier(.3,1.4,.5,1)]",a&&"rotate-90")})}):r("span",{className:"size-6 shrink-0"}),d("button",{type:"button",onClick:k?()=>k(o):void 0,className:w("flex min-w-0 flex-1 items-center gap-2.5 text-left outline-none",k&&"cursor-pointer"),children:[r("span",{className:"rounded-full",style:{boxShadow:`0 0 0 2px var(--canvas), 0 0 0 3.5px color-mix(in srgb, ${v(o)} 60%, transparent)`},children:r(I,{name:o.name,src:o.avatar,size:"md"})}),d("span",{className:"min-w-0 flex-1",children:[d("span",{className:"flex items-center gap-1.5",children:[r("span",{className:w("truncate text-[13px] font-semibold",g?"text-primary":"text-text"),children:o.name}),o.badge]}),r("span",{className:"block truncate text-[11.5px] text-muted",children:[o.title,o.department].filter(Boolean).join(" \xB7 ")})]})]}),p.length?r("span",{className:"num shrink-0 rounded-full bg-hover px-2 py-px text-[11px] font-medium text-muted group-hover/row:bg-raised",children:j(o)}):null]}),p.length?r("div",{className:w("grid transition-[grid-template-rows,opacity] duration-[380ms] ease-[cubic-bezier(.22,1,.36,1)]",a?"grid-rows-[1fr] opacity-100":"grid-rows-[0fr] opacity-0"),children:d("ul",{className:"relative min-h-0 overflow-hidden",inert:!a,children:[r("span",{"aria-hidden":!0,className:"absolute bottom-3 top-0 w-px bg-border",style:{left:18+c*22}}),p.map(s=>R(s,c+1))]})}):null]},o.id)};return r("ul",{className:w("space-y-px",$),children:R(t,0)})}const ye=ne;export{we as OrgChart,ye as orgIds};

package/dist/components/ui/avatar.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as m from"@radix-ui/react-avatar";import{BadgeCheck as x}from"lucide-react";import{cn as r,initials as v}from"../../lib/utils.js";const b={sm:"size-6 text-[10px]",md:"size-8 text-xs",lg:"size-10 text-[13px]",xl:"size-14 text-[17px]","2xl":"size-20 text-[24px]"},p={sm:"size-2",md:"size-2.5",lg:"size-3",xl:"size-3.5","2xl":"size-4"},u=["linear-gradient(135deg,#1f45ea,#5b4af5)","linear-gradient(135deg,#7560fd,#a78bfa)","linear-gradient(135deg,#0891b2,#22d3ee)","linear-gradient(135deg,#047857,#10b981)","linear-gradient(135deg,#d97706,#f59e0b)","linear-gradient(135deg,#db2777,#f472b6)","linear-gradient(135deg,#1a113e,#4338ca)"];function z(e){let a=0;for(const s of e)a=a*31+s.charCodeAt(0)>>>0;return u[a%u.length]}const h={online:"bg-success",away:"bg-warning",busy:"bg-danger",offline:"bg-border2"};function k({name:e,src:a,size:s="md",status:i,verified:l,ring:n,shape:c="circle",className:f}){const d=c==="circle"?"rounded-full":"rounded-[28%]",g=o(m.Root,{className:r("relative grid shrink-0 place-items-center overflow-hidden font-semibold text-white select-none shadow-[inset_0_1px_0_rgba(255,255,255,.25)]",d,b[s],!n&&f),style:{background:z(e)},children:[a?t(m.Image,{src:a,alt:e,className:"size-full object-cover"}):null,t(m.Fallback,{className:"grid size-full place-items-center",children:v(e)})]});return!n&&!i&&!l?g:o("span",{className:r("relative inline-grid shrink-0",n&&f),children:[n?t("span",{className:r("bg-[conic-gradient(from_200deg,var(--brand-1),var(--brand-2),#22d3ee,var(--brand-1))] p-[2px]",d),children:t("span",{className:r("block bg-canvas p-[2px]",d),children:g})}):g,i?t("span",{className:r("absolute bottom-0 right-0 rounded-full ring-2 ring-canvas",h[i],p[s]),"aria-label":i}):null,l?t(x,{className:r("absolute -right-1 -top-1 fill-primary text-canvas",p[s]==="size-2"?"size-3":"size-4"),"aria-label":"verified"}):null]})}function S({names:e,max:a=4,size:s="sm"}){const i=e.slice(0,a),l=e.length-i.length;return o("div",{className:"flex items-center",children:[i.map((n,c)=>t(k,{name:n,size:s,className:"-ml-1.5 ring-2 ring-surface first:ml-0"},n+c)),l>0?o("span",{className:r("num -ml-1.5 grid place-items-center rounded-full bg-hover font-semibold text-muted ring-2 ring-surface",b[s]),children:["+",l]}):null]})}export{k as Avatar,S as AvatarStack};
+"use client";import{jsx as r,jsxs as o}from"react/jsx-runtime";import*as m from"@radix-ui/react-avatar";import{BadgeCheck as x}from"lucide-react";import{cn as n,initials as v}from"../../lib/utils.js";const b={sm:"size-6 text-[10px]",md:"size-8 text-xs",lg:"size-10 text-[13px]",xl:"size-14 text-[17px]","2xl":"size-20 text-[24px]"},p={sm:"size-2",md:"size-2.5",lg:"size-3",xl:"size-3.5","2xl":"size-4"},u=["linear-gradient(135deg,#1f45ea,#5b4af5)","linear-gradient(135deg,#7560fd,#a78bfa)","linear-gradient(135deg,#0891b2,#22d3ee)","linear-gradient(135deg,#047857,#10b981)","linear-gradient(135deg,#d97706,#f59e0b)","linear-gradient(135deg,#db2777,#f472b6)","linear-gradient(135deg,#1a113e,#4338ca)"];function z(e){let a=0;for(const i of e)a=a*31+i.charCodeAt(0)>>>0;return u[a%u.length]}const h={online:"bg-success",away:"bg-warning",busy:"bg-danger",offline:"bg-border2"};function k({name:e,src:a,size:i="md",status:s,verified:l,ring:t,shape:c="circle",className:f}){const d=c==="circle"?"rounded-full":"rounded-[28%]",g=o(m.Root,{className:n("relative grid shrink-0 place-items-center overflow-hidden font-semibold text-white select-none shadow-[inset_0_1px_0_rgba(255,255,255,.25)]",d,b[i],!t&&f),style:{background:z(e)},children:[a?r(m.Image,{src:a,alt:e,className:"size-full object-cover"}):null,r(m.Fallback,{className:"grid size-full place-items-center",children:v(e)})]});return!t&&!s&&!l?g:o("span",{className:n("relative inline-grid h-fit w-fit shrink-0",t&&f),children:[t?r("span",{className:n("bg-[conic-gradient(from_200deg,var(--brand-1),var(--brand-2),#22d3ee,var(--brand-1))] p-[2px]",d),children:r("span",{className:n("block bg-canvas p-[2px]",d),children:g})}):g,s?r("span",{className:n("absolute bottom-0 right-0 rounded-full ring-2 ring-canvas",h[s],p[i]),"aria-label":s}):null,l?r(x,{className:n("absolute -right-1 -top-1 fill-primary text-canvas",p[i]==="size-2"?"size-3":"size-4"),"aria-label":"verified"}):null]})}function w({names:e,max:a=4,size:i="sm"}){const s=e.slice(0,a),l=e.length-s.length;return o("div",{className:"flex items-center",children:[s.map((t,c)=>r(k,{name:t,size:i,className:"-ml-1.5 ring-2 ring-surface first:ml-0"},t+c)),l>0?o("span",{className:n("num -ml-1.5 grid place-items-center rounded-full bg-hover font-semibold text-muted ring-2 ring-surface",b[i]),children:["+",l]}):null]})}export{k as Avatar,w as AvatarStack};

package/dist/components/ui/toast.d.ts

@@ -8,6 +8,17 @@ import { Toaster as Sonner, toast } from "sonner";
  * `toast("Saved")`, `toast.success(…)`, `toast.error(…)`, `toast.promise(…)`
  * from anywhere. The toast is sonner's; the look is WAVEINNO's: a raised card,
  * the tone's icon in a soft tile, and the theme's colours in light and dark.
+ *
+ * Where they appear: `position` on the Toaster sets the default — any corner,
+ * top or bottom centre, or the middle of the screen (`middle-left`,
+ * `middle-center`, `middle-right`). One toast can go elsewhere with
+ * `toast("…", { position: "top-center" })` (the six edge positions). For the
+ * middle, or a second stack, add a Toaster with an `id` and send toasts to it
+ * with `toasterId`.
  */
 export { toast };
-export declare function Toaster({ position, ...props }: React.ComponentProps<typeof Sonner>): React.JSX.Element;
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface ToasterProps extends Omit<React.ComponentProps<typeof Sonner>, "position"> {
+    position?: ToastPosition;
+}
+export declare function Toaster({ position, className, ...props }: ToasterProps): React.JSX.Element;

package/dist/components/ui/toast.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import{CircleAlert as o,CircleCheck as n,Info as s,LoaderCircle as i,TriangleAlert as c}from"lucide-react";import{Toaster as d,toast as p}from"sonner";const e=(t,a)=>r("span",{className:"grid size-7 place-items-center rounded-[calc(8px*var(--radius-scale))] [&_svg]:size-4",style:{color:`var(--${t})`,background:`var(--${t}-subtle)`},children:a});function b({position:t="bottom-right",...a}){return r(d,{position:t,gap:10,icons:{success:e("success",r(n,{})),error:e("danger",r(o,{})),warning:e("warning",r(c,{})),info:e("info",r(s,{})),loading:e("primary",r(i,{className:"animate-spin"}))},toastOptions:{unstyled:!0,classNames:{toast:"group flex w-[356px] max-w-[calc(100vw-32px)] items-center gap-3 rounded-[calc(14px*var(--radius-scale))] border border-border bg-raised p-3 pr-4 text-[13px] text-text shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06),0_16px_40px_-12px_rgba(5,8,22,.28)]",icon:"!m-0 !size-7 shrink-0 [&>svg]:hidden [&>span]:!grid [&>span]:!size-7 [&>span]:place-items-center",content:"min-w-0 flex-1",title:"font-semibold leading-[18px] text-text",description:"mt-0.5 text-[12.5px] leading-[17px] text-muted",actionButton:"ml-auto shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] bg-primary px-2.5 py-1.5 text-[12px] font-medium text-white transition-colors hover:bg-primary-hover",cancelButton:"shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] border border-border px-2.5 py-1.5 text-[12px] font-medium text-body transition-colors hover:bg-hover",closeButton:"!border-border !bg-raised !text-muted hover:!text-text",success:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--success-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--success)_22%,var(--border))]!",error:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--danger-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--danger)_22%,var(--border))]!",warning:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--warning-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--warning)_22%,var(--border))]!",info:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--info-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--info)_22%,var(--border))]!"}},...a})}export{b as Toaster,p as toast};
+"use client";import{jsx as r}from"react/jsx-runtime";import{CircleAlert as n,CircleCheck as d,Info as c,LoaderCircle as p,TriangleAlert as l}from"lucide-react";import{Toaster as m,toast as g}from"sonner";import{cn as x}from"../../lib/utils.js";const t=(e,o)=>r("span",{className:"grid size-7 place-items-center rounded-[calc(8px*var(--radius-scale))] [&_svg]:size-4",style:{color:`var(--${e})`,background:`var(--${e}-subtle)`},children:o});function f({position:e="bottom-right",className:o,...i}){const a=e.startsWith("middle-"),s=a?e.replace("middle-","top-"):e;return r(m,{position:s,gap:10,className:x(a&&"wm-toaster-middle",o),icons:{success:t("success",r(d,{})),error:t("danger",r(n,{})),warning:t("warning",r(l,{})),info:t("info",r(c,{})),loading:t("primary",r(p,{className:"animate-spin"}))},toastOptions:{unstyled:!0,classNames:{toast:"group flex w-[356px] max-w-[calc(100vw-32px)] items-center gap-3 rounded-[calc(14px*var(--radius-scale))] border border-border bg-raised p-3 pr-4 text-[13px] text-text shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06),0_16px_40px_-12px_rgba(5,8,22,.28)]",icon:"!relative !m-0 !size-7 shrink-0 [&>svg]:hidden [&>span]:!grid [&>span]:!size-7 [&>span]:place-items-center",loader:"[&>span]:!size-7",content:"min-w-0 flex-1",title:"font-semibold leading-[18px] text-text",description:"mt-0.5 text-[12.5px] leading-[17px] text-muted",actionButton:"ml-auto shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] bg-primary px-2.5 py-1.5 text-[12px] font-medium text-white transition-colors hover:bg-primary-hover",cancelButton:"shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] border border-border px-2.5 py-1.5 text-[12px] font-medium text-body transition-colors hover:bg-hover",closeButton:"!border-border !bg-raised !text-muted hover:!text-text",success:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--success-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--success)_22%,var(--border))]!",error:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--danger-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--danger)_22%,var(--border))]!",warning:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--warning-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--warning)_22%,var(--border))]!",info:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--info-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--info)_22%,var(--border))]!"}},...i})}export{f as Toaster,g as toast};

package/dist/styles.css

@@ -721,12 +721,19 @@ select {
 [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 ── */
+/* ── OrgChart: the connectors between a person and their team ──
+   2px lines in a tint of the brand, rounded where they turn, a dot where a
+   person's stem meets their team's bar. --org-gap is the height of each leg. */
+.wm-org {
+  --org-gap: 26px;
+  --org-w: 2px;
+  --org-c: var(--org-line, color-mix(in srgb, var(--primary) 32%, var(--border2)));
+}
 .wm-org ul {
   position: relative;
   display: flex;
   justify-content: center;
-  padding-top: 22px;
+  padding-top: var(--org-gap);
 }
 .wm-org > ul { padding-top: 0 }
 .wm-org li {
@@ -734,7 +741,7 @@ select {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 22px 10px 0;
+  padding: var(--org-gap) 12px 0;
 }
 .wm-org > ul > li { padding-top: 0 }
 .wm-org li::before,
@@ -744,13 +751,14 @@ select {
   top: 0;
   right: 50%;
   width: 50%;
-  height: 22px;
-  border-top: 1.5px solid var(--org-line, var(--border2));
+  height: var(--org-gap);
+  border-top: var(--org-w) solid var(--org-c);
 }
 .wm-org li::after {
   right: auto;
-  left: 50%;
-  border-left: 1.5px solid var(--org-line, var(--border2));
+  left: calc(50% - var(--org-w) / 2);
+  width: calc(50% + var(--org-w) / 2);
+  border-left: var(--org-w) solid var(--org-c);
 }
 .wm-org > ul > li::before,
 .wm-org > ul > li::after,
@@ -759,15 +767,77 @@ select {
 .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;
+  border-right: var(--org-w) solid var(--org-c);
+  border-radius: 0 14px 0 0;
 }
-.wm-org li:first-child::after { border-radius: 12px 0 0 0 }
+.wm-org li:first-child::after { border-radius: 14px 0 0 0 }
+/* The stem from a person down to their team's bar. */
 .wm-org ul ul::before {
   content: "";
   position: absolute;
   top: 0;
+  left: calc(50% - var(--org-w) / 2);
+  height: var(--org-gap);
+  border-left: var(--org-w) solid var(--org-c);
+}
+/* Where the stem meets the bar (only when there is a bar: two or more people). */
+.wm-org ul ul:has(> li + li)::after {
+  content: "";
+  position: absolute;
+  top: var(--org-gap);
   left: 50%;
-  height: 22px;
-  border-left: 1.5px solid var(--org-line, var(--border2));
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--org-c);
+  box-shadow: 0 0 0 3px var(--surface);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+/* OrgChart motion. Opening a team: the stem draws down, then people arrive one
+   after another with a little spring. Closing: they lift away together. */
+@keyframes wm-org-stem {
+  from { transform: scaleY(0) }
+  to { transform: scaleY(1) }
+}
+@keyframes wm-org-in {
+  from { opacity: 0; transform: translateY(-14px) scale(.92) }
+  to { opacity: 1; transform: none }
+}
+@keyframes wm-org-out {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: translateY(-10px) scale(.94) }
+}
+.wm-org .wm-org-enter::before {
+  transform-origin: top;
+  animation: wm-org-stem 240ms cubic-bezier(.22, 1, .36, 1) both;
+}
+.wm-org .wm-org-enter > li {
+  animation: wm-org-in 560ms cubic-bezier(.2, .9, .25, 1.12) both;
+  animation-delay: calc(140ms + var(--i, 0) * 55ms);
+}
+.wm-org .wm-org-leave > li {
+  animation: wm-org-out 200ms cubic-bezier(.4, 0, 1, 1) both;
+  animation-delay: calc(var(--i, 0) * 12ms);
+}
+.wm-org .wm-org-leave::before {
+  animation: wm-org-out 180ms ease-in both;
+}
+.wm-org .wm-org-leave::after {
+  animation: wm-org-dot 160ms ease-in reverse both;
+}
+@keyframes wm-org-dot {
+  from { scale: 0 }
+  to { scale: 1 }
+}
+.wm-org .wm-org-enter::after {
+  animation: wm-org-dot 320ms cubic-bezier(.3, 1.6, .5, 1) 200ms both;
+}
+
+/* A Toaster in the middle of the screen: sonner's top row, moved to the centre. */
+[data-sonner-toaster].wm-toaster-middle {
+  top: 50% !important;
+  bottom: auto !important;
+  translate: 0 -50%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "WAVEINNO design system — tokens, shell, primitives and patterns shared by every WAVEINNO product",
   "keywords": [
     "waveinno",