tlp-icons 0.1.1 → 0.3.0

package/README.md

@@ -13,25 +13,40 @@
   <a href="https://github.com/Tamer-Mansour/tlp-icons">GitHub</a>
 </p>
 
+<!-- badges:start -->
 <p align="center">
-  <img alt="icons" src="https://img.shields.io/badge/icons-6%2C620-4f46e5">
-  <img alt="animated" src="https://img.shields.io/badge/animated-100%25-4f46e5">
-  <img alt="license" src="https://img.shields.io/badge/license-MIT-16a34a">
-  <img alt="dependencies" src="https://img.shields.io/badge/dependencies-0-0ea5e9">
+  <a href="https://www.npmjs.com/package/tlp-icons"><img alt="npm version" src="https://img.shields.io/npm/v/tlp-icons?color=4f46e5"></a>
+  <a href="https://www.npmjs.com/package/tlp-icons"><img alt="npm downloads" src="https://img.shields.io/npm/dm/tlp-icons?color=4f46e5"></a>
+  <a href="#bundle-size"><img alt="element size" src="https://img.shields.io/badge/element-6.6%20KB%20gzip-16a34a"></a>
+  <a href="https://github.com/Tamer-Mansour/tlp-icons/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Tamer-Mansour/tlp-icons/actions/workflows/ci.yml/badge.svg"></a>
+  <a href="https://github.com/Tamer-Mansour/tlp-icons/blob/main/LICENSE"><img alt="license" src="https://img.shields.io/npm/l/tlp-icons?color=16a34a"></a>
+  <img alt="icons" src="https://img.shields.io/badge/icons-7%2C677-4f46e5">
 </p>
+<!-- badges:end -->
 
-A free, open-source (MIT) library of 6,620 stroke icons, built from the best free sets (Lucide and Tabler) plus
-our own **tlp originals**, sorted into 35 hand-curated categories, including **376 brand logos** (Facebook,
+A free, open-source (MIT) library of <!--s:icons-->7,677<!--/s--> stroke icons, built from the best free sets (Lucide and Tabler) plus
+our own **tlp originals**, sorted into <!--s:categories-->35<!--/s--> hand-curated categories, including **<!--s:brands-->376<!--/s--> brand logos** (Facebook,
 Instagram, WhatsApp, X, TikTok, YouTube...). Every single one moves on hover: clock hands sweep around the face,
 gears spin on their axle, bells swing from the top, trash lids lift, arrows move the way they point.
 
+<table>
+<tr>
+<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/hover.gif" width="420" alt="Hovering a button plays its icon"><br><sub>Hover a button, its icon plays</sub></td>
+<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/loop.gif" width="420" alt="Loaders with trigger=loop"><br><sub><code>trigger="loop"</code></sub></td>
+</tr>
+<tr>
+<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/rtl.gif" width="420" alt="The same arrow in LTR and RTL with flip=rtl"><br><sub><code>flip="rtl"</code> mirrors the icon and its motion</sub></td>
+<td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/duotone.gif" width="420" alt="Icons without and with duotone"><br><sub><code>duotone</code> adds a soft tinted body</sub></td>
+</tr>
+</table>
+
 [![tlp-icons website](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/website.png)](https://tlp-icons.netlify.app)
 
 <table><tr>
 <td><a href="https://tlp-icons.netlify.app/categories/legal/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/category.png" alt="Legal category page"></a></td>
 <td><a href="https://tlp-icons.netlify.app/icons/courthouse/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/icon-page.png" alt="Icon page with live playground and code"></a></td>
 </tr><tr>
-<td align="center">Category pages (legal: 120 icons)</td>
+<td align="center">Category pages (legal: <!--s:cat.legal-->1,177<!--/s--> icons)</td>
 <td align="center">One page per icon: playground + code</td>
 </tr></table>
 
@@ -41,15 +56,15 @@ gears spin on their axle, bells swing from the top, trash lids lift, arrows move
 ![Frame strips](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/frame-strips.png)
 </details>
 
-- **6,620 icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
-- **100% animated**: 300+ hand-made choreographies, plus a motion engine that reads each icon's geometry.
-- **Deep fields**: we draw our own icons where the free sets stop. Legal went from 18 to 120 first; the
+- **<!--s:icons-->7,677<!--/s--> icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
+- **100% animated**: <!--s:handmade-->1,496<!--/s--> hand-made choreographies, plus a motion engine that reads each icon's geometry.
+- **Deep fields**: we draw our own icons where the free sets stop. Legal went from 18 to <!--s:cat.legal-->1,177<!--/s--> first; the
   [roadmap](https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md) takes it to 1,180 and the whole library to 26,000.
-- **Brand logos**: 376 brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
+- **Brand logos**: <!--s:brands-->376<!--/s--> brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
 - **Tiny runtime**: one custom element, `<tlp-icon>`. Works in plain HTML, React, Angular, Vue, Svelte...
-- **Lazy**: icons load per category, so a page that uses 10 icons doesn't download 6,000.
+- **Lazy**: icons load per category, so a page that uses 10 icons doesn't download all <!--s:icons-->7,677<!--/s-->.
 - **Polite motion**: plays once to the end, never animates a whole card at once, respects `prefers-reduced-motion`.
-- **Works offline**: the gallery opens straight from disk, and the build never needs the network.
+- **Works offline**: one classic script with every icon (in `tlp-icons-data`) runs from `file://`, and the build never needs the network.
 
 ## Install
 
@@ -64,10 +79,12 @@ Or with no build step, from a CDN:
 <tlp-icon name="bell"></tlp-icon>
 ```
 
-Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about 2.2 MB):
+Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about 2.3 MB,
+390 KB gzip). Since 0.2.0 it ships in the [`tlp-icons-data`](packages/tlp-icons-data) package:
 
 ```html
-<script src="node_modules/tlp-icons/dist/tlp-icons.all.js"></script>
+<script src="node_modules/tlp-icons-data/tlp-icons.all.js"></script>
+<!-- or https://cdn.jsdelivr.net/npm/tlp-icons-data/tlp-icons.all.js -->
 <tlp-icon name="bell"></tlp-icon>
 ```
 
@@ -104,39 +121,179 @@ exactly one icon (a button, a menu item) and animates that icon. If it reaches a
 (a card, a menu, a table row), nothing animates. So hovering a button animates its icon, while a big card never
 lights up all its icons at once.
 
-### React
+## Framework recipes
 
-```jsx
-import 'tlp-icons/element';
+Copy-paste setups. Every snippet below is a real file in [`test/recipes/`](test/recipes) that the test suite
+compiles with that framework's own compiler (TypeScript, `vue/compiler-sfc`, `svelte/compiler`,
+`@astrojs/compiler`), so they stay correct.
+
+`import 'tlp-icons/element'` is safe during server rendering: on the server it registers nothing and never touches
+the DOM.
+
+### React 18: the wrapper
 
-export function SaveButton() {
-  return <button><tlp-icon name="save" /> Save</button>;
+React 18 turns boolean props into strings and can't set custom element properties, so use the tiny optional
+wrapper (`react` is an optional peer dependency and is never bundled):
+
+<!-- recipe:react18/Toolbar.tsx -->
+```tsx
+import { TlpIcon } from 'tlp-icons/react';
+
+export function Toolbar() {
+  return (
+    <nav>
+      <button type="button">
+        <TlpIcon name="bell" /> Alerts
+      </button>
+      <TlpIcon name="loader-circle" trigger="loop" aria-label="Loading" />
+      <TlpIcon name="heart" size={32} duotone className="like" />
+    </nav>
+  );
 }
 ```
+<!-- /recipe -->
+
+### React 19: the tag directly
+
+React 19 supports custom elements natively. `tlp-icons/jsx` types the tag (`name` is required, `trigger` and
+`flip` are checked):
+
+<!-- recipe:react19/Toolbar.tsx -->
+```tsx
+import 'tlp-icons/element';
+import 'tlp-icons/jsx'; // types <tlp-icon> in JSX
+
+export function Toolbar() {
+  return (
+    <nav>
+      <button type="button">
+        <tlp-icon name="bell" /> Alerts
+      </button>
+      <tlp-icon name="loader-circle" trigger="loop" aria-label="Loading" />
+      <tlp-icon name="heart" size={32} duotone className="like" />
+    </nav>
+  );
+}
+```
+<!-- /recipe -->
+
+### Next.js (App Router)
 
-React 19 supports custom elements directly. For TypeScript JSX, declare `tlp-icon` in `JSX.IntrinsicElements`.
+Put the element behind one small client component and use it from server components. Server rendering outputs the
+tag; the browser upgrades it.
 
-### Angular
+<!-- recipe:nextjs/app/components/Icon.tsx -->
+```tsx
+'use client';
+// app/components/Icon.tsx - use <Icon name="bell" /> from any server or client component.
+// The import is safe during server rendering (it registers the element only in the browser).
+import 'tlp-icons/element';
+import 'tlp-icons/jsx';
+
+export function Icon(props: { name: string; size?: number; trigger?: 'hover' | 'loop' | 'click' | 'none'; duotone?: boolean }) {
+  return <tlp-icon {...props} />;
+}
+```
+<!-- /recipe -->
 
+### Angular 17+ (standalone)
+
+<!-- recipe:angular/toolbar.component.ts -->
 ```ts
-// main.ts
+// toolbar.component.ts (Angular 17+, standalone)
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import 'tlp-icons/element';
 
-// component
-@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<tlp-icon name="bell"></tlp-icon>` })
+@Component({
+  selector: 'app-toolbar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <button type="button"><tlp-icon name="bell"></tlp-icon> Alerts</button>
+    <tlp-icon [attr.name]="icon" trigger="loop"></tlp-icon>
+  `,
+})
+export class ToolbarComponent {
+  icon = 'loader-circle';
+}
 ```
+<!-- /recipe -->
+
+### Vue 3 + Vite
 
-### Vue
+Tell Vue that `tlp-icon` is a custom element, then use it in any template:
+
+<!-- recipe:vue/vite.config.ts,vue/App.vue -->
+`vite.config.ts`
 
 ```ts
-// main.ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'tlp-icon' } } }),
+  ],
+});
+```
+
+`App.vue`
+
+```vue
+<script setup>
+import { ref } from 'vue';
 import 'tlp-icons/element';
-// vite.config.ts -> vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'tlp-icon' } } })
+
+const done = ref(false);
+</script>
+
+<template>
+  <button type="button" @click="done = !done">
+    <tlp-icon :name="done ? 'circle-check' : 'circle'" duotone></tlp-icon>
+    {{ done ? 'Done' : 'Mark done' }}
+  </button>
+</template>
 ```
+<!-- /recipe -->
 
-```html
-<tlp-icon name="bell" />
+### SvelteKit
+
+<!-- recipe:sveltekit/+page.svelte -->
+```svelte
+<script>
+  import { onMount } from 'svelte';
+
+  // load the element in the browser only (SvelteKit renders on the server first)
+  onMount(() => import('tlp-icons/element'));
+</script>
+
+<button type="button">
+  <tlp-icon name="bell"></tlp-icon> Alerts
+</button>
+<tlp-icon name="loader-circle" trigger="loop"></tlp-icon>
 ```
+<!-- /recipe -->
+
+### Astro
+
+<!-- recipe:astro/index.astro -->
+```astro
+---
+// src/pages/index.astro
+const icon = 'bell';
+---
+<button type="button">
+  <tlp-icon name={icon}></tlp-icon> Alerts
+</button>
+<tlp-icon name="loader-circle" trigger="loop"></tlp-icon>
+
+<script>
+  // Astro bundles and runs this in the browser
+  import 'tlp-icons/element';
+</script>
+```
+<!-- /recipe -->
 
 ### Raw data and SVG strings (Node / SSR)
 
@@ -151,6 +308,51 @@ icons.bell;                                    // { svg, m: [[part, anim, dur, d
 
 Importing `icons` pulls in the whole set. For pages, use `<tlp-icon>`, which loads one category chunk at a time.
 
+**One category only:** import a category chunk directly and skip the manifest entirely:
+
+```js
+import legal from 'tlp-icons/icons/legal.js';   // { 'courthouse': { svg, m }, ... }
+import { register } from 'tlp-icons/element';
+register(legal);                                // <tlp-icon name="courthouse"> now renders with no lookup
+```
+
+### Full dataset: `tlp-icons-data`
+
+Every icon's SVG, motion, category, tags and source in one JSON file (3.4 MB) ships as a separate package, so
+`npm install tlp-icons` stays small:
+
+```bash
+npm install tlp-icons-data
+```
+
+```js
+import data from 'tlp-icons-data' with { type: 'json' };   // bundlers: import data from 'tlp-icons-data'
+data.icons.bell;        // { category, source, tags, svg, m }
+```
+
+It replaces the old `tlp-icons/data` export (removed in 0.2.0). Typed (`TlpIconsData`).
+
+## Bundle size
+
+Measured on every build (minified, gzip level 9) and written to `dist/size-report.json`. The build fails if the
+element core goes over 8 KB gzip or the manifest over 15 KB gzip.
+
+<!-- sizes:start -->
+| What | Minified | Gzip |
+| --- | ---: | ---: |
+| element core (tlp-icon + core + element) | 22.5 KB | **6.6 KB** |
+| manifest | 23.3 KB | **12.0 KB** |
+| smallest category chunk (science.js) | 11.3 KB | **3.4 KB** |
+| largest category chunk (legal.js) | 388.0 KB | **78.2 KB** |
+| all icons, offline bundle (tlp-icons.all.js) | 2608.1 KB | **457.1 KB** |
+| stylesheet (tlp-icons.css) | 11.6 KB | **2.4 KB** |
+<!-- sizes:end -->
+
+What a page actually downloads: the element core, the manifest, then **one chunk per category it uses**. A page
+with a few interface and arrow icons loads about <!--s:size.0.gzip-->6.6 KB<!--/s--> + <!--s:size.1.gzip-->12.0 KB<!--/s-->
+plus those two chunks. Import a chunk directly (`tlp-icons/icons/<category>.js`) to skip the manifest. The
+stylesheet is injected by the element; `tlp-icons/css` is there if you prefer a `<link>`.
+
 ## Website
 
 **https://tlp-icons.netlify.app** is built with **Next.js (React)** in `web/` and runs on the **published npm
@@ -161,7 +363,7 @@ pre-rendered static HTML for search engines, and the whole site is about 45 MB:
 | --- | --- |
 | Home | `/` |
 | Icon gallery (search, filters, size / stroke / color / duotone) | `/icons/` |
-| One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (6,620 pages) |
+| One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (<!--s:icons-->7,677<!--/s--> pages) |
 | Categories, one page each, including Brands | `/categories/`, `/categories/<id>/` |
 | Documentation with live examples and the animation library | `/docs/` |
 | Roadmap with live progress | `/roadmap/` |
@@ -178,7 +380,7 @@ Netlify runs the same steps (see `netlify.toml`) and publishes `web/out` on ever
 After publishing a new tlp-icons version to npm, run `npm install tlp-icons@latest` in `web/` and redeploy.
 For a manual deploy, drag the `web/out` folder onto the site's **Deploys** tab in Netlify.
 
-**Offline use:** `dist/tlp-icons.all.js` is a single classic script with every icon; it works from `file://`
+**Offline use:** `tlp-icons-data/tlp-icons.all.js` is a single classic script with every icon; it works from `file://`
 with no server and no internet.
 
 ## How it works
@@ -201,7 +403,7 @@ npm run test:browser   optional Playwright tests + frame strips (npm run setup:b
 - `scripts/adapters/`: one adapter per icon source (`latest`, `fetch`, `load`). Add a set by adding an adapter.
 - `scripts/engine/`: SVG parsing, geometry, the motion engine and serialisation.
 - `src/runtime/`: `core.js` (registry, baking, run engine, hover rule), `element.js` (`<tlp-icon>`) and
-  `tlp-icons.css` (the 34 `tlp-` keyframes).
+  `tlp-icons.css` (the <!--s:animations-->66<!--/s--> `tlp-` keyframes).
 
 **Motion engine.** Every icon is split into atoms (one per element or sub-path) and measured. Then:
 
@@ -230,11 +432,18 @@ Every motion is small and springy and ends exactly at rest. The default `speed`
 - Wrong category: add a name pattern or an explicit entry in `config/categories.json`.
 - Run `npm run build && npm test` before opening a PR.
 
-The GitHub Actions (CI and upstream sync) are manual: run them from the Actions tab when needed.
+See [CONTRIBUTING.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/CONTRIBUTING.md) for the full workflow
+and the release process, and [CHANGELOG.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/CHANGELOG.md) for
+what changed in each version.
 
 ## License
 
 MIT © tlp-icons contributors. Icon geometry from [Lucide](https://lucide.dev) (ISC) and
 [Tabler Icons](https://tabler.io/icons) (MIT), plus tlp originals (MIT). See [NOTICE.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/NOTICE.md) and `licenses/`.
 
-Brand logos are trademarks of their respective owners and are included only to identify their products.
+### Trademarks
+
+The <!--s:brands-->376<!--/s--> brand icons (the Brands category, names starting with `brand-`) are provided for
+referential, nominative use only: to identify a product or service, for example a "Sign in with GitHub" button or a
+list of supported platforms. The logos remain the property of their respective owners, and their inclusion does not
+imply any affiliation with or endorsement by those owners. Follow each owner's brand guidelines when you use them.

package/dist/core.js

@@ -1,185 +1,3 @@
-/* tlp-icons 0.1.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
-/* tlp-icons runtime core: icon registry, choreography baking, run engine and the hover rule.
-   Plain ES module without imports so the build can also wrap it into a classic <script> bundle. */
-
-export const config = { speed: 0.6 };
-
-const OUT = 'cubic-bezier(.22,1,.36,1)';
-const TURN = 'cubic-bezier(.65,0,.35,1)';
-const SINE = 'cubic-bezier(.45,.05,.55,.95)';
-export const EASE = {
-  draw: 'cubic-bezier(.65,.05,.36,1)', fillIn: 'ease', popIn: OUT, fadeIn: 'ease', slideIn: OUT, riseIn: OUT, dropIn: OUT,
-  grow: OUT, growX: OUT, spin: TURN, spinBack: TURN, spinHalf: TURN, sweep: TURN, sweepHour: TURN, orbit: TURN,
-};
-
-const NS = 'http://www.w3.org/2000/svg';
-const DRAWABLE = 'path,circle,rect,line,polyline,polygon,ellipse';
-const registry = Object.create(null);
-const aliases = Object.create(null);
-let loader = null;
-
-/** Adds icons: { name: { svg, m } }. */
-const waiting = Object.create(null);
-export function register(icons, aliasMap) {
-  for (const k in icons) registry[k] = icons[k];
-  if (aliasMap) for (const k in aliasMap) aliases[k] = aliasMap[k];
-  for (const k in waiting) {
-    const icon = getIcon(k);
-    if (icon) { waiting[k].forEach(fn => fn(icon)); delete waiting[k]; }
-  }
-}
-export function setLoader(fn) { loader = fn; }
-export function resolve(name) { return registry[name] ? name : aliases[name] || name; }
-export function getIcon(name) { return registry[resolve(name)] || null; }
-/** Resolves with the icon data. Without a loader it waits for a later register() (classic script bundles). */
-export function loadIcon(name) {
-  const icon = getIcon(name);
-  if (icon) return Promise.resolve(icon);
-  if (loader) return Promise.resolve(loader(resolve(name))).then(() => getIcon(name));
-  return new Promise(res => { (waiting[name] = waiting[name] || []).push(res); });
-}
-
-/** Scaled timing of every step and the total length in ms. */
-export function timings(icon, speed = config.speed) {
-  let total = 0;
-  const steps = (icon.m || []).map(([part, anim, dur, delay, origin]) => {
-    const t = Math.round(dur * speed), dl = Math.round((delay || 0) * speed);
-    total = Math.max(total, t + dl);
-    return { part, anim, t, dl, origin };
-  });
-  return { steps, total };
-}
-
-const varsOf = s => {
-  const v = { '--a': `tlp-${s.anim}`, '--t': `${s.t}ms`, '--dl': `${s.dl}ms`, '--e': EASE[s.anim] || SINE };
-  if (s.origin) v['--o'] = s.origin;
-  return v;
-};
-const clsOf = s => `p${s.origin && /px/.test(s.origin) ? ' vb' : ''}${s.anim === 'sweepHour' ? ' hh' : ''}`;
-const hasClass = (cls, part) => (` ${cls} `).indexOf(` ${part} `) >= 0;
-
-/** Builds a live <svg> element (CSP friendly: CSS variables are set through the CSSOM). */
-export function createSvg(icon, doc = document) {
-  const svg = doc.createElementNS(NS, 'svg');
-  svg.setAttribute('viewBox', '0 0 24 24');
-  svg.setAttribute('class', 'tlp');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.setAttribute('focusable', 'false');
-  svg.innerHTML = icon.svg;
-  const { steps, total } = timings(icon);
-  svg.dataset.total = String(total);
-  for (const s of steps) {
-    let targets;
-    if (s.part === 'all') {
-      const g = doc.createElementNS(NS, 'g');
-      while (svg.firstChild) g.appendChild(svg.firstChild);
-      svg.appendChild(g);
-      targets = [g];
-    } else {
-      targets = Array.prototype.filter.call(svg.querySelectorAll('[class]'), el => hasClass(el.getAttribute('class'), s.part));
-    }
-    const vars = varsOf(s);
-    for (const el of targets) {
-      el.setAttribute('class', `${el.getAttribute('class') || ''} ${clsOf(s)}`.trim());
-      for (const k in vars) el.style.setProperty(k, vars[k]);
-    }
-  }
-  svg.querySelectorAll(DRAWABLE).forEach(el => el.setAttribute('pathLength', '1'));
-  return svg;
-}
-
-/** Static or animated SVG markup string (animated markup uses inline style for the CSS variables). */
-export function toSvgString(icon, opts = {}) {
-  const sw = opts.stroke ?? 2, size = opts.size ?? 24;
-  const head = `<svg xmlns="${NS}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"`;
-  if (!opts.animated) {
-    const clean = icon.svg.replace(/ class="([^"]*)"/g, (_, c) => {
-      const keep = c.split(/\s+/).filter(x => x === 'd' || x === 'f');
-      return keep.length ? ` class="${keep.join(' ')}"` : '';
-    });
-    const duo = opts.duotone ? '<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>' : '<style>.f{fill:currentColor}</style>';
-    return `${head}>${clean.includes('class="') ? duo : ''}${clean}</svg>`;
-  }
-  let inner = icon.svg;
-  const { steps, total } = timings(icon);
-  for (const s of steps) {
-    const style = Object.entries(varsOf(s)).map(([k, v]) => `${k}:${v}`).join(';');
-    if (s.part === 'all') { inner = `<g class="${clsOf(s)}" style="${style}">${inner}</g>`; continue; }
-    inner = inner.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${s.part}\\b[^"]*)"`, 'g'), (_, tag, pre, c) => `<${tag}${pre} class="${c} ${clsOf(s)}" style="${style}"`);
-  }
-  inner = inner.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g, '<$1 pathLength="1"');
-  return `${head} class="tlp" data-tlp-icon data-total="${total}">${inner}</svg>`;
-}
-
-const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-/** Plays an icon's choreography once. It always finishes, even if the pointer leaves. */
-export function run(svg, delay = 0) {
-  if (!svg || svg._tlpBusy || reduced()) return false;
-  svg._tlpBusy = true;
-  const go = () => {
-    svg.classList.remove('tlp-run');
-    void svg.getBoundingClientRect();
-    svg.classList.add('tlp-run');
-    setTimeout(() => {
-      svg.querySelectorAll('.hh').forEach(h => h.style.setProperty('--h0', `${(parseFloat(h.style.getPropertyValue('--h0')) || 0) + 30}deg`));
-      svg.classList.remove('tlp-run');
-      svg._tlpBusy = false;
-    }, (+svg.dataset.total || 0) + 40);
-  };
-  if (delay) setTimeout(go, delay); else go();
-  return true;
-}
-
-export const ICON_SELECTOR = 'tlp-icon,svg[data-tlp-icon]';
-const HOST = 'button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea';
-
-function svgOf(icon) { return icon.tagName.toLowerCase() === 'svg' ? icon : icon.querySelector('svg.tlp'); }
-function triggerOf(icon) { return icon.getAttribute('trigger') || icon.getAttribute('data-trigger') || 'hover'; }
-
-/**
- * Hover rule: hovering an icon animates it. Otherwise walk up to the nearest element that contains exactly one
- * icon and animate that one. If an element with several icons is reached first (card, menu, table row), do nothing.
- */
-export function hoverTarget(target) {
-  let el = target && target.nodeType === 1 ? target : target && target.parentElement;
-  if (!el) return null;
-  const own = el.closest(ICON_SELECTOR);
-  if (own) return own.closest('tlp-icon') || own;
-  for (let depth = 0; el && el.nodeType === 1 && el !== el.ownerDocument.body && depth < 8; depth++, el = el.parentElement) {
-    const list = el.querySelectorAll(ICON_SELECTOR);
-    let n = 0, found = null;
-    for (const i of list) { if (i.tagName.toLowerCase() === 'svg' && i.closest('tlp-icon')) continue; n++; found = i; }
-    if (n > 1) return null;
-    if (n === 1) return { icon: found, scope: el };
-    if (el.matches(HOST)) return null;
-  }
-  return null;
-}
-
-let hoverInstalled = false;
-export function installHover(doc = document) {
-  if (hoverInstalled) return;
-  hoverInstalled = true;
-  doc.addEventListener('mouseover', e => {
-    const hit = hoverTarget(e.target);
-    if (!hit) return;
-    const icon = hit.icon || hit;
-    const scope = hit.scope || icon;
-    if (scope.contains(e.relatedTarget)) return;
-    if (triggerOf(icon) !== 'hover') return;
-    run(svgOf(icon));
-  }, true);
-}
-
-let styleInjected = false;
-export const CSS = "tlp-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tlp-size,24px);height:var(--tlp-size,24px);line-height:0;vertical-align:middle;color:inherit}tlp-icon>svg,svg.tlp{width:100%;height:100%}svg.tlp{fill:none;stroke:currentColor;stroke-width:var(--tlp-stroke,2);stroke-linecap:round;stroke-linejoin:round;overflow:visible}svg.tlp .d{fill:currentColor;fill-opacity:var(--tlp-duo,0)}tlp-icon[duotone],.tlp-duotone{--tlp-duo:.16}tlp-icon[duotone=false]{--tlp-duo:0}svg.tlp .f{fill:currentColor}svg.tlp .p{transform-box:fill-box;transform-origin:var(--o,center)}svg.tlp .p.vb{transform-box:view-box}svg.tlp .p.hh{transform:rotate(var(--h0,0deg))}svg.tlp.tlp-run .p{animation:var(--a) var(--t,1000ms) var(--e,cubic-bezier(.45,.05,.55,.95)) var(--dl,0ms) 1 both}tlp-icon[flip=x]>svg,[dir=rtl] tlp-icon[flip=rtl]>svg{transform:scaleX(-1)}@keyframes tlp-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes tlp-fillIn{0%{fill-opacity:0}100%{fill-opacity:var(--tlp-duo,0)}}@keyframes tlp-popIn{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes tlp-slideIn{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}@keyframes tlp-riseIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-dropIn{0%{opacity:0;transform:translateY(-5px)}60%{opacity:1;transform:translateY(.8px)}80%{transform:translateY(-.3px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-grow{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}@keyframes tlp-growX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes tlp-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}68%{transform:scale(.97)}86%{transform:scale(1.02)}}@keyframes tlp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes tlp-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}}@keyframes tlp-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(13deg)}32%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}}@keyframes tlp-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}@keyframes tlp-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}72%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}@keyframes tlp-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}75%{transform:rotate(-1.5deg)}}@keyframes tlp-strike{0%,100%{transform:rotate(0)}38%{transform:rotate(-24deg)}56%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}84%{transform:rotate(.6deg)}}@keyframes tlp-hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}40%{transform:translateY(-3px) scale(.97,1.04)}68%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(0) scale(.99,1.01)}}@keyframes tlp-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5px)}75%{transform:translateY(.4px)}}@keyframes tlp-sink{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}75%{transform:translateY(-.4px)}}@keyframes tlp-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}75%{transform:translateX(-.4px)}}@keyframes tlp-nudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.6px)}75%{transform:translateX(.4px)}}@keyframes tlp-float{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1.2px)}}@keyframes tlp-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}@keyframes tlp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-spinBack{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@keyframes tlp-spinHalf{0%{transform:rotate(0)}80%{transform:rotate(188deg)}100%{transform:rotate(180deg)}}@keyframes tlp-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-sweepHour{0%{transform:rotate(var(--h0,0deg))}100%{transform:rotate(calc(var(--h0,0deg) + 30deg))}}@keyframes tlp-blink{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}60%{transform:scaleY(1)}}@keyframes tlp-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.6px)}36%{transform:translateX(1.4px)}54%{transform:translateX(-1px)}72%{transform:translateX(.6px)}88%{transform:translateX(-.2px)}}@keyframes tlp-pulseRing{0%,100%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}56%{opacity:0;transform:scale(.6)}}@keyframes tlp-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.12)}75%{transform:scaleX(.98)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";
-export function ensureStyles(doc = document) {
-  if (styleInjected || !doc || !doc.head) return;
-  styleInjected = true;
-  if (doc.getElementById('tlp-icons-style') || CSS.length < 20) return;
-  const style = doc.createElement('style');
-  style.id = 'tlp-icons-style';
-  style.textContent = CSS;
-  doc.head.appendChild(style);
-}
+/* tlp-icons 0.3.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
+const z={speed:.6},i="cubic-bezier(.22,1,.36,1)",d="cubic-bezier(.65,0,.35,1)",O="cubic-bezier(.45,.05,.55,.95)",L={draw:"cubic-bezier(.65,.05,.36,1)",fillIn:"ease",popIn:i,fadeIn:"ease",slideIn:i,riseIn:i,dropIn:i,grow:i,growX:i,spin:d,spinBack:d,spinHalf:d,sweep:d,sweepHour:d,orbit:d,launch:"cubic-bezier(.4,.1,.5,.95)",roll:"cubic-bezier(.5,.05,.4,1)"},x="http://www.w3.org/2000/svg",h=()=>typeof document>"u"?null:document,j="path,circle,rect,line,polyline,polygon,ellipse",Y=Object.create(null),w=Object.create(null);let b=null;const m=Object.create(null);function q(t,r){for(const e in t)Y[e]=t[e];if(r)for(const e in r)w[e]=r[e];for(const e in m){const a=k(e);a&&(m[e].forEach(n=>n(a)),delete m[e])}}function M(t){if(b=t,!!t)for(const r in m)Promise.resolve(t(v(r))).then(()=>{const e=m[r];if(!e)return;delete m[r];const a=k(r);e.forEach(n=>n(a))},()=>{})}function v(t){return Y[t]?t:w[t]||t}function k(t){return Y[v(t)]||null}function D(t){const r=k(t);return r?Promise.resolve(r):b?Promise.resolve(b(v(t))).then(()=>k(t)):new Promise(e=>{(m[t]=m[t]||[]).push(e)})}function $(t,r=z.speed){let e=0;return{steps:(t.m||[]).map(([n,s,l,f,o])=>{const c=Math.round(l*r),p=Math.round((f||0)*r);return e=Math.max(e,c+p),{part:n,anim:s,t:c,dl:p,origin:o}}),total:e}}const I=t=>{const r={"--a":`tlp-${t.anim}`,"--t":`${t.t}ms`,"--dl":`${t.dl}ms`,"--e":L[t.anim]||O};return t.origin&&(r["--o"]=t.origin),r},X=t=>`p${t.origin&&/px/.test(t.origin)?" vb":""}${t.anim==="sweepHour"?" hh":""}`,B=(t,r)=>` ${t} `.indexOf(` ${r} `)>=0;function U(t,r=h()){if(!r)return null;const e=r.createElementNS(x,"svg");e.setAttribute("viewBox","0 0 24 24"),e.setAttribute("class","tlp"),e.setAttribute("aria-hidden","true"),e.setAttribute("focusable","false"),e.innerHTML=t.svg;const{steps:a,total:n}=$(t);e.dataset.total=String(n);for(const s of a){let l;if(s.part==="all"){const o=r.createElementNS(x,"g");for(;e.firstChild;)o.appendChild(e.firstChild);e.appendChild(o),l=[o]}else l=Array.prototype.filter.call(e.querySelectorAll("[class]"),o=>B(o.getAttribute("class"),s.part));const f=I(s);for(const o of l){o.setAttribute("class",`${o.getAttribute("class")||""} ${X(s)}`.trim());for(const c in f)o.style.setProperty(c,f[c])}}return e.querySelectorAll(j).forEach(s=>s.setAttribute("pathLength","1")),e}function F(t,r={}){const e=r.stroke??2,a=r.size??24,n=`<svg xmlns="${x}" width="${a}" height="${a}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${e}" stroke-linecap="round" stroke-linejoin="round"`;if(!r.animated){const o=t.svg.replace(/ class="([^"]*)"/g,(p,y)=>{const g=y.split(/\s+/).filter(u=>u==="d"||u==="f");return g.length?` class="${g.join(" ")}"`:""}),c=r.duotone?"<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>":"<style>.f{fill:currentColor}</style>";return`${n}>${o.includes('class="')?c:""}${o}</svg>`}let s=t.svg;const{steps:l,total:f}=$(t);for(const o of l){const c=Object.entries(I(o)).map(([p,y])=>`${p}:${y}`).join(";");if(o.part==="all"){s=`<g class="${X(o)}" style="${c}">${s}</g>`;continue}s=s.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${o.part}\\b[^"]*)"`,"g"),(p,y,g,u)=>`<${y}${g} class="${u} ${X(o)}" style="${c}"`)}return s=s.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g,'<$1 pathLength="1"'),`${n} class="tlp" data-tlp-icon data-total="${f}">${s}</svg>`}const T=()=>typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches;function H(t,r=0){if(!t||t._tlpBusy||T())return!1;t._tlpBusy=!0;const e=()=>{t.classList.remove("tlp-run"),t.getBoundingClientRect(),t.classList.add("tlp-run"),setTimeout(()=>{t.querySelectorAll(".hh").forEach(a=>a.style.setProperty("--h0",`${(parseFloat(a.style.getPropertyValue("--h0"))||0)+30}deg`)),t.classList.remove("tlp-run"),t._tlpBusy=!1},(+t.dataset.total||0)+40)};return r?setTimeout(e,r):e(),!0}const C="tlp-icon,svg[data-tlp-icon]",N="button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea";function P(t){return t.tagName.toLowerCase()==="svg"?t:t.querySelector("svg.tlp")}function R(t){return t.getAttribute("trigger")||t.getAttribute("data-trigger")||"hover"}function _(t){let r=t&&t.nodeType===1?t:t&&t.parentElement;if(!r)return null;const e=r.closest(C);if(e)return e.closest("tlp-icon")||e;for(let a=0;r&&r.nodeType===1&&r!==r.ownerDocument.body&&a<8;a++,r=r.parentElement){const n=r.querySelectorAll(C);let s=0,l=null;for(const f of n)f.tagName.toLowerCase()==="svg"&&f.closest("tlp-icon")||(s++,l=f);if(s>1)return null;if(s===1)return{icon:l,scope:r};if(r.matches(N))return null}return null}let S=!1;function V(t=h()){S||!t||(S=!0,t.addEventListener("mouseover",r=>{const e=_(r.target);if(!e)return;const a=e.icon||e;(e.scope||a).contains(r.relatedTarget)||R(a)==="hover"&&H(P(a))},!0))}let A=!1;const E="tlp-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tlp-size,24px);height:var(--tlp-size,24px);line-height:0;vertical-align:middle;color:inherit}tlp-icon>svg,svg.tlp{width:100%;height:100%}svg.tlp{fill:none;stroke:currentColor;stroke-width:var(--tlp-stroke,2);stroke-linecap:round;stroke-linejoin:round;overflow:visible}svg.tlp .d{fill:currentColor;fill-opacity:var(--tlp-duo,0)}tlp-icon[duotone],.tlp-duotone{--tlp-duo:.16}tlp-icon[duotone=false]{--tlp-duo:0}svg.tlp .f{fill:currentColor}svg.tlp .p{transform-box:fill-box;transform-origin:var(--o,center)}svg.tlp .p.vb{transform-box:view-box}svg.tlp .p.hh{transform:rotate(var(--h0,0deg))}svg.tlp.tlp-run .p{animation:var(--a) var(--t,1000ms) var(--e,cubic-bezier(.45,.05,.55,.95)) var(--dl,0ms) 1 both}tlp-icon[flip=x]>svg,[dir=rtl] tlp-icon[flip=rtl]>svg{transform:scaleX(-1)}@keyframes tlp-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes tlp-fillIn{0%{fill-opacity:0}100%{fill-opacity:var(--tlp-duo,0)}}@keyframes tlp-popIn{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes tlp-slideIn{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}@keyframes tlp-riseIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-dropIn{0%{opacity:0;transform:translateY(-5px)}60%{opacity:1;transform:translateY(.8px)}80%{transform:translateY(-.3px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-grow{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}@keyframes tlp-growX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes tlp-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}68%{transform:scale(.97)}86%{transform:scale(1.02)}}@keyframes tlp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes tlp-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}}@keyframes tlp-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(13deg)}32%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}}@keyframes tlp-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}@keyframes tlp-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}72%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}@keyframes tlp-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}75%{transform:rotate(-1.5deg)}}@keyframes tlp-strike{0%,100%{transform:rotate(0)}38%{transform:rotate(-24deg)}56%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}84%{transform:rotate(.6deg)}}@keyframes tlp-hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}40%{transform:translateY(-3px) scale(.97,1.04)}68%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(0) scale(.99,1.01)}}@keyframes tlp-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5px)}75%{transform:translateY(.4px)}}@keyframes tlp-sink{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}75%{transform:translateY(-.4px)}}@keyframes tlp-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}75%{transform:translateX(-.4px)}}@keyframes tlp-nudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.6px)}75%{transform:translateX(.4px)}}@keyframes tlp-float{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1.2px)}}@keyframes tlp-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}@keyframes tlp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-spinBack{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@keyframes tlp-spinHalf{0%{transform:rotate(0)}80%{transform:rotate(188deg)}100%{transform:rotate(180deg)}}@keyframes tlp-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-sweepHour{0%{transform:rotate(var(--h0,0deg))}100%{transform:rotate(calc(var(--h0,0deg) + 30deg))}}@keyframes tlp-blink{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}60%{transform:scaleY(1)}}@keyframes tlp-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.6px)}36%{transform:translateX(1.4px)}54%{transform:translateX(-1px)}72%{transform:translateX(.6px)}88%{transform:translateX(-.2px)}}@keyframes tlp-pulseRing{0%,100%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}56%{opacity:0;transform:scale(.6)}}@keyframes tlp-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.12)}75%{transform:scaleX(.98)}}@keyframes tlp-buzz{0%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-.9px,.4px) rotate(-3deg)}16%{transform:translate(.9px,-.4px) rotate(3deg)}24%{transform:translate(-.8px,.4px) rotate(-2.6deg)}32%{transform:translate(.8px,-.3px) rotate(2.6deg)}40%{transform:translate(-.6px,.3px) rotate(-2deg)}48%{transform:translate(.6px,-.2px) rotate(2deg)}58%{transform:translate(-.4px,.2px) rotate(-1.2deg)}68%{transform:translate(.3px,-.1px) rotate(1deg)}80%{transform:translate(-.15px,0) rotate(-.4deg)}}@keyframes tlp-tap{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(1.8px) scale(.94)}30%{transform:translateY(-.3px) scale(1.02)}44%{transform:translateY(0) scale(1)}60%{transform:translateY(1.8px) scale(.94)}78%{transform:translateY(-.4px) scale(1.02)}90%{transform:translateY(.1px) scale(.995)}}@keyframes tlp-press{0%,100%{transform:scale(1)}20%{transform:scale(.88)}42%{transform:scale(.88)}62%{transform:scale(1.07)}80%{transform:scale(.98)}91%{transform:scale(1.01)}}@keyframes tlp-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(.98)}42%{transform:scale(1.09)}58%{transform:scale(1)}}@keyframes tlp-flicker{0%,100%{opacity:1;transform:scale(1)}8%{opacity:.55;transform:scale(.97)}16%{opacity:.95;transform:scale(1.02)}26%{opacity:.4;transform:scale(.96)}38%{opacity:1;transform:scale(1.03)}50%{opacity:.7;transform:scale(.99)}62%{opacity:1;transform:scale(1.015)}78%{opacity:.85;transform:scale(1)}}@keyframes tlp-twinkle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.8) rotate(-14deg)}60%{transform:scale(1.18) rotate(8deg)}80%{transform:scale(.97) rotate(-2deg)}}@keyframes tlp-sway{0%,100%{transform:rotate(0)}24%{transform:rotate(6deg)}48%{transform:rotate(-4.5deg)}70%{transform:rotate(2.5deg)}86%{transform:rotate(-1deg)}}@keyframes tlp-flutter{0%,100%{transform:scale(1,1)}20%{transform:skewY(-7deg) scaleX(.95)}42%{transform:skewY(6deg) scaleX(1.03)}62%{transform:skewY(-3.5deg) scaleX(.98)}82%{transform:skewY(1.5deg) scaleX(1.01)}}@keyframes tlp-bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1.8px) rotate(-5deg)}52%{transform:translateY(1.2px) rotate(4deg)}76%{transform:translateY(-.8px) rotate(-2deg)}}@keyframes tlp-drive{0%,100%{transform:translateX(0) rotate(0)}22%{transform:translateX(-1px) rotate(-3.5deg)}55%{transform:translateX(2.4px) rotate(1.2deg)}78%{transform:translateX(-.3px) rotate(-.4deg)}}@keyframes tlp-launch{0%,100%{opacity:1;transform:translate(0,0)}14%{opacity:1;transform:translate(-.8px,.8px)}42%{opacity:0;transform:translate(5px,-5px)}43%{opacity:0;transform:translate(-5px,5px)}72%{opacity:1;transform:translate(.5px,-.5px)}}@keyframes tlp-roll{0%{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(1.2px)}100%{transform:rotate(360deg) translateX(0)}}@keyframes tlp-zoomIn{0%{opacity:0;transform:scale(1.35)}55%{opacity:1;transform:scale(.96)}78%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-spiralIn{0%{opacity:0;transform:rotate(-120deg) scale(0)}55%{opacity:1;transform:rotate(7deg) scale(1.1)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-swingIn{0%{opacity:0;transform:rotate(-25deg)}30%{opacity:1;transform:rotate(9deg)}55%{transform:rotate(-4deg)}78%{transform:rotate(1.5deg)}100%{opacity:1;transform:rotate(0)}}@keyframes tlp-flipIn{0%{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1.1)}75%{transform:scaleX(.96)}100%{opacity:1;transform:scaleX(1)}}@keyframes tlp-focusIn{0%{opacity:.15;filter:blur(1.6px);transform:scale(1.12)}60%{opacity:1;filter:blur(.5px);transform:scale(.98)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes tlp-bloom{0%{opacity:0;transform:rotate(-45deg) scale(0)}55%{opacity:1;transform:rotate(8deg) scale(1.12)}78%{transform:rotate(-2deg) scale(.98)}100%{opacity:1;transform:rotate(0) scale(1)}}@keyframes tlp-rollIn{0%{opacity:0;transform:translateX(-5px) rotate(-180deg)}70%{opacity:1;transform:translateX(.6px) rotate(8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes tlp-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%{transform:scale(1.1) rotate(3deg)}40%,60%{transform:scale(1.1) rotate(-3deg)}82%{transform:scale(1.02) rotate(0)}}@keyframes tlp-rubber{0%,100%{transform:scale(1,1)}30%{transform:scale(1.2,.8)}45%{transform:scale(.85,1.15)}62%{transform:scale(1.08,.92)}78%{transform:scale(.97,1.03)}90%{transform:scale(1.01,.99)}}@keyframes tlp-rattle{0%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}22%{transform:rotate(8deg)}34%{transform:rotate(-7deg)}46%{transform:rotate(6deg)}58%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}82%{transform:rotate(-1.5deg)}92%{transform:rotate(.6deg)}}@keyframes tlp-spring{0%,100%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.08,.82)}40%{transform:translateY(-3px) scale(.94,1.12)}62%{transform:translateY(0) scale(1.05,.94)}80%{transform:translateY(0) scale(.99,1.02)}}@keyframes tlp-knock{0%,100%{transform:translateX(0) scale(1,1)}14%{transform:translateX(1.9px) scale(.96,1)}28%{transform:translateX(0) scale(1,1)}42%{transform:translateX(1.9px) scale(.96,1)}58%{transform:translateX(0) scale(1,1)}72%{transform:translateX(.5px) scale(.99,1)}}@keyframes tlp-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}36%{transform:rotate(-13deg)}54%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}85%{transform:rotate(2deg)}}@keyframes tlp-pendulum{0%,100%{transform:rotate(0)}20%{transform:rotate(22deg)}42%{transform:rotate(-16deg)}62%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}92%{transform:rotate(1.5deg)}}@keyframes tlp-twirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}@keyframes tlp-flipY{0%,100%{transform:scaleY(1)}38%{transform:scaleY(-1.08)}52%{transform:scaleY(-1)}66%{transform:scaleY(-1.05)}}@keyframes tlp-drip{0%,100%{opacity:1;transform:translateY(0) scale(1)}34%{opacity:0;transform:translateY(3px) scale(.82)}35%{opacity:0;transform:translateY(-3px) scale(.82)}68%{opacity:1;transform:translateY(.6px) scale(1.04)}84%{opacity:1;transform:translateY(-.2px) scale(1)}}@keyframes tlp-fall{0%,100%{opacity:1;transform:translateY(0)}38%{opacity:0;transform:translateY(3.5px)}39%{opacity:0;transform:translateY(-3.5px)}72%{opacity:1;transform:translateY(.7px)}86%{opacity:1;transform:translateY(-.2px)}}@keyframes tlp-retrace{0%,100%{opacity:1;stroke-dasharray:1;stroke-dashoffset:0}30%{opacity:1;stroke-dasharray:1;stroke-dashoffset:.96}33%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}41%{opacity:1;stroke-dasharray:1;stroke-dashoffset:1}}@keyframes tlp-peek{0%,100%{transform:translateY(0)}28%{transform:translateY(2px)}62%{transform:translateY(-1.1px)}82%{transform:translateY(.3px)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";function W(t=h()){if(A||!t||!t.head||(A=!0,t.getElementById("tlp-icons-style")||E.length<20))return;const r=t.createElement("style");r.id="tlp-icons-style",r.textContent=E,t.head.appendChild(r)}export{E as CSS,L as EASE,C as ICON_SELECTOR,z as config,U as createSvg,W as ensureStyles,k as getIcon,_ as hoverTarget,V as installHover,D as loadIcon,q as register,v as resolve,H as run,M as setLoader,$ as timings,F as toSvgString};
+//# sourceMappingURL=core.js.map