badgecraft 0.3.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/CHANGELOG.md +31 -0
  2. package/LICENSE +21 -0
  3. package/README.md +406 -0
  4. package/cli/index.mjs +143 -0
  5. package/cli/render.d.ts +20 -0
  6. package/cli/render.mjs +87 -0
  7. package/cli/studio.mjs +98 -0
  8. package/dist/badge-B-g_9WFj.d.ts +79 -0
  9. package/dist/badge-CCjUxNIG.d.cts +79 -0
  10. package/dist/chunk-3OMN635U.js +44 -0
  11. package/dist/chunk-3OMN635U.js.map +1 -0
  12. package/dist/chunk-BRT5S5PF.cjs +3418 -0
  13. package/dist/chunk-BRT5S5PF.cjs.map +1 -0
  14. package/dist/chunk-EBDSIGZR.cjs +48 -0
  15. package/dist/chunk-EBDSIGZR.cjs.map +1 -0
  16. package/dist/chunk-RRYBMB25.js +3410 -0
  17. package/dist/chunk-RRYBMB25.js.map +1 -0
  18. package/dist/cli-browser.js +526 -0
  19. package/dist/element.cjs +176 -0
  20. package/dist/element.cjs.map +1 -0
  21. package/dist/element.d.cts +31 -0
  22. package/dist/element.d.ts +31 -0
  23. package/dist/element.js +174 -0
  24. package/dist/element.js.map +1 -0
  25. package/dist/index.cjs +47 -0
  26. package/dist/index.cjs.map +1 -0
  27. package/dist/index.d.cts +58 -0
  28. package/dist/index.d.ts +58 -0
  29. package/dist/index.js +17 -0
  30. package/dist/index.js.map +1 -0
  31. package/dist/react.cjs +60 -0
  32. package/dist/react.cjs.map +1 -0
  33. package/dist/react.d.cts +29 -0
  34. package/dist/react.d.ts +29 -0
  35. package/dist/react.js +55 -0
  36. package/dist/react.js.map +1 -0
  37. package/dist/studio/assets/badge-9Zq6e9Ht.js +524 -0
  38. package/dist/studio/assets/base-ItCYnbux.css +1 -0
  39. package/dist/studio/assets/base-LFa9cTPp.js +1 -0
  40. package/dist/studio/assets/element-CCTxyf61.js +1 -0
  41. package/dist/studio/assets/index-BVuSTaz-.css +1 -0
  42. package/dist/studio/assets/index-CTTcx2pV.js +28 -0
  43. package/dist/studio/assets/option-keys-CKi71y0n.js +1 -0
  44. package/dist/studio/assets/react-Cq5Erey2.js +9 -0
  45. package/dist/studio/assets/react-DyJFYpWJ.js +1 -0
  46. package/dist/studio/assets/studio-C6plMNOe.css +1 -0
  47. package/dist/studio/assets/studio-DBcSY6tV.js +1 -0
  48. package/dist/studio/assets/style-C2sJ2Xy3.css +1 -0
  49. package/dist/studio/assets/vue-BpGwr3iF.js +1 -0
  50. package/dist/studio/element.html +31 -0
  51. package/dist/studio/env/studio.hdr +5 -0
  52. package/dist/studio/index.html +24 -0
  53. package/dist/studio/logos/apple.svg +1 -0
  54. package/dist/studio/logos/atlassian.svg +1 -0
  55. package/dist/studio/logos/google.svg +1 -0
  56. package/dist/studio/logos/meta.svg +1 -0
  57. package/dist/studio/react.html +16 -0
  58. package/dist/studio/studio.html +27 -0
  59. package/dist/studio/vue.html +15 -0
  60. package/dist/types-CHM3-ZZV.d.cts +204 -0
  61. package/dist/types-CHM3-ZZV.d.ts +204 -0
  62. package/dist/vue.cjs +93 -0
  63. package/dist/vue.cjs.map +1 -0
  64. package/dist/vue.d.cts +115 -0
  65. package/dist/vue.d.ts +115 -0
  66. package/dist/vue.js +87 -0
  67. package/dist/vue.js.map +1 -0
  68. package/docs/cli.md +146 -0
  69. package/docs/gallery.jpg +0 -0
  70. package/docs/performance.md +151 -0
  71. package/docs/render-quality.md +220 -0
  72. package/docs/studio.jpg +0 -0
  73. package/package.json +163 -0
@@ -0,0 +1 @@
1
+ :root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09090b;--surface:#111114;--surface-2:#18181c;--surface-3:#222228;--line:#ffffff14;--line-strong:#ffffff24;--text:#f4f4f5;--text-2:#b4b4bc;--muted:#85858f;--accent:#f1d38b;--accent-strong:#ffe3a1;--accent-ink:#231a06;--danger:#ff9f95;--danger-bg:#ff60501a;--radius:12px;--radius-lg:20px;--ease:cubic-bezier(.2, .8, .2, 1);--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100dvh;margin:0}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}img,svg{display:block}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:#f1d38b59}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{border:1px solid var(--line-strong);background:var(--surface-2);min-height:36px;color:var(--text);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:13.5px;font-weight:550;line-height:1;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-3);border-color:#ffffff38}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn svg{flex:none}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn-primary:hover:not(:disabled){background:var(--accent-strong);border-color:#0000}.btn-ghost{color:var(--text-2);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){color:var(--text);background:#ffffff0f;border-color:#0000}.btn-lg{border-radius:12px;min-height:46px;padding:0 20px;font-size:15px}.btn-icon{width:36px;padding:0}.kbd{font:500 11px/1 var(--mono);color:var(--muted);border:1px solid var(--line-strong);background:var(--surface);border-radius:5px;padding:3px 5px}.tabs{background:var(--surface-2);border:1px solid var(--line);scrollbar-width:none;border-radius:11px;gap:2px;max-width:100%;padding:3px;display:inline-flex;overflow-x:auto}.tab{min-height:30px;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background-color .16s var(--ease), color .16s var(--ease);background:0 0;border:0;border-radius:8px;padding:0 12px;font-size:13px;font-weight:550}.tab:hover{color:var(--text)}.tab[aria-selected=true],.tab[aria-pressed=true]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 1px #ffffff0f,0 1px 3px #0006}.code{font:12.5px/1.7 var(--mono);color:#d6d6de;tab-size:2;white-space:pre;margin:0;padding:16px 18px;overflow:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}.choice-input{opacity:0;width:100%;height:100%;cursor:inherit;z-index:1;margin:0;position:absolute;inset:0}.tab{align-items:center;gap:7px;display:inline-flex}.tab .framework-icon{opacity:.55;filter:saturate(.5);transition:opacity .16s var(--ease), filter .16s var(--ease);flex:none}.tab:hover .framework-icon,.tab[aria-selected=true] .framework-icon{opacity:1;filter:none}
@@ -0,0 +1 @@
1
+ import{i as e,n as t}from"./react-Cq5Erey2.js";import{r as n}from"./badge-9Zq6e9Ht.js";var r=`0.3.0`,i=[{id:`google`,title:`Google`,sub:`four-colour enamel · gold`,options:{svg:`./logos/google.svg`}},{id:`apple`,title:`Apple`,sub:`silver · obsidian circle`,options:{svg:`./logos/apple.svg`,metal:`silver`,frame:`circle`,base:`obsidian`}},{id:`meta`,title:`Meta`,sub:`platinum · hexagon`,options:{svg:`./logos/meta.svg`,metal:`platinum`,frame:`hexagon`}},{id:`atlassian`,title:`Atlassian`,sub:`rose gold · shield`,options:{svg:`./logos/atlassian.svg`,metal:`rose-gold`,frame:`shield`}},{id:`google-glitter`,title:`Glitter enamel`,sub:`flakes · white gold`,options:{svg:`./logos/google.svg`,enamel:`glitter`,metal:`white-gold`,frame:`circle`}},{id:`apple-chrome`,title:`Black chrome`,sub:`mirror finish · octagon`,options:{svg:`./logos/apple.svg`,metal:`black-chrome`,frame:`octagon`,base:`gunmetal`}},{id:`meta-holo`,title:`Holographic`,sub:`iridescent metal`,options:{svg:`./logos/meta.svg`,metal:`holographic`,frame:`circle`,base:`obsidian`}},{id:`atlassian-locked`,title:`Locked`,sub:`not yet earned`,options:{svg:`./logos/atlassian.svg`,frame:`hexagon`,locked:!0}}],a=t(),o={react:{color:`#61DAFB`,path:`M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z`},vue:{color:`#4FC08D`,path:`M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z`},element:{color:`#29ABE2`,path:`M11.731 2.225l-.01.016H5.618L0 11.979l5.618 9.736h12.8l.04.06 2.134-3.735.518-.893h-.008l.008-.014-.626-.75h.895l.006-.01.008.01L24 11.994l-2.607-4.39-.003.005-.011-.02h-.945l.63-.763-2.606-4.57-.006.01-.024-.04H11.73zM9.107 6.824h6.19l-.53.764h-.023l2.398 4.015h.875l-.277.328.357.435h-.956l-2.398 4.015h.027l.523.764H9.074l-2.99-5.168 3.022-5.155z`},html:{color:`#E34F26`,path:`M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z`},vanilla:{color:`#F7DF1E`,path:`M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z`}};function s({framework:e,size:t=15}){let n=o[e];return(0,a.jsx)(`svg`,{className:`framework-icon`,width:t,height:t,viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,a.jsx)(`path`,{fill:n.color,d:n.path})})}var c=e();function l(e,t){let[n,r]=(0,c.useState)(e),i=(0,c.useRef)(0);return(0,c.useEffect)(()=>{let n=Math.max(0,i.current+t-performance.now()),a=setTimeout(()=>{i.current=performance.now(),r(e)},n);return()=>clearTimeout(a)},[e,t]),n}function u(e,t){let[n,r]=(0,c.useState)(e);return(0,c.useEffect)(()=>{let n=setTimeout(()=>r(e),t);return()=>clearTimeout(n)},[e,t]),n}async function d(e,t){try{return await navigator.clipboard.writeText(e),!0}catch{if(t){let e=document.createRange();e.selectNodeContents(t);let n=getSelection();n?.removeAllRanges(),n?.addRange(e),t.focus()}return!1}}var f=typeof navigator<`u`&&/Mac|iPhone|iPad/.test(navigator.platform);function p(){window.__ready=!0}function m({children:e,...t}){return(0,a.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.8`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,focusable:`false`,...t,children:e})}var h=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M12 15V4m0 0-4 4m4-4 4 4M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3`})}),g=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M12 4v11m0 0-4-4m4 4 4-4M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3`})}),_=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`m8 7-5 5 5 5m8-10 5 5-5 5m-3-12-2 14`})}),v=e=>(0,a.jsxs)(m,{...e,children:[(0,a.jsx)(`rect`,{x:`8`,y:`8`,width:`12`,height:`12`,rx:`2.5`}),(0,a.jsx)(`path`,{d:`M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2`})]}),y=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`m5 12.5 4.5 4.5L19 7.5`})}),b=e=>(0,a.jsxs)(m,{...e,children:[(0,a.jsx)(`path`,{d:`M9 14 4 9l5-5`}),(0,a.jsx)(`path`,{d:`M4 9h10.5a5.5 5.5 0 0 1 0 11H11`})]}),x=e=>(0,a.jsxs)(m,{...e,children:[(0,a.jsx)(`path`,{d:`m15 14 5-5-5-5`}),(0,a.jsx)(`path`,{d:`M20 9H9.5a5.5 5.5 0 0 0 0 11H13`})]}),S=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M20 12a8 8 0 1 1-2.34-5.66M20 4v4h-4`})}),C=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M12 3.5 13.8 10l6.7 2-6.7 2-1.8 6.5-1.8-6.5-6.7-2 6.7-2z`})}),w=e=>(0,a.jsxs)(m,{...e,children:[(0,a.jsx)(`circle`,{cx:`12`,cy:`12`,r:`4`}),(0,a.jsx)(`path`,{d:`M12 2.5v2m0 15v2M4.6 4.6 6 6m12 12 1.4 1.4M2.5 12h2m15 0h2M4.6 19.4 6 18M18 6l1.4-1.4`})]}),T=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z`})}),E=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M6 6l12 12M18 6 6 18`})}),D=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M5 12h14m-6-6 6 6-6 6`})}),O=e=>(0,a.jsx)(m,{...e,children:(0,a.jsx)(`path`,{d:`M4 12a8 8 0 1 0 2.34-5.66M4 4v4h4`})}),k=e=>(0,a.jsxs)(m,{...e,children:[(0,a.jsx)(`rect`,{x:`6`,y:`4`,width:`12`,height:`17`,rx:`2.5`}),(0,a.jsx)(`path`,{d:`M9.5 4V3h5v1M9.5 10h5m-5 4h5`})]}),A=e=>(0,a.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,...e,children:(0,a.jsx)(`path`,{d:`M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.15-1.11-1.46-1.11-1.46-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.86v2.75c0 .27.18.58.69.48A10 10 0 0 0 12 2Z`})});function j(){return(0,a.jsxs)(`svg`,{className:`logo-glyph`,width:`22`,height:`22`,viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:[(0,a.jsx)(`defs`,{children:(0,a.jsxs)(`linearGradient`,{id:`logo-metal`,x1:`0`,y1:`0`,x2:`1`,y2:`1`,children:[(0,a.jsx)(`stop`,{offset:`0`,stopColor:`#fff6d8`}),(0,a.jsx)(`stop`,{offset:`.45`,stopColor:`#e7c46e`}),(0,a.jsx)(`stop`,{offset:`1`,stopColor:`#8a6a2a`})]})}),(0,a.jsx)(`path`,{d:`M12 1.5 21 6.75v10.5L12 22.5 3 17.25V6.75Z`,fill:`url(#logo-metal)`}),(0,a.jsx)(`path`,{d:`M12 5.2 17.8 8.6v6.8L12 18.8l-5.8-3.4V8.6Z`,fill:`#17181c`}),(0,a.jsx)(`path`,{d:`m12 8 1.2 2.6 2.8.3-2.1 1.9.6 2.8L12 14.2l-2.5 1.4.6-2.8L8 10.9l2.8-.3Z`,fill:`#f3d58a`})]})}var M=Object.keys(n),N={"black-chrome":`Black chrome`,"matte-enamel":`Matte enamel`,candy:`Candy`,holographic:`Holo`},P=e=>N[e]??(e.charAt(0).toUpperCase()+e.slice(1)).replace(/-/g,` `),F=[`gold`,`rose-gold`,`white-gold`,`silver`,`platinum`,`chrome`,`copper`,`bronze`,`brass`,`titanium`,`gunmetal`,`black-chrome`,`matte-gold`,`brushed-gold`,`brushed-silver`],I=[`enamel`,`matte-enamel`,`candy`,`glitter`,`pearl`,`holographic`],L=[`onyx`,`obsidian`,`gunmetal`,`enamel`,`pearl`,`silver`,`gold`],R=[`silver`,`gold`,`rose-gold`,`candy`,`enamel`,`chrome`,`black-chrome`],z=(e,t)=>e.includes(t)?e:[...e,t],B=`conic-gradient(from 200deg, #ff5d73, #ffb347, #c7f35b, #3fd6c6, #6e8bff, #ff5d73)`;function V(e){let t=n[e],r=t.color??`#ffffff`;return e===`holographic`?`conic-gradient(from 45deg, #f9d6ff, #bfe8ff, #d9ffd6, #fff3c4, #ffd1dc, #f9d6ff)`:e===`pearl`?`radial-gradient(circle at 32% 28%, #ffffff, #f4eee6 40%, #d9d0e6 75%, #bfc9dc)`:t.useSvgColor?`${t.flakes?`radial-gradient(circle at 30% 30%, #fff8 0 1px, transparent 2px) 0 0/6px 6px, `:``}${(t.roughness??.4)<.4?`radial-gradient(circle at 32% 26%, #ffffffb0, transparent 38%), `:``}${B}`:(t.metalness??0)>=1?`${t.brushed?`repeating-radial-gradient(circle, #ffffff14 0 1px, transparent 1px 3px), `:``}radial-gradient(circle at 32% 26%, #ffffff 0, ${r} 30%, color-mix(in oklab, ${r}, #000 45%) 78%, color-mix(in oklab, ${r}, #fff 10%) 100%)`:`radial-gradient(circle at 32% 26%, color-mix(in oklab, ${r}, #fff 35%) 0, ${r} 45%, color-mix(in oklab, ${r}, #000 30%) 100%)`}var H=[`none`,`circle`,`hexagon`,`octagon`,`shield`,`square`,`diamond`,`star`],U=[`studio`,`soft`,`sunset`,`night`,`neon`],W={studio:`linear-gradient(180deg, #8a909b, #22252c 60%, #111217)`,soft:`linear-gradient(180deg, #d9dbe0, #8a8c91 60%, #3a3a3d)`,sunset:`linear-gradient(180deg, #ffb27a, #b8536b 55%, #2a1830)`,night:`linear-gradient(180deg, #33446b, #11172a 60%, #06070c)`,neon:`linear-gradient(135deg, #ff3fa4, #5a2bff 50%, #00d4ff)`};export{f as A,O as C,b as D,w as E,i as F,r as I,u as M,l as N,h as O,s as P,x as S,S as T,g as _,W as a,T as b,F as c,z as d,D as f,v as g,_ as h,U as i,p as j,d as k,M as l,E as m,L as n,H as o,y as p,I as r,P as s,R as t,V as u,A as v,C as w,k as x,j as y};
@@ -0,0 +1 @@
1
+ import{t as e}from"./badge-9Zq6e9Ht.js";/* empty css */var t=e=>e,n=e=>e.trim()===``?void 0:Number(e),r=e=>e===`auto`?`auto`:n(e),i=e=>e!==`false`&&e!==`0`,a=e=>{try{return JSON.parse(e)}catch{return}},o=e=>e.trim().startsWith(`{`)?a(e):e,s={src:[`svg`,t],mode:[`mode`,t],metal:[`metal`,o],enamel:[`enamel`,o],base:[`base`,o],accent:[`accent`,o],color:[`color`,t],frame:[`frame`,o],rim:[`rim`,n],outline:[`outline`,r],"fill-holes":[`fillHoles`,i],relief:[`relief`,a],environment:[`environment`,o],"environment-rotation":[`environmentRotation`,n],exposure:[`exposure`,n],"tone-mapping":[`toneMapping`,t],interaction:[`interaction`,t],"tilt-max":[`tiltMax`,n],pose:[`pose`,a],idle:[`idle`,t],locked:[`locked`,i],"locked-color":[`lockedColor`,t],shadow:[`shadow`,n],quality:[`quality`,r],padding:[`padding`,n]};function c(){return class extends HTMLElement{static get observedAttributes(){return[...Object.keys(s),`alt`]}constructor(){super(),this.badge=null,this.extra={},this.generatedLabel=null,this.ready=new Promise((e,t)=>{this.readyResolve=e,this.readyReject=t});let e=this.attachShadow({mode:`open`}),t=document.createElement(`style`);t.textContent=`:host{display:inline-block;position:relative;width:160px;height:160px}:host([hidden]){display:none}div{width:100%;height:100%}`,this.container=document.createElement(`div`),this.container.setAttribute(`part`,`badge`),e.append(t,this.container),this.mutations=new MutationObserver(()=>this.sync()),this.ready.catch(()=>{})}get options(){return this.extra}set options(e){this.extra={...e},this.sync()}connectedCallback(){if(Object.prototype.hasOwnProperty.call(this,`options`)){let e=this.options;delete this.options,this.extra={...e}}if(this.hasAttribute(`role`)||this.setAttribute(`role`,`img`),this.mutations.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),!this.badge){let t=this.collect();t&&(this.badge=new e(this.container,t))}}disconnectedCallback(){this.mutations.disconnect(),queueMicrotask(()=>{!this.isConnected&&this.badge&&(this.badge.destroy(),this.badge=null)})}attributeChangedCallback(){this.sync()}spin(e){this.badge?.spin(e)}glint(){this.badge?.glint()}toDataURL(e,t){return this.badge?.toDataURL(e,t)??``}toBlob(e,t){return this.badge?.toBlob(e,t)??Promise.resolve(null)}sync(){if(!this.isConnected)return;let t=this.collect();if(!t){this.badge?.destroy(),this.badge=null;return}this.badge?this.badge.setOptions(t):this.badge=new e(this.container,t)}collect(){let e=this.getAttribute(`alt`),t=this.getAttribute(`aria-label`);(t===null||t===this.generatedLabel)&&(e!==t&&(e===null?this.removeAttribute(`aria-label`):this.setAttribute(`aria-label`,e)),this.generatedLabel=e);let n={};for(let[e,[t,r]]of Object.entries(s)){let i=this.getAttribute(e);if(i!==null){let e=r(i);e!==void 0&&!(typeof e==`number`&&Number.isNaN(e))&&(n[t]=e)}}if(Object.assign(n,this.extra),n.svg===void 0){let e=this.querySelector(`svg`),t=this.querySelector(`template`);e?n.svg=new XMLSerializer().serializeToString(e):t&&(n.svg=t.innerHTML.trim())}return n.svg===void 0?null:(n.onReady=()=>{this.readyResolve(),this.dispatchEvent(new CustomEvent(`ready`)),this.extra.onReady?.()},n.onError=e=>{this.readyReject(e),this.dispatchEvent(new CustomEvent(`error`,{detail:e})),this.extra.onError?.(e)},n)}}}function l(e=`badge-craft`){if(typeof customElements>`u`)return;let t=customElements.get(e);if(t)return t;let n=c();return customElements.define(e,n),n}l();var u=[...document.querySelectorAll(`badge-craft`)];Promise.all(u.map(e=>e.ready)).then(()=>window.__ready=!0);
@@ -0,0 +1 @@
1
+ .container{width:min(1180px,100% - 48px);margin-inline:auto}html{scroll-behavior:smooth;scroll-padding-top:80px}.site-header{z-index:10;-webkit-backdrop-filter:saturate(1.4)blur(18px);backdrop-filter:saturate(1.4)blur(18px);border-bottom:1px solid var(--line);background:#09090bb8;position:sticky;top:0}.site-header-inner{justify-content:space-between;align-items:center;height:64px;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:9px;font-size:15.5px;font-weight:650;text-decoration:none;display:inline-flex}.site-nav{align-items:center;gap:4px;display:flex}.site-nav>a:not(.btn){color:var(--text-2);transition:color .16s var(--ease);border-radius:8px;padding:8px 12px;font-size:14px;text-decoration:none}.site-nav>a:not(.btn):hover{color:var(--text)}.site-nav .btn{margin-left:8px}.site-nav-icon{place-items:center;display:grid}.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:48px;padding:72px 0 88px;display:grid}.eyebrow{color:var(--accent);background:#f1d38b14;border:1px solid #f1d38b33;border-radius:999px;align-items:center;gap:7px;margin:0 0 22px;padding:5px 11px;font-size:12.5px;font-weight:600;display:inline-flex}.hero h1{letter-spacing:-.045em;text-wrap:balance;margin:0;font-size:clamp(40px,5.6vw,68px);font-weight:700;line-height:1.02}.hero-lede{max-width:520px;color:var(--text-2);text-wrap:pretty;margin:22px 0 0;font-size:18px;line-height:1.55}.hero-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px;display:flex}.hero-meta{color:var(--muted);margin:16px 0 0;font-size:13px}.install-chip{cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);height:46px;color:var(--text-2);transition:border-color .16s var(--ease), color .16s var(--ease);border-radius:12px;align-items:center;gap:10px;padding:0 16px;display:inline-flex}.install-chip:hover{color:var(--text);border-color:#ffffff3d}.install-chip code{font:13.5px var(--mono);color:var(--text)}.install-prompt{font:13.5px var(--mono);color:var(--muted)}.hero-visual{justify-items:center;gap:18px;display:grid;position:relative}.hero-glow{filter:blur(10px);pointer-events:none;background:radial-gradient(closest-side,#f1d38b29,#0000);border-radius:50%;position:absolute;inset:4% 8% 22%}.hero-badge{aspect-ratio:1;width:min(100%,460px);position:relative}.hero-finishes{text-align:center;border:0;min-width:0;margin:0;padding:0}.hero-finishes legend{color:var(--muted);margin:0 auto 10px;padding:0;font-size:12.5px}.hero-finishes>div{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.finish-chip{cursor:pointer;height:34px;color:var(--text-2);border:1px solid var(--line-strong);background:var(--surface);transition:border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);border-radius:999px;align-items:center;gap:8px;padding:0 13px 0 8px;font-size:13px;font-weight:550;display:inline-flex;position:relative}.finish-chip:hover{color:var(--text)}.finish-chip:has(input:checked){color:var(--text);border-color:var(--accent);background:#f1d38b14}.finish-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.finish-dot{border-radius:50%;width:18px;height:18px;box-shadow:inset 0 0 0 1px #ffffff26}.section{border-top:1px solid var(--line);padding:88px 0}.section-head{max-width:620px;margin-bottom:40px}.section-head h2{letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:680;line-height:1.1}.section-head p{color:var(--text-2);text-wrap:pretty;margin:14px 0 0;font-size:16.5px;line-height:1.6}.text-link{color:var(--accent);align-items:center;gap:6px;margin-top:28px;font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex}.text-link:hover{color:var(--accent-strong)}.text-link svg{transition:transform .16s var(--ease)}.text-link:hover svg{transform:translate(3px)}.steps{grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;display:grid}.step-card{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);padding:24px}.step-card-top{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.step-card-icon{width:38px;height:38px;color:var(--accent);background:#f1d38b1a;border-radius:11px;place-items:center;display:grid}.step-card-number{font:600 13px var(--mono);color:var(--muted)}.step-card h3{letter-spacing:-.02em;margin:0;font-size:17px}.step-card p{color:var(--text-2);margin:8px 0 0;font-size:14.5px;line-height:1.6}.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.gallery-card{border-radius:var(--radius-lg);background:linear-gradient(180deg, var(--surface), #0d0d10);border:1px solid var(--line);transition:border-color .2s var(--ease), transform .2s var(--ease);gap:14px;padding:18px 18px 20px;text-decoration:none;display:grid;position:relative}.gallery-card:hover{border-color:#f1d38b59}.gallery-card:focus-visible{outline-offset:3px}.gallery-art{aspect-ratio:1;width:min(100%,220px);margin:0 auto;position:relative}.gallery-placeholder{object-fit:contain;opacity:.18;filter:grayscale()brightness(2);width:56%;height:56%;transition:opacity .3s var(--ease);position:absolute;inset:22%}.gallery-art.is-ready .gallery-placeholder{opacity:0}.gallery-text{text-align:center;gap:2px;display:grid}.gallery-title{letter-spacing:-.01em;font-size:15px;font-weight:600}.gallery-sub{color:var(--muted);font-size:13px}.gallery-cta{color:var(--accent-ink);background:var(--accent);opacity:0;transition:opacity .18s var(--ease), transform .18s var(--ease);border-radius:999px;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;top:14px;right:14px;transform:translateY(-3px)}.gallery-card:hover .gallery-cta,.gallery-card:focus-visible .gallery-cta{opacity:1;transform:none}@media (hover:none){.gallery-cta{opacity:1;transform:none}}.code-section{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:56px;display:grid}.code-section .section-head{margin:0}.facts{color:var(--text-2);gap:10px;margin:24px 0 0;padding:0;font-size:14.5px;list-style:none;display:grid}.facts li{align-items:center;gap:10px;display:flex}.facts svg{color:#8fd694;flex:none}.code-card{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);min-width:0;overflow:hidden}.code-card-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:8px;padding:10px 10px 10px 12px;display:flex}.code-card-install{border-bottom:1px solid var(--line);font:12.5px var(--mono);color:var(--accent);align-items:center;gap:8px;padding:12px 18px;display:flex}.code-card .code{min-height:200px}.final{text-align:center;border:1px solid var(--line);background:radial-gradient(70% 90% at 50% 0%, #f1d38b1f, transparent 70%), var(--surface);border-radius:28px;justify-items:center;gap:14px;margin-block:24px 72px;padding:96px 24px;display:grid}.final h2{letter-spacing:-.04em;text-wrap:balance;margin:0;font-size:clamp(28px,4vw,44px);line-height:1.08}.final p{color:var(--text-2);margin:0 0 14px;font-size:16.5px}.site-footer{border-top:1px solid var(--line)}.site-footer-inner{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding:28px 0 40px;font-size:13.5px;display:flex}.site-footer .brand{color:var(--text);font-size:14px}.footer-version{font:12px var(--mono);color:var(--muted);font-weight:400}.site-footer nav{flex-wrap:wrap;gap:6px 20px;display:flex}.site-footer nav a{color:var(--text-2);text-decoration:none}.site-footer nav a:hover{color:var(--text)}@media (width<=960px){.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 0 64px}.hero-copy{text-align:center;justify-items:center;display:grid}.hero-actions{justify-content:center}.hero-badge{width:min(100%,360px)}.steps{grid-template-columns:minmax(0,1fr)}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.code-section{grid-template-columns:minmax(0,1fr);gap:32px}.section{padding:64px 0}}@media (width<=600px){.container{width:calc(100% - 32px)}.site-nav>a:not(.btn):not(.site-nav-icon){display:none}.hero-lede{font-size:16.5px}.hero-actions{flex-direction:column;align-items:stretch;width:100%}.install-chip{justify-content:center}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-card{padding:12px 10px 14px}.gallery-sub,.gallery-cta{display:none}.code .code,.code-card .code{font-size:11.5px}.final{padding:64px 20px}}
@@ -0,0 +1,28 @@
1
+ import{i as e,n as t,r as n,t as r}from"./react-Cq5Erey2.js";import"./badge-9Zq6e9Ht.js";import{F as i,I as a,O as o,P as s,_ as c,f as l,g as u,h as d,j as f,k as p,p as m,s as h,u as g,v as _,w as v,y}from"./base-LFa9cTPp.js";var b=n(),x=e(),S=t(),C=`https://github.com/ParthJadhav/badgecraft`,w=`npm install badgecraft`;function T(){return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(E,{}),(0,S.jsxs)(`main`,{children:[(0,S.jsx)(O,{}),(0,S.jsx)(j,{}),(0,S.jsx)(M,{}),(0,S.jsx)(F,{}),(0,S.jsx)(I,{})]}),(0,S.jsx)(L,{})]})}function E(){return(0,S.jsx)(`header`,{className:`site-header`,children:(0,S.jsxs)(`div`,{className:`container site-header-inner`,children:[(0,S.jsxs)(`a`,{className:`brand`,href:`./index.html`,children:[(0,S.jsx)(y,{}),(0,S.jsx)(`span`,{className:`brand-name`,children:`badgecraft`})]}),(0,S.jsxs)(`nav`,{className:`site-nav`,"aria-label":`Main`,children:[(0,S.jsx)(`a`,{href:`#examples`,children:`Examples`}),(0,S.jsx)(`a`,{href:`#code`,children:`Docs`}),(0,S.jsx)(`a`,{href:C,className:`site-nav-icon`,"aria-label":`GitHub repository`,children:(0,S.jsx)(_,{})}),(0,S.jsx)(`a`,{className:`btn btn-primary`,href:`./studio.html`,children:`Open Studio`})]})]})})}var D=[`gold`,`silver`,`rose-gold`,`black-chrome`];function O(){let[e,t]=(0,x.useState)(`gold`);return(0,S.jsxs)(`section`,{className:`hero container`,"aria-labelledby":`hero-title`,children:[(0,S.jsxs)(`div`,{className:`hero-copy`,children:[(0,S.jsxs)(`p`,{className:`eyebrow`,children:[(0,S.jsx)(v,{width:13,height:13}),` Free & open source`]}),(0,S.jsx)(`h1`,{id:`hero-title`,children:`Turn any SVG into a badge worth\xA0earning.`}),(0,S.jsx)(`p`,{className:`hero-lede`,children:`Drop in an icon, logo, or illustration. Get a real-time 3D enamel pin that catches the light. Download it as a PNG, or ship it in your app with one component.`}),(0,S.jsxs)(`div`,{className:`hero-actions`,children:[(0,S.jsxs)(`a`,{className:`btn btn-primary btn-lg`,href:`./studio.html`,children:[`Design your badge `,(0,S.jsx)(l,{})]}),(0,S.jsx)(k,{})]}),(0,S.jsx)(`p`,{className:`hero-meta`,children:`No sign-up. Your artwork never leaves your browser.`})]}),(0,S.jsxs)(`div`,{className:`hero-visual`,children:[(0,S.jsx)(`div`,{className:`hero-glow`,"aria-hidden":`true`}),(0,S.jsx)(`div`,{className:`hero-badge`,children:(0,S.jsx)(r,{svg:`./logos/google.svg`,metal:e,interaction:`drag`,idle:`float`,size:`100%`,alt:`Google logo badge in ${h(e).toLowerCase()}`,onReady:f})}),(0,S.jsxs)(`fieldset`,{className:`hero-finishes`,children:[(0,S.jsx)(`legend`,{children:`Try a finish · drag the badge to spin it`}),(0,S.jsx)(`div`,{children:D.map(n=>(0,S.jsxs)(`label`,{className:`finish-chip`,children:[(0,S.jsx)(`input`,{type:`radio`,name:`hero-metal`,value:n,checked:e===n,onChange:()=>t(n),className:`choice-input`}),(0,S.jsx)(`span`,{className:`finish-dot`,style:{background:g(n)},"aria-hidden":`true`}),h(n)]},n))})]})]})]})}function k(){let[e,t]=(0,x.useState)(!1);return(0,x.useEffect)(()=>{if(!e)return;let n=setTimeout(()=>t(!1),1600);return()=>clearTimeout(n)},[e]),(0,S.jsxs)(`button`,{type:`button`,className:`install-chip`,onClick:async()=>t(await p(w)),"aria-label":e?`Install command copied`:`Copy “${w}”`,children:[(0,S.jsx)(`span`,{className:`install-prompt`,"aria-hidden":`true`,children:`$`}),(0,S.jsx)(`code`,{children:w}),e?(0,S.jsx)(m,{width:14,height:14}):(0,S.jsx)(u,{width:14,height:14})]})}var A=[{icon:(0,S.jsx)(o,{width:18,height:18}),title:`Bring your artwork`,text:`Any SVG works: flat icons, outlined logos, full-colour illustrations. Colours become enamel, lines become metal wire.`},{icon:(0,S.jsx)(v,{width:18,height:18}),title:`Pick a finish`,text:`Fifteen metals, six enamels, eight frames. Every change renders live, and every change can be undone.`},{icon:(0,S.jsx)(c,{width:18,height:18}),title:`Take it anywhere`,text:`Download a transparent PNG up to 2048 px, or copy working code for React, Vue, Web Components, or plain HTML.`}];function j(){return(0,S.jsxs)(`section`,{className:`section container`,"aria-labelledby":`steps-title`,children:[(0,S.jsxs)(`div`,{className:`section-head`,children:[(0,S.jsx)(`h2`,{id:`steps-title`,children:`Three steps. About a minute.`}),(0,S.jsx)(`p`,{children:`The Studio walks you through it. No design or 3D skills needed.`})]}),(0,S.jsx)(`ol`,{className:`steps`,children:A.map((e,t)=>(0,S.jsxs)(`li`,{className:`step-card`,children:[(0,S.jsxs)(`div`,{className:`step-card-top`,children:[(0,S.jsx)(`span`,{className:`step-card-icon`,children:e.icon}),(0,S.jsxs)(`span`,{className:`step-card-number`,children:[`0`,t+1]})]}),(0,S.jsx)(`h3`,{children:e.title}),(0,S.jsx)(`p`,{children:e.text})]},e.title))}),(0,S.jsxs)(`a`,{className:`text-link`,href:`./studio.html`,children:[`Open the Studio `,(0,S.jsx)(l,{width:14,height:14})]})]})}function M(){return(0,S.jsxs)(`section`,{className:`section container`,id:`examples`,"aria-labelledby":`gallery-title`,children:[(0,S.jsxs)(`div`,{className:`section-head`,children:[(0,S.jsx)(`h2`,{id:`gallery-title`,children:`Made from ordinary SVGs`}),(0,S.jsx)(`p`,{children:`Hover to tilt. Pick any badge to use it as your starting point.`})]}),(0,S.jsx)(`ul`,{className:`gallery`,children:i.map(e=>(0,S.jsx)(`li`,{children:(0,S.jsx)(N,{sample:e})},e.id))})]})}function N({sample:e}){let t=(0,x.useRef)(null),[n,i]=(0,x.useState)(!1),[a,o]=(0,x.useState)(!1);(0,x.useEffect)(()=>{let e=t.current;if(!e)return;let n=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(i(!0),n.disconnect())},{rootMargin:`240px 0px`});return n.observe(e),()=>n.disconnect()},[]);let s={...e.options,interaction:`tilt`};return(0,S.jsxs)(`a`,{ref:t,className:`gallery-card`,href:`./studio.html?sample=${encodeURIComponent(e.id)}`,"aria-label":`Customize ${e.title} in the Studio`,children:[(0,S.jsxs)(`div`,{className:a?`gallery-art is-ready`:`gallery-art`,children:[(0,S.jsx)(`img`,{className:`gallery-placeholder`,src:e.options.svg,alt:``,width:`120`,height:`120`,loading:`lazy`,decoding:`async`}),n&&(0,S.jsx)(r,{...s,size:`100%`,style:{position:`absolute`,inset:0},alt:e.title,onReady:()=>o(!0)})]}),(0,S.jsxs)(`div`,{className:`gallery-text`,children:[(0,S.jsx)(`span`,{className:`gallery-title`,children:e.title}),(0,S.jsx)(`span`,{className:`gallery-sub`,children:e.sub})]}),(0,S.jsxs)(`span`,{className:`gallery-cta`,"aria-hidden":`true`,children:[`Customize `,(0,S.jsx)(l,{width:13,height:13})]})]})}var P={react:{label:`React`,file:`Award.tsx`,code:`import { Badgecraft } from 'badgecraft/react'
2
+
3
+ export function Award() {
4
+ return (
5
+ <Badgecraft
6
+ svg="/award.svg"
7
+ metal="gold"
8
+ size={200}
9
+ alt="Top contributor"
10
+ />
11
+ )
12
+ }`},vue:{label:`Vue`,file:`Award.vue`,code:`<script setup>
13
+ import { Badgecraft } from 'badgecraft/vue'
14
+ <\/script>
15
+
16
+ <template>
17
+ <Badgecraft
18
+ svg="/award.svg"
19
+ metal="gold"
20
+ :size="200"
21
+ alt="Top contributor"
22
+ />
23
+ </template>`},element:{label:`Web Component`,file:`index.html`,code:`<script type="module">
24
+ import 'badgecraft/element'
25
+ <\/script>
26
+
27
+ <badge-craft src="/award.svg" metal="gold" alt="Top contributor"
28
+ style="width:200px;height:200px"></badge-craft>`},html:{label:`No build`,file:`index.html`,code:`<script type="module"\n src="https://cdn.jsdelivr.net/npm/badgecraft@${a}/dist/element.js"><\/script>\n\n<badge-craft src="/award.svg" metal="gold" alt="Top contributor"\n style="width:200px;height:200px"></badge-craft>`}};function F(){let[e,t]=(0,x.useState)(`react`),[n,r]=(0,x.useState)(!1),i=P[e];return(0,x.useEffect)(()=>{if(!n)return;let e=setTimeout(()=>r(!1),1600);return()=>clearTimeout(e)},[n]),(0,S.jsxs)(`section`,{className:`section container code-section`,id:`code`,"aria-labelledby":`code-title`,children:[(0,S.jsxs)(`div`,{className:`section-head`,children:[(0,S.jsx)(`h2`,{id:`code-title`,children:`One component in your app`}),(0,S.jsx)(`p`,{children:`Works with React, Vue, Svelte, Angular, Astro, or no framework at all. Every badge on a page shares one WebGL context, and it falls back to flat artwork where WebGL isn't available.`}),(0,S.jsxs)(`ul`,{className:`facts`,children:[(0,S.jsxs)(`li`,{children:[(0,S.jsx)(m,{width:14,height:14}),` Respects reduced motion`]}),(0,S.jsxs)(`li`,{children:[(0,S.jsx)(m,{width:14,height:14}),` Pauses animation when off-screen`]}),(0,S.jsxs)(`li`,{children:[(0,S.jsx)(m,{width:14,height:14}),` Export PNGs from the command line too`]})]}),(0,S.jsxs)(`a`,{className:`text-link`,href:`${C}#readme`,children:[`Read the docs `,(0,S.jsx)(l,{width:14,height:14})]})]}),(0,S.jsxs)(`div`,{className:`code-card`,children:[(0,S.jsxs)(`div`,{className:`code-card-head`,children:[(0,S.jsx)(`div`,{className:`tabs`,role:`tablist`,"aria-label":`Framework`,children:Object.keys(P).map(n=>(0,S.jsxs)(`button`,{type:`button`,role:`tab`,id:`snippet-${n}`,className:`tab`,"aria-selected":n===e,"aria-controls":`snippet-panel`,onClick:()=>t(n),children:[(0,S.jsx)(s,{framework:n}),P[n].label]},n))}),(0,S.jsx)(`button`,{type:`button`,className:`btn btn-ghost btn-icon`,onClick:async()=>r(await p(i.code)),"aria-label":n?`Copied`:`Copy code`,children:n?(0,S.jsx)(m,{}):(0,S.jsx)(u,{})})]}),(0,S.jsxs)(`div`,{className:`code-card-install`,children:[(0,S.jsx)(d,{width:14,height:14}),` `,e===`html`?`No install. Paste into any page.`:w]}),(0,S.jsx)(`pre`,{className:`code`,id:`snippet-panel`,role:`tabpanel`,"aria-labelledby":`snippet-${e}`,tabIndex:0,children:i.code})]})]})}function I(){return(0,S.jsxs)(`section`,{className:`final container`,"aria-labelledby":`final-title`,children:[(0,S.jsx)(`h2`,{id:`final-title`,children:`Your artwork, crafted into a badge.`}),(0,S.jsx)(`p`,{children:`Open the Studio, drop in an SVG, and have a badge in under a minute.`}),(0,S.jsxs)(`a`,{className:`btn btn-primary btn-lg`,href:`./studio.html`,children:[`Design your badge `,(0,S.jsx)(l,{})]})]})}function L(){return(0,S.jsx)(`footer`,{className:`site-footer`,children:(0,S.jsxs)(`div`,{className:`container site-footer-inner`,children:[(0,S.jsxs)(`span`,{className:`brand`,children:[(0,S.jsx)(y,{}),` badgecraft `,(0,S.jsxs)(`span`,{className:`footer-version`,children:[`v`,a]})]}),(0,S.jsxs)(`nav`,{"aria-label":`Footer`,children:[(0,S.jsx)(`a`,{href:`./studio.html`,children:`Studio`}),(0,S.jsx)(`a`,{href:`./react.html`,children:`React demo`}),(0,S.jsx)(`a`,{href:`./vue.html`,children:`Vue demo`}),(0,S.jsx)(`a`,{href:`./element.html`,children:`Web Component demo`}),(0,S.jsx)(`a`,{href:C,children:`GitHub`}),(0,S.jsx)(`a`,{href:`https://www.npmjs.com/package/badgecraft`,children:`npm`})]}),(0,S.jsx)(`span`,{className:`footer-note`,children:`MIT licensed`})]})})}(0,b.createRoot)(document.getElementById(`root`)).render((0,S.jsx)(x.StrictMode,{children:(0,S.jsx)(T,{})}));
@@ -0,0 +1 @@
1
+ var e=`svg.mode.metal.enamel.base.accent.color.frame.rim.outline.fillHoles.relief.environment.environmentRotation.exposure.toneMapping.interaction.tiltMax.pose.idle.locked.lockedColor.shadow.quality.padding.onReady.onError`.split(`.`),t=new Set(e);function n(t){let n={};for(let r of e)t[r]!==void 0&&(n[r]=t[r]);return n}function r(e,t=160){let n=e??t;return typeof n==`number`?`${n}px`:n}export{t as n,n as r,r as t};