lostpage 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +24 -2
  2. package/dist/catalog.js +1 -1
  3. package/dist/catalog.json +1021 -4
  4. package/dist/cdn/c/broken-link-U47D6LR2.js +11 -0
  5. package/dist/cdn/c/brutalist-QFXIHFAD.js +15 -0
  6. package/dist/cdn/c/card-GH5VVMRG.js +15 -0
  7. package/dist/cdn/c/chunk-A44JMJWI.js +1 -0
  8. package/dist/cdn/c/chunk-QHXVYCR6.js +1 -0
  9. package/dist/cdn/c/chunk-YNREKTFR.js +70 -0
  10. package/dist/cdn/c/countdown-2TEFVO73.js +14 -0
  11. package/dist/cdn/c/divider-PMT4UZEF.js +9 -0
  12. package/dist/cdn/c/dot-grid-O7LJO44U.js +11 -0
  13. package/dist/cdn/c/editorial-4C5Z33WO.js +11 -0
  14. package/dist/cdn/c/emoji-EHAJDQSM.js +8 -0
  15. package/dist/cdn/c/gradient-404-YNSTOPNA.js +6 -0
  16. package/dist/cdn/c/helpful-links-UFGTWTRQ.js +18 -0
  17. package/dist/cdn/c/minimal-SB6FU3DE.js +9 -0
  18. package/dist/cdn/c/outline-404-REB5E5EN.js +9 -0
  19. package/dist/cdn/c/path-not-found-VUEXOVO7.js +14 -0
  20. package/dist/cdn/c/search-404-HFKZ4DUA.js +17 -0
  21. package/dist/cdn/c/server-default-RBMMRAHS.js +10 -0
  22. package/dist/cdn/c/soft-blobs-FYEFGINV.js +15 -0
  23. package/dist/cdn/c/split-panel-QGXZ24E4.js +12 -0
  24. package/dist/cdn/element.js +1 -1
  25. package/dist/cdn/index.js +1 -1
  26. package/dist/chunks/chunk-B2NBRLO2.js +1 -0
  27. package/dist/chunks/chunk-ES56TX4X.js +1 -0
  28. package/dist/chunks/chunk-URB3NNOB.js +70 -0
  29. package/dist/cli.js +1 -1
  30. package/dist/core/types.d.ts +1 -1
  31. package/dist/core.js +1 -1
  32. package/dist/generated/registry.d.ts +1 -1
  33. package/dist/index.js +1 -1
  34. package/dist/lostpage.global.js +401 -214
  35. package/dist/scenes/_simple.d.ts +10 -0
  36. package/dist/scenes/broken-link.d.ts +8 -0
  37. package/dist/scenes/broken-link.js +11 -0
  38. package/dist/scenes/brutalist.d.ts +7 -0
  39. package/dist/scenes/brutalist.js +15 -0
  40. package/dist/scenes/card.d.ts +8 -0
  41. package/dist/scenes/card.js +15 -0
  42. package/dist/scenes/countdown.d.ts +9 -0
  43. package/dist/scenes/countdown.js +14 -0
  44. package/dist/scenes/divider.d.ts +6 -0
  45. package/dist/scenes/divider.js +9 -0
  46. package/dist/scenes/dot-grid.d.ts +9 -0
  47. package/dist/scenes/dot-grid.js +11 -0
  48. package/dist/scenes/editorial.d.ts +6 -0
  49. package/dist/scenes/editorial.js +11 -0
  50. package/dist/scenes/emoji.d.ts +7 -0
  51. package/dist/scenes/emoji.js +8 -0
  52. package/dist/scenes/gradient-404.d.ts +9 -0
  53. package/dist/scenes/gradient-404.js +6 -0
  54. package/dist/scenes/helpful-links.d.ts +6 -0
  55. package/dist/scenes/helpful-links.js +18 -0
  56. package/dist/scenes/minimal.d.ts +6 -0
  57. package/dist/scenes/minimal.js +9 -0
  58. package/dist/scenes/outline-404.d.ts +8 -0
  59. package/dist/scenes/outline-404.js +9 -0
  60. package/dist/scenes/path-not-found.d.ts +6 -0
  61. package/dist/scenes/path-not-found.js +14 -0
  62. package/dist/scenes/search-404.d.ts +9 -0
  63. package/dist/scenes/search-404.js +17 -0
  64. package/dist/scenes/server-default.d.ts +6 -0
  65. package/dist/scenes/server-default.js +10 -0
  66. package/dist/scenes/soft-blobs.d.ts +9 -0
  67. package/dist/scenes/soft-blobs.js +15 -0
  68. package/dist/scenes/split-panel.d.ts +8 -0
  69. package/dist/scenes/split-panel.js +12 -0
  70. package/dist/vue.js +1 -1
  71. package/package.json +2 -2
  72. package/dist/cdn/c/chunk-JPP52QCZ.js +0 -70
  73. package/dist/chunks/chunk-UVHXBPO4.js +0 -70
@@ -0,0 +1,11 @@
1
+ import"./chunk-URWX3LLV.js";var s={id:"broken-link",name:"Broken Link",description:"A minimal line illustration of a snapped chain link above the text. Says \u201Cbroken link\u201D without a single word.",category:"Simple",kind:"2d",motion:"live",tags:["simple","illustration","line-art","link","chain","fast","light"],layout:"center",copy:{eyebrow:"404",title:"This link is broken",message:"The page it pointed to has moved or no longer exists.",actions:[{label:"Back to home",href:"/"}]},params:{line:"#111827",swing:!0},theme:{bg:"#ffffff",fg:"#111827",accent:"#111827","accent-fg":"#ffffff"},presetName:"Ink",presets:{dark:{name:"Dark",params:{line:"#e5e7eb"},theme:{bg:"#0c0d10",fg:"#e5e7eb",accent:"#e5e7eb","accent-fg":"#0c0d10"}},teal:{name:"Teal",params:{line:"#0f766e"},theme:{bg:"#f0fdfa",fg:"#134e4a",accent:"#0f766e","accent-fg":"#fff"}}},css:`
2
+ & .bl{width:clamp(130px,18cqw,200px);margin:0 auto clamp(18px,4cqh,36px);pointer-events:none}
3
+ & .lp-stage>.bl{position:absolute;left:50%;top:20%;translate:-50% 0}
4
+ & .bl svg{width:100%;overflow:visible;fill:none;stroke:var(--ln);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
5
+ & .bl .sp{stroke-width:3;opacity:.6}
6
+ & .lp-code{display:none}
7
+ & .lp-title{font-weight:700;font-size:clamp(26px,4cqw,44px)}
8
+ `,setup(t){let e=document.createElement("div");e.className="bl",e.style.setProperty("--ln",t.params.line),e.innerHTML=`<svg viewBox="0 0 200 100" aria-hidden="true">
9
+ <g class="l"><path d="M88 34H52a16 16 0 0 0 0 32h36"/><path d="M60 50h20"/></g>
10
+ <g class="r"><path d="M112 34h36a16 16 0 0 1 0 32h-36"/><path d="M120 50h20"/></g>
11
+ <g class="sp"><path d="M100 18v8M88 22l4 6M112 22l-4 6M100 82v-8M88 78l4-6M112 78l-4-6"/></g></svg>`,(t.overlay?.querySelector(".lp-head")??t.stage).prepend(e);let n=e.querySelector(".l"),l=e.querySelector(".r");return{frame(r){if(!t.params.swing)return;let a=Math.sin(r*1.4)*5;n.setAttribute("transform",`translate(${-Math.abs(a)} 0) rotate(${-a} 88 50)`),l.setAttribute("transform",`translate(${Math.abs(a)} 0) rotate(${a} 112 50)`)},destroy:()=>e.remove()}}};export{s as default};
@@ -0,0 +1,15 @@
1
+ import{a as t,c as r,d as s,e as n}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var p={id:"brutalist",name:"Brutalist",description:"Neo-brutalism: thick black borders, hard offset shadows, a loud colour block and chunky buttons that press in when you click.",category:"Simple",kind:"2d",motion:"static",tags:["simple","brutalism","neo-brutalist","bold","loud","static","fast","light"],layout:"none",copy:{eyebrow:"Whoops",title:"This page took a wrong turn.",message:"We broke something, or you typed something. Either way, nothing lives here.",actions:[{label:"Get me out",href:"/",icon:"none"},{label:"Report it",href:"/contact",variant:"secondary",icon:"none"}]},params:{block:"#ffde59",shadow:8},theme:{bg:"#fdf6e3",fg:"#111111",accent:"#ff6b6b","accent-fg":"#111111",font:'"Space Grotesk","Archivo","Inter",system-ui,sans-serif'},presetName:"Yellow",presets:{pink:{name:"Pink",params:{block:"#ff90e8"},theme:{bg:"#f4f4f0",accent:"#23a094","accent-fg":"#111"}},blue:{name:"Blue",params:{block:"#7aa2ff"},theme:{bg:"#fffbeb",accent:"#ffde59"}},green:{name:"Green",params:{block:"#b8f35e",shadow:6},theme:{bg:"#ffffff",accent:"#111","accent-fg":"#b8f35e"}}},css:`
2
+ & .br{position:absolute;inset:0;display:grid;place-items:center;padding:20px;overflow:auto}
3
+ & .br .box{width:min(640px,100%);border:3px solid #111;background:var(--lp-bg);box-shadow:var(--sh) var(--sh) 0 #111;padding:clamp(20px,4cqw,40px)}
4
+ & .br .num{display:inline-block;background:var(--blk);border:3px solid #111;box-shadow:calc(var(--sh) / 2) calc(var(--sh) / 2) 0 #111;padding:2px 18px;
5
+ font-weight:800;font-size:clamp(64px,12cqw,128px);line-height:1;letter-spacing:-.05em;transform:rotate(-2deg)}
6
+ & .br .ey{display:block;margin-top:26px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
7
+ & .br h1{margin:8px 0 0;font-size:clamp(26px,4.2cqw,46px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
8
+ & .br p{margin:14px 0 0;font-size:16px;line-height:1.5;max-width:46ch}
9
+ & .br .lp-actions{justify-content:flex-start;gap:14px}
10
+ & .br .lp-btn{border:3px solid #111;border-radius:0;padding:12px 20px;font-weight:800;font-size:15px;box-shadow:4px 4px 0 #111;transition:transform .08s,box-shadow .08s}
11
+ & .br .lp-btn--primary{background:var(--lp-accent);color:var(--lp-accent-fg)}
12
+ & .br .lp-btn--secondary{background:#fff;color:#111}
13
+ & .br .lp-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}
14
+ & .br .lp-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #111}
15
+ `,setup(e){let a=e.copy,o=s(e,"br",`<div class="box"><span class="num" aria-hidden="true">${t(a.code)}</span><span class="ey">${t(a.eyebrow)}</span><h1>${n(a.code)}${t(a.title)}</h1><p>${t(a.message)}</p></div>`,{blk:e.params.block,sh:e.params.shadow+"px"});return o.querySelector(".box").append(r(e)),{destroy:()=>o.remove()}}};export{p as default};
@@ -0,0 +1,15 @@
1
+ import{a as r,c as o,d as n,e as i}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var c={compass:'<circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5z"/>',search:'<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2M9 9l4 4M13 9l-4 4"/>',link:'<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1M4 4l16 16"/>',alert:'<path d="M12 3 2 20h20zM12 10v4M12 17v.5"/>'},p={id:"card",name:"Card",description:"A centred card with an icon badge, headline, message and buttons. Fits inside any dashboard or app shell without fighting its design.",category:"Simple",kind:"2d",motion:"static",tags:["simple","card","app","dashboard","saas","static","fast"],layout:"none",copy:{title:"Page not found",message:"The page you\u2019re looking for doesn\u2019t exist or you don\u2019t have access to it.",actions:[{label:"Back to dashboard",href:"/"},{label:"Get help",href:"/help",variant:"secondary",icon:"arrow"}]},params:{page:"#f4f5f7",icon:"compass"},theme:{bg:"#ffffff",fg:"#101828",accent:"#101828","accent-fg":"#ffffff",radius:"10px"},presetName:"Light",presets:{dark:{name:"Dark",params:{page:"#09090b"},theme:{bg:"#18181b",fg:"#fafafa",accent:"#fafafa","accent-fg":"#18181b"}},search:{name:"Search icon",params:{page:"#eef4ff",icon:"search"},theme:{accent:"#2563eb","accent-fg":"#fff"}},broken:{name:"Broken link",title:"This link is broken",params:{page:"#fff7ed",icon:"link"},theme:{accent:"#ea580c","accent-fg":"#fff"}}},css:`
2
+ &{background:var(--page)}
3
+ & .cr{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}
4
+ & .cr .box{width:min(440px,100%);background:var(--lp-bg);border-radius:16px;padding:clamp(24px,4cqw,40px);text-align:center;
5
+ border:1px solid color-mix(in srgb,var(--lp-fg) 9%,transparent);box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 40px -20px rgba(16,24,40,.18)}
6
+ & .cr .ic{width:52px;height:52px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;
7
+ background:color-mix(in srgb,var(--lp-accent) 10%,transparent);color:var(--lp-accent);outline:8px solid color-mix(in srgb,var(--lp-accent) 5%,transparent)}
8
+ & .cr .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
9
+ & .cr .code{font-size:12.5px;font-weight:600;color:var(--lp-muted)}
10
+ & .cr h1{margin:6px 0 0;font-size:clamp(22px,2.6cqw,28px);font-weight:700;letter-spacing:-.02em}
11
+ & .cr p{margin:10px 0 0;color:var(--lp-muted);font-size:14.5px;line-height:1.6}
12
+ & .cr .lp-actions{margin-top:26px;flex-direction:column-reverse;gap:10px;align-items:stretch}
13
+ & .cr .lp-btn{justify-content:center;font-weight:600}
14
+ & .cr .lp-btn--secondary{border:1px solid color-mix(in srgb,var(--lp-fg) 16%,transparent);border-radius:var(--lp-radius);padding:12px 20px}
15
+ `,setup(e){let a=e.copy;e.root.style.setProperty("--page",e.params.page);let t=n(e,"cr",`<div class="box"><div class="ic" aria-hidden="true"><svg viewBox="0 0 24 24">${c[e.params.icon]??c.compass}</svg></div><span class="code">Error ${r(a.code)}</span><h1>${i(a.code)}${r(a.title)}</h1><p>${r(a.message)}</p></div>`);return t.querySelector(".box").append(o(e)),{destroy:()=>t.remove()}}};export{p as default};
@@ -0,0 +1 @@
1
+ import{a as s}from"./chunk-QHXVYCR6.js";var i=t=>t.replace(/[&<>"]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[e]),l=()=>typeof location<"u"?location.pathname+location.search:"/missing-page";function m(t,e="lp-actions"){let n=document.createElement("div");n.className=e;for(let r of t.copy.actions)n.append(s(r,t.navigate));return n}function g(t,e,n,r={}){let o=document.createElement("div");o.className=e;for(let[c,a]of Object.entries(r))o.style.setProperty(`--${c}`,String(a));return o.innerHTML=n,t.root.append(o),o}var d=t=>`<span class="lp-sr">Error ${i(t)}: </span>`;export{i as a,l as b,m as c,g as d,d as e};
@@ -0,0 +1 @@
1
+ var l={back:'<svg data-dir="back" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8H3M7 4 3 8l4 4"/></svg>',arrow:'<svg data-dir="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 11 11 5M6 5h5v5"/></svg>',home:'<svg data-dir="home" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 7.5 8 3l5.5 4.5M4 6.5V13h8V6.5"/></svg>'};function o(e,a,i){let n=document.createElement(e);return n.className=a,i!==void 0&&(n.textContent=i),n}function p(e,a){let i=e.variant??"primary",n=e.href!==void 0?o("a",`lp-btn lp-btn--${i}`):o("button",`lp-btn lp-btn--${i}`);n instanceof HTMLAnchorElement?n.href=e.href:n.type="button";let d=e.icon??(i==="primary"?"back":"arrow"),s=o("span","lp-btn-label",e.label);if(d!=="none"&&l[d]){let t=document.createElement("span");t.innerHTML=l[d];let r=t.firstChild;d==="arrow"?n.append(s,r):n.append(r,s)}else n.append(s);return n.addEventListener("click",t=>{let r=t;e.onClick?.(r),!r.defaultPrevented&&e.href!==void 0&&a&&!(r.metaKey||r.ctrlKey||r.shiftKey||r.button===1)&&(r.preventDefault(),a(e.href,r))}),n}function c(e,a,i){let n=o("div",`lp-overlay lp-layout-${a} lp-fadein`),d=o("div","lp-head");if(e.eyebrow&&d.append(o("p","lp-eyebrow",e.eyebrow)),e.code){let t=o("div","lp-code",e.code);t.setAttribute("aria-hidden","true"),d.append(t)}let s=o("div","lp-body");if(e.title){let t=o("h1","lp-title");e.code&&t.append(o("span","lp-sr",`Error ${e.code}: `)),t.append(e.title),s.append(t)}if(e.message&&s.append(o("p","lp-message",e.message)),e.actions?.length){let t=o("div","lp-actions");for(let r of e.actions)t.append(p(r,i));s.append(t)}return n.append(d,s),n}export{p as a,c as b};
@@ -0,0 +1,70 @@
1
+ import{b as T}from"./chunk-QHXVYCR6.js";import{a as F,b as W,c as Q,g as _}from"./chunk-HXSSPN2I.js";import{e as D}from"./chunk-URWX3LLV.js";var le=`
2
+ .lp-root{
3
+ --lp-bg:#0b0d12;--lp-fg:#f5f6f8;--lp-muted:color-mix(in srgb,var(--lp-fg) 64%,transparent);
4
+ --lp-accent:var(--lp-fg);--lp-accent-fg:var(--lp-bg);
5
+ --lp-font:"Inter","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
6
+ --lp-font-display:var(--lp-font);
7
+ --lp-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
8
+ --lp-font-serif:"Fraunces","Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
9
+ --lp-code-color:color-mix(in srgb,var(--lp-fg) 22%,transparent);
10
+ --lp-code-size:clamp(64px,23cqw,300px);--lp-code-weight:500;
11
+ --lp-title-size:clamp(22px,4.6cqw,58px);--lp-title-weight:500;
12
+ --lp-radius:999px;--lp-pad:clamp(14px,5cqw,72px);
13
+ position:relative;box-sizing:border-box;overflow:hidden;width:100%;
14
+ height:var(--lp-height,100vh);height:var(--lp-height,100dvh);
15
+ background:var(--lp-bg);color:var(--lp-fg);font-family:var(--lp-font);
16
+ isolation:isolate;container-type:size;container-name:lp;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
17
+ text-rendering:optimizeLegibility;touch-action:manipulation;
18
+ }
19
+ .lp-root *,.lp-root *::before,.lp-root *::after{box-sizing:border-box}
20
+ .lp-root [hidden]{display:none!important}
21
+ .lp-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
22
+ .lp-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
23
+ .lp-custom{position:absolute;inset:0;z-index:3}
24
+ .lp-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
25
+ justify-content:center;gap:clamp(12px,3cqh,32px);padding:var(--lp-pad) max(16px,var(--lp-pad));pointer-events:none}
26
+ .lp-overlay a,.lp-overlay button,.lp-overlay [data-lp-interactive]{pointer-events:auto}
27
+ .lp-head,.lp-body{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}
28
+ .lp-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--lp-muted)}
29
+ .lp-code{margin:0;font-family:var(--lp-font-display);font-weight:var(--lp-code-weight);font-size:var(--lp-code-size);
30
+ line-height:.86;letter-spacing:-.045em;color:var(--lp-code-color);user-select:none;white-space:nowrap}
31
+ .lp-title{margin:0;font-family:var(--lp-font-display);font-size:var(--lp-title-size);font-weight:var(--lp-title-weight);
32
+ letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
33
+ .lp-message{margin:14px 0 0;max-width:36ch;color:var(--lp-muted);font-size:clamp(12.5px,1.25cqw,16px);line-height:1.6;text-wrap:pretty}
34
+ .lp-actions{margin-top:clamp(20px,3.2cqh,32px);display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;justify-content:center}
35
+ .lp-btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;
36
+ text-decoration:none;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,box-shadow .25s}
37
+ .lp-btn--primary{padding:13px 22px;border-radius:var(--lp-radius);background:var(--lp-accent);color:var(--lp-accent-fg)}
38
+ .lp-btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--lp-accent) 60%,transparent)}
39
+ .lp-btn--secondary{padding:13px 4px;background:none;color:var(--lp-fg);border-bottom:1px solid color-mix(in srgb,var(--lp-fg) 30%,transparent);border-radius:0}
40
+ .lp-btn--secondary:hover{border-bottom-color:var(--lp-fg)}
41
+ .lp-btn svg{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
42
+ .lp-btn:hover svg[data-dir=back]{transform:translateX(-3px)}
43
+ .lp-btn:hover svg[data-dir=arrow]{transform:translate(2px,-2px)}
44
+ .lp-btn:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
45
+ .lp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
46
+
47
+ .lp-layout-split{justify-content:space-between}
48
+ .lp-layout-split .lp-head{padding-top:clamp(8px,4cqh,48px)}
49
+ .lp-layout-split .lp-body{padding-bottom:clamp(8px,3cqh,40px)}
50
+ .lp-layout-bottom{justify-content:flex-end}
51
+ .lp-layout-top{justify-content:flex-start}
52
+ .lp-layout-bottom-left{justify-content:flex-end;align-items:flex-start}
53
+ .lp-layout-bottom-left .lp-head,.lp-layout-bottom-left .lp-body,
54
+ .lp-layout-left .lp-head,.lp-layout-left .lp-body{align-items:flex-start;text-align:left}
55
+ .lp-layout-bottom-left .lp-actions,.lp-layout-left .lp-actions{justify-content:flex-start}
56
+ .lp-layout-left{align-items:flex-start;padding-left:max(16px,calc(var(--lp-pad) * 1.4))}
57
+ .lp-layout-right{align-items:flex-end}
58
+ .lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:flex-end;text-align:right}
59
+ .lp-layout-right .lp-actions{justify-content:flex-end}
60
+ .lp-layout-none .lp-head,.lp-layout-none .lp-body{display:none}
61
+ .lp-code-hidden .lp-code{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
62
+
63
+ .lp-fadein .lp-head,.lp-fadein .lp-body{animation:lp-rise 1.1s cubic-bezier(.2,.8,.2,1) both}
64
+ .lp-fadein .lp-body{animation-delay:.18s}
65
+ @keyframes lp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
66
+ @container (max-width:640px){.lp-layout-left,.lp-layout-right{align-items:center}
67
+ .lp-layout-left .lp-head,.lp-layout-left .lp-body,.lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:center;text-align:center}
68
+ .lp-layout-left .lp-actions,.lp-layout-right .lp-actions{justify-content:center}}
69
+ @media (prefers-reduced-motion:reduce){.lp-fadein .lp-head,.lp-fadein .lp-body{animation:none}.lp-btn,.lp-btn svg{transition:none}}
70
+ `,V=new Set;function K(l,o){if(typeof document>"u"||V.has(l))return;if(document.querySelector(`style[data-lostpage="${l}"]`)){V.add(l);return}let i=document.createElement("style");i.setAttribute("data-lostpage",l),i.textContent=o,document.head.appendChild(i),V.add(l)}function Z(){K("base",le)}function ee(l,o){o&&K(`scene:${l}`,o.replace(/&/g,`.lp-s-${l}`))}function te(l,o,i={}){let s=null,a=!1,b=!1,c=i,m=typeof o=="object"?o:null,E=typeof l=="string"?_()?document.querySelector(l):null:l,L=()=>{a||!m||!E||(s?.destroy(),s=se(E,m,c),b&&s.pause())},P=(async()=>{if(!(!_()||!E)){if(!m){if(typeof o=="string")throw new Error(`[lostpage] "lostpage/core" can't load "${o}" by id. Import mount from "lostpage", or pass the scene object from "lostpage/scenes/${o}".`);m=await o()}L()}})();return P.catch(u=>console.error(u)),{get root(){return s?.root??null},ready:P,update(u){let C=c;if(c={...c,...u},!s)return;["preset","params","motion","interactive","seed","maxDpr","overlay"].some(r=>r in u&&JSON.stringify(u[r])!==JSON.stringify(C[r]))?L():s.refreshCopy(c)},pause(){b=!0,s?.pause()},resume(){b=!1,s?.resume()},destroy(){a=!0,s?.destroy(),s=null}}}function se(l,o,i){Z(),ee(o.id,o.css);let s=D(o,i),a=document.createElement("div");a.className=`lp-root lp-s-${o.id} lp-p-${s.preset}${o.codeInScene?" lp-code-hidden":""}${i.className?" "+i.className:""}`,a.setAttribute("data-lostpage",o.id),i.height&&a.style.setProperty("--lp-height",i.height);let b=e=>{for(let[t,n]of Object.entries(e))a.style.setProperty(t.startsWith("--")?t:`--lp-${t}`,n)};b(s.theme);let c=document.createElement("div");c.className="lp-stage",c.setAttribute("aria-hidden","true"),a.append(c);let m=null;i.overlay!==!1&&(m=T(s.copy,o.layout,i.onNavigate),a.append(m)),l.append(a);let L=window.matchMedia?.("(prefers-reduced-motion: reduce)"),P=i.motion==="reduce"||i.motion!=="full"&&!!L?.matches,u=i.interactive!==!1,C=i.maxDpr??2,f=o.motion==="static"||P&&o.motion!=="game",r={x:0,y:0,nx:0,ny:0,sx:0,sy:0,down:!1,inside:!1,engaged:!1},w=[],$=[],h=0,y=0,v=1,g=1,j=!0,I=!document.hidden,R=!1,p=0,S=0,q=0,H=!0,M={},z=!1,d={root:a,stage:c,overlay:m,params:s.params,copy:s.copy,preset:s.preset,get width(){return h},get height(){return y},get dpr(){return v*g},pointer:r,reducedMotion:P,interactive:u,random:Q(i.seed??1337),canvas(e={}){let t=document.createElement("canvas");t.style.zIndex=String(e.z??0),c.append(t);let n={el:t,scale:e.scale??1,adaptive:!!e.adaptive};return w.push(n),N(n),t},on(e,t,n){a.addEventListener(e,t,n),$.push(()=>a.removeEventListener(e,t,n))},onWindow(e,t,n){window.addEventListener(e,t,n),$.push(()=>window.removeEventListener(e,t,n))},invalidate(){H=!0,!p&&!z&&k()},visible:()=>j&&I,navigate(e,t){i.onNavigate?i.onNavigate(e,t??new MouseEvent("click")):location.assign(e)},cssVar:e=>getComputedStyle(a).getPropertyValue(e.startsWith("--")?e:`--lp-${e}`).trim()};function N(e){let t=v*e.scale*(e.adaptive?g:1),n=Math.max(1,Math.round(h*t)),x=Math.max(1,Math.round(y*t));(e.el.width!==n||e.el.height!==x)&&(e.el.width=n,e.el.height=x)}function re(){let e=a.getBoundingClientRect();h=Math.max(1,Math.round(e.width)),y=Math.max(1,Math.round(e.height)),v=Math.min(window.devicePixelRatio||1,C);for(let t of w)N(t);try{M.resize?.(h,y,v)}catch(t){B(t)}d.invalidate()}if(u){let e=t=>{let n=a.getBoundingClientRect();r.x=t.clientX-n.left,r.y=t.clientY-n.top,r.nx=F(r.x/n.width*2-1,-1,1),r.ny=F(1-r.y/n.height*2,-1,1),r.engaged=!0};d.on("pointermove",t=>{e(t),r.inside=!0,f&&d.invalidate()}),d.on("pointerdown",t=>{e(t),r.down=!0,f&&d.invalidate()}),d.onWindow("pointerup",()=>{r.down=!1}),d.on("pointerleave",()=>{r.inside=!1})}function ie(e){if(p=0,z)return;let t=S?Math.min((e-S)/1e3,1/20):1/60;S=e,r.sx=W(r.sx,r.nx,3,t),r.sy=W(r.sy,r.ny,3,t),f?(q=o.stillTime??4,r.sx=r.nx,r.sy=r.ny):q+=t;try{M.frame?.(q,f?0:t)}catch(n){B(n);return}f||ae(t),H=!1,f||k()}function k(){p||z||R||!(j&&I)||f&&!H||(p=requestAnimationFrame(ie))}let O=0,A=0,Y=1.5;function ae(e){if(!w.some(x=>x.adaptive))return;if(Y>0){Y-=e;return}if(O+=e,A++,O<1)return;let t=O/A;O=0,A=0;let n=g;if(t>1/45?n=Math.max(.5,g*.85):t<1/58&&g<1&&(n=Math.min(1,g*1.08)),Math.abs(n-g)>.01){g=n;for(let x of w)x.adaptive&&N(x);M.resize?.(h,y,v)}}function B(e){z=!0,p&&cancelAnimationFrame(p),p=0,a.classList.add("lp-fallback");for(let t of w)t.el.style.display="none";console.warn(`[lostpage] scene "${o.id}" could not render, showing text only.`,e)}let G=new IntersectionObserver(e=>{j=e[e.length-1].isIntersecting,j&&(S=0,k())});G.observe(a);let J=()=>{I=!document.hidden,I&&(S=0,k())};document.addEventListener("visibilitychange",J);let U=new ResizeObserver(()=>re());U.observe(a);let X=a.getBoundingClientRect();h=Math.max(1,Math.round(X.width)),y=Math.max(1,Math.round(X.height)),v=Math.min(window.devicePixelRatio||1,C);try{M=o.setup(d)||{},M.resize?.(h,y,v)}catch(e){B(e)}return k(),{root:a,pause(){R=!0,p&&cancelAnimationFrame(p),p=0},resume(){R=!1,S=0,k()},refreshCopy(e){let t=D(o,e);if(b(t.theme),m){let n=T(t.copy,o.layout,e.onNavigate);n.classList.remove("lp-fadein"),m.replaceWith(n),m=n,d.overlay=n}Object.assign(d.copy,t.copy)},destroy(){p&&cancelAnimationFrame(p),p=0,z=!0,G.disconnect(),U.disconnect(),document.removeEventListener("visibilitychange",J);for(let e of $)e();try{M.destroy?.()}catch{}for(let e of w)e.el.__lpgl?.getExtension("WEBGL_lose_context")?.loseContext();a.remove()}}}var oe={"ascii-3d":()=>import("./ascii-3d-LO5K5SPJ.js"),astronaut:()=>import("./astronaut-LH5N45GT.js"),aurora:()=>import("./aurora-XF7DCQ7M.js"),autumn:()=>import("./autumn-V5GRVYCX.js"),"balloon-404":()=>import("./balloon-404-KV6ISJWV.js"),beach:()=>import("./beach-OGS53KAQ.js"),"black-hole":()=>import("./black-hole-635WWF67.js"),"block-drop":()=>import("./block-drop-QU7NYBNQ.js"),"blue-screen":()=>import("./blue-screen-GKLGT7XD.js"),breakout:()=>import("./breakout-EGDE3QDC.js"),bricks:()=>import("./bricks-C6XPPQ64.js"),"broken-link":()=>import("./broken-link-U47D6LR2.js"),brutalist:()=>import("./brutalist-QFXIHFAD.js"),"bubble-wrap":()=>import("./bubble-wrap-45ZWIQMW.js"),campfire:()=>import("./campfire-TFG4DUUS.js"),card:()=>import("./card-GH5VVMRG.js"),cassette:()=>import("./cassette-33OUQ4CF.js"),chalkboard:()=>import("./chalkboard-NAPUHNER.js"),"chrome-404":()=>import("./chrome-404-QVPFIQEF.js"),"circuit-board":()=>import("./circuit-board-V6VT4OTX.js"),"claw-machine":()=>import("./claw-machine-LLCPLZ6W.js"),"clay-404":()=>import("./clay-404-SMDVAQCV.js"),constellation:()=>import("./constellation-J5QMY7IB.js"),countdown:()=>import("./countdown-2TEFVO73.js"),"cross-stitch":()=>import("./cross-stitch-N5H5GLAG.js"),"deep-sea":()=>import("./deep-sea-ILDVMW5M.js"),divider:()=>import("./divider-PMT4UZEF.js"),dna:()=>import("./dna-CAAKBMRK.js"),dominoes:()=>import("./dominoes-VLA5MBXM.js"),"dot-grid":()=>import("./dot-grid-O7LJO44U.js"),editorial:()=>import("./editorial-4C5Z33WO.js"),elevator:()=>import("./elevator-EFNB6FVO.js"),emoji:()=>import("./emoji-EHAJDQSM.js"),"error-cascade":()=>import("./error-cascade-CIJCQLP3.js"),"evidence-board":()=>import("./evidence-board-Z7DXMGNE.js"),eyes:()=>import("./eyes-VPOHW2CX.js"),fireworks:()=>import("./fireworks-QLWJ3S43.js"),flashlight:()=>import("./flashlight-QXI7QT74.js"),flatline:()=>import("./flatline-3GBK7IVS.js"),flock:()=>import("./flock-RLSZ7EZQ.js"),"foggy-glass":()=>import("./foggy-glass-A56REA7E.js"),gears:()=>import("./gears-4HJO7H74.js"),"glass-404":()=>import("./glass-404-WZRMDFTP.js"),glitch:()=>import("./glitch-Y4CIADF3.js"),"gradient-404":()=>import("./gradient-404-YNSTOPNA.js"),halftone:()=>import("./halftone-XZ7F75B4.js"),"hanging-letters":()=>import("./hanging-letters-Y3VH7EVP.js"),"hanging-sign":()=>import("./hanging-sign-2KUXPLZE.js"),"helpful-links":()=>import("./helpful-links-UFGTWTRQ.js"),hyperspace:()=>import("./hyperspace-R34QNI7J.js"),hypnosis:()=>import("./hypnosis-MK6AV3SC.js"),ink:()=>import("./ink-S332BOPS.js"),invaders:()=>import("./invaders-ZSY3Z443.js"),kaleidoscope:()=>import("./kaleidoscope-BLGSIK4F.js"),"lava-lamp":()=>import("./lava-lamp-VYY5XFG5.js"),life:()=>import("./life-QBWZL5FY.js"),lighthouse:()=>import("./lighthouse-QX7QIIPX.js"),loading:()=>import("./loading-LIS67QF7.js"),"lost-at-sea":()=>import("./lost-at-sea-QNURIHBY.js"),"magic-8-ball":()=>import("./magic-8-ball-W3TRJALZ.js"),"matrix-rain":()=>import("./matrix-rain-4V4SVGGG.js"),maze:()=>import("./maze-QL5TRCE5.js"),"mesh-gradient":()=>import("./mesh-gradient-UISGI62K.js"),"metro-map":()=>import("./metro-map-H64EHOZM.js"),"milk-carton":()=>import("./milk-carton-3SDLA5AY.js"),minimal:()=>import("./minimal-SB6FU3DE.js"),mirage:()=>import("./mirage-IQ3IA3VB.js"),"moon-landing":()=>import("./moon-landing-TKZE4Q6G.js"),"neon-sign":()=>import("./neon-sign-XGMN75MH.js"),newspaper:()=>import("./newspaper-YECAUY77.js"),nixie:()=>import("./nixie-CQBRCVDE.js"),"no-signal":()=>import("./no-signal-HL4A4CFZ.js"),"one-bit":()=>import("./one-bit-AFIZQPHK.js"),"outline-404":()=>import("./outline-404-REB5E5EN.js"),"paint-splash":()=>import("./paint-splash-GZGPOURW.js"),"paper-plane":()=>import("./paper-plane-KDCSE3RM.js"),particles:()=>import("./particles-7UMRMT2M.js"),"path-not-found":()=>import("./path-not-found-VUEXOVO7.js"),planet:()=>import("./planet-H6QGPDVC.js"),pond:()=>import("./pond-6DL43VUQ.js"),pong:()=>import("./pong-B2ZGAY7T.js"),radar:()=>import("./radar-22JCPGQZ.js"),"rainy-window":()=>import("./rainy-window-DTGLJVAR.js"),receipt:()=>import("./receipt-ZOYUSMN3.js"),"road-closed":()=>import("./road-closed-3OS55UBX.js"),"rpg-dialog":()=>import("./rpg-dialog-FV53YYNJ.js"),runner:()=>import("./runner-NANXJTQG.js"),"scratch-card":()=>import("./scratch-card-GC6U4ZZN.js"),screensaver:()=>import("./screensaver-UXKJVQUU.js"),"search-404":()=>import("./search-404-HFKZ4DUA.js"),"server-default":()=>import("./server-default-RBMMRAHS.js"),"server-room":()=>import("./server-room-QSKAUFUY.js"),skyline:()=>import("./skyline-OMZMF5R6.js"),skywriting:()=>import("./skywriting-RYNQWJ6I.js"),"slot-machine":()=>import("./slot-machine-XXCVI2HK.js"),snake:()=>import("./snake-6Z5V3QA3.js"),"snow-globe":()=>import("./snow-globe-RLDPNA2J.js"),"soft-blobs":()=>import("./soft-blobs-FYEFGINV.js"),"solar-system":()=>import("./solar-system-CQAP6WFU.js"),"split-flap":()=>import("./split-flap-O7JGD5Q4.js"),"split-panel":()=>import("./split-panel-QGXZ24E4.js"),stage:()=>import("./stage-GBZR3JQS.js"),"swiss-poster":()=>import("./swiss-poster-OON4HBUG.js"),terminal:()=>import("./terminal-7BTUDZDB.js"),thunderstorm:()=>import("./thunderstorm-FRCKHKXY.js"),topographic:()=>import("./topographic-3RIQXKIQ.js"),"torn-page":()=>import("./torn-page-6UT5ZQHG.js"),"treasure-map":()=>import("./treasure-map-FALAEBL5.js"),typewriter:()=>import("./typewriter-7TIO42MH.js"),ufo:()=>import("./ufo-6UW34TI3.js"),unplugged:()=>import("./unplugged-QXKDDH4S.js"),"vending-machine":()=>import("./vending-machine-SH3MNFMY.js"),vinyl:()=>import("./vinyl-3FUP3LSO.js"),"voxel-404":()=>import("./voxel-404-LMC43X4B.js"),wormhole:()=>import("./wormhole-I2RWIMRW.js"),"zen-garden":()=>import("./zen-garden-HMAMASJK.js")},ne=["ascii-3d","astronaut","aurora","autumn","balloon-404","beach","black-hole","block-drop","blue-screen","breakout","bricks","broken-link","brutalist","bubble-wrap","campfire","card","cassette","chalkboard","chrome-404","circuit-board","claw-machine","clay-404","constellation","countdown","cross-stitch","deep-sea","divider","dna","dominoes","dot-grid","editorial","elevator","emoji","error-cascade","evidence-board","eyes","fireworks","flashlight","flatline","flock","foggy-glass","gears","glass-404","glitch","gradient-404","halftone","hanging-letters","hanging-sign","helpful-links","hyperspace","hypnosis","ink","invaders","kaleidoscope","lava-lamp","life","lighthouse","loading","lost-at-sea","magic-8-ball","matrix-rain","maze","mesh-gradient","metro-map","milk-carton","minimal","mirage","moon-landing","neon-sign","newspaper","nixie","no-signal","one-bit","outline-404","paint-splash","paper-plane","particles","path-not-found","planet","pond","pong","radar","rainy-window","receipt","road-closed","rpg-dialog","runner","scratch-card","screensaver","search-404","server-default","server-room","skyline","skywriting","slot-machine","snake","snow-globe","soft-blobs","solar-system","split-flap","split-panel","stage","swiss-poster","terminal","thunderstorm","topographic","torn-page","treasure-map","typewriter","ufo","unplugged","vending-machine","vinyl","voxel-404","wormhole","zen-garden"];async function pe(l){let o=oe[l];if(!o)throw new Error(`[lostpage] unknown scene "${l}". Available: ${ne.join(", ")}`);return(await o()).default}function Ee(l,o,i){return te(l,typeof o=="string"?()=>pe(o):o,i)}export{ne as a,pe as b,Ee as c};
@@ -0,0 +1,14 @@
1
+ import{a as n,d as p,e as f}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var x={id:"countdown",name:"Countdown",description:"\u201CTaking you home in 10 seconds.\u201D A progress ring counts down; set redirect to true and it follows your first button when it hits zero.",category:"Simple",kind:"2d",motion:"live",tags:["simple","redirect","timer","countdown","useful","fast"],layout:"none",copy:{title:"This page doesn\u2019t exist",message:"We\u2019ll take you back to the homepage in a moment.",actions:[{label:"Go now",href:"/",icon:"arrow"}]},params:{seconds:10,redirect:!1,ring:"#2563eb"},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#2563eb","accent-fg":"#ffffff",radius:"10px"},stillTime:3,presetName:"Light",presets:{dark:{name:"Dark",params:{ring:"#34d399"},theme:{bg:"#06110d",fg:"#ecfdf5",accent:"#34d399","accent-fg":"#06110d"}},quick:{name:"Quick (5s)",params:{seconds:5,ring:"#f97316"},theme:{bg:"#fff7ed",fg:"#431407",accent:"#f97316","accent-fg":"#fff"}}},css:`
2
+ & .cd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
3
+ & .cd .ring{position:relative;width:clamp(110px,16cqw,150px);aspect-ratio:1;margin-bottom:28px}
4
+ & .cd svg{width:100%;height:100%;transform:rotate(-90deg)}
5
+ & .cd circle{fill:none;stroke-width:6}
6
+ & .cd .tr{stroke:color-mix(in srgb,var(--lp-fg) 10%,transparent)}
7
+ & .cd .pg{stroke:var(--ring);stroke-linecap:round}
8
+ & .cd .n{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(34px,5cqw,48px);font-weight:700;font-variant-numeric:tabular-nums}
9
+ & .cd .code{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--lp-muted)}
10
+ & .cd h1{margin:8px 0 0;font-size:clamp(26px,4cqw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
11
+ & .cd p{margin:12px 0 0;color:var(--lp-muted);font-size:15px}
12
+ & .cd a{margin-top:24px;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--lp-radius);background:var(--lp-accent);color:var(--lp-accent-fg);text-decoration:none;font-weight:600;font-size:14px}
13
+ `,setup(e){let a=e.params,r=e.copy,i=r.actions[0]??{label:"Go home",href:"/"},s=44,l=2*Math.PI*s,o=p(e,"cd",`<div class="ring" aria-hidden="true"><svg viewBox="0 0 100 100"><circle class="tr" cx="50" cy="50" r="${s}"/><circle class="pg" cx="50" cy="50" r="${s}" stroke-dasharray="${l}"/></svg><span class="n"></span></div>
14
+ <span class="code">ERROR ${n(r.code)}</span><h1>${f(r.code)}${n(r.title)}</h1><p>${n(r.message)}</p><a href="${n(i.href??"/")}">${n(i.label)} \u2192</a>`,{ring:a.ring}),g=o.querySelector(".pg"),m=o.querySelector(".n");o.querySelector("a").addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),e.navigate(i.href??"/",t))});let d=!1;return{frame(t){let c=Math.max(0,a.seconds-t);m.textContent=String(Math.ceil(c)),g.style.strokeDashoffset=String(l*(1-c/a.seconds)),c===0&&!d&&(d=!0,a.redirect&&!e.reducedMotion&&e.navigate(i.href??"/"))},destroy:()=>o.remove()}}};export{x as default};
@@ -0,0 +1,9 @@
1
+ import{a,d as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var l={id:"divider",name:"Divider",description:"\u201C404 | This page could not be found.\u201D The tiny, honest framework-default look: code and message on one line, split by a thin rule.",category:"Simple",kind:"2d",motion:"static",tags:["simple","minimal","nextjs","default","static","fast","developer"],layout:"none",copy:{title:"This page could not be found.",actions:[{label:"Home",href:"/"}]},params:{size:14},theme:{bg:"#ffffff",fg:"#000000"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#000000",fg:"#ffffff"}},mono:{name:"Mono",params:{size:13},theme:{bg:"#f6f6f4",fg:"#222",font:"ui-monospace,SFMono-Regular,Menlo,monospace"}},large:{name:"Large",params:{size:22},theme:{bg:"#111318",fg:"#e8eaf0"}}},css:`
2
+ & .dv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:calc(var(--s) * 1px);padding:16px}
3
+ & .dv .row{display:flex;align-items:center}
4
+ & .dv .code{margin:0 20px 0 0;padding-right:23px;font-size:calc(var(--s) * 1.7px);font-weight:500;line-height:49px;border-right:1px solid color-mix(in srgb,var(--lp-fg) 30%,transparent)}
5
+ & .dv h1{margin:0;font-size:inherit;font-weight:400;line-height:49px}
6
+ & .dv a{color:color-mix(in srgb,var(--lp-fg) 55%,transparent);text-decoration:none;font-size:.9em}
7
+ & .dv a:hover{color:var(--lp-fg);text-decoration:underline}
8
+ @container (max-width:380px){& .dv .row{flex-direction:column}& .dv .code{border:0;margin:0;padding:0}}
9
+ `,setup(t){let n=t.copy,i=s(t,"dv",`<div class="row"><p class="code" aria-hidden="true">${a(n.code)}</p><h1><span class="lp-sr">Error ${a(n.code)}: </span>${a(n.title)}</h1></div>`,{s:t.params.size});for(let r of n.actions){let e=document.createElement("a");e.href=r.href??"/",e.textContent=r.label,e.addEventListener("click",o=>{o.metaKey||o.ctrlKey||(o.preventDefault(),t.navigate(e.getAttribute("href"),o))}),i.append(e)}return{destroy:()=>i.remove()}}};export{l as default};
@@ -0,0 +1,11 @@
1
+ import"./chunk-URWX3LLV.js";var r={id:"dot-grid",name:"Dot Grid",description:"A dotted (or lined) grid that fades out towards the edges, with a small status pill above the headline. The quiet developer-tool look.",category:"Simple",kind:"2d",motion:"static",tags:["simple","grid","dots","developer","saas","static","fast"],layout:"center",copy:{eyebrow:"404 error",title:"We can\u2019t find that page",message:"Check the URL for typos, or head back to the dashboard.",actions:[{label:"Back to dashboard",href:"/"},{label:"Documentation",href:"/docs",variant:"secondary",icon:"arrow"}]},params:{dot:"#cbd5e1",gap:22,lines:!1},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#0f172a","accent-fg":"#ffffff",radius:"10px"},presetName:"Light",presets:{dark:{name:"Dark",params:{dot:"#273043"},theme:{bg:"#0a0d14",fg:"#f1f5f9",accent:"#f1f5f9","accent-fg":"#0a0d14"}},lines:{name:"Lines",params:{lines:!0,gap:40,dot:"#e5e7eb"}},blueprint:{name:"Blueprint",params:{lines:!0,gap:28,dot:"#2f5fb3"},theme:{bg:"#1b3f86",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1b3f86"}}},css:`
2
+ & .dg{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 100%)}
3
+ & .dg.dots{background-image:radial-gradient(var(--dot) 1.2px,transparent 1.6px);background-size:var(--gap) var(--gap);background-position:center}
4
+ & .dg.lines{background-image:linear-gradient(var(--dot) 1px,transparent 1px),linear-gradient(90deg,var(--dot) 1px,transparent 1px);background-size:var(--gap) var(--gap);background-position:center}
5
+ & .lp-code{display:none}
6
+ & .lp-eyebrow{letter-spacing:.04em;text-transform:none;font-size:12.5px;font-weight:600;color:var(--lp-fg);padding:6px 12px;border-radius:999px;
7
+ border:1px solid color-mix(in srgb,var(--lp-fg) 14%,transparent);background:color-mix(in srgb,var(--lp-bg) 80%,transparent);margin-bottom:22px}
8
+ & .lp-title{font-weight:700;font-size:clamp(28px,4.6cqw,54px)}
9
+ & .lp-btn--primary{font-weight:600}
10
+ & .lp-btn--secondary{border:0;font-weight:600}
11
+ `,setup(t){let a=t.params,e=document.createElement("div");return e.className="dg "+(a.lines?"lines":"dots"),e.style.setProperty("--dot",a.dot),e.style.setProperty("--gap",a.gap+"px"),t.stage.append(e),{destroy:()=>e.remove()}}};export{r as default};
@@ -0,0 +1,11 @@
1
+ import{a as t,c as n,d as r,e as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var p={id:"editorial",name:"Editorial",description:"A calm, magazine-style page: an elegant italic serif headline, a hairline rule and understated links. For blogs, studios and writers.",category:"Simple",kind:"2d",motion:"static",tags:["simple","serif","editorial","blog","elegant","static","fast","light"],layout:"none",copy:{title:"The page you were reading has gone out of print.",message:"Perhaps it was moved to the archive, or perhaps it was never written.",actions:[{label:"Return to the front page",href:"/",icon:"none"},{label:"Browse the archive",href:"/archive",variant:"secondary",icon:"none"}]},params:{section:"Chapter 404"},theme:{bg:"#f7f4ee",fg:"#1d1b18",accent:"#1d1b18","accent-fg":"#f7f4ee","font-display":'"Fraunces","Playfair Display","Iowan Old Style",Georgia,serif'},presetName:"Ivory",presets:{night:{name:"Night",theme:{bg:"#14120f",fg:"#ede6da",accent:"#ede6da","accent-fg":"#14120f"}},rose:{name:"Rose",params:{section:"Errata \xB7 No. 404"},title:"We seem to have misplaced this page.",theme:{bg:"#f8ece9",fg:"#3d1a16",accent:"#9f2a20","accent-fg":"#fff"}}},css:`
2
+ & .ed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,7cqw,110px) 20px;overflow:auto}
3
+ & .ed .in{width:min(760px,100%)}
4
+ & .ed .sec{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--lp-muted)}
5
+ & .ed .sec::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--lp-fg) 25%,transparent)}
6
+ & .ed h1{margin:26px 0 0;font-family:var(--lp-font-display);font-style:italic;font-weight:400;font-size:clamp(34px,6cqw,76px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
7
+ & .ed p{margin:24px 0 0;max-width:46ch;font-family:var(--lp-font-display);font-size:clamp(16px,1.6cqw,20px);line-height:1.55;color:var(--lp-muted)}
8
+ & .ed .lp-actions{justify-content:flex-start;margin-top:34px}
9
+ & .ed .lp-btn--primary{border-radius:0;padding:14px 22px;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
10
+ & .ed .lp-btn--secondary{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
11
+ `,setup(e){let a=e.copy,i=r(e,"ed",`<div class="in"><div class="sec">${t(e.params.section)}</div><h1>${s(a.code)}${t(a.title)}</h1><p>${t(a.message)}</p></div>`);return i.querySelector(".in").append(n(e)),{destroy:()=>i.remove()}}};export{p as default};
@@ -0,0 +1,8 @@
1
+ import"./chunk-URWX3LLV.js";var o={id:"emoji",name:"Emoji",description:"One big emoji does the talking. Friendly, instantly readable, and swaps to suit your brand with a single parameter.",category:"Simple",kind:"2d",motion:"live",tags:["simple","emoji","friendly","playful","fast","light"],layout:"center",copy:{eyebrow:"404",title:"Hmm, that page wandered off.",message:"We looked everywhere. It\u2019s not here.",actions:[{label:"Take me home",href:"/",icon:"home"}]},params:{emoji:"\u{1F914}",bob:!0},theme:{bg:"#fffdf7",fg:"#1f2937",accent:"#1f2937","accent-fg":"#fffdf7"},presetName:"Thinking",presets:{ufo:{name:"UFO",title:"Abducted by aliens.",message:"This page was beamed up. We\u2019re negotiating its return.",params:{emoji:"\u{1F6F8}"},theme:{bg:"#0b0b1a",fg:"#e0e7ff",accent:"#a5b4fc","accent-fg":"#0b0b1a"}},ghost:{name:"Ghost",title:"Nobody here but us ghosts.",message:"This page has passed on.",params:{emoji:"\u{1F47B}"},theme:{bg:"#f5f3ff",fg:"#2e1065",accent:"#7c3aed","accent-fg":"#fff"}},desert:{name:"Desert",title:"It\u2019s a desert out here.",message:"Nothing for miles. Let\u2019s head back.",params:{emoji:"\u{1F335}"},theme:{bg:"#fef3c7",fg:"#451a03",accent:"#b45309","accent-fg":"#fff"}},melting:{name:"Melting",title:"Well, this is awkward.",message:"The page you wanted has melted away.",params:{emoji:"\u{1FAE0}",bob:!1},theme:{bg:"#ecfeff",fg:"#083344",accent:"#0e7490","accent-fg":"#fff"}}},css:`
2
+ & .em{display:grid;place-items:center;margin-bottom:clamp(16px,3.5cqh,32px);pointer-events:none}
3
+ & .lp-stage>.em{position:absolute;left:50%;top:18%;translate:-50% 0}
4
+ & .em span{font-size:clamp(80px,14cqw,150px);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 18px 16px rgba(0,0,0,.12))}
5
+ & .lp-code{display:none}
6
+ & .lp-title{font-weight:700;font-size:clamp(26px,4.2cqw,46px)}
7
+ & .lp-eyebrow{letter-spacing:.2em}
8
+ `,setup(t){let e=document.createElement("div");e.className="em",e.setAttribute("aria-hidden","true");let a=document.createElement("span");return a.textContent=t.params.emoji,e.append(a),(t.overlay?.querySelector(".lp-head")??t.stage).prepend(e),{frame(s){t.params.bob&&(a.style.transform=`translateY(${Math.sin(s*1.6)*8}px) rotate(${Math.sin(s*.8)*4}deg)`)},destroy:()=>e.remove()}}};export{o as default};
@@ -0,0 +1,6 @@
1
+ import"./chunk-URWX3LLV.js";var r={id:"gradient-404",name:"Gradient",description:"The modern SaaS 404: a heavy gradient-filled number with a soft glow, a short headline and a pill button.",category:"Simple",kind:"2d",motion:"static",tags:["simple","gradient","saas","startup","static","fast","modern"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"The link may be broken, or the page may have been removed.",actions:[{label:"Take me home",href:"/"},{label:"Help center",href:"/help",variant:"secondary"}]},params:{from:"#6366f1",via:"#a855f7",to:"#ec4899",glow:!0},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#0f172a","accent-fg":"#ffffff","code-size":"clamp(110px,24cqw,260px)","code-weight":"800"},presetName:"Violet",presets:{night:{name:"Night",params:{from:"#22d3ee",via:"#6366f1",to:"#d946ef"},theme:{bg:"#070a13",fg:"#e2e8f0",accent:"#e2e8f0","accent-fg":"#070a13"}},sunset:{name:"Sunset",params:{from:"#f59e0b",via:"#ef4444",to:"#db2777"},theme:{bg:"#fffaf5",fg:"#2a1406",accent:"#2a1406","accent-fg":"#fffaf5"}},mint:{name:"Mint",params:{from:"#10b981",via:"#06b6d4",to:"#3b82f6",glow:!1},theme:{bg:"#f8fafc",fg:"#0f172a",accent:"#0f172a","accent-fg":"#fff"}}},css:`
2
+ & .lp-code{background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.06em;line-height:.95;padding:0 .04em}
3
+ & .gr-glow{position:absolute;left:50%;top:38%;width:min(70cqw,760px);aspect-ratio:2/1;translate:-50% -50%;filter:blur(70px);opacity:.28;
4
+ background:radial-gradient(closest-side,var(--g1),transparent),radial-gradient(closest-side at 70% 50%,var(--g3),transparent)}
5
+ & .lp-title{font-weight:700;font-size:clamp(24px,3.6cqw,44px)}
6
+ `,setup(e){let a=e.params;if(e.root.style.setProperty("--g1",a.from),e.root.style.setProperty("--g2",a.via),e.root.style.setProperty("--g3",a.to),!a.glow)return;let t=document.createElement("div");return t.className="gr-glow",e.stage.append(t),{destroy:()=>t.remove()}}};export{r as default};
@@ -0,0 +1,18 @@
1
+ import{a as e,c as r,d as l,e as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var d={id:"helpful-links",name:"Helpful Links",description:"Headline on top, then a tidy list of where people probably wanted to go, each with a one-line description and an arrow.",category:"Simple",kind:"2d",motion:"static",tags:["simple","links","list","useful","saas","docs","static","fast"],layout:"none",copy:{eyebrow:"404 error",title:"This page does not exist",message:"Sorry, we couldn\u2019t find the page you\u2019re looking for. These might help:",actions:[{label:"Back to home",href:"/"}]},params:{links:["Documentation|Learn how to integrate our tools with your app.|/docs","API reference|A complete reference of every endpoint.|/docs/api","Guides|Step-by-step tutorials for common tasks.|/guides","Blog|Read our latest news and articles.|/blog"]},theme:{bg:"#ffffff",fg:"#111827",accent:"#4f46e5","accent-fg":"#ffffff"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#0f1117",fg:"#e5e7eb",accent:"#a5b4fc","accent-fg":"#0f1117"}},sand:{name:"Sand",theme:{bg:"#f6f1e9",fg:"#292018",accent:"#b45309","accent-fg":"#fff"}}},css:`
2
+ & .hl{position:absolute;inset:0;overflow:auto;display:flex;justify-content:center;padding:clamp(28px,8cqh,96px) 16px}
3
+ & .hl .in{width:min(560px,100%);margin:auto 0}
4
+ & .hl .ey{font-size:13px;font-weight:600;color:var(--lp-accent)}
5
+ & .hl h1{margin:8px 0 0;font-size:clamp(28px,4.4cqw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
6
+ & .hl p{margin:14px 0 0;color:var(--lp-muted);font-size:15px;line-height:1.6}
7
+ & .hl ul{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid color-mix(in srgb,var(--lp-fg) 12%,transparent)}
8
+ & .hl li a{display:flex;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid color-mix(in srgb,var(--lp-fg) 12%,transparent);color:inherit;text-decoration:none}
9
+ & .hl li i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px;
10
+ background:color-mix(in srgb,var(--lp-accent) 12%,transparent);color:var(--lp-accent)}
11
+ & .hl li b{display:block;font-size:15px;font-weight:600}
12
+ & .hl li small{display:block;color:var(--lp-muted);font-size:13.5px;margin-top:2px}
13
+ & .hl li span{flex:1;min-width:0}
14
+ & .hl li em{font-style:normal;color:var(--lp-muted);transition:transform .2s}
15
+ & .hl li a:hover em{transform:translateX(4px);color:var(--lp-accent)}
16
+ & .hl .lp-actions{justify-content:flex-start;margin-top:26px}
17
+ & .hl .lp-btn--primary{background:none;color:var(--lp-accent);padding:6px 0;font-weight:600}
18
+ `,setup(n){let o=n.copy,p=n.params.links.map(t=>t.split("|")).map(([t,a,c])=>`<li><a href="${e(c??"/")}"><i aria-hidden="true">${e((t??"?").charAt(0))}</i><span><b>${e(t??"")}</b><small>${e(a??"")}</small></span><em aria-hidden="true">\u2192</em></a></li>`).join(""),i=l(n,"hl",`<div class="in"><span class="ey">${e(o.eyebrow||o.code)}</span><h1>${s(o.code)}${e(o.title)}</h1><p>${e(o.message)}</p><ul>${p}</ul></div>`);return i.querySelectorAll("ul a").forEach(t=>t.addEventListener("click",a=>{a.metaKey||a.ctrlKey||(a.preventDefault(),n.navigate(t.getAttribute("href"),a))})),i.querySelector(".in").append(r(n)),{destroy:()=>i.remove()}}};export{d as default};
@@ -0,0 +1,9 @@
1
+ import"./chunk-URWX3LLV.js";var a={id:"minimal",name:"Minimal",description:"The classic: a large status code, one line of explanation and a way home. Nothing animates, nothing loads; it just works.",category:"Simple",kind:"2d",motion:"static",tags:["simple","minimal","clean","static","light","fast","classic"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"Sorry, we couldn\u2019t find the page you\u2019re looking for.",actions:[{label:"Go back home",href:"/",variant:"primary"},{label:"Contact support",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{rule:!1},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#4f46e5","accent-fg":"#ffffff","code-color":"#4f46e5","code-size":"clamp(15px,1.4cqw,17px)","code-weight":"600",radius:"8px"},presetName:"Indigo",presets:{dark:{name:"Dark",theme:{bg:"#0b0f19",fg:"#f1f5f9",accent:"#818cf8","accent-fg":"#0b0f19","code-color":"#818cf8"}},emerald:{name:"Emerald",theme:{bg:"#f7faf9",fg:"#052e22",accent:"#059669","accent-fg":"#fff","code-color":"#059669"}},big:{name:"Big number",title:"Lost your way?",params:{rule:!0},theme:{bg:"#fafafa",fg:"#18181b",accent:"#18181b","accent-fg":"#fafafa","code-color":"#18181b","code-size":"clamp(72px,16cqw,180px)","code-weight":"800",radius:"999px"}},warm:{name:"Warm",theme:{bg:"#fbf6ef",fg:"#3b2414",accent:"#c2410c","accent-fg":"#fff","code-color":"#c2410c"}}},css:`
2
+ & .lp-code{letter-spacing:.02em;line-height:1;margin-bottom:12px}
3
+ & .lp-title{font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,5cqw,56px)}
4
+ & .lp-message{font-size:clamp(14px,1.4cqw,17px)}
5
+ & .lp-btn--primary{padding:12px 20px;font-weight:600}
6
+ & .lp-btn--secondary{border:0;font-weight:600}
7
+ &.lp-p-big .lp-code{letter-spacing:-.05em;line-height:.9}
8
+ &.mn-rule .lp-code::after{content:"";display:block;width:56px;height:3px;margin:22px auto 0;background:var(--lp-accent);border-radius:2px}
9
+ `,setup(e){e.root.classList.toggle("mn-rule",e.params.rule)}};export{a as default};
@@ -0,0 +1,9 @@
1
+ import{a}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var o={id:"outline-404",name:"Outline",description:"A giant outlined 404 sits behind a short, bold headline. One of the most common agency and portfolio looks, done with pure CSS.",category:"Simple",kind:"2d",motion:"static",tags:["simple","outline","stroke","typography","static","fast","portfolio"],layout:"center",copy:{eyebrow:"Error 404",title:"Oops! Nothing here.",message:"The page you\u2019re after has moved, been renamed or never existed.",actions:[{label:"Back to homepage",href:"/"}]},params:{stroke:2,fade:.7},theme:{bg:"#0d0d0f",fg:"#f4f4f5",accent:"#f4f4f5","accent-fg":"#0d0d0f"},presetName:"Night",presets:{paper:{name:"Paper",theme:{bg:"#f5f3ee",fg:"#141414",accent:"#141414","accent-fg":"#f5f3ee"}},lime:{name:"Lime",params:{stroke:3},theme:{bg:"#101010",fg:"#d9f99d",accent:"#bef264","accent-fg":"#101010"}},blue:{name:"Cobalt",theme:{bg:"#1d3bd8",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1d3bd8"}}},css:`
2
+ & .ol{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
3
+ & .ol span{font-family:var(--lp-font-display);font-weight:900;font-size:clamp(170px,42cqw,620px);line-height:1;letter-spacing:-.04em;white-space:nowrap;
4
+ color:transparent;-webkit-text-stroke:var(--sw) color-mix(in srgb,var(--lp-fg) 32%,transparent);
5
+ -webkit-mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,calc(1 - var(--fade))));mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,calc(1 - var(--fade))))}
6
+ & .lp-code{display:none}
7
+ & .lp-title{font-weight:800;font-size:clamp(30px,5.4cqw,68px)}
8
+ & .lp-eyebrow{color:var(--lp-fg);opacity:.7}
9
+ `,setup(t){let e=document.createElement("div");return e.className="ol",e.setAttribute("aria-hidden","true"),e.style.setProperty("--sw",t.params.stroke+"px"),e.style.setProperty("--fade",String(t.params.fade)),e.innerHTML=`<span>${a(t.copy.code)}</span>`,t.stage.append(e),{destroy:()=>e.remove()}}};export{o as default};
@@ -0,0 +1,14 @@
1
+ import{a as e,b as r,c as i,d as p,e as s}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var d={id:"path-not-found",name:"Path Not Found",description:"Shows people exactly what went wrong: the address they asked for, in a code chip or a request line, so a typo is easy to spot.",category:"Simple",kind:"2d",motion:"static",tags:["simple","url","path","developer","docs","useful","static","fast"],layout:"none",copy:{title:"Nothing lives at this address",message:"Double-check the spelling, or go back to where you came from.",actions:[{label:"Go home",href:"/"},{label:"Report a broken link",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{request:!1},theme:{bg:"#fafafa",fg:"#18181b",accent:"#18181b","accent-fg":"#fafafa",radius:"8px"},presetName:"Chip",presets:{request:{name:"Request line",params:{request:!0},theme:{bg:"#0b0b0e",fg:"#e4e4e7",accent:"#e4e4e7","accent-fg":"#0b0b0e"}},soft:{name:"Soft",theme:{bg:"#eef2ff",fg:"#1e1b4b",accent:"#4338ca","accent-fg":"#fff",radius:"999px"}}},css:`
2
+ & .pnf{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
3
+ & .pnf h1{margin:0;font-size:clamp(26px,4.2cqw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
4
+ & .pnf code{font-family:var(--lp-font-mono);font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
5
+ & .pnf .chip{display:inline-flex;gap:10px;align-items:center;max-width:min(560px,100%);margin-bottom:22px;padding:8px 14px;border-radius:8px;
6
+ background:color-mix(in srgb,var(--lp-fg) 6%,transparent);border:1px dashed color-mix(in srgb,var(--lp-fg) 22%,transparent)}
7
+ & .pnf .chip b{flex:none;color:#e11d48;font-family:var(--lp-font-mono);font-size:13px}
8
+ & .pnf .req{width:min(560px,100%);margin-bottom:26px;text-align:left;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--lp-fg) 14%,transparent)}
9
+ & .pnf .req div{display:flex;gap:12px;padding:12px 16px;font-family:var(--lp-font-mono);font-size:13.5px;min-width:0}
10
+ & .pnf .req div+div{border-top:1px solid color-mix(in srgb,var(--lp-fg) 10%,transparent);color:var(--lp-muted)}
11
+ & .pnf .req em{font-style:normal;color:#22c55e;flex:none}
12
+ & .pnf .req strong{color:#f43f5e;flex:none}
13
+ & .pnf p{margin:14px 0 0;color:var(--lp-muted);font-size:15px;max-width:44ch}
14
+ `,setup(t){let o=t.copy,n=r(),l=t.params.request?`<div class="req" aria-hidden="true"><div><em>GET</em><code>${e(n)}</code></div><div><strong>${e(o.code)}</strong><span>Not Found</span></div></div>`:`<div class="chip"><b>${e(o.code)}</b><code>${e(n)}</code></div>`,a=p(t,"pnf",`${l}<h1>${s(o.code)}${e(o.title)}</h1><p>${e(o.message)}</p>`);return a.append(i(t)),{destroy:()=>a.remove()}}};export{d as default};
@@ -0,0 +1,17 @@
1
+ import{a,c as i,d as l,e as p}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var g={id:"search-404",name:"Search",description:"The most useful 404 for docs, shops and blogs: a search box that sends people straight to your search page, plus a few popular links.",category:"Simple",kind:"2d",motion:"static",tags:["simple","search","docs","ecommerce","blog","useful","static","fast"],layout:"none",copy:{eyebrow:"404",title:"We couldn\u2019t find that page",message:"Try searching for it, or start from one of these:",actions:[{label:"Go home",href:"/",icon:"home"}]},params:{searchUrl:"/search",placeholder:"Search the site\u2026",links:["Getting started|/docs","Pricing|/pricing","Blog|/blog","Contact|/contact"]},theme:{bg:"#ffffff",fg:"#111827",accent:"#2563eb","accent-fg":"#ffffff",radius:"10px"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#0d1117",fg:"#e6edf3",accent:"#2f81f7","accent-fg":"#ffffff"}},shop:{name:"Shop",title:"This product has left the shelf",message:"Search our store or browse a popular collection:",params:{placeholder:"Search products\u2026",links:["New arrivals|/new","Best sellers|/best-sellers","Sale|/sale","Gift cards|/gift-cards"]},theme:{bg:"#faf7f2",fg:"#1c1917",accent:"#1c1917","accent-fg":"#faf7f2",radius:"999px"}},docs:{name:"Docs",title:"This doc page doesn\u2019t exist",message:"It may have moved in a recent update. Search the docs:",params:{placeholder:"Search documentation\u2026",links:["Quick start|/docs/start","API reference|/docs/api","Guides|/docs/guides","Changelog|/changelog"]},theme:{bg:"#fcfcfd",fg:"#18181b",accent:"#7c3aed","accent-fg":"#ffffff",font:"ui-sans-serif,system-ui,sans-serif"}}},css:`
2
+ & .sr4{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;overflow:auto}
3
+ & .sr4 .ey{font-size:13px;font-weight:700;color:var(--lp-accent);letter-spacing:.06em}
4
+ & .sr4 h1{margin:10px 0 0;font-size:clamp(26px,4.4cqw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
5
+ & .sr4 p{margin:14px 0 0;color:var(--lp-muted);font-size:clamp(14px,1.4cqw,16px)}
6
+ & .sr4 form{margin-top:26px;display:flex;width:min(520px,100%);border:1px solid color-mix(in srgb,var(--lp-fg) 16%,transparent);border-radius:var(--lp-radius);background:color-mix(in srgb,var(--lp-fg) 3%,var(--lp-bg));overflow:hidden;transition:border-color .2s,box-shadow .2s}
7
+ & .sr4 form:focus-within{border-color:var(--lp-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--lp-accent) 18%,transparent)}
8
+ & .sr4 input{flex:1;min-width:0;border:0;background:none;padding:14px 16px;font:inherit;font-size:15px;color:var(--lp-fg);outline:none}
9
+ & .sr4 form button{border:0;margin:5px;padding:0 18px;border-radius:calc(var(--lp-radius) - 3px);background:var(--lp-accent);color:var(--lp-accent-fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
10
+ & .sr4 ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
11
+ & .sr4 ul a{display:block;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--lp-fg) 6%,transparent);color:var(--lp-fg);text-decoration:none;font-size:13.5px;font-weight:500}
12
+ & .sr4 ul a:hover{background:color-mix(in srgb,var(--lp-accent) 14%,transparent);color:var(--lp-accent)}
13
+ & .sr4 .lp-actions{margin-top:26px}
14
+ & .sr4 .lp-btn--primary{background:none;color:var(--lp-fg);padding:8px 4px;font-weight:600}
15
+ `,setup(t){let o=t.params,n=t.copy,f=o.links.map(e=>e.split("|")).map(([e,r])=>`<li><a href="${a(r??"/")}">${a(e)}</a></li>`).join(""),s=l(t,"sr4",`<span class="ey">${a(n.eyebrow||n.code)}</span><h1>${p(n.code)}${a(n.title)}</h1><p>${a(n.message)}</p>
16
+ <form role="search" action="${a(o.searchUrl)}"><input name="q" type="search" aria-label="Search" placeholder="${a(o.placeholder)}" data-lp-interactive><button type="submit">Search</button></form>
17
+ <ul>${f}</ul>`);s.querySelectorAll("ul a").forEach(e=>e.addEventListener("click",r=>{r.metaKey||r.ctrlKey||(r.preventDefault(),t.navigate(e.getAttribute("href"),r))}));let c=s.querySelector("form");return c.addEventListener("submit",e=>{e.preventDefault();let r=c.elements.namedItem("q").value.trim();t.navigate(o.searchUrl+(o.searchUrl.includes("?")?"&":"?")+"q="+encodeURIComponent(r))}),s.append(i(t)),{destroy:()=>s.remove()}}};export{g as default};
@@ -0,0 +1,10 @@
1
+ import{a as r,d}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var c={id:"server-default",name:"Server Default",description:"The bare web-server error page everyone recognises: a Times heading, a rule and the server signature. Deadpan, tiny and on purpose.",category:"Simple",kind:"2d",motion:"static",tags:["simple","nginx","apache","server","plain","developer","joke","static","fast"],layout:"none",copy:{title:"Not Found",message:"The requested URL was not found on this server.",actions:[{label:"Return to the home page",href:"/"}]},params:{server:"nginx"},theme:{bg:"#ffffff",fg:"#000000"},presetName:"nginx",presets:{apache:{name:"Apache",params:{server:"Apache/2.4.58 (Ubuntu) Server at localhost Port 443"}},iis:{name:"IIS",title:"404 - File or directory not found.",message:"The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.",params:{server:"Microsoft-IIS/10.0"}},dark:{name:"Dark",theme:{bg:"#1e1e1e",fg:"#d4d4d4"}}},css:`
2
+ & .sd{position:absolute;inset:0;padding:8px 8px;font-family:"Times New Roman",Times,serif;font-size:16px;color:var(--lp-fg);overflow:auto}
3
+ & .sd h1{margin:21px 0;font-size:2em;font-weight:700;text-align:center;font-family:inherit}
4
+ &.sd-apache .sd h1,&.sd-apache .sd p{text-align:left}
5
+ & .sd p{margin:16px 0;text-align:center}
6
+ & .sd hr{border:0;border-top:1px solid color-mix(in srgb,var(--lp-fg) 40%,transparent);margin:8px 0}
7
+ & .sd address,& .sd center{font-style:normal;text-align:center;display:block}
8
+ & .sd a{color:#0000ee}
9
+ & .sd a:visited{color:#551a8b}
10
+ `,setup(a){let e=a.copy,o=a.params,n=/apache/i.test(o.server);a.root.classList.toggle("sd-apache",n);let l=/^\d/.test(e.title)?e.title:`${e.code} ${e.title}`,s=e.actions[0],i=d(a,"sd",`<h1><span class="lp-sr">Error ${r(e.code)}: </span>${r(l)}</h1>${n||e.message!=="The requested URL was not found on this server."?`<p>${r(e.message)}</p>`:""}${s?`<p><a href="${r(s.href??"/")}">${r(s.label)}</a></p>`:""}<hr>${n?`<address>${r(o.server)}</address>`:`<center>${r(o.server)}</center>`}`);return i.querySelector("a")?.addEventListener("click",t=>{t.metaKey||t.ctrlKey||(t.preventDefault(),a.navigate(s.href??"/",t))}),{destroy:()=>i.remove()}}};export{c as default};
@@ -0,0 +1,15 @@
1
+ import"./chunk-URWX3LLV.js";var s={id:"soft-blobs",name:"Soft Blobs",description:"Blurred colour blobs drifting slowly behind a frosted card. Pure CSS animation, so it costs almost nothing to run.",category:"Simple",kind:"2d",motion:"live",tags:["simple","gradient","blobs","glass","frosted","saas","fast","light"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"The page you\u2019re looking for doesn\u2019t exist or has been moved.",actions:[{label:"Go home",href:"/"},{label:"Contact",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{colors:["#a78bfa","#60a5fa","#f472b6"],speed:1,card:!0},theme:{bg:"#f8f7ff",fg:"#1e1b4b",accent:"#1e1b4b","accent-fg":"#ffffff","code-size":"clamp(64px,11cqw,120px)","code-weight":"800","code-color":"#1e1b4b"},presetName:"Lavender",presets:{peach:{name:"Peach",params:{colors:["#fdba74","#fda4af","#fde68a"]},theme:{bg:"#fffaf5",fg:"#431407",accent:"#431407","code-color":"#431407"}},aqua:{name:"Aqua",params:{colors:["#5eead4","#38bdf8","#a3e635"]},theme:{bg:"#f0fdfa",fg:"#042f2e",accent:"#042f2e","code-color":"#042f2e"}},night:{name:"Night",params:{colors:["#7c3aed","#2563eb","#db2777"]},theme:{bg:"#07071a",fg:"#eef2ff",accent:"#eef2ff","accent-fg":"#07071a","code-color":"#eef2ff"}}},css:`
2
+ & .sb{position:absolute;inset:-10%;filter:blur(clamp(50px,8cqw,110px));opacity:.75}
3
+ & .sb i{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;animation:sb-drift calc(18s / var(--sp)) ease-in-out infinite alternate}
4
+ & .sb i:nth-child(1){left:12%;top:10%;background:var(--c0)}
5
+ & .sb i:nth-child(2){right:8%;top:30%;background:var(--c1);animation-delay:calc(-6s / var(--sp));animation-duration:calc(22s / var(--sp))}
6
+ & .sb i:nth-child(3){left:30%;bottom:2%;background:var(--c2);animation-delay:calc(-11s / var(--sp));animation-duration:calc(26s / var(--sp))}
7
+ @keyframes sb-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,-8%) scale(1.15)}100%{transform:translate(-10%,10%) scale(.92)}}
8
+ &.sb-still .sb i{animation:none}
9
+ & .lp-code{letter-spacing:-.05em;line-height:.9;margin-bottom:8px}
10
+ & .lp-title{font-weight:700;font-size:clamp(24px,3.4cqw,40px)}
11
+ &.sb-card .lp-head,&.sb-card .lp-body{position:relative}
12
+ &.sb-card .lp-overlay::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(520px,calc(100% - 32px));height:min(460px,calc(100% - 32px));
13
+ border-radius:28px;background:color-mix(in srgb,var(--lp-bg) 55%,transparent);border:1px solid color-mix(in srgb,#fff 55%,transparent);
14
+ backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
15
+ `,setup(a){let t=a.params,e=document.createElement("div");return e.className="sb",e.innerHTML="<i></i><i></i><i></i>",t.colors.slice(0,3).forEach((o,r)=>e.style.setProperty(`--c${r}`,o)),e.style.setProperty("--sp",String(Math.max(.05,t.speed))),a.stage.append(e),a.root.classList.toggle("sb-card",t.card),a.root.classList.toggle("sb-still",a.reducedMotion),{destroy:()=>e.remove()}}};export{s as default};
@@ -0,0 +1,12 @@
1
+ import{a as t,c as s,d as o,e as i}from"./chunk-A44JMJWI.js";import"./chunk-QHXVYCR6.js";import"./chunk-URWX3LLV.js";var r={id:"split-panel",name:"Split Panel",description:"Two halves: the explanation and buttons on one side, a solid colour block with a huge number on the other. Stacks on phones.",category:"Simple",kind:"2d",motion:"static",tags:["simple","split","two-column","bold","static","fast","brand"],layout:"none",copy:{eyebrow:"Error 404",title:"Looks like you\u2019re lost.",message:"The page you are looking for is not available. It might have been moved or deleted.",actions:[{label:"Go to homepage",href:"/"},{label:"Contact us",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{panel:"#ff5a36",panelText:"#ffffff",flip:!1},theme:{bg:"#ffffff",fg:"#111111",accent:"#111111","accent-fg":"#ffffff",radius:"6px"},presetName:"Coral",presets:{forest:{name:"Forest",params:{panel:"#14532d",panelText:"#bbf7d0"},theme:{bg:"#f7f7f2",fg:"#14231a",accent:"#14532d","accent-fg":"#fff"}},ink:{name:"Ink",params:{panel:"#111111",panelText:"#fafafa",flip:!0},theme:{bg:"#fafafa",fg:"#111",accent:"#111","accent-fg":"#fafafa"}},sky:{name:"Sky",params:{panel:"#38bdf8",panelText:"#082f49"},theme:{bg:"#082f49",fg:"#e0f2fe",accent:"#38bdf8","accent-fg":"#082f49"}}},css:`
2
+ & .sp{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
3
+ & .sp.flip .txt{order:2}
4
+ & .sp .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,6cqw,96px)}
5
+ & .sp .ey{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lp-muted)}
6
+ & .sp h1{margin:14px 0 0;font-size:clamp(30px,4.8cqw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
7
+ & .sp p{margin:18px 0 0;max-width:40ch;color:var(--lp-muted);font-size:clamp(14px,1.3cqw,17px);line-height:1.6}
8
+ & .sp .lp-actions{justify-content:flex-start}
9
+ & .sp .pn{background:var(--pn);color:var(--pt);display:grid;place-items:center;overflow:hidden}
10
+ & .sp .pn span{font-weight:900;font-size:clamp(90px,19cqw,300px);letter-spacing:-.06em;line-height:1}
11
+ @container (max-width:700px){& .sp{grid-template-columns:1fr;grid-template-rows:38% 1fr}& .sp .txt,& .sp.flip .txt{order:2;justify-content:flex-start;padding-top:28px}& .sp .pn span{font-size:clamp(80px,30cqw,160px)}}
12
+ `,setup(a){let n=a.params,e=a.copy,p=o(a,"sp"+(n.flip?" flip":""),`<div class="txt"><span class="ey">${t(e.eyebrow)}</span><h1>${i(e.code)}${t(e.title)}</h1><p>${t(e.message)}</p></div><div class="pn" aria-hidden="true"><span>${t(e.code)}</span></div>`,{pn:n.panel,pt:n.panelText});return p.querySelector(".txt").append(s(a)),{destroy:()=>p.remove()}}};export{r as default};
@@ -1 +1 @@
1
- import{c as h}from"./c/chunk-JPP52QCZ.js";import"./c/chunk-LMRCHEWX.js";import"./c/chunk-QJZBGT2Q.js";import"./c/chunk-HXSSPN2I.js";import"./c/chunk-IETNWEVK.js";import{b as n}from"./c/chunk-URWX3LLV.js";var p=["scene","preset","code","eyebrow","heading","message","height","motion","theme","params","primary-label","primary-href","secondary-label","secondary-href","overlay","interactive","seed"],l=class extends HTMLElement{constructor(){super(...arguments);n(this,"handle",null);n(this,"sceneId",null);n(this,"custom",null)}connectedCallback(){var e;this.style.display||(this.style.display="block"),(e=this.style).position||(e.position="relative"),!this.custom&&this.childNodes.length&&[...this.childNodes].some(i=>i.nodeType===1||i.textContent?.trim())&&(this.custom=document.createElement("div"),this.custom.className="lp-custom",this.custom.append(...this.childNodes),this.append(this.custom)),this.start()}disconnectedCallback(){this.handle?.destroy(),this.handle=null,this.sceneId=null}attributeChangedCallback(e,i,t){!this.isConnected||i===t||(e==="scene"?this.start():this.handle?.update(this.options()))}options(){let e=s=>this.getAttribute(s)??void 0,i=s=>{let o=e(s);if(o)try{return JSON.parse(o)}catch{console.warn(`[lostpage] <lost-page ${s}> must be JSON`);return}},t={};e("preset")&&(t.preset=e("preset")),e("code")&&(t.code=e("code")),e("eyebrow")!==void 0&&(t.eyebrow=e("eyebrow")),e("heading")&&(t.title=e("heading")),e("message")&&(t.message=e("message")),e("height")&&(t.height=e("height")),e("motion")&&(t.motion=e("motion")),e("seed")&&(t.seed=Number(e("seed"))),this.hasAttribute("interactive")&&(t.interactive=e("interactive")!=="false"),this.hasAttribute("overlay")&&(t.overlay=e("overlay")!=="false"),this.custom&&(t.overlay=!1);let r=i("theme"),c=i("params");r&&(t.theme=r),c&&(t.params=c);let a=[];return e("primary-label")&&a.push({label:e("primary-label"),href:e("primary-href")??"/",variant:"primary"}),e("secondary-label")&&a.push({label:e("secondary-label"),href:e("secondary-href")??"/",variant:"secondary"}),a.length&&(t.actions=a),t.onNavigate=(s,o)=>{let d=new CustomEvent("lostpage:navigate",{detail:{href:s},cancelable:!0,bubbles:!0});this.dispatchEvent(d)&&(o.target?.closest?location.assign(s):location.href=s)},t}start(){let e=this.getAttribute("scene");!e||e===this.sceneId||(this.handle?.destroy(),this.sceneId=e,this.handle=h(this,e,this.options()))}};n(l,"observedAttributes",[...p]);typeof window<"u"&&!customElements.get("lost-page")&&customElements.define("lost-page",l);export{l as LostPageElement};
1
+ import{c as h}from"./c/chunk-YNREKTFR.js";import"./c/chunk-QHXVYCR6.js";import"./c/chunk-LMRCHEWX.js";import"./c/chunk-QJZBGT2Q.js";import"./c/chunk-HXSSPN2I.js";import"./c/chunk-IETNWEVK.js";import{b as n}from"./c/chunk-URWX3LLV.js";var p=["scene","preset","code","eyebrow","heading","message","height","motion","theme","params","primary-label","primary-href","secondary-label","secondary-href","overlay","interactive","seed"],l=class extends HTMLElement{constructor(){super(...arguments);n(this,"handle",null);n(this,"sceneId",null);n(this,"custom",null)}connectedCallback(){var e;this.style.display||(this.style.display="block"),(e=this.style).position||(e.position="relative"),!this.custom&&this.childNodes.length&&[...this.childNodes].some(i=>i.nodeType===1||i.textContent?.trim())&&(this.custom=document.createElement("div"),this.custom.className="lp-custom",this.custom.append(...this.childNodes),this.append(this.custom)),this.start()}disconnectedCallback(){this.handle?.destroy(),this.handle=null,this.sceneId=null}attributeChangedCallback(e,i,t){!this.isConnected||i===t||(e==="scene"?this.start():this.handle?.update(this.options()))}options(){let e=s=>this.getAttribute(s)??void 0,i=s=>{let o=e(s);if(o)try{return JSON.parse(o)}catch{console.warn(`[lostpage] <lost-page ${s}> must be JSON`);return}},t={};e("preset")&&(t.preset=e("preset")),e("code")&&(t.code=e("code")),e("eyebrow")!==void 0&&(t.eyebrow=e("eyebrow")),e("heading")&&(t.title=e("heading")),e("message")&&(t.message=e("message")),e("height")&&(t.height=e("height")),e("motion")&&(t.motion=e("motion")),e("seed")&&(t.seed=Number(e("seed"))),this.hasAttribute("interactive")&&(t.interactive=e("interactive")!=="false"),this.hasAttribute("overlay")&&(t.overlay=e("overlay")!=="false"),this.custom&&(t.overlay=!1);let r=i("theme"),c=i("params");r&&(t.theme=r),c&&(t.params=c);let a=[];return e("primary-label")&&a.push({label:e("primary-label"),href:e("primary-href")??"/",variant:"primary"}),e("secondary-label")&&a.push({label:e("secondary-label"),href:e("secondary-href")??"/",variant:"secondary"}),a.length&&(t.actions=a),t.onNavigate=(s,o)=>{let d=new CustomEvent("lostpage:navigate",{detail:{href:s},cancelable:!0,bubbles:!0});this.dispatchEvent(d)&&(o.target?.closest?location.assign(s):location.href=s)},t}start(){let e=this.getAttribute("scene");!e||e===this.sceneId||(this.handle?.destroy(),this.sceneId=e,this.handle=h(this,e,this.options()))}};n(l,"observedAttributes",[...p]);typeof window<"u"&&!customElements.get("lost-page")&&customElements.define("lost-page",l);export{l as LostPageElement};
package/dist/cdn/index.js CHANGED
@@ -1 +1 @@
1
- import{a as j,b as k,c as l}from"./c/chunk-JPP52QCZ.js";import{a as i}from"./c/chunk-LMRCHEWX.js";import{d as g,l as h}from"./c/chunk-QJZBGT2Q.js";import{h as e}from"./c/chunk-HXSSPN2I.js";import{h as f}from"./c/chunk-IETNWEVK.js";import{c as a,d as b,e as c,f as d}from"./c/chunk-URWX3LLV.js";export{b as DEFAULT_COPY,a as defineScene,h as gl,g as glsl,k as loadScene,l as mount,d as presetIds,c as resolve,j as sceneIds,i as shaderScene,f as text,e as util};
1
+ import{a as j,b as k,c as l}from"./c/chunk-YNREKTFR.js";import"./c/chunk-QHXVYCR6.js";import{a as i}from"./c/chunk-LMRCHEWX.js";import{d as g,l as h}from"./c/chunk-QJZBGT2Q.js";import{h as e}from"./c/chunk-HXSSPN2I.js";import{h as f}from"./c/chunk-IETNWEVK.js";import{c as a,d as b,e as c,f as d}from"./c/chunk-URWX3LLV.js";export{b as DEFAULT_COPY,a as defineScene,h as gl,g as glsl,k as loadScene,l as mount,d as presetIds,c as resolve,j as sceneIds,i as shaderScene,f as text,e as util};
@@ -0,0 +1 @@
1
+ var ICONS={back:'<svg data-dir="back" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8H3M7 4 3 8l4 4"/></svg>',arrow:'<svg data-dir="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 11 11 5M6 5h5v5"/></svg>',home:'<svg data-dir="home" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 7.5 8 3l5.5 4.5M4 6.5V13h8V6.5"/></svg>'};function el(tag,cls,text){let n=document.createElement(tag);return n.className=cls,text!==void 0&&(n.textContent=text),n}function buildAction(a,onNavigate){let variant=a.variant??"primary",node=a.href!==void 0?el("a",`lp-btn lp-btn--${variant}`):el("button",`lp-btn lp-btn--${variant}`);node instanceof HTMLAnchorElement?node.href=a.href:node.type="button";let icon=a.icon??(variant==="primary"?"back":"arrow"),label=el("span","lp-btn-label",a.label);if(icon!=="none"&&ICONS[icon]){let holder=document.createElement("span");holder.innerHTML=ICONS[icon];let svg=holder.firstChild;icon==="arrow"?node.append(label,svg):node.append(svg,label)}else node.append(label);return node.addEventListener("click",ev=>{let e=ev;a.onClick?.(e),!e.defaultPrevented&&a.href!==void 0&&onNavigate&&!(e.metaKey||e.ctrlKey||e.shiftKey||e.button===1)&&(e.preventDefault(),onNavigate(a.href,e))}),node}function buildOverlay(copy,layout,onNavigate){let overlay=el("div",`lp-overlay lp-layout-${layout} lp-fadein`),head=el("div","lp-head");if(copy.eyebrow&&head.append(el("p","lp-eyebrow",copy.eyebrow)),copy.code){let code=el("div","lp-code",copy.code);code.setAttribute("aria-hidden","true"),head.append(code)}let body=el("div","lp-body");if(copy.title){let h1=el("h1","lp-title");copy.code&&h1.append(el("span","lp-sr",`Error ${copy.code}: `)),h1.append(copy.title),body.append(h1)}if(copy.message&&body.append(el("p","lp-message",copy.message)),copy.actions?.length){let actions=el("div","lp-actions");for(let a of copy.actions)actions.append(buildAction(a,onNavigate));body.append(actions)}return overlay.append(head,body),overlay}export{buildAction,buildOverlay};
@@ -0,0 +1 @@
1
+ import{buildAction}from"./chunk-B2NBRLO2.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),path=()=>typeof location<"u"?location.pathname+location.search:"/missing-page";function actions(ctx,className="lp-actions"){let box=document.createElement("div");box.className=className;for(let a of ctx.copy.actions)box.append(buildAction(a,ctx.navigate));return box}function layer(ctx,className,html,vars={}){let el=document.createElement("div");el.className=className;for(let[k,v]of Object.entries(vars))el.style.setProperty(`--${k}`,String(v));return el.innerHTML=html,ctx.root.append(el),el}var sr=code=>`<span class="lp-sr">Error ${esc(code)}: </span>`;export{esc,path,actions,layer,sr};
@@ -0,0 +1,70 @@
1
+ import{buildOverlay}from"./chunk-B2NBRLO2.js";import{clamp,damp,isBrowser,rng}from"./chunk-FVGCB66F.js";import{resolve}from"./chunk-KIYSQVWX.js";var BASE_CSS=`
2
+ .lp-root{
3
+ --lp-bg:#0b0d12;--lp-fg:#f5f6f8;--lp-muted:color-mix(in srgb,var(--lp-fg) 64%,transparent);
4
+ --lp-accent:var(--lp-fg);--lp-accent-fg:var(--lp-bg);
5
+ --lp-font:"Inter","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
6
+ --lp-font-display:var(--lp-font);
7
+ --lp-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
8
+ --lp-font-serif:"Fraunces","Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
9
+ --lp-code-color:color-mix(in srgb,var(--lp-fg) 22%,transparent);
10
+ --lp-code-size:clamp(64px,23cqw,300px);--lp-code-weight:500;
11
+ --lp-title-size:clamp(22px,4.6cqw,58px);--lp-title-weight:500;
12
+ --lp-radius:999px;--lp-pad:clamp(14px,5cqw,72px);
13
+ position:relative;box-sizing:border-box;overflow:hidden;width:100%;
14
+ height:var(--lp-height,100vh);height:var(--lp-height,100dvh);
15
+ background:var(--lp-bg);color:var(--lp-fg);font-family:var(--lp-font);
16
+ isolation:isolate;container-type:size;container-name:lp;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
17
+ text-rendering:optimizeLegibility;touch-action:manipulation;
18
+ }
19
+ .lp-root *,.lp-root *::before,.lp-root *::after{box-sizing:border-box}
20
+ .lp-root [hidden]{display:none!important}
21
+ .lp-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
22
+ .lp-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
23
+ .lp-custom{position:absolute;inset:0;z-index:3}
24
+ .lp-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
25
+ justify-content:center;gap:clamp(12px,3cqh,32px);padding:var(--lp-pad) max(16px,var(--lp-pad));pointer-events:none}
26
+ .lp-overlay a,.lp-overlay button,.lp-overlay [data-lp-interactive]{pointer-events:auto}
27
+ .lp-head,.lp-body{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}
28
+ .lp-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--lp-muted)}
29
+ .lp-code{margin:0;font-family:var(--lp-font-display);font-weight:var(--lp-code-weight);font-size:var(--lp-code-size);
30
+ line-height:.86;letter-spacing:-.045em;color:var(--lp-code-color);user-select:none;white-space:nowrap}
31
+ .lp-title{margin:0;font-family:var(--lp-font-display);font-size:var(--lp-title-size);font-weight:var(--lp-title-weight);
32
+ letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
33
+ .lp-message{margin:14px 0 0;max-width:36ch;color:var(--lp-muted);font-size:clamp(12.5px,1.25cqw,16px);line-height:1.6;text-wrap:pretty}
34
+ .lp-actions{margin-top:clamp(20px,3.2cqh,32px);display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;justify-content:center}
35
+ .lp-btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;
36
+ text-decoration:none;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,box-shadow .25s}
37
+ .lp-btn--primary{padding:13px 22px;border-radius:var(--lp-radius);background:var(--lp-accent);color:var(--lp-accent-fg)}
38
+ .lp-btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--lp-accent) 60%,transparent)}
39
+ .lp-btn--secondary{padding:13px 4px;background:none;color:var(--lp-fg);border-bottom:1px solid color-mix(in srgb,var(--lp-fg) 30%,transparent);border-radius:0}
40
+ .lp-btn--secondary:hover{border-bottom-color:var(--lp-fg)}
41
+ .lp-btn svg{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
42
+ .lp-btn:hover svg[data-dir=back]{transform:translateX(-3px)}
43
+ .lp-btn:hover svg[data-dir=arrow]{transform:translate(2px,-2px)}
44
+ .lp-btn:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
45
+ .lp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
46
+
47
+ .lp-layout-split{justify-content:space-between}
48
+ .lp-layout-split .lp-head{padding-top:clamp(8px,4cqh,48px)}
49
+ .lp-layout-split .lp-body{padding-bottom:clamp(8px,3cqh,40px)}
50
+ .lp-layout-bottom{justify-content:flex-end}
51
+ .lp-layout-top{justify-content:flex-start}
52
+ .lp-layout-bottom-left{justify-content:flex-end;align-items:flex-start}
53
+ .lp-layout-bottom-left .lp-head,.lp-layout-bottom-left .lp-body,
54
+ .lp-layout-left .lp-head,.lp-layout-left .lp-body{align-items:flex-start;text-align:left}
55
+ .lp-layout-bottom-left .lp-actions,.lp-layout-left .lp-actions{justify-content:flex-start}
56
+ .lp-layout-left{align-items:flex-start;padding-left:max(16px,calc(var(--lp-pad) * 1.4))}
57
+ .lp-layout-right{align-items:flex-end}
58
+ .lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:flex-end;text-align:right}
59
+ .lp-layout-right .lp-actions{justify-content:flex-end}
60
+ .lp-layout-none .lp-head,.lp-layout-none .lp-body{display:none}
61
+ .lp-code-hidden .lp-code{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
62
+
63
+ .lp-fadein .lp-head,.lp-fadein .lp-body{animation:lp-rise 1.1s cubic-bezier(.2,.8,.2,1) both}
64
+ .lp-fadein .lp-body{animation-delay:.18s}
65
+ @keyframes lp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
66
+ @container (max-width:640px){.lp-layout-left,.lp-layout-right{align-items:center}
67
+ .lp-layout-left .lp-head,.lp-layout-left .lp-body,.lp-layout-right .lp-head,.lp-layout-right .lp-body{align-items:center;text-align:center}
68
+ .lp-layout-left .lp-actions,.lp-layout-right .lp-actions{justify-content:center}}
69
+ @media (prefers-reduced-motion:reduce){.lp-fadein .lp-head,.lp-fadein .lp-body{animation:none}.lp-btn,.lp-btn svg{transition:none}}
70
+ `,injected=new Set;function inject(key,css){if(typeof document>"u"||injected.has(key))return;if(document.querySelector(`style[data-lostpage="${key}"]`)){injected.add(key);return}let el=document.createElement("style");el.setAttribute("data-lostpage",key),el.textContent=css,document.head.appendChild(el),injected.add(key)}function injectBase(){inject("base",BASE_CSS)}function injectScene(id,css){css&&inject(`scene:${id}`,css.replace(/&/g,`.lp-s-${id}`))}function mount(target,scene,options={}){let current=null,destroyed=!1,paused=!1,opts=options,def=typeof scene=="object"?scene:null,host=typeof target=="string"?isBrowser()?document.querySelector(target):null:target,start=()=>{destroyed||!def||!host||(current?.destroy(),current=createInstance(host,def,opts),paused&&current.pause())},ready=(async()=>{if(!(!isBrowser()||!host)){if(!def){if(typeof scene=="string")throw new Error(`[lostpage] "lostpage/core" can't load "${scene}" by id. Import mount from "lostpage", or pass the scene object from "lostpage/scenes/${scene}".`);def=await scene()}start()}})();return ready.catch(e=>console.error(e)),{get root(){return current?.root??null},ready,update(next){let prev=opts;if(opts={...opts,...next},!current)return;["preset","params","motion","interactive","seed","maxDpr","overlay"].some(k=>k in next&&JSON.stringify(next[k])!==JSON.stringify(prev[k]))?start():current.refreshCopy(opts)},pause(){paused=!0,current?.pause()},resume(){paused=!1,current?.resume()},destroy(){destroyed=!0,current?.destroy(),current=null}}}function createInstance(host,def,opts){injectBase(),injectScene(def.id,def.css);let r=resolve(def,opts),root=document.createElement("div");root.className=`lp-root lp-s-${def.id} lp-p-${r.preset}${def.codeInScene?" lp-code-hidden":""}${opts.className?" "+opts.className:""}`,root.setAttribute("data-lostpage",def.id),opts.height&&root.style.setProperty("--lp-height",opts.height);let applyTheme=theme=>{for(let[k,v]of Object.entries(theme))root.style.setProperty(k.startsWith("--")?k:`--lp-${k}`,v)};applyTheme(r.theme);let stage=document.createElement("div");stage.className="lp-stage",stage.setAttribute("aria-hidden","true"),root.append(stage);let overlay=null;opts.overlay!==!1&&(overlay=buildOverlay(r.copy,def.layout,opts.onNavigate),root.append(overlay)),host.append(root);let reduceQuery=window.matchMedia?.("(prefers-reduced-motion: reduce)"),reducedMotion=opts.motion==="reduce"||opts.motion!=="full"&&!!reduceQuery?.matches,interactive=opts.interactive!==!1,maxDpr=opts.maxDpr??2,motionless=def.motion==="static"||reducedMotion&&def.motion!=="game",pointer={x:0,y:0,nx:0,ny:0,sx:0,sy:0,down:!1,inside:!1,engaged:!1},canvases=[],cleanups=[],width=0,height=0,dpr=1,quality=1,inView=!0,pageVisible=!document.hidden,pausedByUser=!1,raf=0,last=0,t=0,needsFrame=!0,instance={},failed=!1,ctx={root,stage,overlay,params:r.params,copy:r.copy,preset:r.preset,get width(){return width},get height(){return height},get dpr(){return dpr*quality},pointer,reducedMotion,interactive,random:rng(opts.seed??1337),canvas(o={}){let el=document.createElement("canvas");el.style.zIndex=String(o.z??0),stage.append(el);let mc={el,scale:o.scale??1,adaptive:!!o.adaptive};return canvases.push(mc),sizeCanvas(mc),el},on(type,fn,o){root.addEventListener(type,fn,o),cleanups.push(()=>root.removeEventListener(type,fn,o))},onWindow(type,fn,o){window.addEventListener(type,fn,o),cleanups.push(()=>window.removeEventListener(type,fn,o))},invalidate(){needsFrame=!0,!raf&&!failed&&schedule()},visible:()=>inView&&pageVisible,navigate(href,e){opts.onNavigate?opts.onNavigate(href,e??new MouseEvent("click")):location.assign(href)},cssVar:name=>getComputedStyle(root).getPropertyValue(name.startsWith("--")?name:`--lp-${name}`).trim()};function sizeCanvas(mc){let s=dpr*mc.scale*(mc.adaptive?quality:1),w=Math.max(1,Math.round(width*s)),h=Math.max(1,Math.round(height*s));(mc.el.width!==w||mc.el.height!==h)&&(mc.el.width=w,mc.el.height=h)}function measure(){let rect2=root.getBoundingClientRect();width=Math.max(1,Math.round(rect2.width)),height=Math.max(1,Math.round(rect2.height)),dpr=Math.min(window.devicePixelRatio||1,maxDpr);for(let mc of canvases)sizeCanvas(mc);try{instance.resize?.(width,height,dpr)}catch(e){fail(e)}ctx.invalidate()}if(interactive){let setPos=e=>{let rect2=root.getBoundingClientRect();pointer.x=e.clientX-rect2.left,pointer.y=e.clientY-rect2.top,pointer.nx=clamp(pointer.x/rect2.width*2-1,-1,1),pointer.ny=clamp(1-pointer.y/rect2.height*2,-1,1),pointer.engaged=!0};ctx.on("pointermove",e=>{setPos(e),pointer.inside=!0,motionless&&ctx.invalidate()}),ctx.on("pointerdown",e=>{setPos(e),pointer.down=!0,motionless&&ctx.invalidate()}),ctx.onWindow("pointerup",()=>{pointer.down=!1}),ctx.on("pointerleave",()=>{pointer.inside=!1})}function frame(now){if(raf=0,failed)return;let dt=last?Math.min((now-last)/1e3,1/20):1/60;last=now,pointer.sx=damp(pointer.sx,pointer.nx,3,dt),pointer.sy=damp(pointer.sy,pointer.ny,3,dt),motionless?(t=def.stillTime??4,pointer.sx=pointer.nx,pointer.sy=pointer.ny):t+=dt;try{instance.frame?.(t,motionless?0:dt)}catch(e){fail(e);return}motionless||govern(dt),needsFrame=!1,motionless||schedule()}function schedule(){raf||failed||pausedByUser||!(inView&&pageVisible)||motionless&&!needsFrame||(raf=requestAnimationFrame(frame))}let acc=0,frames=0,warmup=1.5;function govern(dt){if(!canvases.some(c=>c.adaptive))return;if(warmup>0){warmup-=dt;return}if(acc+=dt,frames++,acc<1)return;let avg=acc/frames;acc=0,frames=0;let next=quality;if(avg>1/45?next=Math.max(.5,quality*.85):avg<1/58&&quality<1&&(next=Math.min(1,quality*1.08)),Math.abs(next-quality)>.01){quality=next;for(let mc of canvases)mc.adaptive&&sizeCanvas(mc);instance.resize?.(width,height,dpr)}}function fail(e){failed=!0,raf&&cancelAnimationFrame(raf),raf=0,root.classList.add("lp-fallback");for(let mc of canvases)mc.el.style.display="none";console.warn(`[lostpage] scene "${def.id}" could not render, showing text only.`,e)}let io=new IntersectionObserver(entries=>{inView=entries[entries.length-1].isIntersecting,inView&&(last=0,schedule())});io.observe(root);let onVis=()=>{pageVisible=!document.hidden,pageVisible&&(last=0,schedule())};document.addEventListener("visibilitychange",onVis);let ro=new ResizeObserver(()=>measure());ro.observe(root);let rect=root.getBoundingClientRect();width=Math.max(1,Math.round(rect.width)),height=Math.max(1,Math.round(rect.height)),dpr=Math.min(window.devicePixelRatio||1,maxDpr);try{instance=def.setup(ctx)||{},instance.resize?.(width,height,dpr)}catch(e){fail(e)}return schedule(),{root,pause(){pausedByUser=!0,raf&&cancelAnimationFrame(raf),raf=0},resume(){pausedByUser=!1,last=0,schedule()},refreshCopy(next){let nr=resolve(def,next);if(applyTheme(nr.theme),overlay){let fresh=buildOverlay(nr.copy,def.layout,next.onNavigate);fresh.classList.remove("lp-fadein"),overlay.replaceWith(fresh),overlay=fresh,ctx.overlay=fresh}Object.assign(ctx.copy,nr.copy)},destroy(){raf&&cancelAnimationFrame(raf),raf=0,failed=!0,io.disconnect(),ro.disconnect(),document.removeEventListener("visibilitychange",onVis);for(let c of cleanups)c();try{instance.destroy?.()}catch{}for(let mc of canvases)mc.el.__lpgl?.getExtension("WEBGL_lose_context")?.loseContext();root.remove()}}}export{mount};