tosijs-ui 1.5.7 → 1.5.9

package/dist/doc-browser.js

@@ -288,8 +288,8 @@ export function createDocBrowser(options) {
             }
             testResultsResolve(allResults);
             testResultsResolve = undefined;
-            // Post results to dev server on localhost
-            if (isLocalhost) {
+            // Post results to dev server on localhost (not from test iframes)
+            if (isLocalhost && !isTestFrame) {
                 fetch('/report', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -680,17 +680,46 @@ export function createDocBrowser(options) {
         lines.unshift(`**Summary: ${totalPassed} passed, ${totalFailed} failed**`, '');
         return lines.join('\n');
     }
+    // Detect if running as background test iframe
+    const searchParams = new URLSearchParams(window.location.search);
+    const isTestFrame = searchParams.get('_testMode') === '1';
+    const testFrameFilename = isTestFrame
+        ? window.location.search.substring(1).split('&')[0]
+        : null;
     // Listen for test completion events
     container.addEventListener('testcomplete', ((event) => {
         handleTestComplete(event);
         updateTestWidget();
+        // If running in test iframe, post results to parent
+        if (isTestFrame && window.parent !== window && testFrameFilename) {
+            const { results } = event.detail;
+            window.parent.postMessage({ type: 'tosi-test-results', filename: testFrameFilename, results }, '*');
+        }
     }));
+    // If running as test iframe, signal when all tests on this page are done
+    if (isTestFrame && testFrameFilename) {
+        const signalDone = () => {
+            const examples = container.querySelectorAll('tosi-example');
+            const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
+            const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
+            if (withTests.length > 0 && running.length === 0) {
+                window.parent.postMessage({ type: 'tosi-tests-done', filename: testFrameFilename }, '*');
+            }
+            else {
+                setTimeout(signalDone, 100);
+            }
+        };
+        // Give time for examples to start running
+        setTimeout(signalDone, 500);
+    }
     // Background test runner for all doc pages
     const runBackgroundTests = async () => {
         if (backgroundTestsStarted)
             return;
         if (!testManager.enabled.value)
             return;
+        if (isTestFrame)
+            return; // Don't run background tests in test iframe
         backgroundTestsStarted = true;
         // Find all docs that have test blocks
         const docsWithTests = docs.filter((doc) => doc.text.includes('```test'));
@@ -699,89 +728,71 @@ export function createDocBrowser(options) {
             setTestWidgetRunning();
         }
         if (pagesWithTests === 0) {
-            // No tests to run, resolve immediately
             if (testResultsResolve) {
                 testResultsResolve({ passed: 0, failed: 0, pages: {} });
                 testResultsResolve = undefined;
             }
             return;
         }
-        // Create a hidden iframe to run tests in background
+        const currentFilename = String(app.currentDoc.filename);
+        // Create a hidden iframe that loads the full page
         const testFrame = document.createElement('iframe');
         testFrame.style.cssText =
             'position: fixed; left: 0; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
         document.body.appendChild(testFrame);
-        const currentFilename = String(app.currentDoc.filename);
+        // Listen for test results posted from the iframe
+        const messageHandler = (event) => {
+            if (event.data?.type !== 'tosi-test-results')
+                return;
+            const { filename, results } = event.data;
+            if (!pageTestResults[filename]) {
+                pageTestResults[filename] = {
+                    passed: true,
+                    tests: [],
+                    totalPassed: 0,
+                    totalFailed: 0,
+                };
+            }
+            const pageResults = pageTestResults[filename];
+            pageResults.tests.push(...results.tests);
+            pageResults.totalPassed += results.passed;
+            pageResults.totalFailed += results.failed;
+            pageResults.passed = pageResults.totalFailed === 0;
+            updateDocTestStatus(filename);
+            updateTestWidget();
+        };
+        window.addEventListener('message', messageHandler);
         for (const doc of docsWithTests) {
-            // Skip current page - it will run tests naturally
-            if (doc.filename === currentFilename) {
+            // Skip current page — it runs tests naturally
+            if (doc.filename === currentFilename)
                 continue;
-            }
-            // Reset page results for this doc
-            pageTestResults[doc.filename] = {
-                passed: true,
-                tests: [],
-                totalPassed: 0,
-                totalFailed: 0,
-            };
-            // Create a container and render the doc content
-            const testContainer = document.createElement('div');
-            const viewer = tosiMd({
-                value: doc.text,
-                didRender() {
-                    LiveExample.insertExamples(this, context);
-                },
+            // Navigate iframe to the page
+            const base = window.location.origin + window.location.pathname;
+            testFrame.src = `${base}?${doc.filename}&_testMode=1`;
+            // Wait for the iframe to signal it's done (max 30s per page)
+            await new Promise((resolve) => {
+                const deadline = Date.now() + 30_000;
+                const onDone = (event) => {
+                    if (event.data?.type === 'tosi-tests-done' &&
+                        event.data.filename === doc.filename) {
+                        window.removeEventListener('message', onDone);
+                        resolve();
+                    }
+                };
+                window.addEventListener('message', onDone);
+                setTimeout(() => {
+                    window.removeEventListener('message', onDone);
+                    resolve();
+                }, deadline - Date.now());
             });
-            testContainer.appendChild(viewer);
-            // Listen for test results from this container
-            const handleBgTest = (event) => {
-                const { results } = event.detail;
-                const pageResults = pageTestResults[doc.filename];
-                pageResults.tests.push(...results.tests);
-                pageResults.totalPassed += results.passed;
-                pageResults.totalFailed += results.failed;
-                pageResults.passed = pageResults.totalFailed === 0;
-                updateDocTestStatus(doc.filename);
-                updateTestWidget();
-            };
-            testContainer.addEventListener('testcomplete', handleBgTest);
-            // Append to iframe for execution
-            const frameDoc = testFrame.contentDocument;
-            if (frameDoc) {
-                frameDoc.body.innerHTML = '';
-                frameDoc.body.appendChild(testContainer);
-                // Wait for all live examples with tests to finish (max 30s per page)
-                await new Promise((resolve) => {
-                    const deadline = Date.now() + 30_000;
-                    const checkDone = () => {
-                        if (Date.now() > deadline) {
-                            resolve();
-                            return;
-                        }
-                        const examples = testContainer.querySelectorAll('tosi-example');
-                        const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
-                        const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
-                        if (withTests.length > 0 && running.length === 0) {
-                            resolve();
-                        }
-                        else {
-                            setTimeout(checkDone, 100);
-                        }
-                    };
-                    // Give initial render time to start
-                    setTimeout(checkDone, 200);
-                });
-            }
             markPageTested(doc.filename);
         }
         // Clean up
+        window.removeEventListener('message', messageHandler);
         testFrame.remove();
         // Mark current page as tested if it has tests
         if (docsWithTests.some((d) => d.filename === currentFilename)) {
-            // Current page tests will complete naturally, just wait a bit
-            setTimeout(() => {
-                markPageTested(currentFilename);
-            }, 1000);
+            setTimeout(() => markPageTested(currentFilename), 1000);
         }
     };
     // Run background tests when enabled (initially or when toggled on)

package/dist/icons.d.ts

@@ -8,6 +8,8 @@ export interface IconRule {
     prefix: string | RegExp;
     apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
+/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
+export declare const safeIconSuffix: (name: string) => string;
 export declare const iconRules: IconRule[];
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {

package/dist/icons.js

@@ -7,26 +7,6 @@
   <tosi-icon title="tosi-platform" icon="tosiPlatform" style="--tosi-icon-size: 128px"></tosi-icon>
 </div>
 
-A library that provides `ElementCreator` functions that produce SVG icons. It leverages `tosijs`'s
-`svgElements` proxy and is intended to address all the key use-cases for SVG icons in web
-applications along with being very easy to extend and maintain.
-
-> ### Supported Use Cases
-> - inline SVGs that can be styled by CSS (for buttons, etc.)
-> - allows both stroked and filled icons (unlike font-based systems)
-> - support for color icons (without requiring multiple glyphs perfectly aligned)
-> - icons can be rendered  as data urls, e.g. to insert into CSS… (the little `owl` logo rendered under blockquotes is an example)
-> - icon composition: stack, transform, and style icons via naming conventions (e.g. `lock50s75o$shield`)
-> - extensible rules system for custom prefixes and overlays (e.g. `unLock`, `checkFile`)
-> - icon redirects eliminate redundant SVG data (e.g. `chevronDown` → `chevronRight90r`)
-
-### Nice Features
-> - no build process magic needed (your icons are "just javascript", no special CSS files needed, no magic glyph mappings). Adding new, or overriding existing, icons is trivial.
-> - icons are just regular SVG, not a specialized subset.
-> - highly optimized and compressible (the code is comparable in size to what you get with a compressed font built from the same icons, except icon fonts don't support strokes, gradients, etc.)
-
-## icons
-
 `icons` is a proxy that generates an `ElementCreator` for a given icon on demand,
 e.g. `icons.chevronDown()` produces an `<svg>` element containing a downward-pointing chevron
 icon with the class `icon-chevron-down`.
@@ -351,7 +331,7 @@ that, for example, treat all colored icons inside buttons the same way.
 <tosi-icon icon="lock50s75o_10y$shield_brandColorS" size=128></tosi-icon>
 <tosi-icon icon="unLock_brandColorS" size=128></tosi-icon>
 <tosi-icon icon="checkFile" size=128></tosi-icon>
-<tosi-icon icon="spin120Loader40s_30x$cloud" size=128></tosi-icon>
+<tosi-icon icon="spin120Loader40s_30x_brandColorS$cloud" size=128></tosi-icon>
 
 ### Why?
 
@@ -371,6 +351,12 @@ variations on every icon?
 <tosi-icon icon="pin0f_brandColorS" size=64></tosi-icon>
 <tosi-icon icon="unPin_brandColorS" size=64></tosi-icon>
 
+And now we can just create icon languages…
+
+<tosi-icon icon="checkUsers" size=64></tosi-icon>
+<tosi-icon icon="searchMap" size=64></tosi-icon>
+<tosi-icon icon="cancelHeart" size=64></tosi-icon>
+
 ### Icon modifier suffixes
 
 The suffix system is inspired by tosijs's CSS variable math, where
@@ -473,35 +459,6 @@ with `svg2DataUrl`.
 If you ask for an icon that isn't defined, the `icons` proxy will print a warning to console
 and render a `square` (in fact, `icons.square()`) as a fallback.
 
-## Why?
-
-My evolution has been:
-
-1. Using Icomoon.io, which I still think is a solid choice for managing custom icon fonts
-2. Processing Icomoon selection.json files into icon-data and then generating SVGs dynamically
-   from the data
-3. Ingesting SVGs directly, with a little cleanup
-
-The goal is always to have a single source of truth for icons, no magic or convoluted tooling, and
-be able to quickly and easily add and replace icons, distribute them with components, and
-have no mess or fuss.
-
-1. Works well, but…
-   - color icons are flaky,
-   - doesn't play well with others,
-   - can't really distribute the icons with your components.
-   - difficult to use icons in CSS `content`
-   - impossible to use icons in CSS backgrounds
-2. This is `icons.ts` until just now! Solves all the above, but…
-   - no fancy SVG effects, like gradients (goodness knows I experimented with converting CSS gradients to SVG gradients) and, most
-   - **strokes** need to be converted to outlines
-   - outlined strokes can't be styled the way strokes can
-   - blocks use of popular icon libraries
-3. This is how everyone else works, except…
-   - no build magic needed: `defineIcons({ myIcon: '<svg....>', ... })`
-   - if you want build magic, `icons.js` has no dependencies, finds icons and creates an `icon-data.ts` file.
-   - smaller icon files, even though I'm now including more icons (including *all the current* feathericons)
-
 ## Icon Sources
 
 Many of these icons are sourced from [Feather Icons](https://github.com/feathericons/feather), but
@@ -514,6 +471,12 @@ The remaining icons I have created myself using the excellent but sometimes flaw
 [Amadine](https://apps.apple.com/us/app/amadine-vector-design-art/id1339198386?mt=12)
 and before that [Graphic](https://apps.apple.com/us/app/graphic/id404705039?mt=12).
 
+### Building icon data
+
+Use [make-icon-data](/?make-icon-data.js) to generate icon data from SVG files.
+It supports directional folder conventions to auto-generate rotated and flipped
+variants, eliminating redundant SVGs.
+
 ### Feather Icons Copyright Notice
 
 The MIT License (MIT)
@@ -573,6 +536,8 @@ export const svg2DataUrl = (icon, fill, stroke, strokeWidth) => {
     const text = encodeURIComponent(svg.outerHTML);
     return `url(data:image/svg+xml;charset=UTF-8,${text})`;
 };
+/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
+export const safeIconSuffix = (name) => /\d$/.test(name) ? name + '_' : name;
 export const iconRules = [
     {
         prefix: /^spin(_?\d+)/,
@@ -580,40 +545,38 @@ export const iconRules = [
             const dps = match[1].replace('_', '-');
             const duration = 360 / Math.abs(parseFloat(dps));
             const direction = dps.startsWith('-') ? 'reverse' : 'normal';
-            // Strip suffixes — apply them to the wrapper, not the inner icon
-            const parsed = parseStyleSuffixes(baseName);
-            const iconName = parsed ? parsed.baseName : baseName;
-            const icon = resolveIcon(iconName, []);
+            // Resolve baseName with suffixes intact — they apply to the icon
+            const icon = resolveIcon(baseName, []);
             const el = icon;
             if (el.animate) {
-                el.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }], {
+                const base = el.style.transform || '';
+                el.animate([
+                    { transform: `${base} rotate(0deg)` },
+                    { transform: `${base} rotate(360deg)` },
+                ], {
                     duration: duration * 1000,
                     iterations: Infinity,
                     direction,
                 });
             }
-            const wrapper = wrapIcon(baseName, parts, icon);
-            if (parsed) {
-                Object.assign(wrapper.style, parsed.style);
-            }
-            return wrapper;
+            return wrapIcon(baseName, parts, icon);
         },
     },
     {
         prefix: 'un',
-        apply: (baseName) => `slash25o$${baseName}75s75o`,
+        apply: (baseName) => `slash25o$${safeIconSuffix(baseName)}75s75o`,
     },
     {
         prefix: 'check',
-        apply: (baseName) => `check75o_00aa00S$${baseName}75s50o`,
+        apply: (baseName) => `check75o_00aa00S$${safeIconSuffix(baseName)}75s50o`,
     },
     {
         prefix: 'cancel',
-        apply: (baseName) => `x75o_cc0000S$${baseName}75s50o`,
+        apply: (baseName) => `x75o_cc0000S$${safeIconSuffix(baseName)}75s50o`,
     },
     {
         prefix: 'search',
-        apply: (baseName) => `search80s30x30y$${baseName}50o`,
+        apply: (baseName) => `search80s30x30y$${safeIconSuffix(baseName)}50o`,
     },
 ];
 function makeIcon(spec, parts) {
@@ -706,21 +669,41 @@ function composeIcon(prop, parts) {
     return null;
 }
 const MAX_REDIRECTS = 10;
-// Style suffixes — always value then letter code:
+// Style suffixes — value then letter code:
 //   50o (opacity), 75s (scale), 20x (translateX%), _10y (translateY%)
 //   90r (rotate 90°), _45r (rotate -45°), 0f (flipH), 1f (flipV)
 //   _FF0000F (fill hex), _f00S (stroke hex), 3W (stroke-width)
 //   _brandColorF (fill var), _accentS (stroke var)
-const SUFFIX_RE = /(_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W)+$/;
+// Icon names ending in digits need _ separator: edit2_50o
+const SUFFIX_RE = /(?:(?<=[a-zA-Z_])(?:_?\d+[osxyr]|[01]f|\d+W)|_[a-zA-Z0-9]+[FS])+$/;
 function parseStyleSuffixes(name) {
     const match = name.match(SUFFIX_RE);
     if (!match)
         return null;
-    const baseName = name.slice(0, match.index);
+    let baseName = name.slice(0, match.index);
     if (!baseName)
         return null;
+    // Strip trailing _ separator (for digit-ending names: edit2_50o)
+    if (baseName.endsWith('_'))
+        baseName = baseName.slice(0, -1);
+    if (!baseName)
+        return null;
+    const data = iconData;
+    // Accept if baseName is in iconData, or matches a composition rule prefix
+    if (!data[baseName]) {
+        const matchesRule = iconRules.some((rule) => {
+            if (rule.prefix instanceof RegExp) {
+                return rule.prefix.test(baseName);
+            }
+            return baseName.startsWith(rule.prefix) && baseName.length > rule.prefix.length;
+        });
+        if (!matchesRule)
+            return null;
+    }
     const style = {};
-    const suffixes = match[0].match(/_?\d{2,3}[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d{1,3}W/g);
+    const suffixes = match[0].match(/_?\d+[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d+W/g);
+    if (!suffixes)
+        return null;
     let tx = '';
     let ty = '';
     let scale = '';