https://www.prima.co.uk/_assets/fre/scopes/hdm/_next/static/chunks/pages/demos/slots-2771e72f8291336a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[29806],{612:(e,t,n)=>{"use strict";n.d(t,{D:()=>u});var l=n(7751),r=n(23472),o=n(3637),i=n(77089);function u({name:e,children:t,max:n}){let a=(0,r._E)(e,o.Q0);if((0,i.dv)(a)){let e=(null!=n?a.slice(0,n):a).map(({value:e})=>e);return"function"==typeof t?t(e):(0,l.Y)(l.FK,{children:e})}return"function"==typeof t?t(a):void 0===a?t:a}},3637:(e,t,n)=>{"use strict";n.d(t,{Q0:()=>r,n6:()=>i,rX:()=>o});var l=n(56317);let r=(0,l.eU)(void 0),o=(0,l.eU)(void 0),i=(0,l.eU)(void 0)},23433:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__N_SSP:()=>em,default:()=>eY});var l=n(38536),r=n(33305),o=n(612),i=n(87042),u=n(93682),a=n(53520),s=n(7751),c=n(71055),p=n(12625),d=n(84239),m=n(3637),Y=n(77089),f=n(23472);function y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function b(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var l=n.call(e,t||"default");if("object"!=typeof l)return l;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function g(e,t){return(0,p.md)((0,d.mg)(t,(0,c.useCallback)(t=>(0,Y.L2)(t?.[e]),[e]),f.el))}function h(e,t){return(0,p.md)((0,d.mg)(t,(0,c.useCallback)(t=>t?.[e]!=null,[e])))}function v(e){let t=h(e,m.Q0),n=h(e,m.rX),l=h(e,m.n6);return t||n||l}let k=e=>e?Object.keys(e).sort():[],w=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]);function O(e){return(0,p.md)((0,d.mg)(e,k,w))}function S({name:e,children:t}){return v(e)?(0,s.Y)(s.FK,{children:t}):null}var j=n(27835);function P(){let{0:e,1:t}=(0,c.useState)(!1);return null}var C=n(9954);let x="demo",D=(0,l.A)("div",{target:"eoizyop7"})({name:"1nlt6lw",styles:"margin:2rem;font-family:system-ui, sans-serif"}),A=(0,l.A)("section",{target:"eoizyop6"})({name:"5144hs",styles:"margin-bottom:2rem;padding:1rem;border:1px solid #ddd;border-radius:8px"}),E=(0,l.A)("h2",{target:"eoizyop5"})({name:"1i9vogi",styles:"margin-top:0"}),T=(0,l.A)("code",{target:"eoizyop4"})({name:"3reyc5",styles:"background:#f0f0f0;padding:2px 6px;border-radius:4px"}),Q=(0,l.A)("span",{target:"eoizyop3"})({name:"3sil7z",styles:"display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:bold;margin-right:4px"}),B=(0,l.A)(Q,{target:"eoizyop2"})({name:"1aczabu",styles:"background:#e0f2fe;color:#0369a1"}),I=(0,l.A)(Q,{target:"eoizyop1"})({name:"1komn1w",styles:"background:#dcfce7;color:#15803d"}),F=(0,l.A)("div",{target:"eoizyop0"})({name:"e01gwg",styles:"margin-top:0.5rem;padding:0.75rem;background:#fafafa;border:1px dashed #ccc;border-radius:4px"});function L(){let{0:e,1:t}=(0,c.useState)("Loading..."),{0:n,1:l}=(0,c.useState)(""),i=(0,c.useCallback)(e=>{e.preventDefault(),l(document.getElementById("slot-content").value.trim())},[]);return(0,c.useEffect)(()=>{if(n!==x)return;let e=setTimeout(()=>{t("Hello World!")},3e3);return()=>clearTimeout(e)},[n]),(0,C.Y)(A,null,(0,C.Y)(E,null,"1. Basic Slot / SlotContent"),(0,C.Y)("p",null,"Type ",(0,C.Y)(T,null,"demo")," and click Update to replace the slot fallback."),(0,C.Y)("form",{onSubmit:i},(0,C.Y)("label",{htmlFor:"slot-content"},(0,C.Y)("b",null,"Slot Content Name: "),(0,C.Y)("input",{type:"text",id:"slot-content",defaultValue:n,placeholder:"demo"})),(0,C.Y)("button",{type:"submit",style:{marginLeft:"8px"}},"Update")),(0,C.Y)(F,null,(0,C.Y)(I,null,"SlotContent"),n?(0,C.Y)(r.Q,{name:n},(0,C.Y)("span",null,"Replacement: ",e)):null,(0,C.Y)(B,null,"Slot"),(0,C.Y)(o.D,{name:x},(0,C.Y)("span",null,'Default content for "',x,'" slot'))))}function N(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"2. Append Mode (Multiple Items)"),(0,C.Y)("p",null,"Multiple ",(0,C.Y)(T,null,"SlotContent")," with ",(0,C.Y)(T,null,"append")," accumulate into a single slot."),(0,C.Y)(r.Q,{name:"append-demo",append:!0},(0,C.Y)("div",null,"Widget A")),(0,C.Y)(r.Q,{name:"append-demo",append:!0}

1,(0,C.Y)("div",null,"Widget B")),(0,C.Y)(r.Q,{name:"append-demo",append:!0},(0,C.Y)("div",null,"Widget C")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot"),(0,C.Y)(o.D,{name:"append-demo"},(0,C.Y)("span",null,"Fallback (no items appended)"))))}function R(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"3. String-Key Deduplication"),(0,C.Y)("p",null,"Two writers share ",(0,C.Y)(T,null,'append="banner"')," — only the last one is kept. A third writer uses a different key."),(0,C.Y)(r.Q,{name:"dedup-demo",append:"banner"},(0,C.Y)("div",null,"Banner v1 (replaced)")),(0,C.Y)(r.Q,{name:"dedup-demo",append:"banner"},(0,C.Y)("div",null,"Banner v2 (winner)")),(0,C.Y)(r.Q,{name:"dedup-demo",append:"newsletter"},(0,C.Y)("div",null,"Newsletter (separate key)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot"),(0,C.Y)(o.D,{name:"dedup-demo"},(0,C.Y)("span",null,"Fallback"))))}function _({label:e,slotName:t="once-demo"}){return(0,C.Y)(r.Q,{name:t,append:"widget",once:!0},(0,C.Y)("div",null,"Once item: ",e))}function M(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"4. Set-if-Missing with ",(0,C.Y)(T,null,"once")),(0,C.Y)("p",null,"Three instances of the same component render with"," ",(0,C.Y)(T,null,'append="widget" once'),". They all share the same key, so only the first writer wins — the other two are skipped."),(0,C.Y)(_,{label:"First (wins)"}),(0,C.Y)(_,{label:"Second (skipped)"}),(0,C.Y)(_,{label:"Third (skipped)"}),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot"),' — expect 1 item: only the first "widget"',(0,C.Y)(o.D,{name:"once-demo"},(0,C.Y)("span",null,"Fallback"))),(0,C.Y)("br",null),(0,C.Y)("h3",null,(0,C.Y)(T,null,"once")," is not a lock"),(0,C.Y)("p",null,(0,C.Y)(T,null,"once")," only constrains the writer that uses it. Another writer targeting the"," ",(0,C.Y)("b",null,"same key")," without ",(0,C.Y)(T,null,"once")," can still overwrite the entry:"),(0,C.Y)(_,{label:"First writer (uses once)",slotName:"once-not-locked"}),(0,C.Y)(r.Q,{name:"once-not-locked",append:"widget"},(0,C.Y)("div",null,"Second writer (no once — overwrites the first)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot")," — the second writer wins because it does not use ",(0,C.Y)(T,null,"once"),(0,C.Y)(o.D,{name:"once-not-locked"},(0,C.Y)("span",null,"Fallback"))))}function U(){let{0:e,1:t}=(0,c.useState)(!0);return(0,C.Y)(A,null,(0,C.Y)(E,null,"5. Store-level Write Protection with ",(0,C.Y)(T,null,"locked")),(0,C.Y)("p",null,"A ",(0,C.Y)(T,null,"locked")," writer prevents ",(0,C.Y)("b",null,"all")," other writers from overriding or appending to the slot. Unlike ",(0,C.Y)(T,null,"once")," (self-constraint), ",(0,C.Y)(T,null,"locked")," is a store-level guard that blocks every other instance."),(0,C.Y)("h3",null,"Single mode"),(0,C.Y)(r.Q,{name:"locked-single",locked:!0},(0,C.Y)("div",null,"Locked content (protected)")),(0,C.Y)(r.Q,{name:"locked-single"},(0,C.Y)("div",null,"Intruder (blocked)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot")," — only the locked writer's content is shown",(0,C.Y)(o.D,{name:"locked-single"},(0,C.Y)("span",null,"Fallback"))),(0,C.Y)("h3",null,"Append mode"),(0,C.Y)(r.Q,{name:"locked-append",append:!0,locked:!0},(0,C.Y)("div",null,"Locked item (protected)")),(0,C.Y)(r.Q,{name:"locked-append",append:!0},(0,C.Y)("div",null,"Blocked append (rejected)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot")," — only the locked writer's item appears",(0,C.Y)(o.D,{name:"locked-append"},(0,C.Y)("span",null,"Fallback"))),(0,C.Y)("h3",null,"Lock released on unmount"),(0,C.Y)("p",null,"Toggle the locked writer off. After unmount, new writers can take over the slot."),(0,C.Y)("button",{type:"button",onClick:()=>t(e=>!e),style:{marginBottom:"8px"}},e?"Unmount locked writer":"Mount locked writer"),e?(0,C.Y)(r.Q,{name:"locked-toggle",locked:!0},(0,C.Y)("div",null,"Locked writer (active)")):(0,C.Y)(r.Q,{name:"locked-toggle"},(0,C.Y)("div",null,"New writer (took over after unlock)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot"),(0,C.Y)(o.D,{name:"locked-toggle"},(0,C.Y)("span",null,"Fallback"))))}function W(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"6. Priority Ordering with ",(0,C.Y)(T,null,"priority")),(0,C.Y)("p",null,"In append mode, items render in insertion order by default. Use ",(0,C.Y)(T,null,"priority")," to control the order — higher priority items render first."),(0,C.Y)(r.Q,{name:"priority-demo",append:!0,priority:1},(0,C.Y)("div",null,"Low priority (1)")),(0,C.Y)(r.Q,{name:"priority-demo",append:!0,priority:10},(0,C.Y)("div",null,"High priority (10)")),(0,C.Y)(r.Q,{name:"priority-demo",append:!0,priority:5},(0,C.Y)("div",null,"Medium priority (5)")),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot")," — items sorted: high (10), medium (5), low (1)",(0,C.Y)(o.D,{name:"priority-demo"},(0,C.Y)("span",null,"Fallback"))))}function X(){return(0,C.Y)(r.Q,{name:"hook-demo"},(0,C.Y)("span",null,"Content set via SlotContent"))}function z(){let e,t=(e=g("hook-demo",m.Q0),(0,c.useMemo)(()=>(0,Y.hO)(e),[e]));return(0,C.Y)(F,null,(0,C.Y)("b",null,"useSlotContent result:")," ",t??(0,C.Y)("em",null,"empty"))}function H(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"7. ",(0,C.Y)(T,null,"useSlotContent")," Hook"),(0,C.Y)("p",null,"Read slot content as a hook without marking it as ",(0,C.Y)(T,null,"selected"),". Late writers are not blocked."),(0,C.Y)(X,null),(0,C.Y)(z,null))}function $(){let{0:e,1:t}=(0,c.useState)(!1),n=v("has-slot-demo");return(0,C.Y)(A,null,(0,C.Y)(E,null,"8. ",(0,C.Y)(T,null,"useHasSlot")," Hook"),(0,C.Y)("p",null,"Check if a slot has content without consuming it. Useful for conditional wrapper rendering."),(0,C.Y)("button",{type:"button",onClick:()=>t(e=>!e),style:{marginBottom:"8px"}},e?"Remove slot content":"Add slot content"),e?(0,C.Y)(r.Q,{name:"has-slot-demo"},(0,C.Y)("span",null,"Dynamic content!")):null,(0,C.Y)(F,null,(0,C.Y)("b",null,"useHasSlot:")," ",n?"true":"false",n?(0,C.Y)("div",{style:{marginTop:"0.5rem",padding:"0.5rem",border:"1px solid #4ade80",borderRadius:"4px"}},(0,C.Y)(o.D,{name:"has-slot-demo"})):null))}function J({counter:e}){return e<=0?null:(0,C.Y)(r.Q,{name:"effect-demo"},`Value #${e}`)}function K(){var e,t;let n,l,r,o,i,u,{0:a,1:s}=(0,c.useState)([]),{0:p,1:d}=(0,c.useState)(0);return e="effect-demo",t=(0,c.useCallback)(e=>s(t=>[...t,`Changed to: ${e??"empty"}`]),[]),n=g(e,m.Q0),l=g(e,m.rX),r=g(e,m.n6),o=void 0!==n?n:void 0!==l?l:r,i=(0,c.useMemo)(()=>(0,Y.hO)(o),[o]),u=(0,c.useRef)(!0),(0,c.useEffect)(()=>

1{if(u.current){u.current=!1;return}t(i)},[i,t]),(0,C.Y)(A,null,(0,C.Y)(E,null,"9. ",(0,C.Y)(T,null,"useSlotEffect")," Hook"),(0,C.Y)("p",null,"Run a callback when slot content changes. Skips the initial render — only fires on subsequent updates."),(0,C.Y)("button",{type:"button",onClick:()=>d(e=>e+1),style:{marginBottom:"8px"}},"Update slot content (count: ",p,")"),(0,C.Y)(J,{counter:p}),(0,C.Y)(F,null,(0,C.Y)("b",null,"Change log:"),a.length>0?(0,C.Y)("ul",{style:{marginTop:"0.5rem",paddingLeft:"1.5rem"}},a.map((e,t)=>(0,C.Y)("li",{key:t},e))):(0,C.Y)("span",{style:{color:"#999"}}," (click the button to trigger changes)")))}function V({variant:e,label:t,name:n}){return(0,C.Y)("span",{style:{display:"inline-block",padding:"4px 12px",borderRadius:"12px",color:{success:"#15803d",warning:"#a16207",info:"#0369a1"}[e]||"#333",background:{success:"#dcfce7",warning:"#fef9c3",info:"#e0f2fe"}[e]||"#eee",fontWeight:"bold",marginRight:"8px"}},n||t)}function G(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"10. SlotComponent / SlotComponentContent"),(0,C.Y)("p",null,"Register a component via ",(0,C.Y)(T,null,"SlotComponentContent")," and render it with"," ",(0,C.Y)(T,null,"SlotComponent"),". Props are forwarded from both sides."),(0,C.Y)(i.d,{name:"badge-demo",component:V,variant:"success"}),(0,C.Y)(F,null,(0,C.Y)(B,null,"SlotComponent"),(0,C.Y)(i.S,{name:"badge-demo",label:"Active"})))}function q(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"11. ",(0,C.Y)(T,null,"componentProps")," Escape Hatch"),(0,C.Y)("p",null,"The ",(0,C.Y)(T,null,"Badge")," component has a ",(0,C.Y)(T,null,"name")," prop, which conflicts with the slot system. Using ",(0,C.Y)(T,null,"componentProps")," forwards it safely."),(0,C.Y)(i.d,{name:"escape-demo",component:V,variant:"warning"}),(0,C.Y)(F,null,(0,C.Y)(B,null,"SlotComponent"),(0,C.Y)(i.S,{name:"escape-demo",label:"Fallback label",componentProps:{name:"Priority"}})),(0,C.Y)("p",{style:{marginTop:"0.5rem",fontSize:"14px",color:"#666"}},"The badge reads ",(0,C.Y)(T,null,"name"),' as "Priority" via ',(0,C.Y)(T,null,"componentProps"),', not the slot name "escape-demo".'))}function Z(){let e=(0,j.G)("logger");return(0,C.Y)("button",{type:"button",onClick:()=>e("Button clicked!")},"Click to trigger utility")}function ee(){let{0:e,1:t}=(0,c.useState)([]),n=(0,c.useCallback)(e=>t(t=>[...t,`${new Date().toLocaleTimeString()}: ${e}`]),[]);return(0,C.Y)(A,null,(0,C.Y)(E,null,"12. SlotUtility / useSlotUtility"),(0,C.Y)("p",null,"Register a function via ",(0,C.Y)(T,null,"SlotUtility")," and call it from anywhere via"," ",(0,C.Y)(T,null,"useSlotUtility"),"."),(0,C.Y)(j.j,{name:"logger",utility:n}),(0,C.Y)(F,null,(0,C.Y)(Z,null),e.length>0?(0,C.Y)("ul",{style:{marginTop:"0.5rem",paddingLeft:"1.5rem"}},e.map((e,t)=>(0,C.Y)("li",{key:t},e))):null))}function et(){var e;let t,n,l,i=(e="reset-demo",t=(0,p.Xr)(m.Q0),n=(0,p.Xr)(m.rX),l=(0,p.Xr)(m.n6),(0,c.useCallback)(()=>{let r=t=>{if(!t?.[e])return t;let{[e]:n}=t,l=(0,a.A)(t,[e].map(b));return Object.keys(l).length?l:void 0};t(r),n(r),l(r)},[e,t,n,l]));return(0,C.Y)(A,null,(0,C.Y)(E,null,"13. ",(0,C.Y)(T,null,"useResetSlot")," Hook"),(0,C.Y)("p",null,"Programmatically clear a slot back to its fallback. Ignores locks — an explicit reset is intentional."),(0,C.Y)(r.Q,{name:"reset-demo"},(0,C.Y)("span",null,"Content that can be cleared")),(0,C.Y)("button",{type:"button",onClick:i,style:{marginBottom:"8px"}},"Reset slot"),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot"),(0,C.Y)(o.D,{name:"reset-demo"},(0,C.Y)("span",{style:{color:"#999"}},"Fallback (slot was cleared)"))))}function en(){return(0,C.Y)(i.d,{name:"comp-hook-demo",component:V,variant:"info",label:"From hook"})}function el(){var e;let t,n,l=(t=g("comp-hook-demo",m.rX),(0,c.useMemo)(()=>(0,Y.hO)(t),[t]));return(0,C.Y)(F,null,l&&!Array.isArray(l)?(0,C.Y)("div",null,(0,C.Y)("b",null,"Component:")," ",l.component.name||"Unknown",(0,C.Y)("br",null),(0,C.Y)("b",null,"Props:")," ",(e=l.props,n=new WeakSet,JSON.stringify(e,(e,t)=>{if("function"==typeof t)return`[Function: ${t.name||"anonymous"}]`;if(null!=t&&"object"==typeof t){if(n.has(t))return"[Circular]";if(n.add(t),"__"in t||"type"in t&&"props"in t)return"[Element]"}return t})),(0,C.Y)("br",null),(0,C.Y)("b",null,"Rendered:")," ",(0,C.Y)(l.component,l.props)):(0,C.Y)("em",null,"No component registered"))}function er(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"14. ",(0,C.Y)(T,null,"useSlotComponent")," Hook"),(0,C.Y)("p",null,"Read a registered slot component without rendering it. Returns"," ",(0,C.Y)(T,null,"{component, props}")," without marking ",(0,C.Y)(T,null,"selected"),"."),(0,C.Y)(en,null),(0,C.Y)(el,null))}function eo(){let{0:e,1:t}=(0,c.useState)(3);return(0,C.Y)(A,null,(0,C.Y)(E,null,"15. Max Items Cap with ",(0,C.Y)(T,null,"max")),(0,C.Y)("p",null,"Limit the number of rendered items in append mode. The store retains all entries, but the reader slice

1s to the top N (respecting priority order)."),(0,C.Y)(r.Q,{name:"max-demo",append:!0,priority:5},(0,C.Y)("div",null,"Item A (priority 5)")),(0,C.Y)(r.Q,{name:"max-demo",append:!0,priority:10},(0,C.Y)("div",null,"Item B (priority 10)")),(0,C.Y)(r.Q,{name:"max-demo",append:!0,priority:1},(0,C.Y)("div",null,"Item C (priority 1)")),(0,C.Y)(r.Q,{name:"max-demo",append:!0,priority:8},(0,C.Y)("div",null,"Item D (priority 8)")),(0,C.Y)(r.Q,{name:"max-demo",append:!0,priority:3},(0,C.Y)("div",null,"Item E (priority 3)")),(0,C.Y)("label",{htmlFor:"max-slider"},(0,C.Y)("b",null,"max=",e)," ",(0,C.Y)("input",{id:"max-slider",type:"range",min:0,max:5,value:e,onChange:e=>t(Number(e.target.value))})),(0,C.Y)(F,null,(0,C.Y)(B,null,"Slot")," — showing top ",e," of 5 items",(0,C.Y)(o.D,{name:"max-demo",max:e},(0,C.Y)("span",null,"Fallback"))))}function ei(){let e,t=(e=(0,p.Xr)(m.Q0),(0,c.useCallback)(t=>{e(e=>{let n=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?y(Object(n),!0).forEach(function(t){(0,u.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({},e);for(let{name:e,value:l}of t){let t=`batch-${e}`;n[e]={[t]:l,id:t}}return n})},[e])),{0:n,1:l}=(0,c.useState)(!1);return(0,C.Y)(A,null,(0,C.Y)(E,null,"16. ",(0,C.Y)(T,null,"useBatchSlotWrite")," Hook"),(0,C.Y)("p",null,"Write to multiple slots in a single Jotai state transition, preventing intermediate renders. Only supports single-mode writes."),(0,C.Y)("button",{type:"button",onClick:()=>{t([{name:"batch-title",value:"Batch Title"},{name:"batch-subtitle",value:"Batch Subtitle"},{name:"batch-body",value:"All three slots updated in one transition."}]),l(!0)},style:{marginBottom:"8px"},disabled:n},n?"Written!":"Batch write 3 slots"),(0,C.Y)(F,null,(0,C.Y)("div",null,(0,C.Y)("b",null,"Title:")," ",(0,C.Y)(o.D,{name:"batch-title"},(0,C.Y)("span",{style:{color:"#999"}},"empty"))),(0,C.Y)("div",null,(0,C.Y)("b",null,"Subtitle:")," ",(0,C.Y)(o.D,{name:"batch-subtitle"},(0,C.Y)("span",{style:{color:"#999"}},"empty"))),(0,C.Y)("div",null,(0,C.Y)("b",null,"Body:")," ",(0,C.Y)(o.D,{name:"batch-body"},(0,C.Y)("span",{style:{color:"#999"}},"empty")))))}function eu(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"17. DevTools"),(0,C.Y)("p",null,"Import ",(0,C.Y)(T,null,"SlotDevTools")," from ",(0,C.Y)(T,null,"@media-platforms/slots/devtools")," to render a collapsible panel showing all slot store state. Check the bottom-right corner of the page."),(0,C.Y)("p",{style:{fontSize:"14px",color:"#666"}},"DevTools is automatically hidden in production builds via a ",(0,C.Y)(T,null,"NODE_ENV")," guard. The"," ",(0,C.Y)(T,null,"useSlotDebug()")," hook is also available for programmatic access."),(0,C.Y)(P,null))}function ea(){return(0,C.Y)(r.Q,{name:"slot-when-demo"},(0,C.Y)("span",null,"I filled the sidebar!"))}function es(){let{0:e,1:t}=(0,c.useState)(!1);return(0,C.Y)(A,null,(0,C.Y)(E,null,"18. SlotWhen — Conditional Wrapper"),(0,C.Y)("p",null,(0,C.Y)(T,null,'<SlotWhen name="...">')," renders its children only when the named slot is filled. Toggle the writer below to see the wrapper appear / disappear."),(0,C.Y)("button",{type:"button",onClick:()=>t(e=>!e)},e?"Remove writer":"Add writer"),e?(0,C.Y)(ea,null):null,(0,C.Y)(S,{name:"slot-when-demo"},(0,C.Y)(F,null,(0,C.Y)(B,null,"wrapper visible"),(0,C.Y)(o.D,{name:"slot-when-demo"}))),e?null:(0,C.Y)(F,null,(0,C.Y)("em",null,"Wrapper hidden — slot is empty")))}function ec(){let e,t,n,l=(e=O(m.Q0),t=O(m.rX),n=O(m.n6),(0,c.useMemo)(()=>[...new Set([...e,...t,...n])].sort(),[e,t,n]));return(0,C.Y)(F,null,(0,C.Y)("strong",null,"Filled slot names:")," ",l.length>0?l.join(", "):(0,C.Y)("em",null,"none"))}function ep(){let{0:e,1:t}=(0,c.useState)(!1),n=(0,c.useCallback)(()=>{},[]);return(0,C.Y)(A,null,(0,C.Y)(E,null,"19. useSlotNames — List All Filled Slots"),(0,C.Y)("p",null,(0,C.Y)(T,null,"useSlotNames()")," returns a sorted, deduplicated list of every filled slot name across content, component, and utility stores."),(0,C.Y)(r.Q,{name:"names-alpha"},"Alpha"),(0,C.Y)(j.j,{name:"names-util",utility:n}),e?(0,C.Y)(r.Q,{name:"names-extra"},"Extra"):null,(0,C.Y)("button",{type:"button",onClick:()=>t(e=>!e)},e?"Remove extra slot":"Add extra slot"),(0,C.Y)(ec,null))}function ed(){return(0,C.Y)(A,null,(0,C.Y)(E,null,"20. Typed Slot Names (Recommended Pattern)"),(0,C.Y)("p",null,"Centralise slot names in a constant map for type-safety and discoverability:"),(0,C.Y)("pre",{style:{background:"#f5f5f5",padding:"12px",borderRadius:"6px",fontSize:"13px",overflowX:"auto"}},`// slots-registry.ts
2export const SLOT = {
3  TITLE: 'title',
4  SIDEBAR: 'sidebar',
5  TOOLBAR: 'toolbar',
6} as const;
7
8// Writer
9<SlotContent name={SLOT.TITLE}>...</SlotContent>
10
11// Reader
12<Slot name={SLOT.TITLE}>Fallback</Slot>`),(0,C.Y)("p",null,"This is a userland convention — the slots package stays generic. See the README for full details on the ",(0,C.Y)(T,null,"SlotName")," union type pattern."))}var em=!0;function eY(){return(0,C.Y)(D,null,(0,C.Y)("h1",null,"Slots Demo"),(0,C.Y)("p",null,"Interactive demos for every feature in ",(0,C.Y)(T,null,"@media-platforms/slots"),"."),(0,C.Y)("hr",null),(0,C.Y)(L,null),(0,C.Y)(N,null),(0,C.Y)(R,null),(0,C.Y)(M,null),(0,C.Y)(U,null),(0,C.Y)(W,null),(0,C.Y)(H,null),(0,C.Y)($,null),(0,C.Y)(K,null),(0,C.Y)(G,null),(0,C.Y)(q,null),(0,C.Y)(ee,null),(0,C.Y)(et,null),(0,C.Y)(er,null),(0,C.Y)(eo,null),(0,C.Y)(ei,null),(0,C.Y)(eu,null),(0,C.Y)(es,null),(0,C.Y)(ep,null),(0,C.Y)(ed,null))}}

12,23472:(e,t,n)=>{"use strict";n.d(t,{el:()=>g,_E:()=>v,Cs:()=>h});var l=n(53520),r=n(93682),o=n(71055),i=n(12625),u=n(84239),a=n(77089);function s(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var l=n.call(e,t||"default");if("object"!=typeof l)return l;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach(function(t){(0,r.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function d(e,t,n){return t?e:n===e?void 0:n}function m(e,t){return!!e?.lockedBy&&e.lockedBy!==t}function Y(e,t,n,r,o){let i=e?.[t];if(!i?.multi||!(n in i.entries))return e;let u=i.entries,{[n]:a}=u,c=(0,l.A)(u,[n].map(s)),d=i.ids.filter(e=>e!==n),m=i.priorities||{},{[n]:Y}=m,f=(0,l.A)(m,[n].map(s)),y=Object.values(f).some(e=>0!==e);if(0===d.length){let{[t]:n}=e;return(0,l.A)(e,[t].map(s))}let b=o&&i.lockedBy===r;return p(p({},e),{},{[t]:p(p({entries:c,ids:d,multi:!0},i.lockedBy&&!b?{lockedBy:i.lockedBy}:{}),y?{priorities:f}:{})})}function f(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var l=n.call(e,t||"default");if("object"!=typeof l)return l;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?y(Object(n),!0).forEach(function(t){(0,r.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function g(e,t){return e===t||!!(0,a.dv)(e)&&!!(0,a.dv)(t)&&e.length===t.length&&e.every((e,n)=>e.id===t[n].id&&e.value===t[n].value)}function h(e,t,n,r=!1,u=!1,a=!1,s=0){let c=(0,i.Xr)(e),y=(0,o.useRef)(void 0),g=(0,o.useId)(),v="string"==typeof r?r:g;!function(e,t){if("P"===e[0])return t();let n=console.error;console.error=(...e)=>{"string"==typeof e[0]&&e[0].includes("Cannot update a component")||n.apply(console,e)};try{return t()}finally{console.error=n}}(g,()=>c(e=>{var o,i;let c;if(r){let l,r,o,i,c,f,h=e?.[t];if(h?.entries?.[v]===n&&h?.lockedBy===(a?g:void 0)&&(h?.priorities?.[v]??0)===s||m(h,g)||u&&!y.current&&h?.multi&&v in h.entries)return e;y.current&&y.current.key!==t&&(e=Y(e,y.current.key,y.current.id,g,!!y.current.locked)),y.current&&y.current.key===t&&y.current.id!==v&&(e=Y(e,t,y.current.id,g,!!y.current.locked));let k=e?.[t];return y.current={key:t,id:v,append:!0,locked:a},b(b({},e),{},{[t]:(l=k?.multi?k.entries:{},r=k?.multi?k.ids.filter(e=>e!==v):[],o=d(g,a,k?.lockedBy),i=p(p({},k?.priorities),{},{[v]:s}),c=[...r,v],(f=Object.values(i).some(e=>0!==e))&&c.sort((e,t)=>(i[t]??0)-(i[e]??0)),p(p({entries:p(p({},l),{},{[v]:n}),ids:c,multi:!0},o?{lockedBy:o}:{}),f?{priorities:i}:{}))})}if(y.current&&y.current.key!==t){let t=e??{},n=y.current.key,{[n]:r}=t,o=(0,l.A)(t,[n].map(f));r?.id===y.current.id&&(e=o)}if(e?.[t]&&(o=e[t],i=!!y.current,m(o,g)||o[v]===n&&o.lockedBy===(a?g:void 0)||o.selected&&o.id!==v||u&&!i&&o.id!==v||0))return e;let h=e?.[t];return y.current={key:t,id:v,locked:a},b(b({},e),{},{[t]:p({[v]:n,id:v},(c=d(g,a,h?.lockedBy))?{lockedBy:c}:{})})})),(0,o.useEffect)(()=>()=>{c(e=>{if(!e||!y.current||!e[y.current.key])return e;let t=y.current.id;if(y.current.append)return Y(e,y.current.key,t,g,!!y.current.locked);let n=y.current.key,{[n]:r}=e,o=(0,l.A)(e,[n].map(f));return r?.id===t?o:e})},[c,g])}function v(e,t){let n=(0,i.Xr)(t),l=(0,i.md)((0,u.mg)(t,(0,o.useCallback)(t=>(0,a.L2)(t?.[e]),[e]),g));return(0,o.useEffect)(()=>{n(t=>{if(!t?.[e])return t;let n=t[e];return"multi"in n&&n.multi||n.selected?t:b(b({},t),{},{[e]:b(b({},n),{},{selected:!0})})})},[e,n]),l}},27835:(e,t,n)=>{"use strict";n.d(t,{j:()=>u,G:()=>a});var l=n(71055),r=n(23472),o=n(3637),i=n(77089);function u({name:e,utility:t,append:n=!1,once:l=!1,locked:i=!1,priority:a=0}){return(0,r.Cs)(o.n6,e,t,n,l,i,a),null}function a(e,t){let n,{fallback:u,raw:a,max:s}=(n=null===t||!1===t||"function"==typeof t?t:t?.fallback??Function.prototype,{fallback:n,raw:null!==t&&"object"==typeof t&&(t.raw??!1),max:null!==t&&"object"==typeof t?t.max:void 0}),c=(0,r._E)(e,o.n6),p=(0,l.useMemo)(()=>{let e=(0,i.hO)(c);return Array.isArray(e)&&null!=s?e.slice(0,s):e},[c,s]),d=(0,l.useMemo)(()=>Array.isArray(p)?(...e)=>

12p.forEach(t=>t(...e)):null,[p]);return Array.isArray(p)?a?p:d:a?p?[p]:[]:p||u}},33305:(e,t,n)=>{"use strict";n.d(t,{Q:()=>o});var l=n(23472),r=n(3637);function o({name:e,children:t=null,append:n=!1,once:i=!1,locked:u=!1,priority:a=0}){return(0,l.Cs)(r.Q0,e,t,n,i,u,a),null}},39109:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/slots",function(){return n(23433)}])},77089:(e,t,n)=>{"use strict";n.d(t,{L2:()=>o,dv:()=>r,hO:()=>i});let l=Symbol.for("slot-multi");function r(e){return Array.isArray(e)&&!0===e[l]}function o(e){if(e){if("multi"in e&&e.multi){if(!e.ids?.length)return;let t=e.ids.map(t=>({id:t,value:e.entries[t]}));return Object.defineProperty(t,l,{value:!0}),t}return e[e.id]}}function i(e){return r(e)?e.map(({value:e})=>e):e}},84239:(e,t,n)=>{"use strict";n.d(t,{mg:()=>u,tG:()=>c});var l=n(56317);let r=Symbol("RESET"),o=(e,t,n)=>(t.has(n)?t:t.set(n,e())).get(n),i=new WeakMap;function u(e,t,n=Object.is){var r;let a,s;return r=()=>{let r=Symbol(),o=(0,l.eU)(l=>{let i=l(o);return(([e,l])=>{if(l===r)return t(e);let o=t(e,l);return n(l,o)?l:o})([l(e),i])});return o.init=r,o},a=o(()=>new WeakMap,i,e),s=o(()=>new WeakMap,a,t),o(r,s,n)}let a=e=>"function"==typeof(null==e?void 0:e.then),s=function(e=()=>{try{return window.localStorage}catch(e){"u">typeof window&&console.warn(e);return}}){var t;let n,l,r,o,i={getItem:(t,r)=>{var o,i;let u=e=>{if(n!==(e=e||"")){try{l=JSON.parse(e,void 0)}catch(e){return r}n=e}return l},s=null!=(i=null==(o=e())?void 0:o.getItem(t))?i:null;return a(s)?s.then(u):u(s)},setItem:(t,n)=>{var l;return null==(l=e())?void 0:l.setItem(t,JSON.stringify(n,void 0))},removeItem:t=>{var n;return null==(n=e())?void 0:n.removeItem(t)}};try{r=null==(t=e())?void 0:t.subscribe}catch(e){}return!r&&"u">typeof window&&"function"==typeof window.addEventListener&&window.Storage&&(r=(t,n)=>{if(!(e()instanceof window.Storage))return()=>{};let l=l=>{l.storageArea===e()&&l.key===t&&n(l.newValue)};return window.addEventListener("storage",l),()=>{window.removeEventListener("storage",l)}}),r&&(o=r,i.subscribe=(e,t,n)=>o(e,e=>{let l;try{l=JSON.parse(e||"")}catch(e){l=n}t(l)})),i}();function c(e,t,n=s,o){let i=null==o?void 0:o.getOnInit,u=(0,l.eU)(i?n.getItem(e,t):t);return u.debugPrivate=!0,u.onMount=l=>{var r;return l(n.getItem(e,t)),null==(r=n.subscribe)?void 0:r.call(n,e,l,t)},(0,l.eU)(e=>e(u),(l,o,i)=>{let s="function"==typeof i?i(l(u)):i;return s===r?(o(u,t),n.removeItem(e)):a(s)?s.then(t=>(o(u,t),n.setItem(e,t))):(o(u,s),n.setItem(e,s))})}},87042:(e,t,n)=>{"use strict";n.d(t,{S:()=>b,d:()=>y});var l=n(93682),r=n(53520),o=n(71055),i=n(23472),u=n(3637),a=n(7751),s=n(77089);function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach(function(t){(0,l.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}let d=["name","component","append","once","locked","priority","componentProps","children"],m=["name","children","fallback","max","componentProps"];function Y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Y(Object(n),!0).forEach(function(t){(0,l.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Y(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function y(e){let{name:t,component:n,append:l=!1,once:a=!1,locked:s=!1,priority:c=0,componentProps:p,children:m}=e,Y=(0,r.A)(e,d),y=p?f(f({},Y),p):Y,b=(0,o.useRef)(y);(Object.keys(y).length!==Object.keys(b.current).length||Object.keys(y).some(e=>y[e]!==b.current[e])||Object.keys(b.current).some(e=>!(e in y)))&&(b.current=y);let g=b.current,h=(0,o.useMemo)(()=>({component:n,props:g}),[n,g]);return(0,i.Cs)(u.rX,t,h,l,a,s,c),null}function b(e){let{name:t,children:n,fallback:l=o.Fragment,max:c,componentProps:d}=e,Y=(0,r.A)(e,m);return function(e,t,n,l,r,i){if((0,s.dv)(e)){let t=null!=n?e.slice(0,n):e;return"function"==typeof l?(0,a.Y)(a.FK,{children:t.map(({id:e,value:t})=>{let n=p(p(p({},t.props),r),i);return(0,a.Y)(o.Fragment,{children:l(t.component,n)},e)})}):(0,a.Y)(a.FK,{children:t.map(({id:e,value:t})=>{let n=t.component,o=p(p(p({},t.props),r),i);return(0,a.Y)(n,p(p({},o),{},{children:l}),e)})})}let{component:u,props:c}=e||{component:t,props:{}},d=p(p(p({},c),r),i);return"function"==typeof l?l(u,d):u===o.Fragment?(0,a.Y)(o.Fragment,{children:l}):(0,a.Y)(u,p(p({},d),{},{children:l}))}((0,i._E)(t,u.rX),l,c,n,Y,d)}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=39109)),_N_E=e.O()}]);