tosijs-ui 1.16.1 → 1.16.2

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 1.16.2
+
+A patch: live examples show what they log, a spinner while a `run` dialect works, and three
+carousel fixes. The one visible change to existing pages is the first: an example that logs
+now shows its output under the preview. `dist/iife.js` grows by 1.8 kB gzip (472.8 → 474.6 kB).
+
+### A spinner while a `run` dialect is working (#184)
+
+A `run` that waits on the network or an LLM used to leave an empty box that looked broken.
+Now a spinner shows over the example while the run is pending, after a quarter-second so a
+fast run never flashes it, and a re-run replaces it. Under `prefers-reduced-motion` it is a
+still ring. Asked for by tjs-lang, whose weather and GitHub examples take 5 to 10 seconds.
+
+### `<tosi-carousel>`: tappable dots, `auto` that waits, resize-safe (#204)
+
+Found by tosijs-virta using a carousel as a full-bleed hero on a phone.
+
+- **The dots are tappable.** Each still draws an 8px dot, but answers taps across its whole
+  slot and 44px tall (`--carousel-dot-hit-size`), so a tap that just misses a dot no longer
+  opens the slide underneath.
+- **`auto` holds still while someone is looking:** under a mouse hover, while keyboard focus is
+  inside it, and always under `prefers-reduced-motion: reduce` (which also makes paging jump
+  instead of animating). A touch is never treated as a hover.
+- **A resize re-seats the current slide** instead of leaving it partway into the next.
+
+### Live examples show what they log
+
+What an example logs (`console.log`, `info`, `warn`, `error`, `debug`, `dir`, `table`) now
+appears in a console under its preview, as well as in devtools. tjs-lang asked for it on #184:
+a `tjs` example that logs its results showed a reader an empty box.
+
+- Each example gets its own `console`, passed in the way `preview` is. The global console is
+  never patched, so examples never see each other's output.
+- The panel appears only when an example logs something. **Existing examples that log now show
+  it**; examples that don't look exactly as before.
+- A re-run starts a clean console, and a late log from the previous run (a timer it left
+  behind) is not shown. The panel keeps 500 lines and counts the rest.
+- **To turn it off:** `exampleConsole: false` in a `tosijs-ui/site` config (site-wide, no
+  code needed), the fence option `{"console": false}` for one example, or
+  `setExampleConsole(false)` from `tosijs-ui/live-example` in your own bundle.
+- An example that declares its own top-level `console` (`const console = …`) keeps it and
+  isn't captured, rather than failing to run.
+- Values print readably: strings as written, data as JSON (Maps and Sets included), errors as
+  `Name: message`, also for errors and elements from an `:iframe` example.
+- A `run` dialect receives the same console as `context.console`, so a VM can forward its
+  output to the panel.
+
 ## 1.16.1
 
 A patch: everything here is additive. Two features, a search field that suggests refinements

package/dist/carousel.d.ts

@@ -12,7 +12,16 @@ export declare class TosiCarousel extends TosiCarousel_base {
     static preferredTagName: string;
     private lastAutoAdvance;
     private interval?;
+    private hovered;
+    private focusedVisibly;
+    private resizeObserver?;
+    get autoPaused(): boolean;
     private autoAdvance;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private realign;
     private _page;
     get page(): number;
     set page(p: number);
@@ -28,6 +37,7 @@ export declare class TosiCarousel extends TosiCarousel_base {
             _carouselDotCurrentColor: string;
             _carouselDotSize: number;
             _carouselDotSpacing: string;
+            _carouselDotHitSize: number;
             _carouselProgressPadding: number;
             _carouselDotTransition: string;
             display: string;
@@ -87,27 +97,42 @@ export declare class TosiCarousel extends TosiCarousel_base {
             display: string;
         };
         ':host .dot': {
+            position: string;
+            zIndex: number;
+            display: string;
+            placeItems: string;
+            flex: string;
+            width: string;
+            height: string;
+            margin: string;
+            background: string;
+        };
+        ':host .dot::before': {
+            content: string;
+            display: string;
             background: string;
             borderRadius: string;
             height: string;
             width: string;
             transition: string;
         };
-        ':host .dot:not(.current):hover': {
+        ':host .dot:not(.current):hover::before': {
             background: string;
             height: string;
             width: string;
-            margin: string;
         };
-        ':host .dot:not(.current):active': {
+        ':host .dot:not(.current):active::before': {
             background: string;
         };
-        ':host .dot.current': {
+        ':host .dot.current::before': {
             background: string;
         };
+        ':host .dot:focus-visible::before': {
+            boxShadow: string;
+        };
         ':host::part(progress)': {
             display: string;
-            gap: string;
+            gap: number;
             justifyContent: string;
             padding: string;
         };

package/dist/carousel.js

@@ -53,11 +53,25 @@ This is a minimalist carousel component that supports the usual stuff.
 - `loop` (boolean, false by default) causes next/previous buttons to loop
 - `auto` (number, 0 [seconds] by default) if > 0, automatically advances after that many seconds (always loops!)
 
+## Behaviour
+
+- **`auto` holds still while someone is looking:** while a mouse hovers over it, while keyboard
+  focus is inside it, and always when the reader asks for reduced motion
+  (`prefers-reduced-motion: reduce`, which also makes paging jump instead of animating). A swipe
+  or a chosen slide restarts the countdown. A touch is never treated as a hover, since nothing
+  would ever end it.
+- **The dots are tappable:** each draws a `--carousel-dot-size` dot (8px) but answers taps across
+  its whole slot and `--carousel-dot-hit-size` (44px) tall, so a tap that just misses a dot
+  doesn't open the slide underneath.
+- **Resizing keeps the current slide in place** (rotation, a window resize) instead of leaving
+  it partway into the next one.
+
 <tosi-css-var-editor element-selector="tosi-carousel"></tosi-css-var-editor>
 */
 /*{ "parent": "Components" }*/
 import { elements, vars, withAttributes } from 'tosijs';
 import { icons } from './icons.js';
+import { prefersReducedMotion } from './reduced-motion.js';
 const { button, slot, div } = elements;
 export class TosiCarousel extends withAttributes({
     dots: false,
@@ -71,11 +85,59 @@ export class TosiCarousel extends withAttributes({
     static preferredTagName = 'tosi-carousel';
     lastAutoAdvance = Date.now();
     interval;
+    hovered = false;
+    focusedVisibly = false;
+    resizeObserver;
+    /*
+    `auto` holds still while someone is looking at it (#204): under a mouse hover, while keyboard
+    focus is inside it, and always under `prefers-reduced-motion: reduce`. A swipe already
+    restarts the countdown (every scroll resets `lastAutoAdvance`), so a slide someone just chose
+    stays up for a full `auto` interval.
+    */
+    get autoPaused() {
+        return this.hovered || this.focusedVisibly || prefersReducedMotion();
+    }
     autoAdvance = () => {
+        if (this.auto <= 0)
+            return;
+        if (this.autoPaused) {
+            this.lastAutoAdvance = Date.now();
+            return;
+        }
         if (this.auto > 0 && this.auto * 1000 < Date.now() - this.lastAutoAdvance) {
             this.forward();
         }
     };
+    // Mouse only. A phone's tap also sends pointerenter (and focus), and nothing ever sends the
+    // matching leave, so treating a touch as "hover" would stop the carousel for good.
+    handlePointerEnter = (event) => {
+        if (event.pointerType === 'mouse')
+            this.hovered = true;
+    };
+    handlePointerLeave = (event) => {
+        if (event.pointerType === 'mouse')
+            this.hovered = false;
+    };
+    // Keyboard focus only (`:focus-visible`), for the same reason: a tap focuses too.
+    handleFocusIn = (event) => {
+        const target = event.composedPath()[0];
+        this.focusedVisibly = target?.matches?.(':focus-visible') === true;
+    };
+    handleFocusOut = (event) => {
+        const next = event.relatedTarget;
+        if (!next || !this.contains(next))
+            this.focusedVisibly = false;
+    };
+    // A resize (rotation, a window drag) changes the slide width, so re-seat the current page
+    // without animating; otherwise it rests partway into the next slide until it next moves.
+    realign = () => {
+        if (!this.hydrated)
+            return;
+        const { scroller } = this.parts;
+        cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = null;
+        scroller.scrollLeft = this.page * scroller.offsetWidth;
+    };
     _page = 0;
     get page() {
         return this._page;
@@ -113,6 +175,8 @@ export class TosiCarousel extends withAttributes({
             _carouselDotCurrentColor: '#0008',
             _carouselDotSize: 8,
             _carouselDotSpacing: vars.carouselDotSize,
+            // The tappable area around each dot; the dot itself stays --carousel-dot-size (#204).
+            _carouselDotHitSize: 44,
             _carouselProgressPadding: 12,
             _carouselDotTransition: '0.125s ease-in-out',
             display: 'flex',
@@ -171,28 +235,55 @@ export class TosiCarousel extends withAttributes({
         ':host *::-webkit-scrollbar, *::-webkit-scrollbar-thumb': {
             display: 'none',
         },
+        /*
+        Each dot is a button drawing a --carousel-dot-size dot (#204). Its hit area is the dot's
+        whole PITCH across (dot + spacing, so the strip has no gaps and no two dots overlap) and
+        --carousel-dot-hit-size (44px, a touch target) tall. A negative vertical margin gives the
+        extra height back to the layout, so the strip is sized as before and the hit area reaches
+        past it — over the slide, where an overlaid dot strip sits, which is exactly where a tap
+        that just missed a dot used to open the slide instead.
+    
+        Not 44px across: the first cut did that, and with dots 16px apart each dot's hit area
+        covered its neighbour's centre, so a tap dead on one dot selected the next.
+        */
         ':host .dot': {
+            position: 'relative',
+            zIndex: 3,
+            display: 'grid',
+            placeItems: 'center',
+            flex: `0 0 calc(${vars.carouselDotSize} + ${vars.carouselDotSpacing})`,
+            width: `calc(${vars.carouselDotSize} + ${vars.carouselDotSpacing})`,
+            height: vars.carouselDotHitSize,
+            margin: `calc((${vars.carouselDotSize} - ${vars.carouselDotHitSize}) / 2) 0`,
+            background: 'transparent',
+        },
+        ':host .dot::before': {
+            content: '""',
+            display: 'block',
             background: vars.carouselButtonColor,
             borderRadius: vars.carouselDotSize,
             height: vars.carouselDotSize,
             width: vars.carouselDotSize,
             transition: vars.carouselDotTransition,
         },
-        ':host .dot:not(.current):hover': {
+        ':host .dot:not(.current):hover::before': {
             background: vars.carouselButtonHoverColor,
             height: vars.carouselDotSize150,
             width: vars.carouselDotSize150,
-            margin: vars.carouselDotSize_25,
         },
-        ':host .dot:not(.current):active': {
+        ':host .dot:not(.current):active::before': {
             background: vars.carouselButtonActiveColor,
         },
-        ':host .dot.current': {
+        ':host .dot.current::before': {
             background: vars.carouselDotCurrentColor,
         },
+        ':host .dot:focus-visible::before': {
+            boxShadow: `0 0 0 2px ${vars.carouselButtonActiveColor}`,
+        },
         ':host::part(progress)': {
             display: 'flex',
-            gap: vars.carouselDotSpacing,
+            // the spacing is inside each dot's hit area (see .dot), so no gap between them
+            gap: 0,
             justifyContent: 'center',
             padding: vars.carouselProgressPadding,
         },
@@ -248,7 +339,8 @@ export class TosiCarousel extends withAttributes({
             return;
         }
         const elapsed = (Date.now() - timestamp) / 1000;
-        if (elapsed >= this.snapDuration ||
+        if (prefersReducedMotion() ||
+            elapsed >= this.snapDuration ||
             Math.abs(scroller.scrollLeft - position) < 2) {
             scroller.scrollLeft = position;
             this.animationFrame = null;
@@ -276,11 +368,23 @@ export class TosiCarousel extends withAttributes({
         forward.addEventListener('click', this.forward);
         scroller.addEventListener('scroll', this.indicateCurrent);
         progress.addEventListener('click', this.handleDotClick);
+        this.addEventListener('pointerenter', this.handlePointerEnter);
+        this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver ??= new ResizeObserver(this.realign);
+            this.resizeObserver.observe(scroller);
+        }
         this.lastAutoAdvance = Date.now();
+        clearInterval(this.interval);
         this.interval = setInterval(this.autoAdvance, 100);
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         clearInterval(this.interval);
+        this.resizeObserver?.disconnect();
+        this.hovered = this.focusedVisibly = false;
     }
     render() {
         super.render();

package/dist/doc-system/site/orchestrator.js

@@ -1207,6 +1207,10 @@ export async function buildSite(config, opts = {}) {
             const policyHead = config.liveExamples === 'opt-in'
                 ? `<script>globalThis.__TOSI_EXAMPLE_POLICY="opt-in"</script>`
                 : '';
+            // Likewise only when switched off, so a default site's HTML does not change.
+            const consoleHead = config.exampleConsole === false
+                ? `<script>globalThis.__TOSI_EXAMPLE_CONSOLE=false</script>`
+                : '';
             // Optional (tjs-lang 0.11+): the import-resolver service worker. Lets live examples
             // import real npm packages from anywhere — bare specifiers the doc-system doesn't
             // inject become `/<prefix>/<spec>` requests the worker resolves + caches. GATED behind
@@ -1419,7 +1423,13 @@ export async function buildSite(config, opts = {}) {
                 // instead of the classic IIFE. See the ESM hydration bundle above.
                 hydrateUrl: hydrateName ? `/${hydrateName}` : undefined,
                 bakes: exampleBakes,
-                headExtra: [config.headExtra, tjsHead, policyHead, importResolverHead]
+                headExtra: [
+                    config.headExtra,
+                    tjsHead,
+                    policyHead,
+                    consoleHead,
+                    importResolverHead,
+                ]
                     .filter(Boolean)
                     .join('') || undefined,
                 scriptUrl: config.scriptUrl,

package/dist/doc-system/site/site-config.d.ts

@@ -129,6 +129,13 @@ export interface SiteConfig {
      * Per-fence, ` ```js:static ` opts a single block out under either policy.
      */
     liveExamples?: 'auto' | 'opt-in';
+    /**
+     * Show what a live example logs in a console under its preview (default `true`, 1.16.2).
+     * The panel appears only once an example logs something. `false` turns it off site-wide;
+     * logs still reach the browser's devtools. One example opts out with the fence option
+     * `{"console": false}`.
+     */
+    exampleConsole?: boolean;
     /** modules to leave external in the bundle, e.g. ['jolt-physics'] */
     bundleExternals?: string[];
     /**