@imfusion/web-ui 0.6.4-dev.38.gc77c6321 → 0.6.4-dev.43.g3f16d49f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.6.4-dev.38.gc77c6321",
+  "version": "0.6.4-dev.43.g3f16d49f",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -42,10 +42,12 @@
     "./styles.css": "./dist/style.css",
     "./docgen.json": "./src/docgen/doc.gen.json",
     "./llms.txt": "./src/llms/llms.gen.txt",
+    "./assets/*": "./src/assets/public/*",
     "./*": null
   },
   "files": [
     "dist",
+    "src/assets/public",
     "docs/assets/imfusion-banner.svg",
     "THIRD_PARTY_NOTICES.md",
     "src/llms/install-templates",

package/src/assets/public/favicon/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" fill="#245EFF" />
+  <g transform="translate(72 152) scale(1.168)">
+    <path d="M320 180H0V159.715L237.082 128.105L320 65.916V180Z" fill="#FFFFFF" />
+    <path d="M320 20.2832L82.918 51.8945L0 114.082V0H320V20.2832Z" fill="#FFFFFF" />
+  </g>
+</svg>

package/src/docgen/doc.gen.json

@@ -5744,7 +5744,7 @@
   "spinner": {
     "root": {
       "name": "Spinner",
-      "description": "Loading indicator built from the animated ImFusion glyph — two filled bands\nand an empty diagonal channel that continuously rotates, breathes, and sways.\n\nThe motion is a live per-frame morph of the two paths (the channel geometry is\nrecomputed each frame in {@link frameGeometry}), driven by a single\n`requestAnimationFrame` loop that rewrites the two `d` attributes directly —\nno React re-render per frame. The loop pauses while the tab is hidden.",
+      "description": "Loading indicator — the ImFusion glyph animation, played as a looping image.",
       "props": [
         {
           "name": "label",
@@ -5759,6 +5759,13 @@
           "type": "\"sm\" | \"md\" | \"lg\" | null",
           "defaultValue": "md",
           "description": ""
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"blue\" | \"white\" | \"black\"",
+          "defaultValue": "blue",
+          "description": "Which colour of the mark to show. The animation is a pre-rendered image, so\nthe colour is baked in and does not follow `currentColor` or the scheme —\npick `white` on saturated or dark grounds."
         }
       ]
     },

package/dist/components/spinner/spinner.geometry.d.ts

@@ -1,37 +0,0 @@
-/**
- * Spinner geometry — the animated ImFusion glyph.
- *
- * The mark is two filled bands separated by an empty diagonal channel (see
- * `logo/imfusion/imfusion.tsx`). This module reproduces that structure as a
- * *morphing* shape: the channel rotates, breathes (its width pulses, never
- * closing), and its interior nodes sway — so the loader reads as the mark
- * alive, not a generic ring.
- *
- * The motion is a live per-frame morph: a single `requestAnimationFrame` loop
- * in the component (spinner.tsx) calls {@link frameGeometry} each frame and
- * writes the two returned path `d` strings straight onto the SVG paths — no
- * React re-render per frame, no SMIL. (SMIL/CSS `d` morphing was tried and
- * dropped: neither is GPU-composited, and CSS `d` isn't supported in Safari.)
- *
- * Everything is tunable from the {@link KNOBS} block. The values there were
- * dialled in against rendered evidence at 16/20/24/96px; the shape is a
- * balance — extreme values pinch the channel shut or spike the bands, so nudge
- * rather than leap. `frameGeometry(t)` is pure and deterministic: feed it a
- * time in ms and it returns the two band path `d`s for that instant.
- */
-/** Design-space edge length; the SVG viewBox is `0 0 D D`. */
-export declare const D = 100;
-/**
- * The two band path `d` strings at time `tms` (ms) — the shape at any instant
- * of the loop, as `[topBand, bottomBand]`. Pure and deterministic; the rAF loop
- * in the component calls this each frame and writes the results to the paths.
- */
-export declare function frameGeometry(tms: number): [string, string];
-/**
- * The period over which the whole composition returns to its start pose — the
- * least-common-multiple-ish window of rotation, breathe, and sway. Rotation is
- * `ROT_S`; breathe/sway are shorter and phase-relative. We loop over the
- * rotation period and let breathe/sway ride within it; `SWAY_RATIO` is chosen
- * so the combined motion reads continuous rather than obviously repeating.
- */
-export declare const LOOP_MS: number;