@inkra/react 0.8.0 → 0.9.0

package/dist/number-ticker/RollingValue.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PencilText } from '../PencilText.js';
+import { rollMix } from './rolling.js';
+export function RollingValue({ columns, progress, direction }) {
+    return _jsx("span", { className: "inkra-number-ticker__reels", dir: "ltr", "data-direction": direction, children: columns.map(column => {
+            const width = rollMix(column.fromWidth, column.toWidth, progress);
+            return _jsx("span", { className: "inkra-number-ticker__column", "data-place": column.key, "data-digit": column.digit || undefined, "data-departing": column.target === '' || undefined, style: column.digit ? { width: `${width}ch` } : { gridTemplateColumns: `${width}fr` }, children: _jsx("span", { className: "inkra-number-ticker__column-inner", children: column.faces.map(face => _jsx("span", { className: "inkra-number-ticker__face", "data-face": face.text === column.target ? 'to' : 'from', style: { transform: column.digit ? `translateY(${rollMix(face.fromOffset, face.toOffset, progress) * 100}%)` : undefined,
+                            opacity: rollMix(face.fromOpacity, face.toOpacity, progress) }, children: _jsx(PencilText, { seed: `ticker-reel-${column.key}-${face.text}`, children: face.text }) }, face.text)) }) }, column.key);
+        }) });
+}

package/dist/number-ticker/index.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerValue } from './model.js';
+export type NumberTickerAnimation = 'count' | 'roll';
+export type NumberTickerRollDirection = 'auto' | 'up' | 'down';
 export interface NumberTickerRenderDetails {
     animating: boolean;
     formattedValue: string;
@@ -19,6 +21,8 @@ export interface NumberTickerProps extends Omit<ComponentPropsWithoutRef<'span'>
     renderValue?: (value: NumberTickerValue, details: NumberTickerRenderDetails) => ReactNode;
     getValueLabel?: (value: NumberTickerValue, formattedValue: string) => string;
     animate?: boolean;
+    animation?: NumberTickerAnimation;
+    rollDirection?: NumberTickerRollDirection;
     duration?: number;
     easing?: (progress: number) => number;
     showDelta?: boolean;

package/dist/number-ticker/index.js

@@ -5,6 +5,8 @@ import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { canAnimateTickerValue, createNumberFormatter, createTickerFormatter, easeOutCubic, formatDerivedTickerDelta, formatTickerValue, interpolateTickerValue, tickerValueChanged, subtractTickerValues, tickerValueKey, } from './model.js';
 import { ExactDecimal } from './precision.js';
+import { RollingValue } from './RollingValue.js';
+import { createRollingMotion, rollingTokens, sameRollingTokens } from './rolling.js';
 function usePrefersReducedMotion() {
     const [reduced, setReduced] = useState(false);
     useBrowserLayoutEffect(() => {
@@ -24,7 +26,7 @@ function lettering(content, seed) {
 function accessibleAffix(content) {
     return typeof content === 'string' || typeof content === 'number' ? String(content) : '';
 }
-export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale: localeProp, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+export const NumberTicker = forwardRef(function NumberTicker({ animate = true, animation = 'count', className, compact = false, compactOptions, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale: localeProp, prefix, renderDelta, renderValue, rollDirection = 'auto', showDelta = false, suffix, value, ...props }, forwardedRef) {
     const { locale: inheritedLocale } = useInkraLocale();
     const locale = localeProp ?? inheritedLocale;
     const rootRef = useRef(null);
@@ -36,6 +38,9 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     const [announcedValue, setAnnouncedValue] = useState(value);
     const [animating, setAnimating] = useState(false);
     const [delta, setDelta] = useState(null);
+    const [roll, setRoll] = useState(null);
+    const [rollProgress, setRollProgress] = useState(1);
+    const rollFrameRef = useRef(null);
     const reducedMotion = usePrefersReducedMotion();
     const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
     const formatOptionsKey = JSON.stringify(formatOptions ?? {});
@@ -45,6 +50,14 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     const deltaFormatter = useMemo(() => createTickerFormatter(locale, deltaFormatOptions ?? formatOptions, compact, compactOptions), [localeKey, deltaFormatOptionsKey, compact, compactOptionsKey]);
     const announcementFormatter = useMemo(() => createNumberFormatter(locale, compact ? { ...formatOptions, notation: 'standard' } : formatOptions), [localeKey, formatOptionsKey, compact]);
     useImperativeHandle(forwardedRef, () => rootRef.current);
+    const rollRequested = animation === 'roll' && !renderValue;
+    const finalTokens = useMemo(() => rollRequested ? rollingTokens(formatter.formatToParts(value)) : [], [formatter, value, rollRequested]);
+    // Keep exact large values readable without creating thousands of painted reels.
+    const useRoll = rollRequested && finalTokens.length <= 128;
+    const settledTokensRef = useRef(finalTokens);
+    const previousFormatterRef = useRef(formatter);
+    const previousUseRollRef = useRef(useRoll);
+    const columns = useMemo(() => roll?.columns ?? createRollingMotion(finalTokens, finalTokens, 'up'), [roll, finalTokens]);
     useBrowserLayoutEffect(() => {
         const previousTarget = targetRef.current;
         targetRef.current = value;
@@ -72,22 +85,53 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 && typeof window.matchMedia === 'function'
                 && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
         const from = displayedRef.current;
-        if (!animate || reduceImmediately || !canAnimateTickerValue(from, value, duration)) {
+        const formatChanged = previousFormatterRef.current !== formatter;
+        previousFormatterRef.current = formatter;
+        const modeChanged = previousUseRollRef.current !== useRoll;
+        previousUseRollRef.current = useRoll;
+        if (!animate || reduceImmediately || formatChanged || modeChanged
+            || (useRoll && !rollFrameRef.current && sameRollingTokens(settledTokensRef.current, finalTokens))
+            || (rollRequested && (!useRoll || settledTokensRef.current.length > 128))
+            || !canAnimateTickerValue(from, value, duration)) {
             displayedRef.current = value;
             setDisplayedValue(value);
             setAnnouncedValue(value);
             setAnimating(false);
+            setRoll(null);
+            setRollProgress(1);
+            settledTokensRef.current = finalTokens;
+            rollFrameRef.current = null;
             return undefined;
         }
+        if (useRoll) {
+            const direction = rollDirection === 'auto'
+                ? (new ExactDecimal(String(value)).gt(String(from)) ? 'up' : 'down') : rollDirection;
+            const nextColumns = createRollingMotion(settledTokensRef.current, finalTokens, direction, rollFrameRef.current ?? undefined);
+            setRoll({ columns: nextColumns, direction });
+            setRollProgress(0);
+            rollFrameRef.current = { columns: nextColumns, progress: 0 };
+        }
+        else {
+            setRoll(null);
+            rollFrameRef.current = null;
+        }
         let startTime = null;
         setAnimating(true);
         const tick = (time) => {
             if (startTime === null)
                 startTime = time;
             const progress = Math.min(1, Math.max(0, (time - startTime) / duration));
-            const next = interpolateTickerValue(from, value, easing(progress));
+            const eased = easing(progress);
+            const bounded = Number.isFinite(eased) ? Math.min(1, Math.max(0, eased)) : progress;
+            const next = interpolateTickerValue(from, value, bounded);
             displayedRef.current = next;
-            setDisplayedValue(next);
+            if (useRoll) {
+                setRollProgress(bounded);
+                if (rollFrameRef.current)
+                    rollFrameRef.current.progress = bounded;
+            }
+            else
+                setDisplayedValue(next);
             if (progress < 1) {
                 frameRef.current = requestAnimationFrame(tick);
             }
@@ -97,6 +141,10 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 setDisplayedValue(value);
                 setAnnouncedValue(value);
                 setAnimating(false);
+                setRoll(null);
+                setRollProgress(1);
+                settledTokensRef.current = finalTokens;
+                rollFrameRef.current = null;
             }
         };
         frameRef.current = requestAnimationFrame(tick);
@@ -106,7 +154,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
                 frameRef.current = null;
             }
         };
-    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value]);
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, rollRequested, rollDirection, formatter]);
     useEffect(() => () => {
         if (frameRef.current !== null)
             cancelAnimationFrame(frameRef.current);
@@ -120,7 +168,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
         .filter(Boolean).join(' ');
     const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
     const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
-        ?? (animating
+        ?? (useRoll ? _jsx(RollingValue, { columns: columns, progress: roll ? rollProgress : 1, direction: roll?.direction ?? 'up' }) : animating
             ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
             : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
     const deltaContent = delta === null ? null : (() => {
@@ -133,6 +181,6 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, c
     })();
     const classes = ['inkra-number-ticker', animating && 'inkra-number-ticker--animating', className]
         .filter(Boolean).join(' ');
-    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
+    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, "data-animation": animation, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": new ExactDecimal(String(delta)).lt(0) ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
 });
 export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, numberTickerUnits, } from './model.js';

package/dist/number-ticker/rolling.d.ts

@@ -0,0 +1,35 @@
+export interface RollingToken {
+    key: string;
+    text: string;
+    digit: boolean;
+}
+export declare function sameRollingTokens(from: readonly RollingToken[], to: readonly RollingToken[]): boolean;
+export interface RollingColumn {
+    key: string;
+    from: string;
+    to: string;
+    digit: boolean;
+}
+export interface RollingFace {
+    text: string;
+    fromOffset: number;
+    toOffset: number;
+    fromOpacity: number;
+    toOpacity: number;
+}
+export interface RollingMotionColumn {
+    key: string;
+    digit: boolean;
+    target: string;
+    fromWidth: number;
+    toWidth: number;
+    faces: RollingFace[];
+}
+export interface RollingFrame {
+    columns: RollingMotionColumn[];
+    progress: number;
+}
+export declare const rollMix: (from: number, to: number, progress: number) => number;
+export declare function createRollingMotion(from: RollingToken[], to: RollingToken[], direction: 'up' | 'down', previous?: RollingFrame): RollingMotionColumn[];
+export declare function rollingTokens(parts: Intl.NumberFormatPart[]): RollingToken[];
+export declare function rollingColumns(from: RollingToken[], to: RollingToken[]): RollingColumn[];

package/dist/number-ticker/rolling.js

@@ -0,0 +1,87 @@
+export function sameRollingTokens(from, to) {
+    return from.length === to.length && from.every((token, index) => {
+        const next = to[index];
+        return token.key === next.key && token.text === next.text && token.digit === next.digit;
+    });
+}
+export const rollMix = (from, to, progress) => from + (to - from) * progress;
+export function createRollingMotion(from, to, direction, previous) {
+    const sign = direction === 'up' ? -1 : 1;
+    const snapshot = previous?.columns.map(column => ({
+        key: column.key, digit: column.digit,
+        width: rollMix(column.fromWidth, column.toWidth, previous.progress),
+        faces: column.faces.map(face => ({
+            text: face.text,
+            offset: rollMix(face.fromOffset, face.toOffset, previous.progress),
+            opacity: rollMix(face.fromOpacity, face.toOpacity, previous.progress),
+        })).filter(face => Math.abs(face.offset) < 1 && face.opacity > 0.01),
+    })) ?? from.map(token => ({ key: token.key, digit: token.digit, width: 1, faces: [{ text: token.text, offset: 0, opacity: 1 }] }));
+    const sources = new Map(snapshot.map(column => [column.key, column]));
+    const sourceTokens = snapshot.filter(column => column.width > 0 || column.faces.length > 0)
+        .map(column => ({ key: column.key, digit: column.digit, text: column.faces[0]?.text ?? '' }));
+    return rollingColumns(sourceTokens, to).map(column => {
+        const source = sources.get(column.key);
+        const faces = [...(source?.faces ?? [])];
+        if (column.to !== '' && !faces.some(face => face.text === column.to)) {
+            faces.push({ text: column.to, offset: column.digit ? -sign : 0, opacity: column.digit ? 1 : 0 });
+        }
+        return {
+            key: column.key, digit: column.digit, target: column.to,
+            fromWidth: source?.width ?? 0, toWidth: column.to === '' ? 0 : 1,
+            // Existing faces continue from their actual offset on a rapid retarget.
+            faces: faces.map(face => ({ text: face.text, fromOffset: face.offset,
+                toOffset: face.text === column.to ? 0 : column.digit ? sign : 0,
+                fromOpacity: face.opacity, toOpacity: face.text === column.to || column.digit ? 1 : 0,
+            })),
+        };
+    });
+}
+// Align integer places from the right and fractional places from the decimal.
+// Intl parts keep signs, grouping, currency and compact units out of digit reels.
+export function rollingTokens(parts) {
+    const remaining = new Map();
+    for (const part of parts) {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            remaining.set(part.type, (remaining.get(part.type) ?? 0) + Array.from(part.value).length);
+        }
+    }
+    const occurrences = new Map();
+    return parts.flatMap((part, index) => {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            return Array.from(part.value, text => {
+                const position = (remaining.get(part.type) ?? 1) - 1;
+                remaining.set(part.type, position);
+                return { key: `${part.type}-${position}`, text, digit: true };
+            });
+        }
+        if (part.type === 'fraction') {
+            return Array.from(part.value, (text, position) => ({ key: `fraction-${position}`, text, digit: true }));
+        }
+        const identity = part.type === 'literal'
+            ? `literal-${part.value}-${parts.slice(index + 1).find(next => next.type !== 'literal')?.type ?? 'end'}`
+            : part.type;
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        const key = part.type === 'group' ? `group-${remaining.get('integer')}` : `${identity}-${occurrence}`;
+        return [{ key, text: part.value, digit: false }];
+    });
+}
+export function rollingColumns(from, to) {
+    const old = new Map(from.map(token => [token.key, token]));
+    const next = new Map(to.map(token => [token.key, token]));
+    const result = to.map(token => ({
+        key: token.key, from: old.get(token.key)?.text ?? '', to: token.text, digit: token.digit,
+    }));
+    // Departing places retain their old order until their width reaches zero.
+    for (let index = from.length - 1; index >= 0; index -= 1) {
+        const token = from[index];
+        if (next.has(token.key))
+            continue;
+        const following = from[index + 1];
+        const insertion = following ? result.findIndex(column => column.key === following.key) : -1;
+        result.splice(insertion < 0 ? result.length : insertion, 0, {
+            key: token.key, from: token.text, to: '', digit: token.digit,
+        });
+    }
+    return result;
+}

package/dist/styles/guide.css

@@ -0,0 +1,202 @@
+.inkra-guide__spotlight,
+.inkra-guide__backdrop {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-guide__backdrop {
+  background: var(--inkra-overlay);
+}
+
+.inkra-guide__spotlight {
+  box-shadow: 0 0 0 100vmax var(--inkra-overlay);
+  overflow: visible;
+}
+
+.inkra-guide__spotlight > .inkra-pencil-surface__ink,
+.inkra-guide__spotlight > .inkra-pencil-surface__border {
+  border-radius: var(--inkra-guide-highlight-radius, 8px);
+}
+
+.inkra-guide__content {
+  max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
+  max-width: min(24rem, calc(100dvw - var(--inkra-space-6)));
+  outline: 0;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: min(22rem, calc(100dvw - var(--inkra-space-6)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-guide__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-guide__skip-layer {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 2);
+}
+
+.inkra-guide__skip {
+  color: var(--inkra-ink-muted);
+  opacity: .72;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.inkra-guide__skip:is(:hover, :focus-visible) {
+  color: var(--inkra-ink);
+  opacity: 1;
+}
+
+.inkra-guide__skip[data-placement^="top"] {
+  inset-block-start: max(var(--inkra-space-4), env(safe-area-inset-top));
+}
+
+.inkra-guide__skip[data-placement^="bottom"] {
+  inset-block-end: max(var(--inkra-space-4), env(safe-area-inset-bottom));
+}
+
+.inkra-guide__skip[data-placement$="start"] {
+  inset-inline-start: max(var(--inkra-space-4), env(safe-area-inset-left));
+}
+
+.inkra-guide__skip[data-placement$="end"] {
+  inset-inline-end: max(var(--inkra-space-4), env(safe-area-inset-right));
+}
+
+.inkra-guide__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  width: 100%;
+}
+
+.inkra-guide__panel {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-space-4);
+  max-height: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-5);
+}
+
+.inkra-guide__header,
+.inkra-guide__footer,
+.inkra-guide__navigation {
+  align-items: center;
+  display: flex;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-guide__header {
+  align-items: flex-start;
+}
+
+.inkra-guide__heading {
+  display: grid;
+  flex: 1;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+}
+
+.inkra-guide__progress {
+  color: var(--inkra-ink-subtle);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-guide__title {
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-guide__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+}
+
+.inkra-guide__close {
+  flex: none;
+}
+
+.inkra-guide__footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.inkra-guide__footer > :empty {
+  display: none;
+}
+
+.inkra-guide__navigation {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.inkra-guide__footer .inkra-button {
+  max-width: 100%;
+}
+
+@media (max-width: 30rem) {
+  .inkra-guide__content {
+    max-height: calc(100dvh - var(--inkra-space-4));
+    max-width: calc(100dvw - var(--inkra-space-4));
+    width: calc(100dvw - var(--inkra-space-4));
+  }
+
+  .inkra-guide__panel {
+    padding: var(--inkra-space-4);
+  }
+
+  .inkra-guide__footer,
+  .inkra-guide__navigation {
+    width: 100%;
+  }
+
+  .inkra-guide__footer > .inkra-button,
+  .inkra-guide__navigation > .inkra-button {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-guide__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-guide__backdrop {
+    background: CanvasText;
+    opacity: 0.25;
+  }
+
+  .inkra-guide__spotlight {
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, CanvasText 25%, transparent);
+    outline: 2px solid Highlight;
+  }
+
+  .inkra-guide__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-guide__skip {
+    color: ButtonText;
+    opacity: 1;
+  }
+}

package/dist/styles/image-viewer.css

@@ -79,6 +79,7 @@
 }
 
 .inkra-image-viewer__body {
+  position: relative;
   display: grid;
   flex: 1 1 auto;
   min-block-size: var(--inkra-touch-target);
@@ -226,6 +227,24 @@
   padding: var(--inkra-focus-offset);
   position: relative;
   scrollbar-gutter: auto;
+  pointer-events: auto;
+}
+
+.inkra-image-viewer__floating-tools {
+  position: absolute;
+  inset-inline: max(var(--inkra-space-3), env(safe-area-inset-left)) max(var(--inkra-space-3), env(safe-area-inset-right));
+  inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--inkra-touch-target);
+  pointer-events: none;
+  z-index: 6;
+}
+
+.inkra-image-viewer__floating-tools[data-position="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: max(var(--inkra-space-3), env(safe-area-inset-bottom));
+  padding-inline: 0;
 }
 
 .inkra-image-viewer__video-navigation {
@@ -345,6 +364,7 @@
 @media print {
   .inkra-image-viewer__close-control,
   .inkra-image-viewer__navigation,
+  .inkra-image-viewer__floating-tools,
   .inkra-image-viewer__bottom { display: none; }
 }