tlp-icons 0.1.0 → 0.2.0

package/README.md

@@ -13,19 +13,42 @@
   <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%2C489-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-5.3%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-6%2C620-4f46e5">
 </p>
+<!-- badges:end -->
 
-A free, open-source (MIT) library of 6,489 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-->6,620<!--/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.
 
-[![Gallery](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/gallery.png)](https://tlp-icons.netlify.app)
+<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: <!--s:cat.legal-->120<!--/s--> icons)</td>
+<td align="center">One page per icon: playground + code</td>
+</tr></table>
 
 <details>
 <summary>Motion frames (each row is one hover animation frozen at 10 points)</summary>
@@ -33,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,489 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 59 first; the
+- **<!--s:icons-->6,620<!--/s--> icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
+- **100% animated**: <!--s:handmade-->439<!--/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-->120<!--/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-->6,620<!--/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
 
@@ -56,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>
 ```
 
@@ -96,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
+
+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):
 
-export function SaveButton() {
-  return <button><tlp-icon name="save" /> Save</button>;
+<!-- 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)
+
+Put the element behind one small client component and use it from server components. Server rendering outputs the
+tag; the browser upgrades it.
 
-React 19 supports custom elements directly. For TypeScript JSX, declare `tlp-icon` in `JSX.IntrinsicElements`.
+<!-- 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
+### 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
+
+Tell Vue that `tlp-icon` is a custom element, then use it in any template:
 
-### Vue
+<!-- 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)
 
@@ -143,33 +308,79 @@ 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) | 15.7 KB | **5.3 KB** |
+| manifest | 21.7 KB | **11.1 KB** |
+| smallest category chunk (science.js) | 11.5 KB | **3.5 KB** |
+| largest category chunk (interface.js) | 180.6 KB | **32.4 KB** |
+| all icons, offline bundle (tlp-icons.all.js) | 2280.5 KB | **387.3 KB** |
+| stylesheet (tlp-icons.css) | 4.9 KB | **1.3 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-->5.3 KB<!--/s--> + <!--s:size.1.gzip-->11.1 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 uses this package itself
-(`"tlp-icons": "file:.."`). Every page is pre-rendered static HTML for search engines:
+**https://tlp-icons.netlify.app** is built with **Next.js (React)** in `web/` and runs on the **published npm
+package** (`"tlp-icons": "^0.1.0"`; the icon pages load it from `cdn.jsdelivr.net/npm/tlp-icons`). Every page is
+pre-rendered static HTML for search engines, and the whole site is about 45 MB:
 
 | Page | URL |
 | --- | --- |
 | 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,489 pages) |
+| One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (<!--s:icons-->6,620<!--/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/` |
 | `sitemap.xml`, `robots.txt`, Open Graph image | |
 
 ```bash
-npm run build                  # the library (repository root)
-cd web && npm install
+cd web && npm install         # installs tlp-icons from npm
 npm run dev                    # http://localhost:3000
-npm run build                  # static site in web/out (about 270 MB, 6,700 files)
+npm run build                  # static site in web/out (about 45 MB, 6,900 files)
 node scripts/serve.mjs         # serve web/out on http://localhost:4321
 ```
 
 Netlify runs the same steps (see `netlify.toml`) and publishes `web/out` on every push to `main`.
+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
@@ -192,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-->34<!--/s--> `tlp-` keyframes).
 
 **Motion engine.** Every icon is split into atoms (one per element or sub-path) and measured. Then:
 
@@ -221,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.0 - 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.2.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
+const O={speed:.6},m="cubic-bezier(.22,1,.36,1)",u="cubic-bezier(.65,0,.35,1)",L="cubic-bezier(.45,.05,.55,.95)",j={draw:"cubic-bezier(.65,.05,.36,1)",fillIn:"ease",popIn:m,fadeIn:"ease",slideIn:m,riseIn:m,dropIn:m,grow:m,growX:m,spin:u,spinBack:u,spinHalf:u,sweep:u,sweepHour:u,orbit:u},k="http://www.w3.org/2000/svg",v=()=>typeof document>"u"?null:document,B="path,circle,rect,line,polyline,polygon,ellipse",x=Object.create(null),Y=Object.create(null);let b=null;const c=Object.create(null);function q(t,e){for(const r in t)x[r]=t[r];if(e)for(const r in e)Y[r]=e[r];for(const r in c){const s=h(r);s&&(c[r].forEach(n=>n(s)),delete c[r])}}function M(t){if(b=t,!!t)for(const e in c)Promise.resolve(t(w(e))).then(()=>{const r=c[e];if(!r)return;delete c[e];const s=h(e);r.forEach(n=>n(s))},()=>{})}function w(t){return x[t]?t:Y[t]||t}function h(t){return x[w(t)]||null}function D(t){const e=h(t);return e?Promise.resolve(e):b?Promise.resolve(b(w(t))).then(()=>h(t)):new Promise(r=>{(c[t]=c[t]||[]).push(r)})}function X(t,e=O.speed){let r=0;return{steps:(t.m||[]).map(([n,a,l,i,o])=>{const f=Math.round(l*e),p=Math.round((i||0)*e);return r=Math.max(r,f+p),{part:n,anim:a,t:f,dl:p,origin:o}}),total:r}}const C=t=>{const e={"--a":`tlp-${t.anim}`,"--t":`${t.t}ms`,"--dl":`${t.dl}ms`,"--e":j[t.anim]||L};return t.origin&&(e["--o"]=t.origin),e},$=t=>`p${t.origin&&/px/.test(t.origin)?" vb":""}${t.anim==="sweepHour"?" hh":""}`,T=(t,e)=>` ${t} `.indexOf(` ${e} `)>=0;function U(t,e=v()){if(!e)return null;const r=e.createElementNS(k,"svg");r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("class","tlp"),r.setAttribute("aria-hidden","true"),r.setAttribute("focusable","false"),r.innerHTML=t.svg;const{steps:s,total:n}=X(t);r.dataset.total=String(n);for(const a of s){let l;if(a.part==="all"){const o=e.createElementNS(k,"g");for(;r.firstChild;)o.appendChild(r.firstChild);r.appendChild(o),l=[o]}else l=Array.prototype.filter.call(r.querySelectorAll("[class]"),o=>T(o.getAttribute("class"),a.part));const i=C(a);for(const o of l){o.setAttribute("class",`${o.getAttribute("class")||""} ${$(a)}`.trim());for(const f in i)o.style.setProperty(f,i[f])}}return r.querySelectorAll(B).forEach(a=>a.setAttribute("pathLength","1")),r}function F(t,e={}){const r=e.stroke??2,s=e.size??24,n=`<svg xmlns="${k}" width="${s}" height="${s}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${r}" stroke-linecap="round" stroke-linejoin="round"`;if(!e.animated){const o=t.svg.replace(/ class="([^"]*)"/g,(p,d)=>{const g=d.split(/\s+/).filter(y=>y==="d"||y==="f");return g.length?` class="${g.join(" ")}"`:""}),f=e.duotone?"<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>":"<style>.f{fill:currentColor}</style>";return`${n}>${o.includes('class="')?f:""}${o}</svg>`}let a=t.svg;const{steps:l,total:i}=X(t);for(const o of l){const f=Object.entries(C(o)).map(([p,d])=>`${p}:${d}`).join(";");if(o.part==="all"){a=`<g class="${$(o)}" style="${f}">${a}</g>`;continue}a=a.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${o.part}\\b[^"]*)"`,"g"),(p,d,g,y)=>`<${d}${g} class="${y} ${$(o)}" style="${f}"`)}return a=a.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g,'<$1 pathLength="1"'),`${n} class="tlp" data-tlp-icon data-total="${i}">${a}</svg>`}const z=()=>typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches;function H(t,e=0){if(!t||t._tlpBusy||z())return!1;t._tlpBusy=!0;const r=()=>{t.classList.remove("tlp-run"),t.getBoundingClientRect(),t.classList.add("tlp-run"),setTimeout(()=>{t.querySelectorAll(".hh").forEach(s=>s.style.setProperty("--h0",`${(parseFloat(s.style.getPropertyValue("--h0"))||0)+30}deg`)),t.classList.remove("tlp-run"),t._tlpBusy=!1},(+t.dataset.total||0)+40)};return e?setTimeout(r,e):r(),!0}const I="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 e=t&&t.nodeType===1?t:t&&t.parentElement;if(!e)return null;const r=e.closest(I);if(r)return r.closest("tlp-icon")||r;for(let s=0;e&&e.nodeType===1&&e!==e.ownerDocument.body&&s<8;s++,e=e.parentElement){const n=e.querySelectorAll(I);let a=0,l=null;for(const i of n)i.tagName.toLowerCase()==="svg"&&i.closest("tlp-icon")||(a++,l=i);if(a>1)return null;if(a===1)return{icon:l,scope:e};if(e.matches(N))return null}return null}let S=!1;function V(t=v()){S||!t||(S=!0,t.addEventListener("mouseover",e=>{const r=_(e.target);if(!r)return;const s=r.icon||r;(r.scope||s).contains(e.relatedTarget)||R(s)==="hover"&&H(P(s))},!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)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";function W(t=v()){if(A||!t||!t.head||(A=!0,t.getElementById("tlp-icons-style")||E.length<20))return;const e=t.createElement("style");e.id="tlp-icons-style",e.textContent=E,t.head.appendChild(e)}export{E as CSS,j as EASE,I as ICON_SELECTOR,O as config,U as createSvg,W as ensureStyles,h as getIcon,_ as hoverTarget,V as installHover,D as loadIcon,q as register,w as resolve,H as run,M as setLoader,X as timings,F as toSvgString};
+//# sourceMappingURL=core.js.map