@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/linkify.ts

@@ -0,0 +1,142 @@
+/**
+ * Dependency-free, pure rich-text segmenter for prose (post descriptions).
+ *
+ * Splits a plain-text string into an ordered list of {@link RichSeg}s so the
+ * renderer (`RichText.vue`) can paint each piece as a Vue node, never via
+ * `v-html`. Because every segment is interpolated as a text node
+ * or a plain `<a>`/`<code>` with attribute-bound values, the output is
+ * XSS-safe by construction: a `<script>` in the input is just text.
+ *
+ * A single left-to-right scan recognises, in priority order:
+ *   1. `@{...}`        wildcard-ref code token (e.g. `@{color:cool and dark}`)
+ *   2. `$name(.field)` var/accessor code token (e.g. `$color`, `$color.2`)
+ *   3. `https?://…`    explicit URL
+ *   4. bare URL        a `domain.tld/path` or `www.…` (must carry a `/path`)
+ * Everything else accumulates as literal text. Adjacent text runs collapse
+ * into one `text` segment.
+ *
+ * URL handling:
+ *   - Trailing punctuation `.,;:!?)` is peeled off the match and pushed back
+ *     as text, so `(see https://x.com).` doesn't swallow the `).`.
+ *   - http(s) matches keep their scheme as the href; bare/`www.` matches are
+ *     prefixed with `https://`.
+ *   - A `link` segment is emitted ONLY when the resulting href starts with
+ *     `http://` or `https://`; anything else degrades to text.
+ *
+ * Lossless invariant: concatenating every `.text` reproduces the input.
+ *
+ * Why not rich-tokenize.ts: that is the wildcard GRAMMAR lexer (picks,
+ * escapes, `@{8hex}` refs only), and a description is prose: `{a|b}` must
+ * stay text, `$$` is just two dollars, and a mention like `@{color:cool}`
+ * names a wildcard in words. This scanner only marks mentions and links.
+ */
+
+export type RichSeg = {
+  kind: "text" | "link" | "code";
+  text: string;
+  /** Present only on `link` segments — always an `http(s)://` absolute URL. */
+  href?: string;
+};
+
+// Code token: `@{...}` (ref). Non-greedy body, no nested `}`.
+const RE_REF = /^@\{[^}]*\}/;
+// Code token: `$name` with an optional single `.field` accessor.
+const RE_VAR = /^\$[A-Za-z_][A-Za-z0-9_]*(?:\.[A-Za-z0-9_]+)?/;
+// Explicit URL with scheme — runs to the next whitespace.
+const RE_URL = /^https?:\/\/[^\s]+/;
+// Bare URL: either a `www.` host, OR a `domain.tld/` (a dotted host directly
+// followed by a `/path`). Requires the `/` so prose like `e.g.` or `node.com`
+// without a path is NOT linkified (kept conservative on purpose).
+const RE_BARE = /^(?:www\.|[a-z0-9-]+(?:\.[a-z0-9-]+)+\/)[^\s]+/i;
+
+/** Trailing punctuation peeled off a matched URL and returned as text. */
+const TRAILING = new Set([".", ",", ";", ":", "!", "?", ")"]);
+
+/**
+ * Segment `input` into ordered text / link / code runs. Returns an empty
+ * array for empty input; the caller decides what to render for `[]`.
+ */
+export function parseRichText(input: string): RichSeg[] {
+  if (!input) return [];
+
+  const segs: RichSeg[] = [];
+  let buf = "";
+
+  /** Flush the pending literal-text run (if any) as one `text` segment. */
+  const flush = (): void => {
+    if (buf) {
+      segs.push({ kind: "text", text: buf });
+      buf = "";
+    }
+  };
+
+  let i = 0;
+  const n = input.length;
+  while (i < n) {
+    const rest = input.slice(i);
+    const ch = input[i];
+
+    // 1. @{...} ref code token.
+    if (ch === "@") {
+      const m = rest.match(RE_REF);
+      if (m) {
+        flush();
+        segs.push({ kind: "code", text: m[0] });
+        i += m[0].length;
+        continue;
+      }
+    }
+
+    // 2. $var code token.
+    if (ch === "$") {
+      const m = rest.match(RE_VAR);
+      if (m) {
+        flush();
+        segs.push({ kind: "code", text: m[0] });
+        i += m[0].length;
+        continue;
+      }
+    }
+
+    // 3 + 4. URLs — explicit scheme first, then bare/`www.`.
+    //
+    // A bare match is only attempted at a word boundary (start of input or
+    // after whitespace) so we don't linkify the tail of a longer token.
+    const atBoundary = i === 0 || /\s/.test(input[i - 1] ?? "");
+    const urlMatch =
+      rest.match(RE_URL) ?? (atBoundary ? rest.match(RE_BARE) : null);
+    if (urlMatch) {
+      let raw = urlMatch[0];
+      // Peel trailing punctuation back into the text stream.
+      let trailer = "";
+      let last = raw.slice(-1);
+      while (last && TRAILING.has(last)) {
+        trailer = last + trailer;
+        raw = raw.slice(0, -1);
+        last = raw.slice(-1);
+      }
+      if (raw.length > 0) {
+        const href = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
+        // Only emit a link when the href is genuinely http(s); otherwise the
+        // whole match degrades to text (defensive — the prefix above always
+        // satisfies this, but keeps the contract explicit).
+        if (/^https?:\/\//i.test(href)) {
+          flush();
+          segs.push({ kind: "link", text: raw, href });
+        } else {
+          buf += raw;
+        }
+        if (trailer) buf += trailer;
+        i += raw.length + trailer.length;
+        continue;
+      }
+    }
+
+    // Default: accumulate one literal character.
+    buf += ch;
+    i += 1;
+  }
+
+  flush();
+  return segs;
+}

package/src/loading-mark-motion.ts

@@ -1,66 +1,12 @@
 /**
- * LoadingMark's motion, drawn on a canvas.
- *
- * The mark used to move its SVG paths with CSS. A keyframed `transform` /
- * `opacity` goes to the compositor, which blurs the path and snaps it to whole
- * pixels as it starts; animating registered custom properties fixed that in
- * Chromium, but Firefox still lays each frame of an SVG transform on the pixel
- * grid, so the rings stepped and twitched as they slid. A canvas puts every
- * shape at its exact fractional position each frame, sharp and smooth in both.
- *
- * One `requestAnimationFrame` loop draws every mark on the page. Each mark
- * keeps its own clock, so a host can slow or pause the marks inside it with
- * `data-wp-motion-speed` (a number) and `data-wp-motion-paused` on an
- * ancestor, as the kit site's Animations section does.
+ * LoadingMark's motion, drawn on a canvas (see `canvas-motion.ts` for why).
+ * The same keyframes the mark had in CSS, as eased tracks.
  */
 import { RING_A, RING_B, STAR_A, STAR_B, STAR_BIG } from "./logo-paths";
+import { EASE_IN_OUT, SMOOTH, begin, fillAround, track, type Stop } from "./canvas-motion";
 
 /** One loop of the logo, in ms; the sparkle's swap takes two. */
 export const LOOP_MS = 2400;
-/** Room around the 1024 box for the rings as they slide apart (70 units)
- *  and for anti-aliasing at the edge. */
-export const PAD = 82;
-export const BOX = 1024 + 2 * PAD;
-
-/** CSS `cubic-bezier(x1, y1, x2, y2)` as a function of progress. */
-export function cubicBezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number {
-  return (x) => {
-    if (x <= 0) return 0;
-    if (x >= 1) return 1;
-    let lo = 0;
-    let hi = 1;
-    let t = x;
-    for (let k = 0; k < 30; k++) {
-      t = (lo + hi) / 2;
-      const cx = 3 * x1 * t * (1 - t) ** 2 + 3 * x2 * t * t * (1 - t) + t ** 3;
-      if (cx < x) lo = t;
-      else hi = t;
-    }
-    return 3 * y1 * t * (1 - t) ** 2 + 3 * y2 * t * t * (1 - t) + t ** 3;
-  };
-}
-
-const SMOOTH = cubicBezier(0.65, 0, 0.35, 1);
-const EASE_IN_OUT = cubicBezier(0.42, 0, 0.58, 1);
-
-type Stop = readonly [at: number, values: readonly number[]];
-
-/** Value of a keyframe track at progress `p` (0..1), eased per segment the
- *  way CSS eases between two keyframes. */
-export function track(stops: readonly Stop[], p: number, ease: (x: number) => number): number[] {
-  for (let k = 0; k < stops.length - 1; k++) {
-    const a = stops[k];
-    const b = stops[k + 1];
-    if (!a || !b) break;
-    if (p >= a[0] && p <= b[0]) {
-      if (b[0] === a[0]) return [...b[1]];
-      const e = ease((p - a[0]) / (b[0] - a[0]));
-      return a[1].map((v, j) => v + ((b[1][j] ?? v) - v) * e);
-    }
-  }
-  return [...(stops[stops.length - 1]?.[1] ?? [])];
-}
-
 /** The rings' slide apart (units of the 1024 box). */
 const SPLIT: readonly Stop[] = [[0, [0]], [0.15, [0]], [0.4, [70]], [0.6, [70]], [0.85, [0]], [1, [0]]];
 /** The big star's dip: [scale, turn in degrees]. */
@@ -91,12 +37,12 @@ export function poseAt(ms: number): Pose {
 }
 
 /** Centres of the stars in the 1024 box (from their bounding boxes). */
-const C_BIG = [512, 512] as const;
-const C_A = [360, 664] as const;
-const C_B = [664, 360] as const;
+export const C_BIG = [512, 512] as const;
+export const C_A = [360, 664] as const;
+export const C_B = [664, 360] as const;
 
 let paths: Record<"ra" | "rb" | "big" | "a" | "b", Path2D> | null = null;
-function shapes(): Record<"ra" | "rb" | "big" | "a" | "b", Path2D> {
+export function shapes(): Record<"ra" | "rb" | "big" | "a" | "b", Path2D> {
   paths ??= { ra: new Path2D(RING_A), rb: new Path2D(RING_B), big: new Path2D(STAR_BIG), a: new Path2D(STAR_A), b: new Path2D(STAR_B) };
   return paths;
 }
@@ -109,26 +55,11 @@ export interface Look {
   flat: boolean;
 }
 
-function around(ctx: CanvasRenderingContext2D, [x, y]: readonly [number, number], scale: number, turn: number, path: Path2D, fill: string, alpha: number): void {
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.rotate((turn * Math.PI) / 180);
-  ctx.scale(scale, scale);
-  ctx.translate(-x, -y);
-  ctx.globalAlpha = alpha;
-  ctx.fillStyle = fill;
-  ctx.fill(path);
-  ctx.restore();
-}
-
 /** Draws one frame on a canvas `BOX` units square (scaled to its pixels). */
 export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Look, pose: Pose): void {
-  const k = width / BOX;
   const [violet, indigo, teal] = look.colours;
   const p = shapes();
-  ctx.setTransform(1, 0, 0, 1, 0, 0);
-  ctx.clearRect(0, 0, width, width);
-  ctx.setTransform(k, 0, 0, k, PAD * k, PAD * k);
+  begin(ctx, width);
   if (look.variant === "logo") {
     const ringA = (() => {
       if (look.flat) return violet;
@@ -154,15 +85,15 @@ export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Loo
     ctx.fillStyle = ringB;
     ctx.fill(p.rb);
     ctx.restore();
-    around(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
-    around(ctx, C_A, pose.twinkleScale, 0, p.a, indigo, pose.twinkleAlpha);
-    around(ctx, C_B, pose.twinkleScale, 0, p.b, teal, pose.twinkleAlpha);
+    fillAround(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
+    fillAround(ctx, C_A, pose.twinkleScale, 0, p.a, indigo, pose.twinkleAlpha);
+    fillAround(ctx, C_B, pose.twinkleScale, 0, p.b, teal, pose.twinkleAlpha);
     return;
   }
   ctx.translate(512, 512);
   ctx.scale(1.45, 1.45);
   ctx.translate(-512, -512);
-  around(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
+  fillAround(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
   ctx.save();
   ctx.translate(512, 512);
   ctx.rotate((pose.swap * Math.PI) / 180);
@@ -173,77 +104,3 @@ export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Loo
   ctx.fill(p.b);
   ctx.restore();
 }
-
-/** A mark the loop draws. */
-export interface Animated {
-  canvas: HTMLCanvasElement;
-  look: () => Look;
-  /** ms of animation shown so far, advanced by the loop. */
-  clock: number;
-  /** False while off screen: the clock still runs, nothing is drawn. */
-  visible: boolean;
-}
-
-const marks = new Set<Animated>();
-let frame = 0;
-let last = 0;
-
-/** Speed and pause from the nearest host that sets them. */
-export function motionOf(el: Element): { speed: number; paused: boolean } {
-  const host = el.closest("[data-wp-motion-speed], [data-wp-motion-paused]");
-  if (!host) return { speed: 1, paused: false };
-  const paused = host.closest("[data-wp-motion-paused]") !== null;
-  const speedHost = host.closest("[data-wp-motion-speed]");
-  const speed = Number(speedHost?.getAttribute("data-wp-motion-speed") ?? "1");
-  return { speed: Number.isFinite(speed) && speed >= 0 ? speed : 1, paused };
-}
-
-function fit(c: HTMLCanvasElement): void {
-  const css = c.clientWidth;
-  const want = Math.max(1, Math.round(css * (window.devicePixelRatio || 1)));
-  if (c.width !== want) {
-    c.width = want;
-    c.height = want;
-  }
-}
-
-function tick(now: number): void {
-  const dt = last ? Math.min(now - last, 100) : 0;
-  last = now;
-  for (const m of marks) {
-    const { speed, paused } = motionOf(m.canvas);
-    if (!paused) m.clock += dt * speed;
-    if (!m.visible) continue;
-    const ctx = m.canvas.getContext("2d");
-    if (!ctx) continue;
-    fit(m.canvas);
-    drawPose(ctx, m.canvas.width, m.look(), poseAt(m.clock));
-  }
-  frame = marks.size ? requestAnimationFrame(tick) : 0;
-}
-
-/** Starts drawing a mark; returns the function that stops it. */
-export function animate(mark: Animated): () => void {
-  marks.add(mark);
-  if (!frame) {
-    last = 0;
-    frame = requestAnimationFrame(tick);
-  }
-  return () => {
-    marks.delete(mark);
-    if (!marks.size && frame) {
-      cancelAnimationFrame(frame);
-      frame = 0;
-    }
-  };
-}
-
-/** Draws one still frame right away (the first frame, before the loop runs,
- *  so the mark never shows blank). */
-export function drawNow(mark: Animated): boolean {
-  const ctx = mark.canvas.getContext("2d");
-  if (!ctx) return false;
-  fit(mark.canvas);
-  drawPose(ctx, mark.canvas.width, mark.look(), poseAt(mark.clock));
-  return true;
-}

package/src/matrix-axis.ts

@@ -89,3 +89,31 @@ export function groupHue(grp: AxisGroup, role: "source" | "target", labeled: boo
   if (!isBucket(grp)) return axisHueAt(grp.axisIndex);
   return labeled ? UNGROUPED_HUE : role === "source" ? "var(--wp-constraint-source)" : "var(--wp-constraint-target)";
 }
+
+/** A constraint cell's rule. `only` (schema v6, linked picks): when the
+ *  source fires, targets without a rule of their own in that row are
+ *  excluded. `allow` is the neutral cell. */
+export type CellMode = "allow" | "boost" | "reduce" | "exclude" | "only";
+
+/** The glyph each rule draws in a matrix cell, a legend or a rules list. */
+export const MODE_GLYPH: Record<CellMode, string> = {
+  only: "✓",
+  boost: "↑",
+  reduce: "↓",
+  exclude: "×",
+  allow: "·",
+};
+
+/** The word for each rule. */
+export const MODE_LABEL: Record<CellMode, string> = {
+  boost: "Boost",
+  reduce: "Reduce",
+  exclude: "Exclude",
+  allow: "Neutral",
+  only: "Only",
+};
+
+/** A published mode string as a rule: anything unknown reads as neutral. */
+export function normalizeMode(raw: string | null | undefined): CellMode {
+  return raw === "exclude" || raw === "boost" || raw === "reduce" || raw === "only" ? raw : "allow";
+}

package/src/menu.css

@@ -0,0 +1,51 @@
+/* Menu panel: the one look of every floating list in the kit (Select's list,
+ * ContextMenu / DropdownMenu and Combobox's list). Pulled in scoped by
+ * Popover (whose `variant="menu"` panel is the menu), ContextMenu, Select and
+ * Combobox. It reads only the SHARED_TOKENS names, so a menu wears the
+ * manager colours on a page and the canvas colours in a node.
+ *
+ *   <div class="wp-menu">                       the panel
+ *     <li class="wp-menu__item" data-active="true" aria-selected="true">
+ *
+ * Item states: hover and `[data-active="true"]` (the keyboard's row) share one
+ * tint; `[aria-selected="true"]` is a lighter one; `[aria-disabled="true"]` is
+ * dim and takes no hover. A piece keeps its own row layout (icons, meta,
+ * subtitles, ticks); the sheet sets everything you see around it.
+ */
+
+.wp-menu {
+  z-index: 10020; /* above every modal overlay (they run up to 10010) */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  box-shadow: var(--wp-shadow-md);
+  font-family: var(--wp-font-sans, sans-serif);
+  font-size: 12px;
+}
+
+.wp-menu__item {
+  padding: 6px 8px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text);
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.wp-menu__item[aria-selected="true"] {
+  background: color-mix(in oklab, var(--wp-accent) 12%, transparent);
+}
+.wp-menu__item:hover,
+.wp-menu__item[data-active="true"] {
+  background: var(--wp-accent-glow);
+  color: var(--wp-text);
+}
+.wp-menu__item[aria-disabled="true"] {
+  color: var(--wp-text-dim);
+  background: transparent;
+  cursor: not-allowed;
+}

package/src/motion.css

@@ -0,0 +1,73 @@
+/*
+ * Entrances and nudges for things that appear while you watch: a streamed
+ * reply's new words, a reaction, a chip by the selection, a question that
+ * needs an answer. Add the class to the element as it mounts.
+ *
+ *   .wp-enter-fade    fades in (150 ms): each new run of streamed text.
+ *   .wp-enter-pop     pops in with a small overshoot (320 ms): a reaction.
+ *   .wp-enter-rise    rises 4 px into place (140 ms): a chip above a
+ *                     selection; add data-from="below" when it sits under it.
+ *   .wp-enter-drop    drops 6 px into place (500 ms): a panel that asks for
+ *                     something.
+ *   .wp-attention     a soft accent ring that pulses three times (after
+ *                     .wp-enter-drop when both are set).
+ *
+ * The moving element keeps its own position: set --wp-enter-x for an extra
+ * horizontal shift (a chip centred with -50%), and it goes into the same
+ * transform.
+ *
+ * Every entrance animates registered custom properties, never `opacity` or
+ * `transform` themselves: those go to the compositor, which lifts the element
+ * onto its own layer while it moves and drops it after, so text went soft
+ * during the motion and snapped half a pixel at its end.
+ */
+@property --wp-enter-o { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-enter-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-enter-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+@layer wp-extension {
+  .wp-enter-fade {
+    opacity: var(--wp-enter-o);
+    animation: wp-enter-fade 150ms ease-out;
+  }
+  .wp-enter-pop {
+    opacity: var(--wp-enter-o);
+    transform: translateX(var(--wp-enter-x, 0px)) scale(var(--wp-enter-s));
+    animation: wp-enter-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both;
+  }
+  .wp-enter-rise {
+    opacity: var(--wp-enter-o);
+    transform: translate(var(--wp-enter-x, 0px), var(--wp-enter-y));
+    animation: wp-enter-rise 0.14s ease-out both;
+  }
+  .wp-enter-rise[data-from="below"] { animation-name: wp-enter-rise-below; }
+  .wp-enter-drop {
+    opacity: var(--wp-enter-o);
+    transform: translate(var(--wp-enter-x, 0px), var(--wp-enter-y));
+    animation: wp-enter-drop 0.5s ease-out;
+  }
+  .wp-attention { animation: wp-attention 2.4s ease-in-out 3; }
+  .wp-enter-drop.wp-attention {
+    animation: wp-enter-drop 0.5s ease-out, wp-attention 2.4s ease-in-out 0.5s 3;
+  }
+
+  @keyframes wp-enter-fade { from { --wp-enter-o: 0; } to { --wp-enter-o: 1; } }
+  @keyframes wp-enter-pop {
+    from { --wp-enter-s: 0.3; --wp-enter-o: 0; }
+    to { --wp-enter-s: 1; --wp-enter-o: 1; }
+  }
+  @keyframes wp-enter-rise {
+    from { --wp-enter-o: 0; --wp-enter-y: 4px; }
+    to { --wp-enter-o: 1; --wp-enter-y: 0px; }
+  }
+  @keyframes wp-enter-rise-below {
+    from { --wp-enter-o: 0; --wp-enter-y: -4px; }
+    to { --wp-enter-o: 1; --wp-enter-y: 0px; }
+  }
+  @keyframes wp-enter-drop { from { --wp-enter-o: 0; --wp-enter-y: -6px; } }
+  @keyframes wp-attention { 50% { box-shadow: 0 0 0 6px var(--wp-accent-glow); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wp-enter-fade, .wp-enter-pop, .wp-enter-rise, .wp-enter-drop, .wp-attention { animation: none; }
+  }
+}

package/src/pi-icons.ts

@@ -0,0 +1,51 @@
+/**
+ * Every PrimeIcons glyph in the installed `primeicons.css`, minus the `pi-`
+ * prefix: what IconPicker `all` offers (searchable), and what an app can
+ * check a typed `:pi-name:` against. IconPicker without `all` offers the
+ * curated groups in `icon-catalog.ts`. `pi-icons.test.ts` keeps this list
+ * equal to the stylesheet.
+ */
+export const PI_ICONS: readonly string[] = [
+  "address-book", "align-center", "align-justify", "align-left", "align-right", "amazon", "android", "angle-double-down",
+  "angle-double-left", "angle-double-right", "angle-double-up", "angle-down", "angle-left", "angle-right", "angle-up", "apple",
+  "arrow-circle-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-down", "arrow-down-left", "arrow-down-left-and-arrow-up-right-to-center", "arrow-down-right",
+  "arrow-left", "arrow-right", "arrow-right-arrow-left", "arrow-up", "arrow-up-left", "arrow-up-right", "arrow-up-right-and-arrow-down-left-from-center", "arrows-alt",
+  "arrows-h", "arrows-v", "asterisk", "at", "backward", "ban", "barcode", "bars",
+  "bell", "bell-slash", "bitcoin", "bolt", "book", "bookmark", "bookmark-fill", "box",
+  "briefcase", "building", "building-columns", "bullseye", "calculator", "calendar", "calendar-clock", "calendar-minus",
+  "calendar-plus", "calendar-times", "camera", "car", "caret-down", "caret-left", "caret-right", "caret-up",
+  "cart-arrow-down", "cart-minus", "cart-plus", "chart-bar", "chart-line", "chart-pie", "chart-scatter", "check",
+  "check-circle", "check-square", "chevron-circle-down", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-down", "chevron-left",
+  "chevron-right", "chevron-up", "circle", "circle-fill", "circle-off", "circle-on", "clipboard", "clock",
+  "clone", "cloud", "cloud-download", "cloud-upload", "code", "cog", "comment", "comments",
+  "compass", "copy", "credit-card", "crown", "database", "delete-left", "desktop", "directions",
+  "directions-alt", "discord", "dollar", "download", "eject", "ellipsis-h", "ellipsis-v", "envelope",
+  "equals", "eraser", "ethereum", "euro", "exclamation-circle", "exclamation-triangle", "expand", "external-link",
+  "eye", "eye-slash", "face-smile", "facebook", "fast-backward", "fast-forward", "file", "file-arrow-up",
+  "file-check", "file-edit", "file-excel", "file-export", "file-import", "file-o", "file-pdf", "file-plus",
+  "file-word", "filter", "filter-fill", "filter-slash", "flag", "flag-fill", "folder", "folder-open",
+  "folder-plus", "forward", "gauge", "gift", "github", "globe", "google", "graduation-cap",
+  "hammer", "hashtag", "headphones", "heart", "heart-fill", "history", "home", "hourglass",
+  "id-card", "image", "images", "inbox", "indian-rupee", "info", "info-circle", "instagram",
+  "key", "language", "lightbulb", "link", "linkedin", "list", "list-check", "lock",
+  "lock-open", "map", "map-marker", "mars", "megaphone", "microchip", "microchip-ai", "microphone",
+  "microsoft", "minus", "minus-circle", "mobile", "money-bill", "moon", "objects-column", "palette",
+  "paperclip", "pause", "pause-circle", "paypal", "pen-to-square", "pencil", "percentage", "phone",
+  "pinterest", "play", "play-circle", "plus", "plus-circle", "pound", "power-off", "prime",
+  "print", "qrcode", "question", "question-circle", "receipt", "reddit", "refresh", "replay",
+  "reply", "save", "search", "search-minus", "search-plus", "send", "server", "share-alt",
+  "shield", "shop", "shopping-bag", "shopping-cart", "sign-in", "sign-out", "sitemap", "slack",
+  "sliders-h", "sliders-v", "sort", "sort-alpha-down", "sort-alpha-down-alt", "sort-alpha-up", "sort-alpha-up-alt", "sort-alt",
+  "sort-alt-slash", "sort-amount-down", "sort-amount-down-alt", "sort-amount-up", "sort-amount-up-alt", "sort-down", "sort-down-fill", "sort-numeric-down",
+  "sort-numeric-down-alt", "sort-numeric-up", "sort-numeric-up-alt", "sort-up", "sort-up-fill", "sparkles", "spinner", "spinner-dotted",
+  "star", "star-fill", "star-half", "star-half-fill", "step-backward", "step-backward-alt", "step-forward", "step-forward-alt",
+  "stop", "stop-circle", "stopwatch", "sun", "sync", "table", "tablet", "tag",
+  "tags", "telegram", "th-large", "thumbs-down", "thumbs-down-fill", "thumbs-up", "thumbs-up-fill", "thumbtack",
+  "ticket", "tiktok", "times", "times-circle", "trash", "trophy", "truck", "turkish-lira",
+  "twitch", "twitter", "undo", "unlock", "upload", "user", "user-edit", "user-minus",
+  "user-plus", "users", "venus", "verified", "video", "vimeo", "volume-down", "volume-off",
+  "volume-up", "wallet", "warehouse", "wave-pulse", "whatsapp", "wifi", "window-maximize", "window-minimize",
+  "wrench", "youtube",
+];
+
+export const PI_ICON_SET: ReadonlySet<string> = new Set(PI_ICONS);