import{a as e,l as t}from"./preact.module-CNakwbc9.js";import{a as n,d as r,i,l as a,s as o,t as s}from"./hooks.module-BrXTvcfS.js";import{a as c}from"./i18n-BaLR3UdQ.js";import{p as l,t as u}from"./compat.module-C8KToj4y.js";import{t as d}from"./jsxRuntime.module-Cao1NCKs.js";import{j as f,o as p}from"./hooks-ClTXKdUl.js";import{t as m}from"./debounce-Fqb6O6Tb.js";import{t as h}from"./NoItems-ZA3b1X1n.js";l(),r(),t();function g({className:t,title:r,css:i,cssVars:a,bodyClassName:c,children:l}){let f=s(null),[m,h]=o(null),g=p(),v=()=>{let e=f.current?.contentDocument?.body;e&&h(e)};return n(v,[]),n(()=>{let e=m?.ownerDocument;if(!e)return;let t=e.getElementById(`isolated-frame-style`);t||(t=e.createElement(`style`),t.id=`isolated-frame-style`,e.head.appendChild(t)),t.textContent=`:root { color-scheme: ${g}; }\n${_(a)}${i??``}`},[i,a,g,m]),n(()=>{m&&(m.className=c??``)},[c,m]),d(e,{children:[d(`iframe`,{ref:f,className:t,title:r,onLoad:v}),m&&u(l,m)]})}function _(e){if(!e?.length)return``;let t=getComputedStyle(document.documentElement),n=e.map(e=>[e,t.getPropertyValue(e).trim()]).filter(([,e])=>e).map(([e,t])=>`${e}: ${t};`).join(` `);return n?`:root { ${n} }\n`:``}var v=`/*
 * Styles for the isolated icon-pack preview iframe. Imported as a raw string (\`?raw\`) and combined
 * with the dynamically generated @font-face in IconPack.tsx, then injected into the frame's <head> —
 * it is intentionally NOT a side-effect import, so these rules never touch the host document.
 *
 * The \`.ip-glyph\` font family must match PREVIEW_FONT_FAMILY in IconPackPreview.tsx.
 * The CSS variables used here should be present in the PREVIEW_CSS_VARS array in IconPackPreview.tsx.
 */

html,
body {
    margin: 0;
    height: 100%;
    user-select: none;
    /* Read-only previews (collection tiles) are clipped; interactive mode scrolls (see below). */
    overflow: hidden;
}

body {
    color: var(--main-text-color, #000);
    padding: 0;
    box-sizing: border-box;
}

body.interactive {
    overflow: auto;
    padding: 20px;
}

.ip-grid {
    --icon-size: 24px;
    --icon-size-ratio: .85;

    display: grid;
    grid-template-columns: repeat(auto-fill, var(--icon-size));
    gap: 8px;
    justify-content: start;
}

body.interactive .ip-grid {
    --icon-size: 48px;
    --icon-size-ratio: .75;
}

.ip-cell {
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: default;
    /* Skip layout/paint for off-screen cells so large packs stay responsive. */
    content-visibility: auto;
    contain-intrinsic-size: var(--icon-size) var(--icon-size);
}

/* Hover highlight only in interactive mode (off for read-only content-renderer previews). */
body.interactive .ip-cell:hover {
    background: var(--hover-item-background-color, rgba(127, 127, 127, 0.2));
    color: var(--hover-item-text-color);
    transform: scale(1.5);
    transition: transform 200ms ease-in-out,
                background 150ms ease-in-out;
}

.ip-glyph {
    font-family: "tn-icon-pack-preview";
    font-size: calc(var(--icon-size) * var(--icon-size-ratio));
    line-height: 1;
}

.ip-count {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: sans-serif;
    background: var(--accented-background-color, gray);
    font-size: .85rem;
}

body.interactive .ip-count {
    position: fixed;
    right: 16px;
    bottom: 8px;
}`;r();var y=1500,b=250,x=[`--main-text-color`,`--hover-item-background-color`,`--hover-item-text-color`,`--accented-background-color`];function S({note:e,content:t,interactive:n=!0}){let[r]=f(e,`iconPack`),a=r??e.getLabelValue(`disabled:iconPack`),o=A(t,y),s=D(e),l=i(()=>w(o),[o]),u=i(()=>k(s),[s]);if(!l.ok)return d(`div`,{className:`icon-pack-preview`,children:d(h,{icon:`bx bx-error-circle`,text:c(`icon_pack.invalid_manifest`)})});if(!o.trim())return d(`div`,{className:`icon-pack-preview`});if(!l.icons.length)return d(`div`,{className:`icon-pack-preview`,children:d(h,{icon:`bx bx-images`,text:c(`icon_pack.no_icons`)})});let p=n?l.icons:l.icons.slice(0,b);return d(g,{className:`icon-pack-frame`,title:c(`icon_pack.preview_title`),css:u,cssVars:x,bodyClassName:n?`interactive`:void 0,children:[d(`div`,{className:`ip-grid`,children:p.map(e=>d(`div`,{className:`ip-cell`,title:n?C(a,e):void 0,children:d(`span`,{className:`ip-glyph`,children:e.glyph})},e.id))}),d(`div`,{className:`ip-count`,children:c(`icon_pack.count`,{count:l.icons.length})})]})}function C(e,t){let n=e?`${e} ${t.id}`:t.id,r=t.glyph.codePointAt(0);return c(`icon_pack.tooltip`,{class:n,code:r==null?``:`\\${r.toString(16)}`,terms:t.terms.join(`, `)})}function w(e){if(!e.trim())return{ok:!0,icons:[]};let t;try{t=JSON.parse(e)}catch{return{ok:!1}}let n=t?.icons;return!n||typeof n!=`object`?{ok:!1}:{ok:!0,icons:Object.entries(n).map(([e,t])=>{let n=t;return{id:e,glyph:typeof n?.glyph==`string`?T(n.glyph):``,terms:Array.isArray(n?.terms)?n.terms.filter(e=>typeof e==`string`):[]}})}}function T(e){let t=e.match(/^\\u?([0-9a-fA-F]{2,6})$/);if(t){let e=parseInt(t[1],16);if(!Number.isNaN(e)&&e<=1114111)return String.fromCodePoint(e)}return e}var E={"font/woff2":`woff2`,"font/woff":`woff`,"font/ttf":`truetype`};function D(e){let[t,n]=o(null);return a(()=>{let t=!1;return e.getAttachmentsByRole(`file`).then(e=>{if(t)return;let r=Object.keys(E).map(t=>e.find(e=>e.mime===t)).find(Boolean);n(r?{url:new URL(`api/attachments/download/${r.attachmentId}`,document.baseURI).href,format:E[r.mime]}:null)}).catch(()=>{t||n(null)}),()=>{t=!0}},[e]),t}var O=`tn-icon-pack-preview`;function k(e){return`${e?`@font-face { font-family: "${O}"; src: url("${e.url}") format("${e.format}"); font-display: block; }`:``}\n${v}`}function A(e,t){let[n,r]=o(e),s=i(()=>m(r,t),[t]);return a(()=>(s(e),s.clear),[e,s]),n}export{w as n,T as r,S as t};