@africanies/angular-web-sdk 0.1.1 → 0.1.3

package/dist/apps/playground/browser/chunk-Cg7brw6x.js

@@ -0,0 +1,4070 @@
+import {o}from'./chunk-CZBTrY_H.js';import {T,bA as Eu,aO as pt,k as TP,bB as RP,C as Co$1,u as QI,I as IE,Z,g,h as br$1,l as tI,e as ei$1,M as MI,a as gc,L as LE,o as nI,b9 as lp,J as zf,Q as Qy,f as gp,P as PE,m as mI,t as tp,X as XE,i as Ic,G as GE,c as Zf,d as Qf,bC as gD,bD as hD,p as Gl,z as zl,bE as oy}from'./main-WEJC3BLT.js';var Nt=hD((pi,It)=>{"use strict";function yt(e){return e instanceof Map?e.clear=e.delete=e.set=function(){throw new Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=function(){throw new Error("set is read-only")}),Object.freeze(e),Object.getOwnPropertyNames(e).forEach(t=>{let n=e[t],i=typeof n;(i==="object"||i==="function")&&!Object.isFrozen(n)&&yt(n);}),e}var be=class{constructor(t){t.data===void 0&&(t.data={}),this.data=t.data,this.isMatchIgnored=!1;}ignoreMatch(){this.isMatchIgnored=!0;}};function vt(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function q(e,...t){let n=Object.create(null);for(let i in e)n[i]=e[i];return t.forEach(function(i){for(let m in i)n[m]=i[m];}),n}var en="</span>",mt=e=>!!e.scope,tn=(e,{prefix:t})=>{if(e.startsWith("language:"))return e.replace("language:","language-");if(e.includes(".")){let n=e.split(".");return [`${t}${n.shift()}`,...n.map((i,m)=>`${i}${"_".repeat(m+1)}`)].join(" ")}return `${t}${e}`},Pe=class{constructor(t,n){this.buffer="",this.classPrefix=n.classPrefix,t.walk(this);}addText(t){this.buffer+=vt(t);}openNode(t){if(!mt(t))return;let n=tn(t.scope,{prefix:this.classPrefix});this.span(n);}closeNode(t){mt(t)&&(this.buffer+=en);}value(){return this.buffer}span(t){this.buffer+=`<span class="${t}">`;}},ut=(e={})=>{let t={children:[]};return Object.assign(t,e),t},Le=class e{constructor(){this.rootNode=ut(),this.stack=[this.rootNode];}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(t){this.top.children.push(t);}openNode(t){let n=ut({scope:t});this.add(n),this.stack.push(n);}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(t){return this.constructor._walk(t,this.rootNode)}static _walk(t,n){return typeof n=="string"?t.addText(n):n.children&&(t.openNode(n),n.children.forEach(i=>this._walk(t,i)),t.closeNode(n)),t}static _collapse(t){typeof t!="string"&&t.children&&(t.children.every(n=>typeof n=="string")?t.children=[t.children.join("")]:t.children.forEach(n=>{e._collapse(n);}));}},Fe=class extends Le{constructor(t){super(),this.options=t;}addText(t){t!==""&&this.add(t);}startScope(t){this.openNode(t);}endScope(){this.closeNode();}__addSublanguage(t,n){let i=t.root;n&&(i.scope=`language:${n}`),this.add(i);}toHTML(){return new Pe(this,this.options).value()}finalize(){return this.closeAllNodes(),!0}};function se(e){return e?typeof e=="string"?e:e.source:null}function St(e){return J("(?=",e,")")}function nn(e){return J("(?:",e,")*")}function rn(e){return J("(?:",e,")?")}function J(...e){return e.map(n=>se(n)).join("")}function on(e){let t=e[e.length-1];return typeof t=="object"&&t.constructor===Object?(e.splice(e.length-1,1),t):{}}function ve(...e){return "("+(on(e).capture?"":"?:")+e.map(i=>se(i)).join("|")+")"}function Ct(e){return new RegExp(e.toString()+"|").exec("").length-1}function an(e,t){let n=e&&e.exec(t);return n&&n.index===0}var sn=new RegExp(ve(/\[(?:[^\\\]]|\\.)*\]/,/\(\?<(?![=!])[^>]+>/,/\(\?'[^']+'/,/\(\??/,/\\([1-9][0-9]*)/,/\\./));function Ue(e,{joinWith:t}){let n=0;return e.map(i=>{n+=1;let m=n,g=se(i),a="";for(;g.length>0;){let o=sn.exec(g);if(!o){a+=g;break}a+=g.substring(0,o.index),g=g.substring(o.index+o[0].length),o[0][0]==="\\"&&o[1]?a+="\\"+String(Number(o[1])+m):(a+=o[0],(o[0]==="("||/^\(\?[<']/.test(o[0]))&&n++);}return a}).map(i=>`(${i})`).join(t)}var ln=/\b\B/,xt="[a-zA-Z]\\w*",je="[a-zA-Z_]\\w*",wt="\\b\\d+(\\.\\d+)?",Et="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",At="\\b(0b[01]+)",cn="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",pn=(e={})=>{let t=/^#![ ]*\//;return e.binary&&(e.begin=J(t,/.*\b/,e.binary,/\b.*/)),q({scope:"meta",begin:t,end:/$/,relevance:0,"on:begin":(n,i)=>{n.index!==0&&i.ignoreMatch();}},e)},le={begin:"\\\\[\\s\\S]",relevance:0},dn={scope:"string",begin:"'",end:"'",illegal:"\\n",contains:[le]},mn={scope:"string",begin:'"',end:'"',illegal:"\\n",contains:[le]},un={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},Se=function(e,t,n={}){let i=q({scope:"comment",begin:e,end:t,contains:[]},n);i.contains.push({scope:"doctag",begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0});let m=ve("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/);return i.contains.push({begin:J(/[ ]+/,"(",m,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),i},fn=Se("//","$"),gn=Se("/\\*","\\*/"),hn=Se("#","$"),bn={scope:"number",begin:wt,relevance:0},yn={scope:"number",begin:Et,relevance:0},vn={scope:"number",begin:At,relevance:0},Sn={scope:"regexp",begin:/\/(?=[^/\n]*\/)/,end:/\/[gimuy]*/,contains:[le,{begin:/\[/,end:/\]/,relevance:0,contains:[le]}]},Cn={scope:"title",begin:xt,relevance:0},xn={scope:"title",begin:je,relevance:0},wn={begin:"\\.\\s*"+je,relevance:0},En=function(e){return Object.assign(e,{"on:begin":(t,n)=>{n.data._beginMatch=t[1];},"on:end":(t,n)=>{n.data._beginMatch!==t[1]&&n.ignoreMatch();}})},he=Object.freeze({__proto__:null,APOS_STRING_MODE:dn,BACKSLASH_ESCAPE:le,BINARY_NUMBER_MODE:vn,BINARY_NUMBER_RE:At,COMMENT:Se,C_BLOCK_COMMENT_MODE:gn,C_LINE_COMMENT_MODE:fn,C_NUMBER_MODE:yn,C_NUMBER_RE:Et,END_SAME_AS_BEGIN:En,HASH_COMMENT_MODE:hn,IDENT_RE:xt,MATCH_NOTHING_RE:ln,METHOD_GUARD:wn,NUMBER_MODE:bn,NUMBER_RE:wt,PHRASAL_WORDS_MODE:un,QUOTE_STRING_MODE:mn,REGEXP_MODE:Sn,RE_STARTERS_RE:cn,SHEBANG:pn,TITLE_MODE:Cn,UNDERSCORE_IDENT_RE:je,UNDERSCORE_TITLE_MODE:xn});function An(e,t){e.input[e.index-1]==="."&&t.ignoreMatch();}function kn(e,t){e.className!==void 0&&(e.scope=e.className,delete e.className);}function _n(e,t){t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=An,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,e.relevance===void 0&&(e.relevance=0));}function Tn(e,t){Array.isArray(e.illegal)&&(e.illegal=ve(...e.illegal));}function Mn(e,t){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match;}}function In(e,t){e.relevance===void 0&&(e.relevance=1);}var Nn=(e,t)=>{if(!e.beforeMatch)return;if(e.starts)throw new Error("beforeMatch cannot be used with starts");let n=Object.assign({},e);Object.keys(e).forEach(i=>{delete e[i];}),e.keywords=n.keywords,e.begin=J(n.beforeMatch,St(n.begin)),e.starts={relevance:0,contains:[Object.assign(n,{endsParent:!0})]},e.relevance=0,delete n.beforeMatch;},Rn=["of","and","for","in","not","or","if","then","parent","list","value"],On="keyword";function kt(e,t,n=On){let i=Object.create(null);return typeof e=="string"?m(n,e.split(" ")):Array.isArray(e)?m(n,e):Object.keys(e).forEach(function(g){Object.assign(i,kt(e[g],t,g));}),i;function m(g,a){t&&(a=a.map(o=>o.toLowerCase())),a.forEach(function(o){let c=o.split("|");i[c[0]]=[g,Dn(c[0],c[1])];});}}function Dn(e,t){return t?Number(t):Pn(e)?0:1}function Pn(e){return Rn.includes(e.toLowerCase())}var ft={},X=e=>{console.error(e);},gt=(e,...t)=>{console.log(`WARN: ${e}`,...t);},re=(e,t)=>{ft[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),ft[`${e}/${t}`]=!0);},ye=new Error;function _t(e,t,{key:n}){let i=0,m=e[n],g={},a={};for(let o=1;o<=t.length;o++)a[o+i]=m[o],g[o+i]=!0,i+=Ct(t[o-1]);e[n]=a,e[n]._emit=g,e[n]._multi=!0;}function Ln(e){if(Array.isArray(e.begin)){if(e.skip||e.excludeBegin||e.returnBegin)throw X("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),ye;if(typeof e.beginScope!="object"||e.beginScope===null)throw X("beginScope must be object"),ye;_t(e,e.begin,{key:"beginScope"}),e.begin=Ue(e.begin,{joinWith:""});}}function Fn(e){if(Array.isArray(e.end)){if(e.skip||e.excludeEnd||e.returnEnd)throw X("skip, excludeEnd, returnEnd not compatible with endScope: {}"),ye;if(typeof e.endScope!="object"||e.endScope===null)throw X("endScope must be object"),ye;_t(e,e.end,{key:"endScope"}),e.end=Ue(e.end,{joinWith:""});}}function Bn(e){e.scope&&typeof e.scope=="object"&&e.scope!==null&&(e.beginScope=e.scope,delete e.scope);}function Un(e){Bn(e),typeof e.beginScope=="string"&&(e.beginScope={_wrap:e.beginScope}),typeof e.endScope=="string"&&(e.endScope={_wrap:e.endScope}),Ln(e),Fn(e);}function jn(e){function t(a,o){return new RegExp(se(a),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(o?"g":""))}class n{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0;}addRule(o,c){c.position=this.position++,this.matchIndexes[this.matchAt]=c,this.regexes.push([c,o]),this.matchAt+=Ct(o)+1;}compile(){this.regexes.length===0&&(this.exec=()=>null);let o=this.regexes.map(c=>c[1]);this.matcherRe=t(Ue(o,{joinWith:"|"}),!0),this.lastIndex=0;}exec(o){this.matcherRe.lastIndex=this.lastIndex;let c=this.matcherRe.exec(o);if(!c)return null;let b=c.findIndex((M,A)=>A>0&&M!==void 0),v=this.matchIndexes[b];return c.splice(0,b),Object.assign(c,v)}}class i{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0;}getMatcher(o){if(this.multiRegexes[o])return this.multiRegexes[o];let c=new n;return this.rules.slice(o).forEach(([b,v])=>c.addRule(b,v)),c.compile(),this.multiRegexes[o]=c,c}resumingScanAtSamePosition(){return this.regexIndex!==0}considerAll(){this.regexIndex=0;}addRule(o,c){this.rules.push([o,c]),c.type==="begin"&&this.count++;}exec(o){let c=this.getMatcher(this.regexIndex);c.lastIndex=this.lastIndex;let b=c.exec(o);if(this.resumingScanAtSamePosition()&&!(b&&b.index===this.lastIndex)){let v=this.getMatcher(0);v.lastIndex=this.lastIndex+1,b=v.exec(o);}return b&&(this.regexIndex+=b.position+1,this.regexIndex===this.count&&this.considerAll()),b}}function m(a){let o=new i;return a.contains.forEach(c=>o.addRule(c.begin,{rule:c,type:"begin"})),a.terminatorEnd&&o.addRule(a.terminatorEnd,{type:"end"}),a.illegal&&o.addRule(a.illegal,{type:"illegal"}),o}function g(a,o){let c=a;if(a.isCompiled)return c;[kn,Mn,Un,Nn].forEach(v=>v(a,o)),e.compilerExtensions.forEach(v=>v(a,o)),a.__beforeBegin=null,[_n,Tn,In].forEach(v=>v(a,o)),a.isCompiled=!0;let b=null;return typeof a.keywords=="object"&&a.keywords.$pattern&&(a.keywords=Object.assign({},a.keywords),b=a.keywords.$pattern,delete a.keywords.$pattern),b=b||/\w+/,a.keywords&&(a.keywords=kt(a.keywords,e.case_insensitive)),c.keywordPatternRe=t(b,!0),o&&(a.begin||(a.begin=/\B|\b/),c.beginRe=t(c.begin),!a.end&&!a.endsWithParent&&(a.end=/\B|\b/),a.end&&(c.endRe=t(c.end)),c.terminatorEnd=se(c.end)||"",a.endsWithParent&&o.terminatorEnd&&(c.terminatorEnd+=(a.end?"|":"")+o.terminatorEnd)),a.illegal&&(c.illegalRe=t(a.illegal)),a.contains||(a.contains=[]),a.contains=[].concat(...a.contains.map(function(v){return zn(v==="self"?a:v)})),a.contains.forEach(function(v){g(v,c);}),a.starts&&g(a.starts,o),c.matcher=m(c),c}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=q(e.classNameAliases||{}),g(e)}function Tt(e){return e?e.endsWithParent||Tt(e.starts):!1}function zn(e){return e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map(function(t){return q(e,{variants:null},t)})),e.cachedVariants?e.cachedVariants:Tt(e)?q(e,{starts:e.starts?q(e.starts):null}):Object.isFrozen(e)?q(e):e}var Gn="11.12.0",Be=class extends Error{constructor(t,n){super(t),this.name="HTMLInjectionError",this.html=n;}},De=vt,ht=q,bt=Symbol("nomatch"),Vn=7,Mt=function(e){let t=Object.create(null),n=Object.create(null),i=[],m=!0,g="Could not find the language '{}', did you forget to load/include a language module?",a={disableAutodetect:!0,name:"Plain text",contains:[]},o={ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",cssSelector:"pre code",languages:null,__emitter:Fe};function c(r){return o.noHighlightRe.test(r)}function b(r){let p=r.className+" ";p+=r.parentNode?r.parentNode.className:"";let d=o.languageDetectRe.exec(p);if(d){let h=D(d[1]);return h||(gt(g.replace("{}",d[1])),gt("Falling back to no-highlight mode for this block.",r)),h?d[1]:"no-highlight"}return p.split(/\s+/).find(h=>c(h)||D(h))}function v(r,p,d){let h="",C="";typeof p=="object"?(h=r,d=p.ignoreIllegals,C=p.language):(re("10.7.0","highlight(lang, code, ...args) has been deprecated."),re("10.7.0",`Please use highlight(code, options) instead.
+https://github.com/highlightjs/highlight.js/issues/2277`),C=r,h=p),d===void 0&&(d=!0);let w={code:h,language:C};te("before:highlight",w);let N=w.result?w.result:M(w.language,w.code,d);return N.code=w.code,te("after:highlight",N),N}function M(r,p,d,h){let C=Object.create(null);function w(s,l){return s.keywords[l]}function N(){if(!u.keywords){x.addText(S);return}let s=0;u.keywordPatternRe.lastIndex=0;let l=u.keywordPatternRe.exec(S),f="";for(;l;){f+=S.substring(s,l.index);let y=F.case_insensitive?l[0].toLowerCase():l[0],E=w(u,y);if(E){let[z,Zt]=E;if(x.addText(f),f="",C[y]=(C[y]||0)+1,C[y]<=Vn&&(ue+=Zt),z.startsWith("_"))f+=l[0];else {let Qt=F.classNameAliases[z]||z;L(l[0],Qt);}}else f+=l[0];s=u.keywordPatternRe.lastIndex,l=u.keywordPatternRe.exec(S);}f+=S.substring(s),x.addText(f);}function Y(){if(S==="")return;let s=null;if(typeof u.subLanguage=="string"){if(!t[u.subLanguage]){x.addText(S);return}s=M(u.subLanguage,S,!0,$e[u.subLanguage]),$e[u.subLanguage]=s._top;}else s=O(S,u.subLanguage.length?u.subLanguage:null);u.relevance>0&&(ue+=s.relevance),x.__addSublanguage(s._emitter,s.language);}function I(){u.subLanguage!=null?Y():N(),S="";}function L(s,l){s!==""&&(x.startScope(l),x.addText(s),x.endScope());}function Ve(s,l){let f=1,y=l.length-1;for(;f<=y;){if(!s._emit[f]){f++;continue}let E=F.classNameAliases[s[f]]||s[f],z=l[f];E?L(z,E):(S=z,N(),S=""),f++;}}function He(s,l){return s.scope&&typeof s.scope=="string"&&x.openNode(F.classNameAliases[s.scope]||s.scope),s.beginScope&&(s.beginScope._wrap?(L(S,F.classNameAliases[s.beginScope._wrap]||s.beginScope._wrap),S=""):s.beginScope._multi&&(Ve(s.beginScope,l),S="")),u=Object.create(s,{parent:{value:u}}),u}function We(s,l,f){let y=an(s.endRe,f);if(y){if(s["on:end"]){let E=new be(s);s["on:end"](l,E),E.isMatchIgnored&&(y=!1);}if(y){for(;s.endsParent&&s.parent;)s=s.parent;return s}}if(s.endsWithParent)return We(s.parent,l,f)}function Wt(s){return u.matcher.regexIndex===0?(S+=s[0],1):(Me=!0,0)}function qt(s){let l=s[0],f=s.rule,y=new be(f),E=[f.__beforeBegin,f["on:begin"]];for(let z of E)if(z&&(z(s,y),y.isMatchIgnored))return Wt(l);return f.skip?S+=l:(f.excludeBegin&&(S+=l),I(),!f.returnBegin&&!f.excludeBegin&&(S=l)),He(f,s),f.returnBegin?0:l.length}function $t(s){let l=s[0],f=p.substring(s.index),y=We(u,s,f);if(!y)return bt;let E=u;u.endScope&&u.endScope._wrap?(I(),L(l,u.endScope._wrap)):u.endScope&&u.endScope._multi?(I(),Ve(u.endScope,s)):E.skip?S+=l:(E.returnEnd||E.excludeEnd||(S+=l),I(),E.excludeEnd&&(S=l));do u.scope&&x.closeNode(),!u.skip&&!u.subLanguage&&(ue+=u.relevance),u=u.parent;while(u!==y.parent);return y.starts&&He(y.starts,s),E.returnEnd?0:l.length}function Kt(){let s=[];for(let l=u;l!==F;l=l.parent)l.scope&&s.unshift(l.scope);s.forEach(l=>x.openNode(l));}let me={};function qe(s,l){let f=l&&l[0];if(S+=s,f==null)return I(),0;if(me.type==="begin"&&l.type==="end"&&me.index===l.index&&f===""){if(S+=p.slice(l.index,l.index+1),!m){let y=new Error(`0 width match regex (${r})`);throw y.languageName=r,y.badRule=me.rule,y}return 1}if(me=l,l.type==="begin")return qt(l);if(l.type==="illegal"&&!d){let y=new Error('Illegal lexeme "'+f+'" for mode "'+(u.scope||"<unnamed>")+'"');throw y.mode=u,y}else if(l.type==="end"){let y=$t(l);if(y!==bt)return y}if(l.type==="illegal"&&f==="")return l.index===p.length||(S+=`
+`),1;if(Te>1e5&&Te>l.index*3)throw new Error("potential infinite loop, way more iterations than matches");return S+=f,f.length}let F=D(r);if(!F)throw X(g.replace("{}",r)),new Error('Unknown language: "'+r+'"');let Yt=jn(F),_e="",u=h||Yt,$e={},x=new o.__emitter(o);Kt();let S="",ue=0,Z=0,Te=0,Me=!1;try{if(F.__emitTokens)F.__emitTokens(p,x);else {for(u.matcher.considerAll();;){Te++,Me?Me=!1:u.matcher.considerAll(),u.matcher.lastIndex=Z;let s=u.matcher.exec(p);if(!s)break;let l=p.substring(Z,s.index),f=qe(l,s);Z=s.index+f;}qe(p.substring(Z));}return x.finalize(),_e=x.toHTML(),{language:r,value:_e,relevance:ue,illegal:!1,_emitter:x,_top:u}}catch(s){if(s.message&&s.message.includes("Illegal"))return {language:r,value:De(p),illegal:!0,relevance:0,_illegalBy:{message:s.message,index:Z,context:p.slice(Z-100,Z+100),mode:s.mode,resultSoFar:_e},_emitter:x};if(m)return {language:r,value:De(p),illegal:!1,relevance:0,errorRaised:s,_emitter:x,_top:u};throw s}}function A(r){let p={value:De(r),illegal:!1,relevance:0,_top:a,_emitter:new o.__emitter(o)};return p._emitter.addText(r),p}function O(r,p){p=p||o.languages||Object.keys(t);let d=A(r),h=p.filter(D).filter(de).map(I=>M(I,r,!1));h.unshift(d);let C=h.sort((I,L)=>{if(I.relevance!==L.relevance)return L.relevance-I.relevance;if(I.language&&L.language){if(D(I.language).supersetOf===L.language)return 1;if(D(L.language).supersetOf===I.language)return -1}return 0}),[w,N]=C,Y=w;return Y.secondBest=N,Y}function G(r,p,d){let h=p&&n[p]||d;r.classList.add("hljs"),r.classList.add(`language-${h}`);}function k(r){let p=null,d=b(r);if(c(d))return;if(te("before:highlightElement",{el:r,language:d}),r.dataset.highlighted){console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",r);return}if(r.children.length>0&&(o.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),console.warn("The element with unescaped HTML:"),console.warn(r)),o.throwUnescapedHTML))throw new Be("One of your code blocks includes unescaped HTML.",r.innerHTML);p=r;let h=p.textContent,C=d?v(h,{language:d,ignoreIllegals:!0}):O(h);r.innerHTML=C.value,r.dataset.highlighted="yes",G(r,d,C.language),r.result={language:C.language,re:C.relevance,relevance:C.relevance},C.secondBest&&(r.secondBest={language:C.secondBest.language,relevance:C.secondBest.relevance}),te("after:highlightElement",{el:r,result:C,text:h});}function V(r){o=ht(o,r);}let ee=()=>{j(),re("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.");};function P(){j(),re("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.");}let U=!1;function j(){function r(){j();}if(document.readyState==="loading"){U||window.addEventListener("DOMContentLoaded",r,!1),U=!0;return}document.querySelectorAll(o.cssSelector).forEach(k);}function $(r,p){let d=null;try{d=p(e);}catch(h){if(X("Language definition for '{}' could not be registered.".replace("{}",r)),m)X(h);else throw h;d=a;}d.name||(d.name=r),t[r]=d,d.rawDefinition=p.bind(null,e),d.aliases&&pe(d.aliases,{languageName:r});}function K(r){delete t[r];for(let p of Object.keys(n))n[p]===r&&delete n[p];}function xe(){return Object.keys(t)}function D(r){return r=(r||"").toLowerCase(),t[r]||t[n[r]]}function pe(r,{languageName:p}){typeof r=="string"&&(r=[r]),r.forEach(d=>{n[d.toLowerCase()]=p;});}function de(r){let p=D(r);return p&&!p.disableAutodetect}function we(r){r["before:highlightBlock"]&&!r["before:highlightElement"]&&(r["before:highlightElement"]=p=>{r["before:highlightBlock"](Object.assign({block:p.el},p));}),r["after:highlightBlock"]&&!r["after:highlightElement"]&&(r["after:highlightElement"]=p=>{r["after:highlightBlock"](Object.assign({block:p.el},p));});}function Ee(r){we(r),i.push(r);}function Ae(r){let p=i.indexOf(r);p!==-1&&i.splice(p,1);}function te(r,p){let d=r;i.forEach(function(h){h[d]&&h[d](p);});}function ke(r){return re("10.7.0","highlightBlock will be removed entirely in v12.0"),re("10.7.0","Please use highlightElement now."),k(r)}Object.assign(e,{highlight:v,highlightAuto:O,highlightAll:j,highlightElement:k,highlightBlock:ke,configure:V,initHighlighting:ee,initHighlightingOnLoad:P,registerLanguage:$,unregisterLanguage:K,listLanguages:xe,getLanguage:D,registerAliases:pe,autoDetection:de,inherit:ht,addPlugin:Ee,removePlugin:Ae}),e.debugMode=function(){m=!1;},e.safeMode=function(){m=!0;},e.versionString=Gn,e.regex={concat:J,lookahead:St,either:ve,optional:rn,anyNumberOfTimes:nn};for(let r in he)typeof he[r]=="object"&&yt(he[r]);return Object.assign(e,he),e},oe=Mt({});oe.newInstance=()=>Mt({});It.exports=oe;oe.HighlightJS=oe;oe.default=oe;});var Rt=gD(Nt());var R=Rt.default;function ze(e){let t=e.regex,n={},i={begin:/\$\{/,end:/\}/,contains:["self",{begin:/:-/,contains:[n]}]};Object.assign(n,{className:"variable",variants:[{begin:t.concat(/\$[\w\d#@][\w\d_]*/,"(?![\\w\\d])(?![$])")},i]});let m={className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},g=e.inherit(e.COMMENT(),{match:[/(^|\s)/,/#.*$/],scope:{2:"comment"}}),a={begin:/<<-?\s*(?=\w+)/,starts:{contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,className:"string"})]}},o={className:"string",begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,n,m]};m.contains.push(o);let c={match:/\\"/},b={className:"string",begin:/'/,end:/'/},v={match:/\\'/},M={begin:/\$?\(\(/,end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,n]},A=["fish","bash","zsh","sh","csh","ksh","tcsh","dash","scsh"],O=e.SHEBANG({binary:`(${A.join("|")})`,relevance:10}),G={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:true,contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0},k=["if","then","else","elif","fi","time","for","while","until","in","do","done","case","esac","coproc","function","select"],V=["true","false"],ee={match:/(\/[a-z._-]+)+/},P=["break","cd","continue","eval","exec","exit","export","getopts","hash","pwd","readonly","return","shift","test","times","trap","umask","unset"],U=["alias","bind","builtin","caller","command","declare","echo","enable","help","let","local","logout","mapfile","printf","read","readarray","source","sudo","type","typeset","ulimit","unalias"],j=["autoload","bg","bindkey","bye","cap","chdir","clone","comparguments","compcall","compctl","compdescribe","compfiles","compgroups","compquote","comptags","comptry","compvalues","dirs","disable","disown","echotc","echoti","emulate","fc","fg","float","functions","getcap","getln","history","integer","jobs","kill","limit","log","noglob","popd","print","pushd","pushln","rehash","sched","setcap","setopt","stat","suspend","ttyctl","unfunction","unhash","unlimit","unsetopt","vared","wait","whence","where","which","zcompile","zformat","zftp","zle","zmodload","zparseopts","zprof","zpty","zregexparse","zsocket","zstyle","ztcp"],$=["chcon","chgrp","chown","chmod","cp","dd","df","dir","dircolors","ln","ls","mkdir","mkfifo","mknod","mktemp","mv","realpath","rm","rmdir","shred","sync","touch","truncate","vdir","b2sum","base32","base64","cat","cksum","comm","csplit","cut","expand","fmt","fold","head","join","md5sum","nl","numfmt","od","paste","ptx","pr","sha1sum","sha224sum","sha256sum","sha384sum","sha512sum","shuf","sort","split","sum","tac","tail","tr","tsort","unexpand","uniq","wc","arch","basename","chroot","date","dirname","du","echo","env","expr","factor","groups","hostid","id","link","logname","nice","nohup","nproc","pathchk","pinky","printenv","printf","pwd","readlink","runcon","seq","sleep","stat","stdbuf","stty","tee","test","timeout","tty","uname","unlink","uptime","users","who","whoami","yes"];return {name:"Bash",aliases:["sh","zsh"],keywords:{$pattern:/\b[a-z][a-z0-9._-]+\b/,keyword:k,literal:V,built_in:[...P,...U,"set","shopt",...j,...$]},contains:[O,e.SHEBANG(),G,M,g,a,ee,o,c,b,v,n]}}var Hn=e=>({IMPORTANT:{scope:"meta",begin:"!important"},BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{scope:"number",begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},UNICODE_RANGE:{scope:"number",begin:/\b[Uu]\+[0-9A-Fa-f][0-9A-Fa-f?]{0,5}(-[0-9A-Fa-f][0-9A-Fa-f]{0,5})?/},FUNCTION_DISPATCH:{className:"built_in",begin:/[\w-]+(?=\()/},ATTRIBUTE_SELECTOR_MODE:{scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{scope:"number",begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z_][A-Za-z0-9_-]*/}}),Wn=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","optgroup","option","p","picture","q","quote","samp","section","select","source","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],qn=["defs","g","marker","mask","pattern","svg","switch","symbol","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feFlood","feGaussianBlur","feImage","feMerge","feMorphology","feOffset","feSpecularLighting","feTile","feTurbulence","linearGradient","radialGradient","stop","circle","ellipse","image","line","path","polygon","polyline","rect","text","use","textPath","tspan","foreignObject","clipPath"],$n=[...Wn,...qn],Kn=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"].sort().reverse(),Yn=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"].sort().reverse(),Zn=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"].sort().reverse(),Qn=["accent-color","align-content","align-items","align-self","alignment-baseline","all","anchor-name","animation","animation-composition","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-range","animation-range-end","animation-range-start","animation-timeline","animation-timing-function","appearance","aspect-ratio","backdrop-filter","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-position-x","background-position-y","background-repeat","background-size","baseline-shift","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-end-end-radius","border-end-start-radius","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-start-end-radius","border-start-start-radius","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-align","box-decoration-break","box-direction","box-flex","box-flex-group","box-lines","box-ordinal-group","box-orient","box-pack","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","color-scheme","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","contain-intrinsic-block-size","contain-intrinsic-height","contain-intrinsic-inline-size","contain-intrinsic-size","contain-intrinsic-width","container","container-name","container-type","content","content-visibility","corner-bottom-left-shape","corner-bottom-right-shape","corner-shape","corner-top-left-shape","corner-top-right-shape","counter-increment","counter-reset","counter-set","cue","cue-after","cue-before","cursor","cx","cy","direction","display","dominant-baseline","empty-cells","enable-background","field-sizing","fill","fill-opacity","fill-rule","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flood-color","flood-opacity","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-optical-sizing","font-palette","font-size","font-size-adjust","font-smooth","font-smoothing","font-stretch","font-style","font-synthesis","font-synthesis-position","font-synthesis-small-caps","font-synthesis-style","font-synthesis-weight","font-variant","font-variant-alternates","font-variant-caps","font-variant-east-asian","font-variant-emoji","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","forced-color-adjust","gap","glyph-orientation-horizontal","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphenate-character","hyphenate-limit-chars","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","initial-letter","initial-letter-align","inline-size","inset","inset-area","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","isolation","justify-content","justify-items","justify-self","kerning","left","letter-spacing","lighting-color","line-break","line-height","line-height-step","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","margin-trim","marker","marker-end","marker-mid","marker-start","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","masonry-auto-flow","math-depth","math-shift","math-style","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","offset","offset-anchor","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-anchor","overflow-block","overflow-clip-margin","overflow-inline","overflow-wrap","overflow-x","overflow-y","overlay","overscroll-behavior","overscroll-behavior-block","overscroll-behavior-inline","overscroll-behavior-x","overscroll-behavior-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page","page-break-after","page-break-before","page-break-inside","paint-order","pause","pause-after","pause-before","perspective","perspective-origin","place-content","place-items","place-self","pointer-events","position","position-anchor","position-visibility","print-color-adjust","quotes","r","resize","rest","rest-after","rest-before","right","rotate","row-gap","ruby-align","ruby-position","scale","scroll-behavior","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scroll-timeline","scroll-timeline-axis","scroll-timeline-name","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","shape-rendering","speak","speak-as","src","stop-color","stop-opacity","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","table-layout","text-align","text-align-all","text-align-last","text-anchor","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-skip","text-decoration-skip-ink","text-decoration-style","text-decoration-thickness","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-size-adjust","text-transform","text-underline-offset","text-underline-position","text-wrap","text-wrap-mode","text-wrap-style","timeline-scope","top","touch-action","transform","transform-box","transform-origin","transform-style","transition","transition-behavior","transition-delay","transition-duration","transition-property","transition-timing-function","translate","unicode-bidi","unicode-range","user-modify","user-select","vector-effect","vertical-align","view-timeline","view-timeline-axis","view-timeline-inset","view-timeline-name","view-transition-name","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","white-space-collapse","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","x","y","z-index","zoom"].sort().reverse();function Ot(e){let t=e.regex,n=Hn(e),i={begin:/-(webkit|moz|ms|o)-(?=[a-z])/},m="and or not only",g=/@-?\w[\w]*(-\w+)*/,a="[a-zA-Z-][a-zA-Z0-9_-]*",o=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE];return {name:"CSS",case_insensitive:true,illegal:/[=|'\$]/,keywords:{keyframePosition:"from to"},classNameAliases:{keyframePosition:"selector-tag"},contains:[n.BLOCK_COMMENT,i,n.CSS_NUMBER_MODE,{className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0},{className:"selector-class",begin:"\\."+a,relevance:0},n.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{begin:":("+Yn.join("|")+")"},{begin:":(:)?("+Zn.join("|")+")"}]},n.CSS_VARIABLE,{className:"attribute",begin:"\\b("+Qn.join("|")+")\\b"},{begin:/:/,end:/[;}{]/,contains:[n.BLOCK_COMMENT,n.HEXCOLOR,n.IMPORTANT,n.CSS_NUMBER_MODE,n.UNICODE_RANGE,...o,{begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"},contains:[...o,{className:"string",begin:/[^)]/,endsWithParent:true,excludeEnd:true}]},n.FUNCTION_DISPATCH]},{begin:t.lookahead(/@/),end:"[{;]",relevance:0,illegal:/:/,contains:[{className:"keyword",begin:g},{begin:/\s/,endsWithParent:true,excludeEnd:true,relevance:0,keywords:{$pattern:/[a-z-]+/,keyword:m,attribute:Kn.join(" ")},contains:[{begin:/[a-z-]+(?=:)/,className:"attribute"},...o,n.CSS_NUMBER_MODE]}]},{className:"selector-tag",begin:"\\b("+$n.join("|")+")\\b"}]}}var Xn="([-+]?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)|NaN|[-+]?Infinity",Jn={scope:"number",match:Xn,relevance:0};function Dt(e){let t={className:"attr",begin:/(("(\\.|[^\\"\r\n])*")|('(\\.|[^\\'\r\n])*'))(?=\s*:)/,relevance:1.01},n={match:/[{}[\],:]/,className:"punctuation",relevance:0},i=["true","false","null"],m={scope:"literal",beginKeywords:i.join(" ")};return {name:"JSON",aliases:["jsonc","json5"],keywords:{literal:i},contains:[t,n,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,m,Jn,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],illegal:"\\S"}}var Ce="[A-Za-z$_][0-9A-Za-z$_]*",Pt=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends","using"],Lt=["true","false","null","undefined","NaN","Infinity"],Ft=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],Bt=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],Ut=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],jt=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","self","global"],zt=[].concat(Ut,Ft,Bt);function ei(e){let t=e.regex,n=(d,{after:h})=>{let C="</"+d[0].slice(1);return d.input.indexOf(C,h)!==-1},i=Ce,m={begin:"<>",end:"</>"},g=/<[A-Za-z0-9\\._:-]+\s*\/>/,a={begin:/<[A-Za-z0-9\\._:-]+/,end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(d,h)=>{let C=d[0].length+d.index,w=d.input[C];if(w==="<"||w===","){h.ignoreMatch();return}w===">"&&(n(d,{after:C})||h.ignoreMatch());let N,Y=d.input.substring(C);if(N=Y.match(/^\s*=/)){h.ignoreMatch();return}if((N=Y.match(/^\s+extends\s+/))&&N.index===0){h.ignoreMatch();return}}},o={$pattern:Ce,keyword:Pt,literal:Lt,built_in:zt,"variable.language":jt},c="[0-9](_?[0-9])*",b=`\\.(${c})`,v="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",M={className:"number",variants:[{begin:`(\\b(${v})((${b})|\\.)?|(${b}))[eE][+-]?(${c})\\b`},{begin:`\\b(${v})\\b((${b})\\b|\\.)?|(${b})\\b`},{begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{begin:"\\b0[0-7]+n?\\b"}],relevance:0},A={className:"subst",begin:"\\$\\{",end:"\\}",keywords:o,contains:[]},O={begin:".?html`",end:"",starts:{end:"`",returnEnd:false,contains:[e.BACKSLASH_ESCAPE,A],subLanguage:"xml"}},G={begin:".?css`",end:"",starts:{end:"`",returnEnd:false,contains:[e.BACKSLASH_ESCAPE,A],subLanguage:"css"}},k={begin:".?gql`",end:"",starts:{end:"`",returnEnd:false,contains:[e.BACKSLASH_ESCAPE,A],subLanguage:"graphql"}},V={className:"string",begin:"`",end:"`",contains:[e.BACKSLASH_ESCAPE,A]},P={className:"comment",variants:[e.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:true,excludeBegin:true,relevance:0},{className:"variable",begin:i+"(?=\\s*(-)|$)",endsParent:true,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]}),e.C_BLOCK_COMMENT_MODE,e.C_LINE_COMMENT_MODE]},U=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,O,G,k,V,{match:/\$\d+/},M];A.contains=U.concat({begin:/\{/,end:/\}/,keywords:o,contains:["self"].concat(U)});let j=[].concat(P,A.contains),$=j.concat([{begin:/(\s*)\(/,end:/\)/,keywords:o,contains:["self"].concat(j)}]),K={className:"params",begin:/(\s*)\(/,end:/\)/,excludeBegin:true,excludeEnd:true,keywords:o,contains:$},xe={variants:[{match:[/class/,/\s+/,i,/\s+/,/extends/,/\s+/,t.concat(i,"(",t.concat(/\./,i),")*")],scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{match:[/class/,/\s+/,i],scope:{1:"keyword",3:"title.class"}}]},D={relevance:0,match:t.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),className:"title.class",keywords:{_:[...Ft,...Bt]}},pe={label:"use_strict",className:"meta",relevance:10,begin:/^\s*['"]use (strict|asm)['"]/},de={variants:[{match:[/function/,/\s+/,i,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],className:{1:"keyword",3:"title.function"},label:"func.def",contains:[K],illegal:/%/},we={relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,className:"variable.constant"};function Ee(d){return t.concat("(?!",d.join("|"),")")}let Ae={match:t.concat(/\b/,Ee([...Ut,"super","import","await"].map(d=>`${d}\\s*\\(`)),i,t.lookahead(/\s*\(/)),className:"title.function",relevance:0},te={begin:t.concat(/\./,t.lookahead(t.concat(i,/(?![0-9A-Za-z$_(])/))),end:i,excludeBegin:true,keywords:"prototype",className:"property",relevance:0},ke={match:[/get|set/,/\s+/,i,/(?=\()/],className:{1:"keyword",3:"title.function"},contains:[{begin:/\(\)/},K]},r="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+e.UNDERSCORE_IDENT_RE+")\\s*=>",p={match:[/const|var|let/,/\s+/,i,/\s*/,/=\s*/,/(async\s*)?/,t.lookahead(r)],keywords:"async",className:{1:"keyword",3:"title.function"},contains:[K]};return {name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:o,exports:{PARAMS_CONTAINS:$,CLASS_REFERENCE:D},illegal:/#(?![$_A-Za-z])/,contains:[e.SHEBANG({label:"shebang",binary:"node",relevance:5}),pe,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,O,G,k,V,P,{match:/\$\d+/},M,D,{scope:"attr",match:i+t.lookahead(":"),relevance:0},p,{begin:"("+e.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",keywords:"return throw case",relevance:0,contains:[P,e.REGEXP_MODE,{className:"function",begin:r,returnBegin:true,end:"\\s*=>",contains:[{className:"params",variants:[{begin:e.UNDERSCORE_IDENT_RE,relevance:0},{className:null,begin:/\(\s*\)/,skip:true},{begin:/(\s*)\(/,end:/\)/,excludeBegin:true,excludeEnd:true,keywords:o,contains:$}]}]},{begin:/,/,relevance:0},{match:/\s+/,relevance:0},{variants:[{begin:m.begin,end:m.end},{match:g},{begin:a.begin,"on:begin":a.isTrulyOpeningTag,end:a.end}],subLanguage:"xml",contains:[{begin:a.begin,end:a.end,skip:true,contains:["self"]}]}]},de,{beginKeywords:"while if switch catch for"},{begin:"\\b(?!function)"+e.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",returnBegin:true,label:"func.def",contains:[K,e.inherit(e.TITLE_MODE,{begin:i,className:"title.function"})]},{match:/\.\.\./,relevance:0},te,{match:"\\$"+i,relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},contains:[K]},Ae,we,xe,ke,{match:/\$[(.]/}]}}function ce(e){let t=e.regex,n=ei(e),i=Ce,m=["any","void","number","boolean","string","object","never","symbol","bigint","unknown"],g={begin:[/namespace/,/\s+/,e.IDENT_RE],beginScope:{1:"keyword",3:"title.class"}},a={beginKeywords:"interface",end:/\{/,excludeEnd:true,keywords:{keyword:"interface extends",built_in:m},contains:[n.exports.CLASS_REFERENCE]},o={className:"meta",relevance:10,begin:/^\s*['"]use strict['"]/},c=["type","interface","public","private","protected","implements","declare","abstract","readonly","enum","override","satisfies"],b={$pattern:Ce,keyword:Pt.concat(c),literal:Lt,built_in:zt.concat(m),"variable.language":jt},v={className:"meta",begin:"@"+i},M=(k,V,ee)=>{let P=k.contains.findIndex(U=>U.label===V);if(P===-1)throw new Error("can not find mode to replace");k.contains.splice(P,1,ee);};Object.assign(n.keywords,b),n.exports.PARAMS_CONTAINS.push(v);let A=n.contains.find(k=>k.scope==="attr"),O=Object.assign({},A,{match:t.concat(i,t.lookahead(/\s*\?:/))});n.exports.PARAMS_CONTAINS.push([n.exports.CLASS_REFERENCE,A,O]),n.contains=n.contains.concat([v,g,a,O]),M(n,"shebang",e.SHEBANG()),M(n,"use_strict",o);let G=n.contains.find(k=>k.label==="func.def");return G.relevance=0,Object.assign(n,{name:"TypeScript",aliases:["ts","tsx","mts","cts"]}),n}function Ge(e){let t=e.regex,n=t.concat(/[\p{L}_]/u,t.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),i=/[\p{L}0-9._:-]+/u,m={className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},g={begin:/\s/,contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]},a=e.inherit(g,{begin:/\(/,end:/\)/}),o=e.inherit(e.APOS_STRING_MODE,{className:"string"}),c=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),b={endsWithParent:true,illegal:/</,relevance:0,contains:[{className:"attr",begin:i,relevance:0},{begin:/=\s*/,relevance:0,contains:[{className:"string",endsParent:true,variants:[{begin:/"/,end:/"/,contains:[m]},{begin:/'/,end:/'/,contains:[m]},{begin:/[^\s"'=<>`]+/}]}]}]};return {name:"HTML, XML",aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],case_insensitive:true,unicodeRegex:true,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,relevance:10,contains:[g,c,o,a,{begin:/\[/,end:/\]/,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,contains:[g,a,c,o]}]}]},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,relevance:10},m,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,relevance:10,contains:[c]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[b],starts:{end:/<\/style>/,returnEnd:true,subLanguage:"css"}},{className:"tag",begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[b],starts:{end:/<\/script>/,returnEnd:true,subLanguage:"javascript"}},{className:"tag",begin:/<>|<\/>/},{className:"tag",begin:t.concat(/</,t.lookahead(t.concat(n,t.either(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[{className:"name",begin:n,relevance:0,starts:b}]},{className:"tag",begin:t.concat(/<\//,t.lookahead(t.concat(n,/>/))),contains:[{className:"name",begin:n,relevance:0},{begin:/>/,relevance:0,endsParent:true}]}]}}R.registerLanguage("typescript",ce);R.registerLanguage("ts",ce);R.registerLanguage("javascript",ce);R.registerLanguage("js",ce);R.registerLanguage("xml",Ge);R.registerLanguage("html",Ge);R.registerLanguage("css",Ot);R.registerLanguage("bash",ze);R.registerLanguage("shell",ze);R.registerLanguage("json",Dt);function Gt(e,t="typescript"){try{return R.highlight(e,{language:t,ignoreIllegals:!0}).value}catch{return ti(e)}}function ti(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function ni(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ii(e){return e.split(/(<[^>]+>)/g).map(t=>{if(t.startsWith("<"))return t;let n=t;for(let{id:i,match:m}of o){let g=new RegExp(`\\b${ni(m)}\\b`,"g");n=n.replace(g,`<a href="/lecture#${i}" class="pg-glossary-link">${m}</a>`);}return n}).join("")}function Vt(e,t="typescript"){return ii(Gt(e,t))}var ri=["*"];function oi(e,t){if(e&1&&(ei$1(0,"span",5),MI(1),gc()),e&2){let n=XE();Qy(),Ic(" ",n.badge()," ");}}function ai(e,t){if(e&1&&(ei$1(0,"p",6),MI(1),gc()),e&2){let n=XE();Qy(),Ic(" ",n.hint()," ");}}function si(e,t){if(e&1){let n=GE();ei$1(0,"button",10),tp("click",function(){Gl(n);let m=XE();return zl(m.toggleCode())}),Zf(1,"africanies-icon",11),MI(2),gc();}if(e&2){let n=XE();zf("aria-expanded",n.codeOpen()),Qy(),Qf("name",n.codeOpen()?"close":"code")("size",14),Qy(),Ic(" ",n.codeOpen()?"Hide code":"Show code"," ");}}function li(e,t){if(e&1&&(ei$1(0,"p",8),MI(1),gc()),e&2){let n=XE();Qy(),Ic(" ",n.subtext()," ");}}function ci(e,t){if(e&1&&(ei$1(0,"div",9)(1,"div",12)(2,"span",13),MI(3," Implementation "),ei$1(4,"span",14),MI(5,"TypeScript"),gc()(),Zf(6,"africanies-copy",15),gc(),ei$1(7,"pre",16),Zf(8,"code",17),gc()()),e&2){let n=XE();Qy(6),Qf("value",n.code()),Qy(2),Qf("innerHTML",n.highlightedCode(),oy);}}var Ht=class e{sanitizer=T(Eu);router=T(pt);title=TP.required();anchorId=TP(null);hint=TP(null);subtext=TP(null);badge=TP(null);muted=TP(false,{transform:RP});code=TP(null);codeOpen=Co$1(false);hasCode=QI(()=>{let t=this.code();return t!=null&&t.trim().length>0});highlightedCode=QI(()=>{let t=this.code()??"",n=Vt(t,"typescript");return this.sanitizer.bypassSecurityTrustHtml(n)});toggleCode(){this.codeOpen.update(t=>!t);}onGlossaryLinkClick(t){let n=t.target.closest("a.pg-glossary-link");if(!(n instanceof HTMLAnchorElement))return;t.preventDefault();let i=new URL(n.href,window.location.origin);this.router.navigate([i.pathname],{fragment:i.hash.replace(/^#/,"")||void 0});}static \u0275fac=function(n){return new(n||e)};static \u0275cmp=IE({type:e,selectors:[["app-demo-section"]],hostBindings:function(n,i){n&1&&tp("click",function(g){return i.onGlossaryLinkClick(g)});},inputs:{title:[1,"title"],anchorId:[1,"anchorId"],hint:[1,"hint"],subtext:[1,"subtext"],badge:[1,"badge"],muted:[1,"muted"],code:[1,"code"]},ngContentSelectors:ri,decls:13,vars:11,consts:[[1,"flex","flex-col","gap-4"],[1,"flex","flex-col","gap-2","sm:flex-row","sm:items-start","sm:justify-between"],[1,"flex","min-w-0","flex-col","gap-1"],[1,"flex","flex-wrap","items-center","gap-2"],[1,"m-0","text-heading-3","text-ink","dark:text-white"],[1,"rounded-md","bg-border","px-2","py-0.5","text-caption","text-neutral-600","dark:bg-white/10","dark:text-neutral-400"],[1,"m-0","text-body-sm","text-neutral-600","dark:text-neutral-400"],["africanies-button","","type","button","variant","ghost","size","sm",1,"shrink-0","self-start"],[1,"m-0","text-caption","text-neutral-500","dark:text-neutral-400"],[1,"overflow-hidden","rounded-xl","border","border-border","bg-[#1e1e1e]","text-white","dark:border-white/10"],["africanies-button","","type","button","variant","ghost","size","sm",1,"shrink-0","self-start",3,"click"],[3,"name","size"],[1,"flex","items-center","justify-between","gap-2","border-b","border-white/10","px-4","py-2"],[1,"text-caption","font-medium","uppercase","tracking-wide","text-white/50"],[1,"ml-2","normal-case","tracking-normal","text-white/35"],["label","Copy","buttonClass","!text-white/80 hover:!bg-white/10 hover:!text-white",3,"value"],[1,"pg-code-block","m-0","max-h-[min(70vh,40rem)]","overflow-auto","p-4","font-mono","text-caption","leading-relaxed"],[1,"hljs","language-typescript",3,"innerHTML"]],template:function(n,i){n&1&&(tI(),ei$1(0,"section",0)(1,"div",1)(2,"div",2)(3,"div",3)(4,"h2",4),MI(5),gc(),LE(6,oi,2,1,"span",5),gc(),LE(7,ai,2,1,"p",6),gc(),LE(8,si,3,4,"button",7),gc(),ei$1(9,"div"),nI(10),gc(),LE(11,li,2,1,"p",8),LE(12,ci,9,2,"div",9),gc()),n&2&&(lp("scroll-mt-24",i.anchorId()!==null),zf("id",i.anchorId()||null),Qy(5),gp(i.title()),Qy(),PE(i.badge()?6:-1),Qy(),PE(i.hint()?7:-1),Qy(),PE(i.hasCode()?8:-1),Qy(),mI(i.muted()?"pg-demo-muted":"pg-demo"),Qy(2),PE(i.subtext()?11:-1),Qy(),PE(i.hasCode()&&i.codeOpen()?12:-1));},dependencies:[Z,g,br$1],encapsulation:2})};var Bi=`// Default ellipsis trigger \u2014 good for table rows.
+// Put side effects on each item's onClick; the menu closes after it runs.
+// Panel renders in a CDK overlay so it won't get clipped by overflow:hidden.
+
+import { Component, signal } from '@angular/core';
+import { ActionMenuComponent, type AfricaniesMenuItem } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-row-actions-demo',
+  standalone: true,
+  imports: [ActionMenuComponent],
+  template: \`
+    <div class="flex flex-wrap items-center gap-4">
+      <africanies-action-menu [items]="items" ariaLabel="Shipment actions" />
+
+      <p class="m-0 text-body-sm">
+        Last action:
+        <span class="font-medium">{{ lastAction() ?? '\u2014' }}</span>
+      </p>
+    </div>
+  \`,
+})
+export class ShipmentRowActionsDemoComponent {
+  protected readonly lastAction = signal<string | null>(null);
+
+  protected readonly items: AfricaniesMenuItem[] = [
+    {
+      label: 'Open',
+      icon: 'eye',
+      onClick: () => this.lastAction.set('Open'),
+    },
+    {
+      label: 'Edit',
+      icon: 'edit',
+      onClick: () => this.lastAction.set('Edit'),
+    },
+    {
+      label: 'Copy reference',
+      icon: 'copy',
+      onClick: () => this.lastAction.set('Copy reference'),
+    },
+    {
+      label: 'Delete',
+      icon: 'trash',
+      danger: true,
+      dividerBefore: true,
+      onClick: () => this.lastAction.set('Delete'),
+    },
+  ];
+}
+`,Ui=`// Swap the ellipsis for your own trigger \u2014 project it inside and add africaniesActionMenuTrigger.
+
+import { Component } from '@angular/core';
+import {
+  ActionMenuComponent,
+  ActionMenuTriggerDirective,
+  ButtonComponent,
+  type AfricaniesMenuItem,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-toolbar-actions',
+  standalone: true,
+  imports: [ActionMenuComponent, ActionMenuTriggerDirective, ButtonComponent],
+  template: \`
+    <africanies-action-menu [items]="items" ariaLabel="Shipment actions">
+      <button
+        type="button"
+        africanies-button
+        africaniesActionMenuTrigger
+        variant="secondary"
+        size="sm"
+      >
+        Actions
+      </button>
+    </africanies-action-menu>
+  \`,
+})
+export class ShipmentToolbarActionsComponent {
+  protected readonly items: AfricaniesMenuItem[] = [
+    {
+      label: 'Open',
+      icon: 'eye',
+      onClick: () => this.open(),
+    },
+    {
+      label: 'Edit',
+      icon: 'edit',
+      onClick: () => this.edit(),
+    },
+    {
+      label: 'Delete',
+      icon: 'trash',
+      danger: true,
+      dividerBefore: true,
+      onClick: () => this.delete(),
+    },
+  ];
+
+  private open(): void {
+    /* navigate or open drawer */
+  }
+
+  private edit(): void {
+    /* \u2026 */
+  }
+
+  private delete(): void {
+    /* \u2026 */
+  }
+}
+`,ji=`// Item flags: danger for destructive, disabled when unavailable, dividerBefore to separate groups.
+
+import { Component } from '@angular/core';
+import { ActionMenuComponent, type AfricaniesMenuItem } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-action-variants',
+  standalone: true,
+  imports: [ActionMenuComponent],
+  template: \`
+    <africanies-action-menu [items]="items" />
+  \`,
+})
+export class ShipmentActionVariantsComponent {
+  protected readonly items: AfricaniesMenuItem[] = [
+    {
+      label: 'Download PDF',
+      icon: 'download',
+      onClick: () => this.download(),
+    },
+    {
+      label: 'Archive',
+      disabled: true,
+      onClick: () => undefined,
+    },
+    {
+      label: 'Void shipment',
+      icon: 'trash',
+      danger: true,
+      dividerBefore: true,
+      onClick: () => this.voidShipment(),
+    },
+  ];
+
+  private download(): void {
+    /* \u2026 */
+  }
+
+  private voidShipment(): void {
+    /* \u2026 */
+  }
+}
+`,zi=`// [disabled] locks the whole menu (won't open). Prefer this over an empty items array.
+
+import { Component, input } from '@angular/core';
+import { ActionMenuComponent, type AfricaniesMenuItem } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-action-menu-disabled',
+  standalone: true,
+  imports: [ActionMenuComponent],
+  template: \`
+    <africanies-action-menu [items]="items" [disabled]="menuDisabled()" />
+  \`,
+})
+export class ShipmentActionMenuDisabledComponent {
+  // Parent passes true when the row is locked or the user lacks edit rights.
+  readonly menuDisabled = input(false);
+
+  protected readonly items: AfricaniesMenuItem[] = [
+    {
+      label: 'Open',
+      icon: 'eye',
+      onClick: () => this.open(),
+    },
+    {
+      label: 'Edit',
+      icon: 'edit',
+      onClick: () => this.edit(),
+    },
+    {
+      label: 'Delete',
+      icon: 'trash',
+      danger: true,
+      dividerBefore: true,
+      onClick: () => this.delete(),
+    },
+  ];
+
+  private open(): void {
+    /* not reachable while [disabled]="true" */
+  }
+
+  private edit(): void {
+    /* \u2026 */
+  }
+
+  private delete(): void {
+    /* \u2026 */
+  }
+}
+`;var Vi=`
+// Inline banners for info / success / warning / danger.
+// Parent owns visibility. Not a toast, and not for full-page fetch failures.
+
+import { Component, signal } from '@angular/core';
+import { AlertComponent, ButtonComponent, type AlertVariant } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-alert-demo',
+  standalone: true,
+  imports: [AlertComponent, ButtonComponent],
+  template: \`
+    <div class="flex flex-col gap-3">
+      @for (v of variants; track v) {
+        <africanies-alert
+          [variant]="v"
+          [title]="titles[v]"
+          [message]="messages[v]"
+        />
+      }
+    </div>
+  \`,
+})
+export class AlertDemo {
+  readonly variants: AlertVariant[] = ['info', 'success', 'warning', 'danger'];
+
+  readonly titles: Record<AlertVariant, string> = {
+    info: 'Document checklist',
+    success: 'Submitted',
+    warning: 'Rates may be stale',
+    danger: 'Cannot release',
+  };
+
+  readonly messages: Record<AlertVariant, string> = {
+    info: 'Commercial invoice and packing list are still required.',
+    success: 'Shipment SFN-1042 was submitted to the carrier.',
+    warning: 'Last rate pull was more than 4 hours ago.',
+    danger: 'Customs hold blocks release until documents are approved.',
+  };
+}
+`,Hi=`
+// Dismissible by default \u2014 listen to (dismissed) and unmount with @if.
+// Set [dismissible]="false" when the notice has to stay.
+
+import { Component, signal } from '@angular/core';
+import { AlertComponent, ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-alert-dismiss-demo',
+  standalone: true,
+  imports: [AlertComponent, ButtonComponent],
+  template: \`
+    @if (showBanner()) {
+      <africanies-alert
+        variant="warning"
+        title="Rates outdated"
+        message="Refresh to pull the latest carrier rates before quoting."
+        (dismissed)="showBanner.set(false)"
+      >
+        <button
+          africanies-button
+          type="button"
+          size="sm"
+          class="mt-2"
+          (click)="refresh()"
+        >
+          Refresh rates
+        </button>
+      </africanies-alert>
+    } @else {
+      <button africanies-button type="button" variant="secondary" size="sm" (click)="showBanner.set(true)">
+        Show banner again
+      </button>
+    }
+
+    <!-- Permanent notice \u2014 no close control -->
+    <africanies-alert
+      class="mt-4 block"
+      variant="info"
+      message="This environment is connected to the staging API."
+      [dismissible]="false"
+    />
+  \`,
+})
+export class AlertDismissDemo {
+  readonly showBanner = signal(true);
+
+  refresh(): void {
+    // refetch rates\u2026
+    this.showBanner.set(false);
+  }
+}
+`;var qi=`// Domain services in @africanies/africanies-core own paths and mapping.
+// Apps call inject(CountryService) / CurrencyService / PaymentMethodService / ProductService / \u2026 \u2014 or ApiClient for custom routes.
+//
+// List GET convention (ResourceId) \u2014 built-in services AND custom calls:
+//   null  \u2192 paginated page   GET {base}           (+ page/size/order)
+//   'all' \u2192 full dump        GET {base}/all
+//   42    \u2192 single record    GET {base}/42
+//
+// Custom endpoints \u2014 IDE helpers on ApiClient:
+//   api.getResourcePage<T>('shipments', { page: 1 })
+//   api.getResourceAll<T>('shipments')
+//   api.getResourceById<T>('shipments', 42)
+//   // or overloads: getResource(base, null | 'all' | number, query?, options?)
+//   // Per-request mode override (tab mode unchanged):
+//   api.post('/claim', body, { shippingMode: 'stn' })
+//   // path helper:  buildResourcePath('/my/read', id)
+
+import { ApplicationConfig } from '@angular/core';
+import {
+  provideAfricaniesSdk,
+  provideAfricaniesHttpClient,
+} from '@africanies/africanies-core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAfricaniesSdk({
+      baseUrl: 'https://test-api-export.africaniestest.com/api',
+      // loadModeConfig: true by default \u2192 GET /public/mode/config on startup
+    }),
+    provideAfricaniesHttpClient(),
+  ],
+};
+`,$i=`// GET /public/country/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// Flag images: countryFlagUrl(iso2) or mapCountrySelectOptions(rows) \u2192 prefixImageUrl
+
+import { Component, inject, signal } from '@angular/core';
+import { CountryService, mapCountrySelectOptions } from '@africanies/africanies-core';
+import type { SelectOption } from '@africanies/africanies-ui';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-country-loader',
+  standalone: true,
+  template: \`
+    <africanies-select
+      label="Destination country"
+      [options]="countryOptions()"
+      searchable
+    />
+  \`,
+})
+export class CountryLoaderComponent {
+  private readonly countriesApi = inject(CountryService);
+  protected readonly countryOptions = signal<SelectOption<number>[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.countriesApi.readAll());
+    if (res.success && res.data) {
+      this.countryOptions.set(
+        mapCountrySelectOptions(res.data, { width: 40 }).map((row) => ({
+          label: row.label,
+          value: row.value,
+          prefixImageUrl: row.prefixImageUrl,
+        })),
+      );
+    }
+  }
+}
+`,Ki=`// GET /public/service/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// Public catalog \u2014 no auth required. App Settings Services / Plans boards.
+// readPage({ page, order, search, size, from, to }) \u2192 ServiceModel[]
+
+import { Component, inject, signal } from '@angular/core';
+import { ServiceService } from '@africanies/africanies-core';
+import type { ServiceModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-service-loader',
+  standalone: true,
+  template: \`
+    <p>{{ services().length }} services</p>
+    @if (services()[0]; as first) {
+      <p>{{ first.name }}</p>
+    }
+  \`,
+})
+export class ServiceLoaderComponent {
+  private readonly servicesApi = inject(ServiceService);
+  protected readonly services = signal<ServiceModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(
+      this.servicesApi.readPage({ page: 1, order: 'desc' }),
+    );
+    if (res.success && res.data) {
+      this.services.set(res.data);
+    }
+  }
+}
+`,Yi=`// GET /public/document/read/{id?} \u2014 catalog preview by document id.
+// readById(n) \u2192 bind doc.file_ref.base_64 in <img> / PDF viewer.
+// For raw file_ref on shipments/KYC/waybills \u2192 FileService.read(ref).
+
+import { Component, inject, signal } from '@angular/core';
+import { DocumentService } from '@africanies/africanies-core';
+import type { DocumentModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-document-loader',
+  standalone: true,
+  template: \`
+    @if (doc(); as d) {
+      <p>{{ d.name }}</p>
+      @if (d.file_ref?.base_64) {
+        <img [src]="d.file_ref.base_64" alt="" />
+      }
+    }
+  \`,
+})
+export class DocumentLoaderComponent {
+  private readonly documentsApi = inject(DocumentService);
+  protected readonly doc = signal<DocumentModel | null>(null);
+
+  async load(id: number): Promise<void> {
+    const res = await firstValueFrom(this.documentsApi.readById(id));
+    if (res.success && res.data) {
+      this.doc.set(res.data);
+    }
+  }
+}
+`,Zi=`// GET /public/plan/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// Public catalog \u2014 no auth required. App Settings Plans / Plan Packages.
+// readPage({ page, order, search, size, from, to }) \u2192 PlanModel[] (nested packages)
+
+import { Component, inject, signal } from '@angular/core';
+import { PlanService } from '@africanies/africanies-core';
+import type { PlanModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-plan-loader',
+  standalone: true,
+  template: \`
+    <p>{{ plans().length }} plans</p>
+    @if (plans()[0]; as first) {
+      <p>{{ first.name }} \u2014 {{ first.packages.length }} packages</p>
+    }
+  \`,
+})
+export class PlanLoaderComponent {
+  private readonly plansApi = inject(PlanService);
+  protected readonly plans = signal<PlanModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.plansApi.readPage({ page: 1 }));
+    if (res.success && res.data) {
+      this.plans.set(res.data);
+    }
+  }
+}
+`,Qi=`// GET /currency/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// POST /currency/create \xB7 PUT /currency/update \xB7 DELETE /currency/delete ({ id } body).
+// Laravel paginator in data is flattened to data[] + pagination.
+// readPage({ page, order, search, from, to }) \u2192 CurrencyModel[]
+// create / update serialize active + is_naira_greater to "1" / "0".
+// After each write: show res.message, then readPage again.
+
+import { Component, inject, signal } from '@angular/core';
+import { CurrencyService, PaymentMethodService } from '@africanies/africanies-core';
+import type { CurrencyModel, PaginationMetaModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-currency-loader',
+  standalone: true,
+  template: \`
+    <p>{{ currencies().length }} currencies</p>
+    @if (currencies()[0]; as first) {
+      <p>{{ first.name }} ({{ first.short_code }})</p>
+    }
+  \`,
+})
+export class CurrencyLoaderComponent {
+  private readonly currenciesApi = inject(CurrencyService);
+  private readonly paymentMethodsApi = inject(PaymentMethodService);
+  protected readonly currencies = signal<CurrencyModel[]>([]);
+  protected readonly meta = signal<PaginationMetaModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    const methods = await firstValueFrom(
+      this.paymentMethodsApi.readPage({ page: 1 }),
+    );
+    const page = await firstValueFrom(
+      this.currenciesApi.readPage({
+        page: 1,
+        order: 'desc',
+        size: 15,
+        search: '',
+        from: '',
+        to: '',
+      }),
+    );
+    if (page.success && page.data) {
+      this.currencies.set(page.data);
+      this.meta.set(page.pagination);
+    }
+    void methods;
+  }
+
+  async saveUsd(methodIds: number[]): Promise<void> {
+    const res = await firstValueFrom(
+      this.currenciesApi.create({
+        name: 'United States Dollar',
+        short_code: 'USD',
+        multiplication_rate: '1600',
+        division_rate: '1400',
+        active: true,
+        is_naira_greater: false,
+        payment_method_ids: methodIds,
+      }),
+    );
+    if (res.success) {
+      // toast res.message, close modal, then readPage again
+      await firstValueFrom(
+        this.currenciesApi.readPage({ page: 1, order: 'desc', size: 15 }),
+      );
+    }
+  }
+}
+`,Xi=`// GET /payment_method/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// PUT /payment_method/update \u2014 active toggle only (resend name + model from the row).
+// No create/delete on this board. After update: toast message + patch updated_at locally.
+// Laravel paginator in data is flattened to data[] + pagination.
+// readPage({ page, size, order, search, from, to }) \u2192 PaymentMethodModel[]
+// readAll()            \u2192 full PaymentMethodModel[]
+// readById(4)          \u2192 single PaymentMethodModel
+
+import { Component, inject, signal } from '@angular/core';
+import { PaymentMethodService } from '@africanies/africanies-core';
+import type { PaginationMetaModel, PaymentMethodModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-payment-method-loader',
+  standalone: true,
+  template: \`
+    <p>{{ methods().length }} payment methods</p>
+    @if (methods()[0]; as first) {
+      <p>{{ first.name }} \u2014 {{ first.currencies.length }} currencies</p>
+    }
+  \`,
+})
+export class PaymentMethodLoaderComponent {
+  private readonly methodsApi = inject(PaymentMethodService);
+  protected readonly methods = signal<PaymentMethodModel[]>([]);
+  protected readonly meta = signal<PaginationMetaModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    const page = await firstValueFrom(
+      this.methodsApi.readPage({ page: 1, order: 'desc' }),
+    );
+    if (page.success && page.data) {
+      this.methods.set(page.data);
+      this.meta.set(page.pagination);
+    }
+  }
+
+  async toggleActive(row: PaymentMethodModel, next: boolean): Promise<void> {
+    const res = await firstValueFrom(
+      this.methodsApi.update({
+        id: row.id,
+        name: row.name,
+        model: row.model,
+        active: next,
+      }),
+    );
+    if (res.success) {
+      // toast res.message; patch row.active + row.updated_at in place \u2014 do not readPage()
+      this.methods.update((list) =>
+        list.map((m) =>
+          m.id === row.id
+            ? { ...m, active: next, updated_at: new Date().toISOString() }
+            : m,
+        ),
+      );
+    }
+  }
+}
+`,Ji=`// GET /public/mode/config \u2014 usually loaded at bootstrap via provideAfricaniesSdk.
+// ModeConfigService hydrates storage; getRegionConfig(country) reads STN/SFN units.
+
+import { Component, inject } from '@angular/core';
+import { ModeConfigService } from '@africanies/africanies-core';
+
+@Component({
+  selector: 'app-region-units',
+  standalone: true,
+  template: \`
+    @if (region(); as r) {
+      <p>{{ r.currency_symbol }} \xB7 {{ r.mass_unit }} \xB7 {{ r.dimension_unit }}</p>
+    }
+  \`,
+})
+export class RegionUnitsComponent {
+  private readonly modeConfig = inject(ModeConfigService);
+
+  region() {
+    return this.modeConfig.getRegionConfig('ng');
+  }
+
+  reload() {
+    this.modeConfig.loadConfig().subscribe();
+  }
+}
+`,er=`// GET /shipment_method/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// readPage() \u2192 paginated \xB7 readAll() \u2192 full \xB7 readById(n) \u2192 single ShipmentMethodModel
+
+import { Component, inject, signal } from '@angular/core';
+import { ShipmentMethodService } from '@africanies/africanies-core';
+import type { ShipmentMethodModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-carrier-loader',
+  standalone: true,
+  template: \`
+    <p>{{ methods().length }} methods</p>
+    @if (methods()[0]; as first) {
+      <p>{{ first.name }} \xB7 {{ first.mode }} \xB7 {{ first.zone_values.total }} zones</p>
+    }
+  \`,
+})
+export class CarrierLoaderComponent {
+  private readonly methodsApi = inject(ShipmentMethodService);
+  protected readonly methods = signal<ShipmentMethodModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.methodsApi.readAll());
+    if (res.success && res.data) {
+      this.methods.set(res.data);
+    }
+  }
+}
+`,tr=`// GET /warehouse/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// readPage() \u2192 paginated \xB7 readAll() \u2192 full \xB7 readById(n) \u2192 single WarehouseModel
+
+import { Component, inject, signal } from '@angular/core';
+import { WarehouseService } from '@africanies/africanies-core';
+import type { WarehouseModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-warehouse-loader',
+  standalone: true,
+  template: \`
+    <p>{{ warehouses().length }} warehouses</p>
+    @if (warehouses()[0]; as first) {
+      <p>{{ first.name }} \xB7 {{ first.city }} \xB7 {{ first.country?.iso2 }}</p>
+    }
+  \`,
+})
+export class WarehouseLoaderComponent {
+  private readonly warehousesApi = inject(WarehouseService);
+  protected readonly warehouses = signal<WarehouseModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.warehousesApi.readAll());
+    if (res.success && res.data) {
+      this.warehouses.set(res.data);
+    }
+  }
+}
+`,nr=`// GET /zone/read/records/{id?} \u2014 ResourceId: null | 'all' | number.
+// readPage() \u2192 paginated \xB7 readAll() \u2192 full \xB7 readById(n) \u2192 single ZoneModel
+
+import { Component, inject, signal } from '@angular/core';
+import { ZoneService } from '@africanies/africanies-core';
+import type { ZoneModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-zone-loader',
+  standalone: true,
+  template: \`
+    <p>{{ zones().length }} zones</p>
+    @if (zones()[0]; as first) {
+      <p>{{ first.name }} \xB7 {{ first.type }}</p>
+    }
+  \`,
+})
+export class ZoneLoaderComponent {
+  private readonly zonesApi = inject(ZoneService);
+  protected readonly zones = signal<ZoneModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.zonesApi.readAll());
+    if (res.success && res.data) {
+      this.zones.set(res.data);
+    }
+  }
+}
+`,ir=`// POST /auth/forgot/password \u2014 email-only, unauthenticated. Body { email }.
+// The backend emails a reset link. This frontend never shows a new-password
+// form for that link (no token in the route).
+// /onboarding/reset-password is a different flow (default_password first login).
+// Admins can call the same forgot(email) from user/partner screens.
+
+import { Component, computed, inject, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { AuthService, isValidEmail } from '@africanies/africanies-core';
+import { ButtonComponent, TextInputComponent } from '@africanies/africanies-ui';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [ButtonComponent, TextInputComponent, RouterLink],
+  template: \`
+    <p>We will send you a password reset link.</p>
+    <africanies-text-input
+      type="email"
+      label="Email"
+      autocomplete="email"
+      [(value)]="email"
+    />
+    <button
+      africanies-button
+      type="button"
+      variant="primary"
+      [loading]="sending()"
+      [disabled]="!canSubmit()"
+      (click)="forgot()"
+    >
+      Send reset link
+    </button>
+    @if (status(); as copy) {
+      <p>{{ copy }}</p>
+      <a routerLink="/onboarding/login">Reset completed? Login here</a>
+    }
+  \`,
+})
+export class ForgotPasswordComponent {
+  private readonly authApi = inject(AuthService);
+
+  protected readonly email = signal('');
+  protected readonly sending = signal(false);
+  protected readonly status = signal<string | null>(null);
+  protected readonly canSubmit = computed(() => isValidEmail(this.email()));
+
+  protected async forgot(): Promise<void> {
+    if (!this.canSubmit()) {
+      return;
+    }
+    this.sending.set(true);
+    this.status.set(null);
+    try {
+      const res = await firstValueFrom(this.authApi.forgot(this.email()));
+      if (res.success) {
+        this.status.set(res.message?.trim() || 'We have emailed your reset password.');
+      } else {
+        this.status.set(res.message?.trim() || 'Could not send a reset email.');
+      }
+    } finally {
+      this.sending.set(false);
+    }
+  }
+}
+`,rr=`// GET  /user \u2014 bare user object (no { success, data } wrapper).
+// POST /user/change/password \u2014 first-login default password.
+// POST /user/logout-from-all-sessions \u2014 while the token is still set, then clear().
+// After login/register in your app:
+//   inject(AuthTokenService).set(access_token);
+// UserService.me() then sends Authorization: Bearer \u2026
+
+import { Component, inject, signal } from '@angular/core';
+import { AuthTokenService, UserService } from '@africanies/africanies-core';
+import type { UserModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  template: \`
+    @if (user(); as u) {
+      <p>{{ u.name }} \xB7 {{ u.email }} \xB7 {{ u.main_region }}</p>
+    }
+  \`,
+})
+export class ProfileComponent {
+  private readonly users = inject(UserService);
+  private readonly auth = inject(AuthTokenService);
+  protected readonly user = signal<UserModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    // typically called right after login elsewhere:
+    // this.auth.set(loginResponse.access_token);
+    const res = await firstValueFrom(this.users.me());
+    if (res.success && res.data) {
+      this.user.set(res.data);
+    }
+  }
+
+  logout(): void {
+    this.users.logoutFromAllSessions().subscribe({
+      next: () => this.auth.clear(),
+      error: () => this.auth.clear(),
+    });
+  }
+}
+`,or=`// GET /user/notifications/read/{id?} \u2014 auth required (ResourceId + UUID by id).
+// PUT  /user/notifications/update \u2014 markRead(id) or markRead() for all
+//
+// Header badge: first page via readPage(). Drawer: infinite scroll via onNotificationLoadPage.
+
+import { Component, inject, signal } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import {
+  AuthTokenService,
+  mapNotificationInboxItem,
+  NotificationService,
+} from '@africanies/africanies-core';
+import type { NotificationModel } from '@africanies/africanies-models';
+import { NOTIFICATION_PAGE_SIZE } from '@africanies/africanies-models';
+import type { AfricaniesNotification, NotificationPageResult } from '@africanies/africanies-ui';
+import { catchError, map, of, switchMap, tap } from 'rxjs';
+
+@Component({
+  selector: 'app-header-notifications',
+  standalone: true,
+  template: \`
+    <africanies-app-shell-header
+      title="Dashboard"
+      [notifications]="notifications()"
+      [onNotificationLoadPage]="loadNotificationPage"
+      [onNotificationMarkRead]="markNotificationRead"
+      [onNotificationMarkAllRead]="markAllNotificationsRead"
+    />
+  \`,
+})
+export class HeaderNotificationsComponent {
+  private readonly auth = inject(AuthTokenService);
+  private readonly notificationsApi = inject(NotificationService);
+
+  protected readonly notifications = signal<AfricaniesNotification[]>([]);
+
+  protected loadNotificationPage = (page: number) =>
+    this.notificationsApi
+      .readPage({ page, size: NOTIFICATION_PAGE_SIZE, order: 'desc' })
+      .pipe(
+        map(
+          (res): NotificationPageResult => ({
+            items:
+              res.success && res.data
+                ? res.data.map((row) => this.toHeaderItem(row))
+                : [],
+            pagination: res.pagination ?? null,
+          }),
+        ),
+      );
+
+  protected markNotificationRead = (id: string) =>
+    this.notificationsApi.markRead(id).pipe(
+      tap(() => this.patchRead(id)),
+    );
+
+  protected markAllNotificationsRead = () =>
+    this.notificationsApi.markRead().pipe(
+      tap(() =>
+        this.notifications.update((items) =>
+          items.map((item) => ({ ...item, read: true })),
+        ),
+      ),
+    );
+
+  constructor() {
+    toObservable(this.auth.token)
+      .pipe(
+        switchMap((token) => {
+          if (!token) {
+            return of([] as AfricaniesNotification[]);
+          }
+          return this.notificationsApi
+            .readPage({
+              page: 1,
+              size: NOTIFICATION_PAGE_SIZE,
+              order: 'desc',
+            })
+            .pipe(
+            map((res) =>
+              res.success && res.data
+                ? res.data.map((row) => this.toHeaderItem(row))
+                : [],
+            ),
+            catchError(() => of([] as AfricaniesNotification[])),
+          );
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe((items) => this.notifications.set(items));
+  }
+
+  private patchRead(id: string): void {
+    this.notifications.update((items) =>
+      items.map((item) => (item.id === id ? { ...item, read: true } : item)),
+    );
+  }
+
+  private toHeaderItem(row: NotificationModel): AfricaniesNotification {
+    const item = mapNotificationInboxItem(row);
+    return {
+      id: item.id,
+      title: item.title,
+      body: item.body,
+      timestamp: item.timestamp,
+      read: item.read,
+      link: item.link,
+      externalLink: item.external_link,
+    };
+  }
+}
+`,ar=`// GET /product/read/{id?} \u2014 ResourceId: null | 'all' | number.
+// readPage() \u2192 paginated \xB7 readAll() \u2192 full \xB7 readById(n) \u2192 single ProductModel
+
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { ProductService } from '@africanies/africanies-core';
+import type { ProductModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-product-loader',
+  standalone: true,
+  template: \`
+    <p>{{ products().length }} products</p>
+    @if (products()[0]; as first) {
+      <p>{{ first.name }} \u2014 {{ first.hs_code }}</p>
+    }
+  \`,
+})
+export class ProductLoaderComponent implements OnInit {
+  private readonly productsApi = inject(ProductService);
+  protected readonly products = signal<ProductModel[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    const res = await firstValueFrom(this.productsApi.readAll());
+    if (res.success && res.data) {
+      this.products.set(res.data);
+    }
+  }
+}
+`,sr=`// POST /file/read \u2014 body { ref } when a record stores file_ref.
+// data.mime_type + data.base_64 for preview. Waybills: readMultiple(ref).
+
+import { Component, inject, signal } from '@angular/core';
+import { FileService } from '@africanies/africanies-core';
+import type { FileReadModel } from '@africanies/africanies-models';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-file-loader',
+  standalone: true,
+  template: \`
+    @if (file(); as f) {
+      <p>{{ f.mime_type }}</p>
+      @if (f.base_64) {
+        <img [src]="f.base_64" alt="" />
+      } @else if (f.url) {
+        <a [href]="f.url" target="_blank" rel="noopener">Open signed URL</a>
+      }
+    }
+  \`,
+})
+export class FileLoaderComponent {
+  private readonly filesApi = inject(FileService);
+  protected readonly file = signal<FileReadModel | null>(null);
+
+  async load(ref: string): Promise<void> {
+    const res = await firstValueFrom(this.filesApi.read(ref));
+    if (res.success && res.data) {
+      this.file.set(res.data);
+    }
+  }
+}
+`;var cr=`// Five variants. Primary and ghost-primary pick up SFN green / STN orange
+// from ModeColorService \u2014 don't hard-code those colors yourself.
+// ghost stays neutral (Cancel); ghost-primary is a mode-colored text button.
+
+import { Component } from '@angular/core';
+import {
+  ButtonComponent,
+  type ButtonVariant,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-actions',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex flex-wrap items-end gap-6">
+      @for (v of variants; track v) {
+        <div class="flex flex-col gap-2">
+          <span class="text-caption text-neutral-600">{{ v }}</span>
+          <button africanies-button type="button" [variant]="v">
+            {{ labels[v] }}
+          </button>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class ShipmentActionsComponent {
+  protected readonly variants: ButtonVariant[] = [
+    'primary',
+    'secondary',
+    'ghost',
+    'ghost-primary',
+    'ghost-danger',
+    'underline',
+    'danger',
+  ];
+
+  protected readonly labels: Record<ButtonVariant, string> = {
+    primary: 'Save shipment',
+    secondary: 'Save draft',
+    ghost: 'Cancel',
+    'ghost-primary': 'Add row',
+    'ghost-danger': 'Remove',
+    underline: 'Learn more',
+    danger: 'Delete',
+  };
+}`,pr=`// sm | md | lg. Default is md. Use sm in toolbars/dialogs; save lg for hero CTAs.
+
+import { Component } from '@angular/core';
+import {
+  ButtonComponent,
+  type ButtonSize,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-sizes',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex flex-wrap items-end gap-6">
+      @for (s of sizes; track s) {
+        <div class="flex flex-col gap-2">
+          <span class="text-caption text-neutral-600">size={{ s }}</span>
+          <button africanies-button type="button" [size]="s">
+            Continue
+          </button>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class ButtonSizesComponent {
+  protected readonly sizes: ButtonSize[] = ['sm', 'md', 'lg'];
+}`,dr=`// Full variant \xD7 size grid \u2014 handy for QA, not something you'd ship on a product page.
+
+import { Component } from '@angular/core';
+import {
+  ButtonComponent,
+  type ButtonSize,
+  type ButtonVariant,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-matrix',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <table class="w-full border-collapse text-left">
+      <thead>
+        <tr class="text-caption text-neutral-600">
+          <th class="pb-3 pr-4 font-medium">Variant</th>
+          @for (s of sizes; track s) {
+            <th class="pb-3 pr-4 font-medium">{{ s }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (v of variants; track v) {
+          <tr class="border-t border-border dark:border-white/10">
+            <td class="py-3 pr-4 text-body-sm text-neutral-600">{{ v }}</td>
+            @for (s of sizes; track s) {
+              <td class="py-3 pr-4">
+                <button africanies-button type="button" [variant]="v" [size]="s">
+                  Action
+                </button>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  \`,
+})
+export class ButtonMatrixComponent {
+  protected readonly variants: ButtonVariant[] = [
+    'primary',
+    'secondary',
+    'ghost',
+    'danger',
+  ];
+  protected readonly sizes: ButtonSize[] = ['sm', 'md', 'lg'];
+}`,mr=`// Drop <africanies-icon> inside the button \u2014 same focus ring as the label.
+// Icon-only? Put aria-label on the host.
+
+import { Component } from '@angular/core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-icons',
+  standalone: true,
+  imports: [ButtonComponent, AfricaniesIconComponent],
+  template: \`
+    <div class="flex flex-wrap gap-3">
+      <button africanies-button type="button" variant="primary">
+        <africanies-icon name="airplane" [size]="16" />
+        Create shipment
+      </button>
+
+      <button africanies-button type="button" variant="secondary">
+        <africanies-icon name="adjust" [size]="16" />
+        Filters
+      </button>
+
+      <button africanies-button type="button" variant="ghost" size="sm">
+        <africanies-icon name="warehouse" [size]="14" />
+        Warehouse
+      </button>
+
+      <button africanies-button type="button" variant="danger" size="sm">
+        <africanies-icon name="warning" [size]="14" />
+        Void
+      </button>
+    </div>
+  \`,
+})
+export class ButtonIconsComponent {}`,ur=`// Same look on <a> \u2014 use routerLink for in-app, href for external.
+
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-links',
+  standalone: true,
+  imports: [ButtonComponent, RouterLink],
+  template: \`
+    <div class="flex flex-wrap gap-3">
+      <a africanies-button routerLink="/shipments/new" variant="primary">
+        Primary link
+      </a>
+
+      <a africanies-button routerLink="/drafts" variant="secondary" size="sm">
+        Secondary link
+      </a>
+
+      <a africanies-button href="/help/getting-started" variant="ghost">
+        Ghost link
+      </a>
+    </div>
+  \`,
+})
+export class ButtonLinksComponent {}`,fr=`// [disabled] works on buttons and anchors (anchors get aria-disabled + tabindex=-1).
+// Use this for unavailable actions \u2014 in-flight work belongs on [loading].
+
+import { Component, signal } from '@angular/core';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-disabled',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex flex-wrap gap-3">
+      <button africanies-button type="button" variant="primary" [disabled]="saving()">
+        {{ saving() ? 'Saving\u2026' : 'Save shipment' }}
+      </button>
+
+      <button africanies-button type="button" variant="secondary" disabled>
+        Secondary
+      </button>
+
+      <button africanies-button type="button" variant="ghost" disabled>
+        Ghost
+      </button>
+
+      <button africanies-button type="button" variant="danger" disabled>
+        Danger
+      </button>
+
+      <a africanies-button href="/shipments" variant="ghost" [disabled]="saving()">
+        Ghost link
+      </a>
+    </div>
+  \`,
+})
+export class ButtonDisabledComponent {
+  protected readonly saving = signal(false);
+}`,gr=`// Default loading state is the circular spinner. Label stays in the layout
+// (invisible) so the button does not shrink while the request is in flight.
+
+import { Component, signal } from '@angular/core';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-button-loading',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex flex-wrap items-center gap-3">
+      <button
+        africanies-button
+        type="button"
+        variant="primary"
+        [loading]="saving()"
+        (click)="save()"
+      >
+        Save shipment
+      </button>
+
+      <button africanies-button type="button" variant="secondary" [loading]="true">
+        Saving draft
+      </button>
+
+      <button
+        africanies-button
+        type="button"
+        variant="danger"
+        size="sm"
+        [loading]="true"
+      >
+        Deleting
+      </button>
+    </div>
+  \`,
+})
+export class ButtonLoadingComponent {
+  protected readonly saving = signal(false);
+
+  protected save(): void {
+    this.saving.set(true);
+    // POST \u2192 finalize in subscribe/finalize and set saving false.
+  }
+}`,hr=`// Typical toolbar: ghost cancel \u2192 secondary draft \u2192 primary submit.
+// Toggle SFN/STN in the sidebar to see primary shift color.
+
+import { Component, inject, signal } from '@angular/core';
+import { ModeColorService } from '@africanies/africanies-theme';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-toolbar',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div
+      class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-background-welcome px-4 py-3 dark:border-white/10 dark:bg-ink-950"
+    >
+      <div>
+        <p class="m-0 text-body font-medium text-ink dark:text-white">
+          Shipment {{ ref() }}
+        </p>
+        <p class="m-0 text-caption text-neutral-600">
+          Draft \xB7 {{ route() }}
+        </p>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button africanies-button type="button" variant="ghost" size="sm" (click)="cancel()">
+          Cancel
+        </button>
+
+        <button
+          africanies-button
+          type="button"
+          variant="secondary"
+          size="sm"
+          [loading]="saving()"
+          (click)="saveDraft()"
+        >
+          Save draft
+        </button>
+
+        <button
+          africanies-button
+          type="button"
+          variant="primary"
+          size="sm"
+          [loading]="saving()"
+          (click)="submit()"
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+  \`,
+})
+export class ShipmentToolbarComponent {
+  protected readonly modeColor = inject(ModeColorService);
+
+  protected readonly ref = signal('SFN-1042');
+  protected readonly route = signal('Lagos \u2192 London');
+  protected readonly saving = signal(false);
+
+  protected cancel(): void {
+    // Navigate away or close parent overlay ref.
+  }
+
+  protected saveDraft(): void {
+    this.saving.set(true);
+    // POST draft \u2192 finalize in subscribe/finalize and set saving false.
+  }
+
+  protected submit(): void {
+    this.saving.set(true);
+    // POST submit \u2192 on success close overlay or navigate to detail.
+  }
+}`,br=`// Clipboard control \u2014 icon flips to check on success.
+// Optional [announce]="true" also fires a toast when ToastService is provided.
+
+import { Component, signal } from '@angular/core';
+import { CopyButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-copy-demo',
+  standalone: true,
+  imports: [CopyButtonComponent],
+  template: \`
+    <div class="flex flex-wrap items-center gap-4">
+      <code class="rounded-md bg-border/60 px-2 py-1 font-mono text-caption">
+        {{ reference() }}
+      </code>
+      <africanies-copy [value]="reference()" ariaLabel="Copy reference" />
+      <africanies-copy
+        [value]="snippet()"
+        label="Copy snippet"
+        [announce]="true"
+      />
+    </div>
+  \`,
+})
+export class CopyDemoComponent {
+  protected readonly reference = signal('SFN-1042');
+  protected readonly snippet = signal('<africanies-icon name="airplane" />');
+}
+`;var vr=`
+<africanies-chip variant="neutral">Neutral</africanies-chip>
+<africanies-chip variant="success">Delivered</africanies-chip>
+<africanies-chip variant="warning">Pending</africanies-chip>
+<africanies-chip variant="danger">Exception</africanies-chip>
+<africanies-chip variant="export">SFN</africanies-chip>
+<africanies-chip variant="import">STN</africanies-chip>
+`.trim(),Sr=`
+<africanies-chip variant="warning" icon="clock">Pending</africanies-chip>
+
+<africanies-chip
+  variant="danger"
+  [removable]="true"
+  (removed)="clearFilter()"
+>
+  Exception
+</africanies-chip>
+`.trim(),Cr=`
+<ng-template africaniesCellDef="status" let-row>
+  <africanies-chip [variant]="statusVariant(row.status)">{{ row.status }}</africanies-chip>
+</ng-template>
+`.trim();var wr=`
+// Block for first load; inline for a quiet refresh in a toolbar or header.
+// Spinner color follows ModeColorService. Don\u2019t drop this inside africanies-table \u2014 use AsyncState.
+
+import { Component } from '@angular/core';
+import { LoadingStateComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-loading-demo',
+  standalone: true,
+  imports: [LoadingStateComponent],
+  template: \`
+    <div class="grid gap-6 md:grid-cols-2">
+      <div class="flex flex-col gap-2">
+        <p class="m-0 text-caption font-medium text-neutral-600">Block</p>
+        <div
+          class="flex min-h-[10rem] items-center justify-center rounded-lg border border-dashed border-border bg-background-welcome dark:border-white/10 dark:bg-ink-950"
+        >
+          <africanies-loading-state message="Loading shipments\u2026" />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <p class="m-0 text-caption font-medium text-neutral-600">Inline</p>
+        <div
+          class="flex min-h-[10rem] items-center rounded-lg border border-dashed border-border bg-background-welcome px-5 dark:border-white/10 dark:bg-ink-950"
+        >
+          <africanies-loading-state mode="inline" message="Refreshing rates\u2026" />
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class LoadingDemoComponent {}
+`,Er=`
+// Fetch failed \u2014 always wire (retry) to your refetch. Message from the API layer is fine.
+// Section/page failures only; not field validation or a single missing row.
+
+import { Component, inject, signal } from '@angular/core';
+import { ErrorStateComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-error-demo',
+  standalone: true,
+  imports: [ErrorStateComponent],
+  template: \`
+    <div
+      class="rounded-lg border border-border bg-background-welcome dark:border-white/10 dark:bg-ink-950"
+    >
+      <africanies-error-state
+        [message]="errorMessage()"
+        (retry)="refetch()"
+      />
+    </div>
+  \`,
+})
+export class ErrorDemoComponent {
+  // In production: map injectQuery() / getResource() error signal to this string.
+  protected readonly errorMessage = signal(
+    'Failed to load shipments. Check your connection and try again.',
+  );
+
+  protected refetch(): void {
+    // query.refetch() or resource.reload() \u2014 same handler AsyncState uses via (retry).
+  }
+}
+`,Ar=`
+// Load succeeded but nothing matched. Retry often means resetFilters() or refetch.
+// Prefer AsyncState on list pages \u2014 it picks EmptyState when data is [].
+
+import { Component, signal } from '@angular/core';
+import { EmptyStateComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-empty-demo',
+  standalone: true,
+  imports: [EmptyStateComponent],
+  template: \`
+    <africanies-empty-state
+      [message]="message()"
+      (retry)="resetFilters()"
+    />
+  \`,
+})
+export class EmptyDemoComponent {
+  protected readonly message = signal('No shipments match your filters.');
+
+  protected resetFilters(): void {
+    // Clear facet signals \u2192 triggers list refetch with default params.
+  }
+}
+`,kr=`
+// Non-blocking retry pill \u2014 stale data stays visible underneath.
+// AsyncState uses this automatically when data exists but refresh failed.
+
+import { Component, signal } from '@angular/core';
+import { ErrorIndicatorComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-stale-data-panel',
+  standalone: true,
+  imports: [ErrorIndicatorComponent],
+  template: \`
+    <div class="flex flex-col gap-3 rounded-xl border border-border p-4 dark:border-white/10">
+      <div class="flex justify-end">
+        <africanies-error-indicator
+          class="max-w-[min(100%,20rem)]"
+          error="Failed to fetch the most recent data."
+          retryText="Refresh"
+          [refreshing]="isRefreshing()"
+          [refreshingText]="isRefreshing() ? 'Refreshing...' : 'Refresh'"
+          (retry)="refetch()"
+        />
+      </div>
+
+      <!-- Existing table / cards stay mounted -->
+      <ng-content />
+    </div>
+  \`,
+})
+export class StaleDataPanelComponent {
+  protected readonly isRefreshing = signal(false);
+
+  protected refetch(): void {
+    this.isRefreshing.set(true);
+    // query.refetch().finally(() => this.isRefreshing.set(false));
+  }
+}
+
+// Standalone call sites:
+// Socket: error="Connection lost" retryText="Reconnect" refreshingText="Connecting..."
+// Currencies: error="Error fetching currencies" (retryText defaults to "Retry")
+`,_r=`
+// Wrap the list (table + pagination). Maps loading / error / empty / success for you.
+// Background refetch keeps content on screen. Wire your own in-flight cue (e.g. table Refresh). One (retry) \u2192 refetch.
+
+import { Component, computed, inject, signal } from '@angular/core';
+import type { AsyncQueryStateModel } from '@africanies/africanies-models';
+import {
+  AsyncStateComponent,
+  TableComponent,
+  type TableColumn,
+} from '@africanies/africanies-ui';
+
+interface Shipment {
+  id: string;
+  route: string;
+  status: string;
+}
+
+@Component({
+  selector: 'app-shipment-list',
+  standalone: true,
+  imports: [AsyncStateComponent, TableComponent],
+  template: \`
+    <africanies-async-state [state]="state()" (retry)="refetch()">
+      <africanies-table
+        [columns]="columns"
+        [rows]="state().data ?? []"
+        [refreshing]="state().isFetching"
+      />
+    </africanies-async-state>
+  \`,
+})
+export class ShipmentListComponent {
+  // Playground: manual signal. Production: computed from injectQuery().
+  private readonly queryData = signal<Shipment[] | undefined>(undefined);
+  private readonly queryLoading = signal(true);
+  private readonly queryFetching = signal(false);
+  private readonly queryError = signal<string | null>(null);
+
+  protected readonly state = computed((): AsyncQueryStateModel<Shipment[]> => ({
+    data: this.queryData(),
+    isLoading: this.queryLoading(),
+    isFetching: this.queryFetching(),
+    isError: this.queryError() !== null,
+    error: this.queryError(),
+  }));
+
+  protected readonly columns: TableColumn<Shipment>[] = [
+    { key: 'id', header: 'Reference', sortable: true },
+    { key: 'route', header: 'Route' },
+    { key: 'status', header: 'Status', sortable: true },
+  ];
+
+  protected refetch(): void {
+    // Production one-liner: this.shipmentsQuery.refetch();
+    this.queryLoading.set(this.queryData() === undefined);
+    this.queryFetching.set(true);
+    this.queryError.set(null);
+    // \u2026 HTTP GET \u2192 on success set queryData + clear flags; on error set queryError.
+  }
+}
+
+// Production mapping (TanStack Query) \u2014 drop into the same component:
+//
+// readonly query = injectQuery(() => ({
+//   queryKey: ['shipments', this.filters()],
+//   queryFn: () => this.api.getShipments(this.filters()),
+// }));
+//
+// readonly state = computed<AsyncQueryStateModel<Shipment[]>>(() => ({
+//   data: this.query.data(),
+//   isLoading: this.query.isLoading(),
+//   isFetching: this.query.isFetching(),
+//   isError: this.query.isError(),
+//   error: this.query.error()?.message ?? null,
+// }));
+`;var Mr=`
+// Open the drawer, await the list refetch, then commit state on success.
+// Host owns FilterStateModel; drawer edits a clone. Needs provideAfricaniesUiOverlays().
+// Apply writes the query bag to the URL (page resets to 1). Seed from the URL
+// on first paint with FilterQueryService.read() when those queries are present.
+
+import { Component, inject, signal } from '@angular/core';
+import {
+  ButtonComponent,
+  FilterDrawerService,
+  FilterQueryService,
+  emptyFilterState,
+  trackShipmentsFilterConfig,
+  type FilterStateModel,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-list-filters',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <button africanies-button type="button" variant="secondary" (click)="openFilters()">
+      Filters
+    </button>
+  \`,
+})
+export class ShipmentListFiltersComponent {
+  private readonly filterDrawer = inject(FilterDrawerService);
+  private readonly filterQuery = inject(FilterQueryService);
+  private readonly http = inject(/* your HttpClient or list service */);
+  private readonly config = trackShipmentsFilterConfig;
+
+  protected readonly state = signal<FilterStateModel>(
+    this.filterQuery.hasParams(this.config)
+      ? this.filterQuery.read(this.config)
+      : emptyFilterState(),
+  );
+
+  protected openFilters(): void {
+    this.filterDrawer
+      .open({
+        config: this.config,
+        state: this.state(),
+        title: 'Track shipments',
+        // Stays open until this settles; errors keep it open + show a tip.
+        onApply: ({ params }) => this.http.get('/api/shipments', { params }),
+      })
+      .afterClosed()
+      .subscribe((result) => {
+        if (!result?.applied) {
+          return; // Cancel / backdrop \u2014 leave host state alone
+        }
+        this.state.set(result.state);
+      });
+  }
+}
+`,Ir=`
+// Custom ModuleFilterConfigModel for your list screen.
+// Omit transport \u2192 defaults to FilterTransport.LegacyParallel (filterColumn CSV).
+// Set transport: FilterTransport.Named when each field is its own query param.
+
+import {
+  FilterTransport,
+  type ModuleFilterConfigModel,
+} from '@africanies/africanies-models';
+
+export const myOrdersFilterConfig: ModuleFilterConfigModel = {
+  id: 'my-orders',
+  search: {
+    param: 'search',
+    label: 'Order ref',
+    placeholder: 'Search\u2026',
+  },
+  sort: {
+    param: 'order',
+    options: [
+      { value: 'desc', label: 'Newest first' },
+      { value: 'asc', label: 'Oldest first' },
+    ],
+  },
+  pagination: { pageParam: 'page', sizeParam: 'size' },
+  fields: [
+    {
+      key: 'status',
+      label: 'Status',
+      type: 'enum',
+      options: [
+        { value: 'open', label: 'Open', color: '#3B82F6' },
+        { value: 'closed', label: 'Closed', color: '#25945c' },
+      ],
+    },
+    {
+      key: 'warehouse_id',
+      label: 'Warehouse',
+      type: 'select',
+      optionsSource: 'warehouses',
+      placeholder: 'All warehouses',
+    },
+  ],
+};
+
+// Newer API \u2014 explicit named transport:
+export const myClaimsFilterConfig: ModuleFilterConfigModel = {
+  id: 'claims',
+  transport: FilterTransport.Named,
+  search: { param: 'search', label: 'Search' },
+  fields: [
+    {
+      key: 'claim_status',
+      label: 'Claim status',
+      type: 'enum',
+      options: [{ value: 'open', label: 'Open' }],
+    },
+  ],
+};
+
+// Pass to the drawer (same UI for both transports):
+// filterDrawer.open({ config: myOrdersFilterConfig, state, onApply: \u2026 });
+`,Nr=`
+// Full seed example (update-shipments) \u2014 field \`type\` picks the control.
+// See FILTERS_CUSTOM_CONFIG for a minimal custom module.
+
+import { FilterTransport, type ModuleFilterConfigModel } from '@africanies/africanies-models';
+
+export const updateShipmentsFilterConfig: ModuleFilterConfigModel = {
+  id: 'update-shipments',
+  route: ['portal', 'shipment', 'update-shipments'],
+  // transport omitted \u2192 FilterTransport.LegacyParallel
+  pagination: { pageParam: 'page', sizeParam: 'size' },
+  search: {
+    param: 'search',
+    label: 'Shipment ID',
+    placeholder: 'Search',
+  },
+  date: {
+    rangeParams: { from: 'from', to: 'to' },
+    fieldParam: 'date',
+    fields: [
+      { value: 'created_at', label: 'Date Created' },
+      { value: 'paid_at', label: 'Date of Payment' },
+      { value: 'packaged_at', label: 'Date Packaged' },
+      { value: 'shipment_processed_at', label: 'Date Processed' },
+    ],
+  },
+  sort: {
+    param: 'order',
+    options: [
+      { value: 'asc', label: 'Ascending' },
+      { value: 'desc', label: 'Descending' },
+    ],
+  },
+  fields: [
+    {
+      key: 'payment_status',
+      label: 'Payment Status',
+      type: 'enum',
+      exclusive: true,
+      options: [
+        { value: 'paid', label: 'Paid', color: '#25945c' },
+        { value: 'unpaid', label: 'Unpaid', color: '#f48220' },
+      ],
+    },
+    {
+      key: 'shipment_status',
+      label: 'Shipment Status',
+      type: 'enum',
+      exclusive: true,
+      options: [
+        { value: 'pending', label: 'Pending', color: '#DBB316' },
+        { value: 'in-process', label: 'In Process', color: '#3B82F6' },
+        { value: 'completed', label: 'Completed', color: '#25945c' },
+      ],
+    },
+    {
+      key: 'type',
+      label: 'Shipment Type',
+      type: 'enum',
+      exclusive: true,
+      options: [
+        { value: 'shipment', label: 'Shipment', color: '#3B82F6' },
+        { value: 'etw_shipment', label: 'ETW Shipment', color: '#8B5CF6' },
+      ],
+    },
+    {
+      key: 'shipment_method_id',
+      label: 'Shipment Carrier',
+      type: 'select',
+      optionsSource: 'shipmentMethods',
+      placeholder: 'Shipment Methods',
+    },
+    {
+      key: 'type_of_user',
+      label: 'User Type',
+      type: 'select',
+      optionsSource: 'static',
+      options: [
+        { value: 'individual', label: 'Individual' },
+        { value: 'business', label: 'Business' },
+      ],
+      placeholder: 'User Type',
+    },
+    {
+      key: 'warehouse_id',
+      label: 'Warehouse',
+      type: 'select',
+      optionsSource: 'warehouses',
+      placeholder: 'Warehouse',
+    },
+    {
+      key: 'shipment_manifest_id',
+      label: 'Shipment Manifest',
+      type: 'select',
+      optionsSource: 'shipmentManifests',
+      placeholder: 'Shipment Manifest',
+    },
+    {
+      key: 'api_request',
+      label: 'API Request',
+      type: 'boolean',
+      options: [
+        { value: '1', label: 'Yes' },
+        { value: '0', label: 'No' },
+      ],
+    },
+    {
+      key: 'is_insured',
+      label: 'Insured',
+      type: 'boolean',
+      options: [
+        { value: '1', label: 'Yes' },
+        { value: '0', label: 'No' },
+      ],
+    },
+  ],
+};
+`,Rr=`
+// Status chips. Optional \`color\` tints the selected chip; idle stays neutral.
+// color is UI-only \u2014 never sent in params.
+
+{
+  key: 'shipment_status',
+  label: 'Shipment Status',
+  type: 'enum',
+  exclusive: true, // one value at a time
+  options: [
+    { value: 'pending', label: 'Pending', color: '#DBB316' },
+    { value: 'in-process', label: 'In Process', color: '#3B82F6' },
+    { value: 'completed', label: 'Completed', color: '#25945c' },
+  ],
+}
+`,Or=`
+// \u201CFilter by\u201D lists every config.fields entry; picking one reveals its control.
+// Deselect clears that section\u2019s value on Apply. Keep field.key stable.
+
+// User picks \u201CPayment Status\u201D + \u201CWarehouse\u201D in Filter by \u2192
+// draft.values = { payment_status: 'paid', warehouse_id: '12' }
+`,Dr=`
+// Date column select + From / To. Clear resets only those three.
+// To can\u2019t be before From \u2014 moving From past To clears To.
+
+date: {
+  rangeParams: { from: 'from', to: 'to' },
+  fieldParam: 'date',
+  fields: [
+    { value: 'created_at', label: 'Date Created' },
+    { value: 'paid_at', label: 'Date of Payment' },
+  ],
+},
+
+// Example state \u2192 params
+// { date: 'created_at', from: '2026-01-01', to: '2026-01-31' }
+`,Pr=`
+// Laravel-style: filterColumn + filterValue CSVs by index, plus search/date/sort/page.
+// Keep values keyed by field.key; only call toFilterParams at the URL/HTTP boundary.
+
+import {
+  fromFilterParams,
+  toFilterParams,
+  trackShipmentsFilterConfig,
+  type FilterStateModel,
+} from '@africanies/africanies-models';
+
+const state: FilterStateModel = {
+  search: 'SFN-1042',
+  date: 'created_at',
+  from: '2026-01-01',
+  to: '2026-01-31',
+  order: 'desc',
+  page: 1,
+  size: 15,
+  values: {
+    payment_status: 'paid',
+    shipment_status: 'pending',
+    tracking_number: 'TN-9',
+  },
+};
+
+const params = toFilterParams(state, trackShipmentsFilterConfig);
+// \u2192 {
+//   search: 'SFN-1042',
+//   date: 'created_at',
+//   from: '2026-01-01',
+//   to: '2026-01-31',
+//   order: 'desc',
+//   page: 1,
+//   size: 15,
+//   filterColumn: 'payment_status,shipment_status,tracking_number',
+//   filterValue: 'paid,pending,TN-9',
+// }
+
+// Cold load from router queryParams:
+const restored = fromFilterParams(params, trackShipmentsFilterConfig);
+// restored.values.payment_status === 'paid'
+`,Lr=`
+// Newer endpoints: each filter is its own query key (no filterColumn CSVs).
+// Same drawer + FilterStateModel; set transport: FilterTransport.Named.
+
+import {
+  FilterTransport,
+  shipmentTrackingItemFilterConfig,
+  toFilterParams,
+  type FilterStateModel,
+} from '@africanies/africanies-models';
+
+const state: FilterStateModel = {
+  search: 'AWB',
+  values: { claim_status: 'open' },
+};
+
+toFilterParams(state, shipmentTrackingItemFilterConfig);
+// \u2192 { search: 'AWB', claim_status: 'open' }
+// (no filterColumn / filterValue)
+`,Fr=`// optionsSource catalogs load lazily inside the filter drawer when the user
+// adds the field via Filter by. HTTP errors toast via httpToasts; the select
+// shows a field error. Pass host optionLists for sources without an SDK service.
+
+import { Component, inject, signal } from '@angular/core';
+import {
+  emptyFilterState,
+  updateShipmentsFilterConfig,
+  type FilterStateModel,
+} from '@africanies/africanies-models';
+import { FilterDrawerService } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-update-shipment-filters',
+  standalone: true,
+  template: \`<button type="button" (click)="open()">Filters</button>\`,
+})
+export class UpdateShipmentFiltersComponent {
+  private readonly filterDrawer = inject(FilterDrawerService);
+
+  protected readonly state = signal<FilterStateModel>(emptyFilterState());
+
+  protected open(): void {
+    this.filterDrawer
+      .open({
+        config: updateShipmentsFilterConfig,
+        state: this.state(),
+        optionLists: {
+          // No built-in SDK service yet \u2014 host supplies manifests
+          shipment_manifest_id: [{ value: '100', label: 'Manifest A' }],
+        },
+        onApply: ({ params }) => this.listApi.fetch(params),
+      })
+      .afterClosed()
+      .subscribe((result) => {
+        if (result?.applied) {
+          this.state.set(result.state);
+        }
+      });
+  }
+}
+`,Br=`
+// First paint: rebuild FilterStateModel from the URL so shared links restore filters.
+// FilterQueryService.read() is a no-op into empty state when those queries are absent.
+// Apply and africanies-pagination write the same keys back (\`page\`, \`size\`, filters).
+
+import { inject, signal } from '@angular/core';
+import {
+  FilterQueryService,
+  emptyFilterState,
+  trackShipmentsFilterConfig,
+  type FilterStateModel,
+} from '@africanies/africanies-ui';
+
+export class ListPage {
+  private readonly filterQuery = inject(FilterQueryService);
+  private readonly config = trackShipmentsFilterConfig;
+
+  protected readonly state = signal<FilterStateModel>(
+    this.filterQuery.hasParams(this.config)
+      ? this.filterQuery.read(this.config)
+      : emptyFilterState(),
+  );
+
+  protected readonly page = signal(this.state().page ?? 1);
+  protected readonly size = signal(this.state().size ?? 15);
+}
+`;var jr=`
+// Text fields: label + optional hint/error. Bind with [(value)].
+// Prefix/suffix slots use attribute selectors (prefix, suffix).
+
+import { Component, signal } from '@angular/core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+import { TextInputComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-reference-form',
+  standalone: true,
+  imports: [TextInputComponent, AfricaniesIconComponent],
+  template: \`
+    <div class="grid gap-5 md:grid-cols-2">
+      <africanies-text-input
+        label="Tracking number"
+        hint="As printed on the airway bill"
+        placeholder="e.g. AWB-12345"
+        [(value)]="tracking"
+      />
+
+      <africanies-text-input label="Reference" placeholder="Optional internal ref" [(value)]="reference">
+        <africanies-icon prefix name="anchor" [size]="16" />
+      </africanies-text-input>
+
+      <africanies-text-input
+        label="Consignee email"
+        error="Enter a valid email address"
+        [(value)]="email"
+      />
+
+      <africanies-text-input label="Locked field" [disabled]="true" [(value)]="locked" />
+    </div>
+  \`,
+})
+export class ShipmentReferenceFormComponent {
+  protected readonly tracking = signal('');
+  protected readonly reference = signal('');
+  protected readonly email = signal('not-an-email');
+  protected readonly locked = signal('WH-LOCKED-01');
+}
+`,zr=`
+// Same label / hint / error pattern as text inputs, just multi-line.
+
+import { Component, signal } from '@angular/core';
+import { TextareaComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-instructions-form',
+  standalone: true,
+  imports: [TextareaComponent],
+  template: \`
+    <div class="grid gap-5 md:grid-cols-2">
+      <africanies-textarea
+        label="Special instructions"
+        hint="Visible to warehouse staff"
+        placeholder="Fragile \u2014 keep upright"
+        [(value)]="instructions"
+      />
+
+      <africanies-textarea
+        label="Notes"
+        error="Notes cannot exceed 500 characters"
+        [(value)]="notesError"
+      />
+    </div>
+  \`,
+})
+export class ShipmentInstructionsFormComponent {
+  protected readonly instructions = signal('');
+  protected readonly notesError = signal('');
+}
+`,Gr=`
+// Bound value is number | null. Prefix/suffix are display chrome only \u2014
+// commas in the UI are cosmetic; send the numeric value to the API.
+
+import { DecimalPipe } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { NumberInputComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-value-form',
+  standalone: true,
+  imports: [DecimalPipe, NumberInputComponent],
+  template: \`
+    <div class="grid gap-5 md:grid-cols-2">
+      <africanies-number-input label="Declared value (USD)" [(value)]="amount">
+        <span prefix>$</span>
+      </africanies-number-input>
+
+      <africanies-number-input label="Weight" hint="Kilograms" [(value)]="weight">
+        <span suffix>kg</span>
+      </africanies-number-input>
+    </div>
+
+    <p class="text-body-sm">
+      Stored amount:
+      {{ amount() == null ? '\u2014' : (amount()! | number: '1.0-6') }}
+    </p>
+  \`,
+})
+export class ShipmentValueFormComponent {
+  protected readonly amount = signal<number | null>(12500);
+  protected readonly weight = signal<number | null>(24.5);
+}
+`,Vr=`
+// Single/multi select binds [(selected)]. [searchable] for long lists.
+// allowFreeText = inline tags; [create] opens a modal (needs provideAfricaniesUiOverlays()).
+
+import { Component, signal } from '@angular/core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+import {
+  SelectComponent,
+  type SelectCreateConfig,
+  type SelectOption,
+} from '@africanies/africanies-ui';
+
+// Example modal close payload \u2014 your modal component returns this shape.
+interface WarehouseCreateResult {
+  id: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-shipment-routing-form',
+  standalone: true,
+  imports: [SelectComponent, AfricaniesIconComponent],
+  template: \`
+    <div class="grid gap-5 md:grid-cols-2">
+      <africanies-select
+        label="Warehouse"
+        [options]="warehouses()"
+        [searchable]="true"
+        [(selected)]="selectedWarehouse"
+      >
+        <africanies-icon prefix name="warehouse" [size]="16" />
+      </africanies-select>
+
+      <africanies-select
+        label="Tags"
+        [searchable]="true"
+        [allowFreeText]="true"
+        [multiple]="true"
+        [maxSelected]="4"
+        [(options)]="tags"
+        [(selected)]="selectedTags"
+      />
+
+      <africanies-select
+        label="Incoterm"
+        hint="Plain list \u2014 searchable off"
+        [options]="incoterms"
+        [(selected)]="selectedIncoterm"
+      />
+
+      <africanies-select
+        label="Carrier"
+        hint="Create opens a modal \u2014 requires provideAfricaniesUiOverlays()"
+        [options]="carriers()"
+        [searchable]="true"
+        [create]="warehouseCreate"
+        [(options)]="carriers"
+        [(selected)]="selectedCarrier"
+      >
+        <africanies-icon prefix name="airplane" [size]="16" />
+      </africanies-select>
+    </div>
+  \`,
+})
+export class ShipmentRoutingFormComponent {
+  protected readonly warehouses = signal<SelectOption<string>[]>([
+    { label: 'Lagos Hub', value: 'los', prefix: 'warehouse', suffix: 'globe' },
+    { label: 'Accra Depot', value: 'acc', prefix: 'warehouse' },
+  ]);
+
+  protected readonly selectedWarehouse = signal<SelectOption<string> | null>(null);
+
+  protected readonly tags = signal<SelectOption<string>[]>([
+    { label: 'Fragile', value: 'fragile', prefix: 'warning' },
+    { label: 'Priority', value: 'priority', prefix: 'alarm' },
+  ]);
+  protected readonly selectedTags = signal<SelectOption<string>[]>([]);
+
+  protected readonly incoterms: SelectOption<string>[] = [
+    { label: 'DDP', value: 'ddp' },
+    { label: 'DAP', value: 'dap' },
+    { label: 'EXW', value: 'exw' },
+  ];
+  protected readonly selectedIncoterm = signal<SelectOption<string> | null>(null);
+
+  protected readonly carriers = signal<SelectOption<string>[]>([
+    { label: 'DHL Express', value: 'dhl', prefix: 'airplane' },
+    { label: 'FedEx', value: 'fedex', prefix: 'airplane' },
+  ]);
+  protected readonly selectedCarrier = signal<SelectOption<string> | null>(null);
+
+  // Modal-backed create \u2014 component is your standalone creation form.
+  protected readonly warehouseCreate: SelectCreateConfig<WarehouseCreateResult, string> = {
+    label: 'Add warehouse',
+    component: WarehouseCreateModalComponent,
+    data: { region: 'west-africa' },
+    mapResult: (result) => ({
+      label: result.name,
+      value: result.id,
+      prefix: 'warehouse',
+    }),
+  };
+}
+
+// Stub \u2014 replace with your real modal panel opened via ModalService.
+@Component({ selector: 'app-warehouse-create-modal', standalone: true, template: '' })
+export class WarehouseCreateModalComponent {}
+
+// app.config.ts \u2014 required once per app when any select uses [create]:
+//
+// import { provideAfricaniesUiOverlays } from '@africanies/africanies-ui';
+//
+// export const appConfig: ApplicationConfig = {
+//   providers: [provideAfricaniesUiOverlays(), /* \u2026 */],
+// };
+`,Hr=`
+// Checkbox / toggle for booleans; radio for exactly-one-of. All use [(value)].
+
+import { Component, signal } from '@angular/core';
+import {
+  CheckboxComponent,
+  RadioComponent,
+  ToggleComponent,
+  type RadioOption,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-options-form',
+  standalone: true,
+  imports: [CheckboxComponent, ToggleComponent, RadioComponent],
+  template: \`
+    <div class="grid gap-6 md:grid-cols-2">
+      <div class="flex flex-col gap-4">
+        <africanies-checkbox label="Require signature on delivery" [(value)]="signature" />
+
+        <africanies-checkbox
+          label="Insure this shipment"
+          hint="Adds 0.8% of declared value"
+          [(value)]="insured"
+        />
+
+        <africanies-checkbox
+          label="Accept terms"
+          error="You must accept the terms"
+          [(value)]="terms"
+        />
+
+        <africanies-toggle label="Notify consignee by SMS" [(value)]="smsNotify" />
+        <africanies-toggle label="Hold at depot" [(value)]="holdAtDepot" />
+        <africanies-toggle
+          label="Require customs hold"
+          hint="Waits for the API \u2014 the switch does not flip until the save succeeds."
+          [value]="customsHold()"
+          [loading]="customsHoldSaving()"
+          (valueChange)="saveCustomsHold($event)"
+        />
+      </div>
+
+      <africanies-radio
+        label="Service level"
+        [options]="serviceLevels"
+        [(value)]="serviceLevel"
+      />
+    </div>
+  \`,
+})
+export class ShipmentOptionsFormComponent {
+  protected readonly signature = signal(true);
+  protected readonly insured = signal(false);
+  protected readonly terms = signal(false);
+  protected readonly smsNotify = signal(true);
+  protected readonly holdAtDepot = signal(false);
+  protected readonly customsHold = signal(false);
+  protected readonly customsHoldSaving = signal(false);
+
+  protected readonly serviceLevels: RadioOption<string>[] = [
+    { label: 'Economy', value: 'economy' },
+    { label: 'Standard', value: 'standard' },
+    { label: 'Express', value: 'express' },
+  ];
+  protected readonly serviceLevel = signal<string | null>('standard');
+
+  protected saveCustomsHold(next: boolean): void {
+    this.customsHoldSaving.set(true);
+    window.setTimeout(() => {
+      this.customsHold.set(next);
+      this.customsHoldSaving.set(false);
+    }, 1200);
+  }
+}
+`,Wr=`
+// Date picker emits YYYY-MM-DD (string | null). Keep that ISO string as-is.
+
+import { Component, signal } from '@angular/core';
+import { DatePickerComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-schedule-form',
+  standalone: true,
+  imports: [DatePickerComponent],
+  template: \`
+    <div class="grid gap-5 md:grid-cols-2">
+      <africanies-date-picker label="Ready date" hint="Local pickup day" [(value)]="readyDate" />
+      <africanies-date-picker
+        label="Cutoff"
+        error="Cutoff must be after ready date"
+        [(value)]="cutoffDate"
+      />
+    </div>
+  \`,
+})
+export class ShipmentScheduleFormComponent {
+  protected readonly readyDate = signal<string | null>('2026-08-15');
+  protected readonly cutoffDate = signal<string | null>(null);
+}
+`,qr=`
+// Google Places address field. Bootstrap with provideGooglePlaces({ apiKey }).
+// [(value)] is AddressPlace | null; (placeSelected) fires when a suggestion is chosen.
+
+import { Component, signal } from '@angular/core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+import {
+  AddressInputComponent,
+  type AddressPlace,
+  provideGooglePlaces,
+} from '@africanies/africanies-ui';
+
+// app.config.ts
+export const appConfig = {
+  providers: [
+    provideGooglePlaces({ apiKey: import.meta.env['NG_APP_GOOGLE_MAPS_KEY'] }),
+  ],
+};
+
+@Component({
+  selector: 'app-pickup-address-form',
+  standalone: true,
+  imports: [AddressInputComponent, AfricaniesIconComponent],
+  template: \`
+    <africanies-address-input
+      label="Pickup address"
+      hint="Start typing \u2014 pick a Google suggestion"
+      placeholder="Street, city, or landmark"
+      [countries]="['ng', 'gh', 'za']"
+      [(value)]="pickup"
+      (placeSelected)="onPlace($event)"
+    >
+      <africanies-icon prefix name="map-marker" [size]="16" />
+    </africanies-address-input>
+
+    <pre>{{ pickup() | json }}</pre>
+  \`,
+})
+export class PickupAddressFormComponent {
+  protected readonly pickup = signal<AddressPlace | null>(null);
+
+  protected onPlace(place: AddressPlace): void {
+    console.log('selected', place);
+  }
+}
+`,$r=`
+// Browse, drag-drop, or camera. You get FileUploadResult[] on (filesSelected) \u2014
+// upload them yourself. accept filters client-side; mismatches are skipped.
+// Added files include an underlined View action for a larger preview.
+
+import { Component, signal } from '@angular/core';
+import {
+  FileUploadComponent,
+  type FileUploadResult,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-kyc-upload-form',
+  standalone: true,
+  imports: [FileUploadComponent],
+  template: \`
+    <africanies-file-upload
+      variant="dropzone"
+      label="Identity document"
+      accept="image/*,.pdf"
+      [allowCamera]="true"
+      [multiple]="true"
+      (filesSelected)="onFiles($event)"
+    />
+  \`,
+})
+export class KycUploadFormComponent {
+  protected readonly files = signal<FileUploadResult[]>([]);
+
+  protected onFiles(next: FileUploadResult[]): void {
+    this.files.set(next);
+  }
+}
+`,Kr=`
+// OTP is one string, not an array. (resend) is your cue to call the API \u2014
+// the control only runs the cooldown UI. (completed) fires when all digits are in.
+// variant="masked" hides each digit (PIN-style); the model is still the real code.
+
+import { Component, signal } from '@angular/core';
+import { OtpInputComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-verify-otp-form',
+  standalone: true,
+  imports: [OtpInputComponent],
+  template: \`
+    <africanies-otp-input
+      label="Verification code"
+      hint="Enter the 6-digit code we sent"
+      [resendCooldown]="60"
+      [(value)]="code"
+      (completed)="verify($event)"
+      (resend)="sendAgain()"
+    />
+
+    <africanies-otp-input
+      label="Transaction PIN"
+      variant="masked"
+      [length]="4"
+      [showResend]="false"
+      [(value)]="pin"
+      (completed)="confirmPin($event)"
+    />
+  \`,
+})
+export class VerifyOtpFormComponent {
+  protected readonly code = signal('');
+  protected readonly pin = signal('');
+
+  protected verify(code: string): void {
+    // POST /auth/verify { code }
+    console.log('OTP complete', code);
+  }
+
+  protected confirmPin(pin: string): void {
+    // POST /wallet/confirm { pin }
+    console.log('PIN complete', pin);
+  }
+
+  protected sendAgain(): void {
+    // POST /auth/resend-otp
+    console.log('Resend OTP');
+  }
+}
+`,Yr=`
+// Same signals you bound with [(value)] / [(selected)] \u2014 read them anywhere.
+// Call them as functions: tracking(), amount(). Don't forget the ().
+
+import { DecimalPipe } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { type FileUploadResult, type SelectOption } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-summary',
+  standalone: true,
+  imports: [DecimalPipe],
+  template: \`
+    <dl class="m-0 grid gap-2 text-body-sm sm:grid-cols-2">
+      <div>
+        <dt class="text-neutral-600">Tracking</dt>
+        <dd class="m-0 font-medium">{{ tracking() || '\u2014' }}</dd>
+      </div>
+
+      <div>
+        <dt class="text-neutral-600">Amount</dt>
+        <dd class="m-0 font-medium">
+          {{ amount() == null ? '\u2014' : (amount()! | number: '1.0-6') }}
+        </dd>
+      </div>
+
+      <div>
+        <dt class="text-neutral-600">Warehouse</dt>
+        <dd class="m-0 font-medium">{{ selectedWarehouse()?.label ?? '\u2014' }}</dd>
+      </div>
+
+      <div>
+        <dt class="text-neutral-600">Tags</dt>
+        <dd class="m-0 font-medium">{{ tagSummary() }}</dd>
+      </div>
+
+      <div>
+        <dt class="text-neutral-600">Service</dt>
+        <dd class="m-0 font-medium">{{ serviceLevel() ?? '\u2014' }}</dd>
+      </div>
+
+      <div>
+        <dt class="text-neutral-600">Files</dt>
+        <dd class="m-0 font-medium">
+          {{
+            files().length
+              ? files()
+                  .map((f) => f.file.name)
+                  .join(', ')
+              : '\u2014'
+          }}
+        </dd>
+      </div>
+    </dl>
+  \`,
+})
+export class ShipmentSummaryComponent {
+  // These signals are the same instances bound in sibling form controls.
+  protected readonly tracking = signal('');
+  protected readonly amount = signal<number | null>(12500);
+  protected readonly selectedWarehouse = signal<SelectOption<string> | null>(null);
+  protected readonly selectedTags = signal<SelectOption<string>[]>([]);
+  protected readonly serviceLevel = signal<string | null>('standard');
+  protected readonly files = signal<FileUploadResult[]>([]);
+
+  protected tagSummary(): string {
+    const selected = this.selectedTags();
+    if (!selected.length) {
+      return '\u2014';
+    }
+    return selected.map((t) => t.label).join(', ');
+  }
+}
+`;var Qr=`// Point Tailwind at the africanies-theme preset and scan @africanies/africanies-ui so its classes aren't purged.
+// Don't re-declare token colors locally \u2014 extend the preset.
+
+// tailwind.config.js \u2014 monorepo paths (adjust __dirname to your app root)
+const path = require('node:path');
+
+module.exports = {
+  presets: [require('@africanies/africanies-theme/tailwind-preset')],
+  content: [
+    path.join(__dirname, 'src/**/*.{html,ts}'),
+    // Required: scan the UI library so its literal Tailwind classes survive purge.
+    path.join(__dirname, '../../libs/africanies-ui/src/**/*.{html,ts}'),
+    path.join(__dirname, '../../libs/africanies-theme/src/**/*.{html,ts}'),
+    // Published-app equivalent:
+    // './src/**/*.{html,ts}',
+    // './node_modules/@africanies/africanies-ui/**/*.{js,mjs}',
+  ],
+};
+`,Xr=`// Ink / surface utilities \u2014 use literal class strings (Tailwind can't see dynamic names).
+
+<div class="bg-ink text-white">Ink surface</div>
+<div class="bg-ink-brand text-white">Brand ink panel</div>
+<div class="bg-ink-950 text-white">Near-black panel</div>
+<div class="bg-black text-white">Pure black</div>
+<div class="bg-white text-ink">White surface</div>
+`,Jr=`// Borders, muted copy, page chrome \u2014 stay on the token scale, skip raw hex.
+
+<div class="rounded-lg border border-border bg-background-welcome p-4">
+  <p class="text-neutral-600">Muted supporting copy</p>
+  <p class="text-ink dark:text-white">Primary body on welcome background</p>
+</div>
+
+<span class="text-neutral-400">Disabled / placeholder tone</span>
+<span class="text-neutral-300">Light divider accent</span>
+`,eo=`// SFN / export green \u2014 fine for static marketing. Mode-aware chrome? Use ModeColorService.
+
+<span class="rounded-md bg-export px-2 py-1 text-white">Primary</span>
+<span class="rounded-md bg-export-subtle px-2 py-1 text-export">Subtle</span>
+<span class="text-export-light">Light accent text</span>
+<div class="rounded-xl bg-export-tint p-5">Tinted panel</div>
+`,to=`// STN / import orange \u2014 same idea as export; prefer ModeColorService when mode can flip.
+
+<span class="rounded-md bg-import px-2 py-1 text-white">Primary</span>
+<span class="rounded-md bg-import-subtle px-2 py-1 text-import">Subtle</span>
+<span class="text-import-light">Light accent text</span>
+<div class="rounded-xl bg-import-tint p-5">Tinted panel</div>
+`,no=`// Status colors \u2014 mode-agnostic. Don't map danger/warning to export/import.
+
+<span class="rounded-md bg-danger-subtle px-2 py-1 text-danger">Danger</span>
+<span class="rounded-md bg-danger px-2 py-1 text-white">Danger solid</span>
+<span class="rounded-md bg-warning-subtle px-2 py-1 text-warning-dark">Warning</span>
+<span class="text-danger-dark">Inline error copy</span>
+`,io=`// Typography scale from the theme preset. Prefer these over arbitrary text-[Npx].
+
+<h1 class="text-heading-1 text-ink dark:text-white">Ship across continents</h1>
+<h2 class="text-heading-2 text-ink dark:text-white">Shipment details</h2>
+<h3 class="text-heading-3 text-ink dark:text-white">Cargo summary</h3>
+<p class="text-body-lg text-ink dark:text-white">
+  Supporting sentence for denser marketing or empty states.
+</p>
+<p class="text-body text-ink dark:text-white">
+  Default reading size for forms, tables, and dialogs.
+</p>
+<p class="text-body-sm text-neutral-600">Secondary copy and dense metadata.</p>
+<span class="text-caption text-neutral-600">Hints, timestamps, and chip labels.</span>
+`,ro=`// Primary chrome that follows SFN/STN. Bind [class] to modeColor.classes() literals \u2014
+// don't interpolate Tailwind token names yourself.
+
+import { Component, inject } from '@angular/core';
+import { ModeColorService } from '@africanies/africanies-theme';
+import { ButtonComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-mode-accent-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    @let colors = modeColor.classes();
+
+    <button africanies-button type="button" [class]="colors.primary">
+      Mode-aware primary CTA
+    </button>
+
+    <span [class]="colors.text">Accent label</span>
+
+    <div class="rounded-xl p-5" [class]="colors.bgSubtle">
+      <p class="m-0 text-caption font-medium uppercase tracking-wide" [class]="colors.text">
+        SFN export / STN import
+      </p>
+      <p class="mt-2 m-0 text-heading-3 text-ink dark:text-white">Shipment headline</p>
+    </div>
+
+    <div
+      class="rounded-lg px-3 py-2 transition"
+      [class]="colors.soft + ' ' + colors.softHover"
+    >
+      Selected row highlight
+    </div>
+  \`,
+})
+export class ModeAccentDemoComponent {
+  protected readonly modeColor = inject(ModeColorService);
+}
+`,oo=`// Shared SVG sprite via <africanies-icon>. Type dynamic names as IconName for autocomplete.
+
+import { Component } from '@angular/core';
+import { AfricaniesIconComponent, type IconName } from '@africanies/africanies-icons';
+
+@Component({
+  selector: 'app-icon-demo',
+  standalone: true,
+  imports: [AfricaniesIconComponent],
+  template: \`
+    <africanies-icon name="airplane" [size]="24" />
+    <africanies-icon name="warehouse" [size]="24" />
+    <africanies-icon name="warning" [size]="24" />
+    <africanies-icon [name]="dynamicIcon" [size]="16" />
+  \`,
+})
+export class IconDemoComponent {
+  protected readonly dynamicIcon: IconName = 'anchor';
+}
+`;var so=`// Shared API/UI shapes \u2014 type-only, no providers. Import from here instead of reinventing.
+
+import type {
+  AsyncQueryStateModel,
+  ApiResponseModel,
+  CountryModel,
+  CurrencyModel,
+  PaginationMetaModel,
+  PaginationQueryParamsModel,
+  PaymentMethodModel,
+  ResourceId,
+  ShippingMode,
+  ModeConfigDataModel,
+} from '@africanies/africanies-models';
+`;var co=`// You own the items array \u2014 breadcrumb won't walk the route tree for you.
+// Link every ancestor; leave routerLink off the last crumb (current page).
+
+import { Component, computed, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { BreadcrumbComponent, type AfricaniesNavItem } from '@africanies/africanies-ui';
+import { filter, map, startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-shipment-detail-chrome',
+  standalone: true,
+  imports: [BreadcrumbComponent],
+  template: \`
+    <africanies-breadcrumb [items]="crumbs()" />
+  \`,
+})
+export class ShipmentDetailChromeComponent {
+  private readonly router = inject(Router);
+
+  private readonly url = toSignal(
+    this.router.events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      map(() => this.router.url),
+      startWith(this.router.url),
+    ),
+    { initialValue: this.router.url },
+  );
+
+  protected readonly shipmentRef = signal('SFN-1042');
+
+  protected readonly crumbs = computed((): AfricaniesNavItem[] => {
+    const ref = this.shipmentRef();
+    const path = this.url().split('?')[0] ?? '';
+    const section = path.includes('/documents')
+      ? 'Documents'
+      : path.includes('/events')
+        ? 'Events'
+        : 'Overview';
+
+    return [
+      { id: 'home', label: 'Home', routerLink: '/overview', icon: 'home' },
+      { id: 'shipments', label: 'Shipments', routerLink: '/shipments' },
+      { id: 'detail', label: ref, routerLink: '/shipments/' + ref + '/overview' },
+      { id: 'section', label: section }, // current page \u2014 no routerLink
+    ];
+  });
+}
+`,po=`// URL-driven tabs + child routes. Active tab follows Router.isActive (survives refresh).
+// Put routerLink on each item, render <router-outlet /> below. Don't mix with africaniesTabDef.
+// keepScroll defaults to true \u2014 navigates with { scroll: 'manual' } so the page does not jump to the top.
+// Pass [keepScroll]="false" if you want the app's normal scrollPositionRestoration behaviour.
+
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TabsComponent, type AfricaniesNavItem } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-detail-tabs',
+  standalone: true,
+  imports: [TabsComponent, RouterOutlet],
+  template: \`
+    <africanies-tabs
+      [items]="routeTabs"
+      [(activeId)]="routeTabId"
+      ariaLabel="Shipment sections"
+    />
+
+    <div class="mt-4">
+      <router-outlet />
+    </div>
+  \`,
+})
+export class ShipmentDetailTabsComponent {
+  protected readonly routeTabId = signal<string | null>(null);
+
+  protected readonly routeTabs: AfricaniesNavItem[] = [
+    {
+      id: 'overview',
+      label: 'Overview',
+      icon: 'inbox',
+      routerLink: '/shipments/SFN-1042/overview',
+    },
+    {
+      id: 'documents',
+      label: 'Documents',
+      icon: 'file-add',
+      routerLink: '/shipments/SFN-1042/documents',
+    },
+    {
+      id: 'events',
+      label: 'Events',
+      icon: 'alarm',
+      routerLink: '/shipments/SFN-1042/events',
+    },
+  ];
+}
+
+// Example child route config (app.routes.ts excerpt):
+//
+// {
+//   path: 'shipments/:ref',
+//   component: ShipmentDetailTabsComponent,
+//   children: [
+//     { path: 'overview', loadComponent: () => import('./overview').then(m => m.OverviewPage) },
+//     { path: 'documents', loadComponent: () => import('./documents').then(m => m.DocumentsPage) },
+//     { path: 'events', loadComponent: () => import('./events').then(m => m.EventsPage) },
+//     { path: '', pathMatch: 'full', redirectTo: 'overview' },
+//   ],
+// }
+`,mo=`// Pill switcher on one path \u2014 same routerLink, different queryParams per segment.
+// Active pill matches the query on cold load.
+// keepScroll defaults to true \u2014 no jump to top when the query changes (same as routed tabs).
+
+import { Component, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { SegmentComponent, type AfricaniesNavItem } from '@africanies/africanies-ui';
+import { map } from 'rxjs';
+
+@Component({
+  selector: 'app-shipment-list-density',
+  standalone: true,
+  imports: [SegmentComponent],
+  template: \`
+    <africanies-segment
+      [items]="densitySegments"
+      [(activeId)]="densityId"
+      ariaLabel="List density"
+    />
+
+    <p class="mt-3 text-body-sm">
+      Active density from URL:
+      <span class="font-medium">{{ densityId() ?? '\u2014' }}</span>
+    </p>
+  \`,
+})
+export class ShipmentListDensityComponent {
+  private readonly route = inject(ActivatedRoute);
+
+  protected readonly densityFromUrl = toSignal(
+    this.route.queryParamMap.pipe(map((p) => p.get('density') ?? 'comfortable')),
+    { initialValue: 'comfortable' },
+  );
+
+  protected readonly densityId = signal<string | null>(null);
+
+  protected readonly densitySegments: AfricaniesNavItem[] = [
+    {
+      id: 'comfortable',
+      label: 'Comfortable',
+      routerLink: '/shipments',
+      queryParams: { density: 'comfortable' },
+    },
+    {
+      id: 'compact',
+      label: 'Compact',
+      routerLink: '/shipments',
+      queryParams: { density: 'compact' },
+    },
+    {
+      id: 'dense',
+      label: 'Dense',
+      routerLink: '/shipments',
+      queryParams: { density: 'dense' },
+    },
+  ];
+}
+`,uo=`// In-page tabs \u2014 no router. Selection is [(activeId)] only; panels live in africaniesTabDef.
+// Match template ids to AfricaniesNavItem.id. Want bookmarkable tabs? Use routed tabs instead.
+
+import { Component, signal } from '@angular/core';
+import { TabDefDirective, TabsComponent, type AfricaniesNavItem } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-editor-local-tabs',
+  standalone: true,
+  imports: [TabsComponent, TabDefDirective],
+  template: \`
+    <africanies-tabs
+      [items]="localTabs"
+      [(activeId)]="localTabId"
+      ariaLabel="Editor sections"
+    >
+      <ng-template africaniesTabDef="general">
+        <p class="m-0 text-body">General fields \u2014 not tied to the URL.</p>
+      </ng-template>
+
+      <ng-template africaniesTabDef="parties">
+        <p class="m-0 text-body">Shipper and consignee \u2014 local panel only.</p>
+      </ng-template>
+
+      <ng-template africaniesTabDef="charges">
+        <p class="m-0 text-body">Charges and duties \u2014 local panel only.</p>
+      </ng-template>
+    </africanies-tabs>
+  \`,
+})
+export class ShipmentEditorLocalTabsComponent {
+  protected readonly localTabId = signal('general');
+
+  protected readonly localTabs: AfricaniesNavItem[] = [
+    { id: 'general', label: 'General', icon: 'edit' },
+    { id: 'parties', label: 'Parties', icon: 'user' },
+    { id: 'charges', label: 'Charges', icon: 'wallet' },
+  ];
+}
+`,fo=`// Ink-spine side nav \u2014 icons, nested children, collapse to icon rail.
+// Soft active highlight; collapsed: hover an icon for a label blade.
+// Collapse all sits above the list (top right) when any section is open.
+
+import { Component, signal } from '@angular/core';
+import {
+  SideNavComponent,
+  type AfricaniesSideNavItem,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shell-nav',
+  standalone: true,
+  imports: [SideNavComponent],
+  template: \`
+    <div class="h-[28rem] overflow-visible rounded-xl border border-border dark:border-white/10">
+      <africanies-side-nav
+        [items]="nav"
+        [(collapsed)]="collapsed"
+        [(activeId)]="activeId"
+        ariaLabel="Portal"
+      >
+      </africanies-side-nav>
+    </div>
+  \`,
+})
+export class ShellNavComponent {
+  protected readonly collapsed = signal(false);
+  protected readonly activeId = signal('shipments');
+
+  protected readonly nav: AfricaniesSideNavItem[] = [
+    { id: 'home', label: 'Home', icon: 'home' },
+    {
+      id: 'shipments',
+      label: 'Shipments',
+      icon: 'truck',
+      badge: true,
+      children: [
+        { id: 'track', label: 'Track', icon: 'map-marker', badge: true },
+        { id: 'create', label: 'Create', icon: 'plus' },
+      ],
+    },
+    { id: 'warehouse', label: 'Warehouse', icon: 'warehouse' },
+    { id: 'settings', label: 'Settings', icon: 'cog' },
+  ];
+}
+`,go=`// Dedicated app shell \u2014 breadcrumbs + Back in the content column;
+// header holds clock, notifications, and avatar.
+// Needs provideAfricaniesUiOverlays() for the notification drawer.
+// Back is built into africanies-app-shell \u2014 nest child routes under a parent and it appears.
+// Log out: confirm \u2192 UserService.logoutFromAllSessions() \u2192 AuthTokenService.clear().
+
+import { Component, inject, signal } from '@angular/core';
+
+import { finalize } from 'rxjs';
+
+import { AuthTokenService, UserService } from '@africanies/africanies-core';
+import {
+  AppShellComponent,
+  ConfirmService,
+  SideNavComponent,
+  type AfricaniesMenuItem,
+  type AfricaniesNavItem,
+  type AfricaniesNotification,
+  type AfricaniesSideNavItem,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-product-shell',
+  standalone: true,
+  imports: [AppShellComponent, SideNavComponent],
+  template: \`
+    <africanies-app-shell
+      contentWidth="5xl"
+      [headerTitle]="pageTitle"
+      [breadcrumbs]="crumbs"
+      [catalogNav]="nav"
+      userName="Jane Doe"
+      [userMenuItems]="accountMenu"
+      [notifications]="notifications"
+    >
+      <africanies-side-nav
+        sidenav
+        [items]="nav"
+        [(collapsed)]="collapsed"
+        [(activeId)]="activeId"
+      >
+      </africanies-side-nav>
+
+      <router-outlet />
+    </africanies-app-shell>
+  \`,
+})
+export class ProductShellComponent {
+  private readonly confirm = inject(ConfirmService);
+  private readonly users = inject(UserService);
+  private readonly auth = inject(AuthTokenService);
+
+  protected readonly collapsed = signal(false);
+  protected readonly activeId = signal('home');
+  protected readonly pageTitle = 'STN-1042';
+
+  protected readonly crumbs: AfricaniesNavItem[] = [
+    { id: 'home', label: 'Home', icon: 'home' },
+    { id: 'shipments', label: 'Shipments' },
+    { id: 'track', label: 'STN-1042' },
+  ];
+
+  protected readonly accountMenu: AfricaniesMenuItem[] = [
+    { label: 'Profile', icon: 'user', onClick: () => {} },
+    { label: 'Settings', icon: 'cog', onClick: () => {} },
+    {
+      label: 'Log out',
+      icon: 'sign-out',
+      danger: true,
+      dividerBefore: true,
+      onClick: () => this.confirmLogout(),
+    },
+  ];
+
+  protected readonly notifications: AfricaniesNotification[] = [
+    {
+      id: 'n1',
+      title: 'Shipment delivered',
+      timestamp: new Date().toISOString(),
+    },
+  ];
+
+  protected readonly nav: AfricaniesSideNavItem[] = [
+    { id: 'home', label: 'Home', icon: 'home' },
+    { id: 'shipments', label: 'Shipments', icon: 'truck' },
+  ];
+
+  protected confirmLogout(): void {
+    this.confirm
+      .confirm({
+        title: 'Log out?',
+        message:
+          'This signs you out of this device and every other session.',
+        confirmLabel: 'Log out',
+        danger: true,
+      })
+      .subscribe((ok) => {
+        if (!ok) {
+          return;
+        }
+        this.users
+          .logoutFromAllSessions()
+          .pipe(finalize(() => this.auth.clear()))
+          .subscribe();
+      });
+  }
+}
+`;var bo=`// Centered modal via ModalService. Needs provideAfricaniesUiOverlays() in app.config.
+// Built on Angular CDK Overlay (panels attach to body \u2014 not clipped by overflow).
+// Inject OVERLAY_DATA in the panel, close with AfricaniesOverlayRef.close(result).
+// dismissible defaults to false \u2014 backdrop/Escape only work when you opt in.
+// Close X: put it in a shrink-0 header and scroll the body (host overflow-hidden
+// + africanies-overlay-scroll). The pane reserves a scrollbar gutter so the track
+// cannot cover the button.
+
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideAfricaniesUiOverlays } from '@africanies/africanies-ui';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAfricaniesUiOverlays(),
+  ],
+};
+
+// --- Hosted panel ---
+import { Component, inject } from '@angular/core';
+import {
+  AfricaniesOverlayRef,
+  ButtonComponent,
+  OVERLAY_DATA,
+} from '@africanies/africanies-ui';
+
+export interface EditShipmentData {
+  shipmentRef: string;
+}
+
+export interface EditShipmentResult {
+  saved: boolean;
+  note: string;
+}
+
+@Component({
+  selector: 'app-edit-shipment-modal',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex flex-col gap-5">
+      <h2 class="m-0 text-heading-3 text-ink dark:text-white">
+        Edit {{ data.shipmentRef }}
+      </h2>
+
+      <label class="flex flex-col gap-1.5">
+        <span class="text-caption font-medium text-neutral-600">Note</span>
+        <input
+          class="rounded-md border border-border px-3 py-2 text-body"
+          type="text"
+          [value]="note"
+          (input)="note = $any($event.target).value"
+        />
+      </label>
+
+      <div class="flex justify-end gap-2">
+        <button africanies-button type="button" variant="ghost" (click)="ref.close()">
+          Cancel
+        </button>
+        <button
+          africanies-button
+          type="button"
+          variant="primary"
+          (click)="ref.close({ saved: true, note })"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  \`,
+})
+export class EditShipmentModalComponent {
+  protected readonly data = inject<EditShipmentData>(OVERLAY_DATA);
+  protected readonly ref = inject(AfricaniesOverlayRef<EditShipmentResult>);
+  protected note = '';
+}
+
+// --- Caller ---
+import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ButtonComponent, ModalService } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-open-modal-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <button africanies-button type="button" variant="primary" (click)="openLocked()">
+      Edit shipment
+    </button>
+    <button africanies-button type="button" variant="secondary" (click)="openDismissible()">
+      Quick look
+    </button>
+  \`,
+})
+export class OpenModalDemoComponent {
+  private readonly modal = inject(ModalService);
+
+  protected openLocked(): void {
+    this.modal
+      .open<EditShipmentData, EditShipmentResult>(EditShipmentModalComponent, {
+        data: { shipmentRef: 'SFN-1042' },
+        // dismissible defaults to false \u2014 backdrop / Escape do nothing.
+        // size defaults to 'md'. Use 'lg' for dense forms, 'xl' for media.
+      })
+      .afterClosed()
+      .pipe(takeUntilDestroyed())
+      .subscribe((result) => {
+        if (result?.saved) {
+          // Apply note locally or invalidate list query \u2014 no second GET needed.
+        }
+      });
+  }
+
+  protected openDismissible(): void {
+    this.modal
+      .open<EditShipmentData, EditShipmentResult>(EditShipmentModalComponent, {
+        data: { shipmentRef: 'SFN-1042' },
+        dismissible: true,
+        size: 'lg',
+      })
+      .afterClosed()
+      .pipe(takeUntilDestroyed())
+      .subscribe((result) => {
+        // result undefined when dismissed via backdrop / Escape / Cancel without save.
+      });
+  }
+}`,yo=`// Right-edge drawer \u2014 same OVERLAY_DATA / AfricaniesOverlayRef contract as modals.
+// Good for filters and detail chrome. Default is locked; set dismissible: true for abandonable panels.
+
+import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  AfricaniesOverlayRef,
+  ButtonComponent,
+  DrawerService,
+  OVERLAY_DATA,
+} from '@africanies/africanies-ui';
+
+export interface FiltersDrawerData {
+  facet: string;
+}
+
+export interface FiltersDrawerResult {
+  applied: boolean;
+}
+
+@Component({
+  selector: 'app-filters-drawer',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <div class="flex h-full flex-col gap-5">
+      <h2 class="m-0 text-heading-3 text-ink dark:text-white">
+        Filters \u2014 {{ data.facet }}
+      </h2>
+
+      <ul class="m-0 flex list-none flex-col gap-2 p-0">
+        @for (opt of options; track opt) {
+          <li>
+            <label class="flex items-center gap-2 rounded-md border border-border px-3 py-2">
+              <input type="checkbox" />
+              {{ opt }}
+            </label>
+          </li>
+        }
+      </ul>
+
+      <div class="mt-auto flex justify-end gap-2 pt-4">
+        <button africanies-button type="button" variant="ghost" (click)="ref.close()">
+          Cancel
+        </button>
+        <button
+          africanies-button
+          type="button"
+          variant="primary"
+          (click)="ref.close({ applied: true })"
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  \`,
+})
+export class FiltersDrawerComponent {
+  protected readonly data = inject<FiltersDrawerData>(OVERLAY_DATA);
+  protected readonly ref = inject(AfricaniesOverlayRef<FiltersDrawerResult>);
+  protected readonly options = ['In transit', 'Delivered', 'Pending', 'Exception'] as const;
+}
+
+@Component({
+  selector: 'app-open-drawer-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <button africanies-button type="button" variant="secondary" (click)="open(false)">
+      Open (locked)
+    </button>
+    <button africanies-button type="button" variant="primary" (click)="open(true)">
+      Open (dismissible)
+    </button>
+  \`,
+})
+export class OpenDrawerDemoComponent {
+  private readonly drawer = inject(DrawerService);
+
+  protected open(dismissible: boolean): void {
+    this.drawer
+      .open<FiltersDrawerData, FiltersDrawerResult>(FiltersDrawerComponent, {
+        data: { facet: 'Status' },
+        dismissible,
+      })
+      .afterClosed()
+      .pipe(takeUntilDestroyed())
+      .subscribe((result) => {
+        if (result?.applied) {
+          // Push facet selections into list query params \u2192 refetch.
+        }
+      });
+  }
+}`,vo=`// One-liner confirm via ConfirmService \u2014 returns Observable<boolean>.
+// Set danger: true for delete/void. Don't open ConfirmDialogComponent yourself.
+
+import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ButtonComponent, ConfirmService } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-confirm-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <button africanies-button type="button" variant="secondary" (click)="confirmNeutral()">
+      Mark delivered
+    </button>
+
+    <button africanies-button type="button" variant="danger" (click)="confirmDestructive()">
+      Delete shipment
+    </button>
+
+    <button africanies-button type="button" variant="ghost" (click)="confirmDismissible()">
+      Dismissible confirm
+    </button>
+  \`,
+})
+export class ConfirmDemoComponent {
+  private readonly confirm = inject(ConfirmService);
+
+  protected confirmNeutral(): void {
+    this.confirm
+      .confirm({
+        title: 'Mark as delivered?',
+        message: 'The consignee will be notified that the shipment is complete.',
+        confirmLabel: 'Mark delivered',
+        cancelLabel: 'Cancel',
+        danger: false,
+      })
+      .pipe(takeUntilDestroyed())
+      .subscribe((ok) => {
+        if (ok) {
+          this.markDelivered();
+        }
+      });
+  }
+
+  protected confirmDestructive(): void {
+    this.confirm
+      .confirm({
+        title: 'Delete shipment?',
+        message: 'This cannot be undone. Related documents stay in archive.',
+        confirmLabel: 'Delete',
+        cancelLabel: 'Cancel',
+        danger: true,
+        // Optional: keep the dialog open with a loading Confirm until this
+        // settles. Errors leave it open so the user can retry or cancel.
+        // onConfirm: () => this.shipments.delete(id),
+      })
+      .pipe(takeUntilDestroyed())
+      .subscribe((ok) => {
+        if (ok) {
+          this.deleteShipment();
+        }
+      });
+  }
+
+  protected confirmDismissible(): void {
+    this.confirm
+      .confirm({
+        title: 'Discard unsaved changes?',
+        message: 'Your draft note will be lost.',
+        confirmLabel: 'Discard',
+        cancelLabel: 'Keep editing',
+        danger: true,
+        dismissible: true,
+        // backdrop / Escape \u2192 false (same as Cancel) via ConfirmService map.
+      })
+      .pipe(takeUntilDestroyed())
+      .subscribe((ok) => {
+        if (ok) {
+          this.discardDraft();
+        }
+      });
+  }
+
+  private markDelivered(): void {
+    // mutation.mutate({ id, status: 'Delivered' })
+  }
+
+  private deleteShipment(): void {
+    // mutation.mutate({ id })
+  }
+
+  private discardDraft(): void {
+    // navigate away or ref.close() on parent overlay
+  }
+}`;var Co=`// Multi-step wizard with forward-blocking. Match africaniesStepDef keys to StepDefinition.key.
+// Drive isValid from real form state; wire your own Back/Next around canGoNext().
+// This is wizard nav \u2014 not a shipment status timeline.
+
+import { Component, computed, signal } from '@angular/core';
+import {
+  ButtonComponent,
+  StepDefDirective,
+  StepperComponent,
+  TextInputComponent,
+  type StepDefinition,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-shipment-wizard',
+  standalone: true,
+  imports: [
+    StepperComponent,
+    StepDefDirective,
+    ButtonComponent,
+    TextInputComponent,
+  ],
+  template: \`
+    <africanies-stepper
+      [steps]="steps()"
+      [activeIndex]="activeIndex()"
+      [linear]="true"
+      (activeIndexChange)="activeIndex.set($event)"
+    >
+      <ng-template africaniesStepDef="route">
+        <div class="flex flex-col gap-4">
+          <p class="m-0 text-body-sm text-neutral-600">
+            Origin and destination for this shipment.
+          </p>
+          <div class="grid gap-4 md:grid-cols-2">
+            <africanies-text-input label="Origin city" [(value)]="origin" />
+            <africanies-text-input label="Destination city" [(value)]="destination" />
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template africaniesStepDef="cargo">
+        <div class="flex flex-col gap-4">
+          <p class="m-0 text-body-sm text-neutral-600">Describe what you are shipping.</p>
+          <africanies-text-input label="Commodity" [(value)]="commodity" />
+        </div>
+      </ng-template>
+
+      <ng-template africaniesStepDef="review">
+        <div
+          class="rounded-lg border border-border bg-background-welcome p-4 text-body-sm dark:border-white/10 dark:bg-ink-950"
+        >
+          <p class="m-0 font-medium text-ink dark:text-white">Review</p>
+          <ul class="mt-2 mb-0 list-disc pl-5 text-neutral-600">
+            <li>{{ origin() || '\u2014' }} \u2192 {{ destination() || '\u2014' }}</li>
+            <li>{{ commodity() || 'No commodity set' }}</li>
+          </ul>
+        </div>
+      </ng-template>
+    </africanies-stepper>
+
+    <div class="mt-5 flex gap-2">
+      <button
+        africanies-button
+        type="button"
+        variant="ghost"
+        [disabled]="activeIndex() === 0"
+        (click)="activeIndex.set(activeIndex() - 1)"
+      >
+        Back
+      </button>
+      <button
+        africanies-button
+        type="button"
+        [disabled]="activeIndex() >= steps().length - 1 || !canGoNext()"
+        (click)="activeIndex.set(activeIndex() + 1)"
+      >
+        Next
+      </button>
+    </div>
+  \`,
+})
+export class ShipmentWizardComponent {
+  protected readonly activeIndex = signal(0);
+  protected readonly routeValid = signal(false);
+
+  protected readonly origin = signal('Lagos');
+  protected readonly destination = signal('');
+  protected readonly commodity = signal('');
+
+  protected readonly steps = computed<StepDefinition[]>(() => [
+    { key: 'route', label: 'Route', isValid: this.routeValid() },
+    { key: 'cargo', label: 'Cargo', isValid: true },
+    { key: 'review', label: 'Review' },
+  ]);
+
+  protected canGoNext(): boolean {
+    const current = this.steps()[this.activeIndex()];
+    return current?.isValid !== false;
+  }
+}
+`,xo=`// Non-linear \u2014 users can jump to any step via the header.
+// isValid won't gate navigation here; use linear=true when order matters.
+
+import { Component, signal } from '@angular/core';
+import {
+  StepDefDirective,
+  StepperComponent,
+  type StepDefinition,
+} from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-account-setup',
+  standalone: true,
+  imports: [StepperComponent, StepDefDirective],
+  template: \`
+    <africanies-stepper
+      [steps]="steps"
+      [activeIndex]="activeIndex()"
+      [linear]="false"
+      (activeIndexChange)="activeIndex.set($event)"
+    >
+      <ng-template africaniesStepDef="account">
+        <p class="m-0 text-body text-ink dark:text-white">Account details step body.</p>
+      </ng-template>
+
+      <ng-template africaniesStepDef="billing">
+        <p class="m-0 text-body text-ink dark:text-white">Billing step body.</p>
+      </ng-template>
+
+      <ng-template africaniesStepDef="confirm">
+        <p class="m-0 text-body text-ink dark:text-white">Confirmation step body.</p>
+      </ng-template>
+    </africanies-stepper>
+  \`,
+})
+export class AccountSetupComponent {
+  protected readonly activeIndex = signal(0);
+
+  protected readonly steps: StepDefinition[] = [
+    { key: 'account', label: 'Account' },
+    { key: 'billing', label: 'Billing' },
+    { key: 'confirm', label: 'Confirm' },
+  ];
+}
+`;var Eo=`// Server-driven list: keep the table mounted; loading / empty / error render in the body.
+// Toolbar: Refresh (left); Filters + Export (right). Pass [meta] for the built-in pager.
+// Hydrate page/size/filters from FilterQueryService when the URL has those queries.
+// Pager + Apply write the same keys back. Refetch on sortChange / pageChange / sizeChange.
+// Refresh / tab focus \u2192 [refreshing] (rows stay). Page/size \u2192 pager spinner.
+// First load and STN\u2194SFN (listFetchKind reason 'mode') \u2192 clear rows + body loader.
+// Empty and hard errors stay in-grid so Filters / Export / pager remain available.
+// Expandable rows: africaniesRowDetail="Label" let-row for label / component value pairs.
+// Column width: omit to size to content; set width (e.g. '3.5rem') to pin actions.
+// The actions column sticks to the right while the table scrolls horizontally.
+
+import { Component, computed, effect, inject, signal, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ApiClient, downloadCsv, listFetchKind, ShippingModeService, type ListFetchReason } from '@africanies/africanies-core';
+import type { AsyncQueryStateModel, PaginationMetaModel } from '@africanies/africanies-models';
+import {
+  ActionMenuComponent,
+  CellDefDirective,
+  ChipComponent,
+  CopyButtonComponent,
+  DEFAULT_PAGE_SIZE,
+  FilterQueryService,
+  RowDetailDefDirective,
+  TableComponent,
+  trackShipmentsFilterConfig,
+  type AfricaniesMenuItem,
+  type TableColumn,
+  type TableSortChange,
+} from '@africanies/africanies-ui';
+import { filter, firstValueFrom, fromEvent } from 'rxjs';
+
+interface Shipment {
+  reference: string;
+  status: 'In transit' | 'Delivered' | 'Pending' | 'Exception';
+  mode: 'sfn' | 'stn';
+  destination: string;
+  valueUsd: number;
+}
+
+const PAGE_SIZE = DEFAULT_PAGE_SIZE;
+
+@Component({
+  selector: 'app-shipment-list-page',
+  standalone: true,
+  imports: [
+    TableComponent,
+    CellDefDirective,
+    RowDetailDefDirective,
+    ActionMenuComponent,
+    ChipComponent,
+    CopyButtonComponent,
+  ],
+  template: \`
+    <africanies-table
+        [columns]="columns"
+        [rows]="rows()"
+        [meta]="meta()"
+        [sort]="sort()"
+        [rowTrackBy]="rowTrackBy"
+        [showRefresh]="true"
+        [refreshing]="isRefreshing()"
+        [loading]="isLoading() || isPageLoading()"
+        [error]="listError()"
+        emptyMessage="No shipments match these filters."
+        [showFilter]="true"
+        [showExport]="true"
+        (sortChange)="onSort($event)"
+        (refreshClick)="refetch({ reason: 'refresh' })"
+        (filterClick)="openFilters()"
+        (exportClick)="exportCsv()"
+        (pageChange)="onPageChange($event)"
+        (sizeChange)="onSizeChange($event)"
+      >
+        <ng-template africaniesCellDef="reference" let-row>
+          <div class="flex items-center gap-1">
+            <span class="font-medium">{{ row.reference }}</span>
+            <africanies-copy
+              [value]="row.reference"
+              [ariaLabel]="'Copy ' + row.reference"
+            />
+          </div>
+        </ng-template>
+
+        <ng-template africaniesCellDef="status" let-row>
+          <africanies-chip [variant]="statusVariant(row.status)">{{ row.status }}</africanies-chip>
+        </ng-template>
+
+        <ng-template africaniesCellDef="valueUsd" let-row>
+          <span class="tabular-nums">{{ formatUsd(row.valueUsd) }}</span>
+        </ng-template>
+
+        <ng-template africaniesCellDef="actions" let-row>
+          <africanies-action-menu
+            [items]="rowActions(row)"
+            [ariaLabel]="'Actions for ' + row.reference"
+          />
+        </ng-template>
+
+        <ng-template africaniesRowDetail="Destination" let-row>
+          <span class="font-medium">{{ row.destination }}</span>
+        </ng-template>
+
+        <ng-template africaniesRowDetail="Declared value" let-row>
+          <span class="tabular-nums">{{ formatUsd(row.valueUsd) }}</span>
+        </ng-template>
+
+        <ng-template africaniesRowDetail="Status" let-row>
+          <africanies-chip [variant]="statusVariant(row.status)">{{ row.status }}</africanies-chip>
+        </ng-template>
+      </africanies-table>
+  \`,
+})
+export class ShipmentListPageComponent {
+  private readonly api = inject(ApiClient);
+  private readonly shipping = inject(ShippingModeService);
+  private readonly filterQuery = inject(FilterQueryService);
+  private readonly urlState = this.filterQuery.read(trackShipmentsFilterConfig);
+
+  protected readonly page = signal(this.urlState.page ?? 1);
+  protected readonly size = signal(this.urlState.size ?? PAGE_SIZE);
+  protected readonly sort = signal<TableSortChange | null>(null);
+  protected readonly rows = signal<Shipment[]>([]);
+  protected readonly meta = signal<PaginationMetaModel | null>(null);
+  protected readonly fetchError = signal<string | null>(null);
+  protected readonly isLoading = signal(false);
+  protected readonly isRefreshing = signal(false);
+  protected readonly isPageLoading = signal(false);
+
+  protected readonly columns: TableColumn<Shipment>[] = [
+    { key: 'reference', header: 'Reference', sortable: true },
+    { key: 'status', header: 'Status', sortable: true },
+    { key: 'mode', header: 'Mode' },
+    { key: 'destination', header: 'Destination', sortable: true },
+    { key: 'valueUsd', header: 'Value', sortable: true },
+    { key: 'actions', header: '', width: '3.5rem' },
+  ];
+
+  protected readonly rowTrackBy = (row: Shipment) => row.reference;
+
+  protected rowActions(row: Shipment): AfricaniesMenuItem[] {
+    return [
+      {
+        label: 'Open',
+        icon: 'eye',
+        onClick: () => this.open(row),
+      },
+      {
+        label: 'Edit',
+        icon: 'edit',
+        onClick: () => this.edit(row),
+      },
+      {
+        label: 'Copy reference',
+        icon: 'copy',
+        onClick: () => this.copyReference(row),
+      },
+      {
+        label: 'Delete',
+        icon: 'trash',
+        danger: true,
+        dividerBefore: true,
+        onClick: () => this.delete(row),
+      },
+    ];
+  }
+
+  protected readonly listState = computed((): AsyncQueryStateModel<Shipment[]> => ({
+    data: this.rows(),
+    isLoading: this.isLoading(),
+    isFetching: this.isRefreshing() || this.isPageLoading(),
+    isError: this.fetchError() != null,
+    error: this.fetchError(),
+  }));
+
+  constructor() {
+    effect(() => {
+      this.shipping.mode();
+      untracked(() =>
+        void this.refetch({
+          reason: this.rows().length > 0 ? 'mode' : 'initial',
+        }),
+      );
+    });
+
+    fromEvent(document, 'visibilitychange')
+      .pipe(
+        filter(() => document.visibilityState === 'visible'),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => void this.refetch({ reason: 'focus' }));
+  }
+
+  protected async refetch(
+    opts: { reason: ListFetchReason } = { reason: 'initial' },
+  ): Promise<void> {
+    const kind = listFetchKind({
+      hasData: this.rows().length > 0,
+      reason: opts.reason,
+    });
+    this.isLoading.set(kind === 'loading');
+    this.isRefreshing.set(kind === 'refreshing');
+    this.isPageLoading.set(kind === 'pagination');
+    if (kind === 'loading') {
+      this.rows.set([]);
+    }
+    this.fetchError.set(null);
+    try {
+      const currentSort = this.sort();
+      const res = await firstValueFrom(
+        this.api.getResource<Shipment>('shipments', null, {
+          page: this.page(),
+          size: this.size(),
+          // Map sort key/direction to your API query params when supported.
+          orderBy: currentSort?.key,
+          order: currentSort?.direction,
+        }),
+      );
+      this.rows.set(res.data ?? []);
+      this.meta.set(res.pagination ?? null);
+    } catch {
+      this.fetchError.set('Could not load shipments.');
+    } finally {
+      this.isLoading.set(false);
+      this.isRefreshing.set(false);
+      this.isPageLoading.set(false);
+    }
+  }
+
+  protected onSort(change: TableSortChange): void {
+    this.sort.set(change);
+    this.page.set(1);
+    void this.refetch({ reason: 'page' });
+  }
+
+  protected onPageChange(next: number): void {
+    this.page.set(next);
+    void this.refetch({ reason: 'page' });
+  }
+
+  protected onSizeChange(next: number): void {
+    this.size.set(next);
+    this.page.set(1);
+    void this.refetch({ reason: 'page' });
+  }
+
+  private open(row: Shipment): void {
+    /* navigate to detail */
+  }
+
+  private edit(row: Shipment): void {
+    /* open edit flow */
+  }
+
+  private copyReference(row: Shipment): void {
+    /* clipboard.writeText(row.reference) */
+  }
+
+  private delete(row: Shipment): void {
+    /* confirm + API delete */
+  }
+
+  protected exportCsv(): void {
+    downloadCsv({
+      filename: 'shipments.csv',
+      headers: ['Reference', 'Status', 'Destination', 'Value (USD)'],
+      rows: this.rows().map((row) => [
+        row.reference,
+        row.status,
+        row.destination,
+        row.valueUsd,
+      ]),
+    });
+  }
+
+  protected formatUsd(value: number): string {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 0,
+    }).format(value);
+  }
+}
+
+// --- Playground-only demo (in-memory slice \u2014 NOT for production) ---
+//
+// const ALL_ROWS: Shipment[] = [/* static fixture */];
+//
+// pageRows = computed(() => {
+//   const start = (this.page() - 1) * PAGE_SIZE;
+//   return sortedRows().slice(start, start + PAGE_SIZE);
+// });
+//
+// meta = computed((): PaginationMetaModel => ({ /* derived from ALL_ROWS.length */ }));
+`,Ao=`// Plain text columns only \u2014 no africaniesCellDef needed; cells render String(row[key]).
+// Fine for small previews; skip AsyncState/pagination if the set is static.
+
+import { Component } from '@angular/core';
+import { TableComponent, type TableColumn } from '@africanies/africanies-ui';
+
+interface Shipment {
+  reference: string;
+  destination: string;
+  status: string;
+}
+
+@Component({
+  selector: 'app-shipment-compact-preview',
+  standalone: true,
+  imports: [TableComponent],
+  template: \`
+    <africanies-table [columns]="columns" [rows]="rows" />
+  \`,
+})
+export class ShipmentCompactPreviewComponent {
+  protected readonly columns: TableColumn<Shipment>[] = [
+    { key: 'reference', header: 'Reference' },
+    { key: 'destination', header: 'Destination' },
+    { key: 'status', header: 'Status' },
+  ];
+
+  protected readonly rows: Shipment[] = [
+    { reference: 'SFN-1042', destination: 'Lagos', status: 'In transit' },
+    { reference: 'STN-2088', destination: 'Accra', status: 'Delivered' },
+    { reference: 'SFN-1099', destination: 'Nairobi', status: 'Pending' },
+  ];
+}
+`,ko=`// Stacked title / subtitle / extra line. Drop into a table cell (or a detail panel).
+// The table row grows to fit \u2014 no extra layout work.
+
+import { Component } from '@angular/core';
+import { ContentStackComponent } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-packaged-by',
+  standalone: true,
+  imports: [ContentStackComponent],
+  template: \`
+    <africanies-content-stack
+      title="Oladotun Adedeji"
+      subtitle="oladotun.a@africanies.com"
+      extraLine="Aug 14, 2026, 2:04:22 PM"
+    />
+  \`,
+})
+export class PackagedByComponent {}
+`,_o=`// Customer list: switch columns by account type (individual vs business).
+// User: date created, customer, attempts, identifier, status, performed by, action.
+// Business: date created, business, attempts, company type, incorp no, incorp date, website, status, action.
+
+protected readonly userColumns: TableColumn<CustomerRow>[] = [
+  { key: 'createdAt', header: 'Date created', sortable: true },
+  { key: 'customer', header: 'Customer' },
+  { key: 'attempts', header: 'Attempts', sortable: true },
+  { key: 'identifier', header: 'Identifier' },
+  { key: 'status', header: 'Status', sortable: true },
+  { key: 'performedBy', header: 'Performed by' },
+  { key: 'actions', header: 'Action', width: '3.5rem' },
+];
+
+protected readonly businessColumns: TableColumn<CustomerRow>[] = [
+  { key: 'createdAt', header: 'Date created', sortable: true },
+  { key: 'business', header: 'Business' },
+  { key: 'attempts', header: 'Attempts', sortable: true },
+  { key: 'companyType', header: 'Company type' },
+  { key: 'incorpNo', header: 'Incorp no' },
+  { key: 'incorpDate', header: 'Incorp date' },
+  { key: 'website', header: 'Website' },
+  { key: 'status', header: 'Status', sortable: true },
+  { key: 'actions', header: 'Action', width: '3.5rem' },
+];
+`;var Mo=`
+// Inject ToastService and fire away.
+// Toasts mount via CDK Overlay in the corner (provideAfricaniesToasts() once).
+// Error stays until closed; warning ~8s; info/success ~4.5s. Hover pauses.
+
+import { Component, inject } from '@angular/core';
+import { ButtonComponent, ToastService } from '@africanies/africanies-ui';
+
+@Component({
+  selector: 'app-toast-demo',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: \`
+    <button africanies-button type="button" (click)="ok()">Saved</button>
+    <button africanies-button type="button" variant="secondary" (click)="warn()">Warn</button>
+    <button africanies-button type="button" variant="danger" (click)="fail()">Error</button>
+  \`,
+})
+export class ToastDemoComponent {
+  private readonly toast = inject(ToastService);
+
+  protected ok(): void {
+    this.toast.success('Shipment saved', 'Done');
+  }
+
+  protected warn(): void {
+    this.toast.warning('Rates may be outdated. Refresh before quoting.');
+  }
+
+  protected fail(): void {
+    this.toast.error('Could not reach the carrier API.', 'Request failed');
+  }
+}
+`,Io=`
+// Same message twice? They collapse into one with \xD7N.
+// X peels one copy; Expand shows all; Close all clears the group.
+
+this.toast.error('Warehouse offline');
+this.toast.error('Warehouse offline'); // \xD72
+`,No=`
+// Wrap HttpClient calls with withToast(). Success + error on by default.
+// Needs provideAfricaniesHttpClient() + provideAfricaniesToasts() in app.config.
+
+import { HttpClient } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { withToast } from '@africanies/africanies-core';
+
+const http = inject(HttpClient);
+
+// Success toast + persistent error toast
+http.post('/shipments', body, { context: withToast() }).subscribe();
+
+// Errors only
+http.post('/shipments', body, {
+  context: withToast({ success: false }),
+}).subscribe();
+
+// Custom copy
+http.post('/shipments', body, {
+  context: withToast({
+    successMessage: 'Shipment created',
+    errorMessage: 'Could not create shipment',
+  }),
+}).subscribe();
+`;var Oo=`
+// Help next to a label. Ghost info icon; opens on hover, focus, or tap.
+// No overlay provider needed \u2014 uses CDK like select / action-menu.
+
+import { TooltipComponent } from '@africanies/africanies-ui';
+
+@Component({
+  imports: [TooltipComponent],
+  template: \`
+    <div class="inline-flex items-center gap-1.5">
+      Insured
+      <africanies-tooltip
+        text="Coverage against loss or damage while the shipment is in transit."
+      />
+    </div>
+  \`,
+})
+export class Example {}
+`,Do=`
+// Wrap any control and mark it with africaniesTooltipTrigger \u2014 default info icon hides.
+
+import { ButtonComponent, TooltipComponent, TooltipTriggerDirective } from '@africanies/africanies-ui';
+
+@Component({
+  imports: [ButtonComponent, TooltipComponent, TooltipTriggerDirective],
+  template: \`
+    <africanies-tooltip text="Required when the declared value exceeds $2,000.">
+      <button
+        type="button"
+        africanies-button
+        africaniesTooltipTrigger
+        variant="ghost"
+        size="sm"
+      >
+        Why is this required?
+      </button>
+    </africanies-tooltip>
+  \`,
+})
+export class Example {}
+`,Po=`
+// placement prefers a side; CDK flips if there\u2019s no room.
+// 'top' | 'bottom' | 'left' | 'right' (default 'top').
+
+<africanies-tooltip text="Opens above when possible." placement="top" />
+<africanies-tooltip text="Opens below when possible." placement="bottom" />
+<africanies-tooltip text="Opens to the left." placement="left" />
+<africanies-tooltip text="Opens to the right." placement="right" />
+`,Lo=`
+// Label + tip beside it \u2014 don\u2019t wrap the input itself.
+
+import { TextInputComponent, TooltipComponent } from '@africanies/africanies-ui';
+
+@Component({
+  imports: [TextInputComponent, TooltipComponent],
+  template: \`
+    <div class="flex flex-col gap-1.5">
+      <div class="flex items-center gap-1.5">
+        <span class="text-body-sm font-medium text-ink dark:text-white">
+          Tracking number
+        </span>
+        <africanies-tooltip
+          text="Carrier AWB or internal shipment reference used on the warehouse floor."
+          icon="question-circle"
+          ariaLabel="About tracking number"
+        />
+      </div>
+      <africanies-text-input label="" placeholder="SFN-\u2026" [(value)]="tracking" />
+    </div>
+  \`,
+})
+export class Example {
+  tracking = '';
+}
+`;var Bo=`// No Back button or breadcrumbs to build. africanies-app-shell shows both in the
+// content chrome. Back appears only on child routes (and still does after a
+// pasted / reloaded URL). Nested children under a parent is all the app needs.
+//
+// List filters + pagination live on the query string (FilterQueryService).
+// Open detail with queryParamsHandling: 'preserve' so Back restores page/filters.
+
+import { FilterQueryService, trackShipmentsFilterConfig } from '@africanies/africanies-ui';
+
+const routes: Route[] = [
+  {
+    path: 'usecases/shipment',
+    loadComponent: () =>
+      import('./shipment-usecase.page').then((m) => m.ShipmentUsecasePage),
+    children: [
+      {
+        path: '',
+        loadComponent: () =>
+          import('./shipment-list.page').then((m) => m.ShipmentListPage),
+      },
+      {
+        path: ':id',
+        loadComponent: () =>
+          import('./shipment-detail.page').then((m) => m.ShipmentDetailPage),
+      },
+    ],
+  },
+];
+
+// List page \u2014 seed from the URL, then let Apply / africanies-pagination write back:
+const filterQuery = inject(FilterQueryService);
+const config = trackShipmentsFilterConfig;
+const state = filterQuery.hasParams(config)
+  ? filterQuery.read(config)
+  : emptyFilterState();
+
+// Detail navigation keeps the list queries on the URL:
+this.router.navigate(['/usecases/shipment', row.reference], {
+  queryParamsHandling: 'preserve',
+});
+`,Uo=`// Forgot password is email-only. Login \u2192 /onboarding/forgot-password.
+// Submit POSTs { email } to /auth/forgot/password. This app does not handle
+// the emailed link (no token in the route). /onboarding/reset-password is a
+// different flow: first login when user.default_password is set.
+
+import { Component, computed, inject, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { AuthService, isValidEmail } from '@africanies/africanies-core';
+import { firstValueFrom } from 'rxjs';
+
+const routes: Route[] = [
+  { path: 'onboarding/login', loadComponent: () => import('./login.page') },
+  {
+    path: 'onboarding/forgot-password',
+    loadComponent: () => import('./forgot-password.page'),
+  },
+  // NOT part of forgot-password \u2014 first login with a default password:
+  {
+    path: 'onboarding/reset-password',
+    loadComponent: () => import('./reset-password.page'),
+  },
+];
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  template: \`
+    <p>We will send you a password reset link.</p>
+    <africanies-text-input type="email" label="Email" [(value)]="email" />
+    <button
+      africanies-button
+      type="button"
+      [disabled]="!canSubmit()"
+      [loading]="sending()"
+      (click)="forgot()"
+    >
+      Send reset link
+    </button>
+    @if (message(); as copy) {
+      <p>{{ copy }}</p>
+      <a routerLink="/onboarding/login">Reset completed? Login here</a>
+    }
+  \`,
+})
+export class ForgotPasswordPage {
+  private readonly authApi = inject(AuthService);
+  protected readonly email = signal('');
+  protected readonly sending = signal(false);
+  protected readonly message = signal<string | null>(null);
+  protected readonly canSubmit = computed(() => isValidEmail(this.email()));
+
+  protected async forgot(): Promise<void> {
+    if (!this.canSubmit()) return;
+    this.sending.set(true);
+    try {
+      const res = await firstValueFrom(this.authApi.forgot(this.email()));
+      if (res.success) {
+        this.message.set(res.message?.trim() ?? null);
+      }
+    } finally {
+      this.sending.set(false);
+    }
+  }
+}
+
+// After login:
+// if (user.default_password) router.navigate(['/onboarding/reset-password']);
+// reset-password calls UserService.changePassword({ current_password, password, password_confirmation })
+// Admins can also call authApi.forgot(user.email) from user/partner screens.
+`;export{$r as $,Ar as A,Bi as B,Cr as C,Dr as D,Er as E,Fr as F,Gr as G,Ht as H,Ir as I,Po as J,Kr as K,Lr as L,Mr as M,Nr as N,Or as O,Pr as P,Lo as Q,Rr as R,Sr as S,Mo as T,Ui as U,Vi as V,Wr as W,Io as X,Yr as Y,No as Z,_r as _,Hi as a,_o as a0,Eo as a1,Ao as a2,ko as a3,Co as a4,xo as a5,co as a6,po as a7,mo as a8,uo as a9,rr as aA,or as aB,Ji as aC,sr as aD,fo as aa,go as ab,Bo as ac,Uo as ad,oo as ae,Qr as af,io as ag,ro as ah,no as ai,to as aj,eo as ak,Jr as al,Xr as am,so as an,qi as ao,$i as ap,Ki as aq,Yi as ar,Zi as as,Qi as at,Xi as au,er as av,tr as aw,nr as ax,ar as ay,ir as az,br as b,cr as c,dr as d,bo as e,fr as f,gr as g,hr as h,vo as i,ji as j,kr as k,jr as l,mr as m,zr as n,Vr as o,pr as p,qr as q,Hr as r,Br as s,Oo as t,ur as u,vr as v,wr as w,Do as x,yo as y,zi as z};