@inkra/react 0.9.0 → 0.11.0

package/dist/slider/circular.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { ProgressRing } from '../display/ProgressRing.js';
+import { advanceArcPosition, initialArcPosition, normalizeAngle, snapCircularValue, stepCircularValue } from './circularMath.js';
+const diameters = { sm: 128, md: 160, lg: 192 };
+const thicknesses = { sm: 5, md: 6, lg: 8 };
+const thumbSizes = { sm: 20, md: 24, lg: 28 };
+export const CircularSlider = forwardRef(function CircularSlider({ value, defaultValue, onValueChange, onValueCommit, min: suppliedMin = 0, max: suppliedMax = 100, step: suppliedStep = 1, disabled = false, readOnly = false, name, form, size = 'md', diameter, startAngle = 225, sweepAngle = 270, clockwise = true, showValue = true, centerIcon, centerContent, getValueLabel, seed, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-valuetext': ariaValueText, className, style, tabIndex, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, ...props }, forwardedRef) {
+    const id = useId();
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const gesture = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const min = Number.isFinite(suppliedMin) ? suppliedMin : 0;
+    const max = Number.isFinite(suppliedMax) && Number.isFinite(suppliedMax - min) ? Math.max(min, suppliedMax) : min;
+    const step = Number.isFinite(suppliedStep) && suppliedStep > 0 ? suppliedStep : 1;
+    const initialValue = useRef(defaultValue ?? min);
+    const [uncontrolledValue, setUncontrolledValue] = useState(initialValue.current);
+    const controlled = value !== undefined;
+    const current = snapCircularValue(value ?? uncontrolledValue, min, max, step);
+    const latest = useRef({ current, controlled, min, max, step });
+    latest.current = { current, controlled, min, max, step };
+    const blocked = disabled || readOnly || min === max;
+    const resolvedDiameter = Math.min(512, Math.max(96, Number.isFinite(diameter) ? diameter : diameters[size]));
+    const start = normalizeAngle(Number.isFinite(startAngle) ? startAngle : 225);
+    const sweep = Math.min(360, Math.max(1, Number.isFinite(sweepAngle) ? sweepAngle : 270));
+    const ringDiameter = resolvedDiameter - 32;
+    // Explicitly tiny diameters scale visual weight rather than consuming the center slot.
+    const thickness = Math.min(thicknesses[size], 5 + (resolvedDiameter - 96) / 4);
+    const thumbSize = Math.min(thumbSizes[size], 16 + (resolvedDiameter - 96) / 2);
+    const radius = ringDiameter / 2 - thickness - 4;
+    const progress = max > min ? (current - min) / (max - min) : 0;
+    const angle = (start + progress * sweep * (clockwise ? 1 : -1)) * Math.PI / 180;
+    const label = getValueLabel?.(current) ?? String(current);
+    const content = centerContent === undefined ? (showValue ? label : null) : typeof centerContent === 'function' ? centerContent(current) : centerContent;
+    const hasCenterIcon = centerIcon != null && typeof centerIcon !== 'boolean';
+    const hasCenterContent = content != null && typeof content !== 'boolean';
+    // Compact icon/value stacks need more vertical room than an inscribed square.
+    const centerWidth = Math.max(16, (radius - thickness - 4) * 2) + 10;
+    const centerHeight = Math.max(20, (radius - thickness - 2) * 2);
+    const combinedCenter = hasCenterIcon && hasCenterContent;
+    const requestedIconSize = Math.min(24, Math.max(12, 16 + (resolvedDiameter - 104) / 4));
+    // Account for gap + padding, reserving a complete value line at every supported size.
+    const centerIconSize = combinedCenter ? Math.min(requestedIconSize, centerHeight - 20) : 24;
+    const centerLineHeight = Math.min(resolvedDiameter <= 112 ? 18 : 24, centerHeight - centerIconSize - 6);
+    const centerFontSize = centerLineHeight < 18 ? '12px' : centerLineHeight < 22 ? '14px' : 'var(--inkra-text-lg)';
+    const resolvedSeed = seed ?? `inkra-circular-slider-${id}`;
+    function releaseCapture(pointerId) {
+        const root = rootRef.current;
+        if (root?.hasPointerCapture?.(pointerId))
+            root.releasePointerCapture(pointerId);
+    }
+    useEffect(() => {
+        if (!blocked || !gesture.current)
+            return;
+        const pointerId = gesture.current.id;
+        gesture.current = null;
+        releaseCapture(pointerId);
+    }, [blocked]);
+    useEffect(() => () => {
+        const active = gesture.current;
+        gesture.current = null;
+        if (active)
+            releaseCapture(active.id);
+    }, []);
+    useEffect(() => {
+        const document = inputRef.current?.ownerDocument;
+        if (!document)
+            return;
+        let timer;
+        const reset = (event) => {
+            // Resolve ownership at dispatch time, including forms moved or replaced after mount.
+            if (event.target !== inputRef.current?.form)
+                return;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const active = gesture.current;
+                gesture.current = null;
+                if (active)
+                    releaseCapture(active.id);
+                const state = latest.current;
+                const next = state.controlled ? state.current : snapCircularValue(initialValue.current, state.min, state.max, state.step);
+                if (!state.controlled)
+                    setUncontrolledValue(next);
+                if (inputRef.current)
+                    inputRef.current.value = String(next);
+            }, 0);
+        };
+        document.addEventListener('reset', reset, true);
+        return () => { clearTimeout(timer); document.removeEventListener('reset', reset, true); };
+    }, []);
+    function propose(next) {
+        if (!controlled)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    function pointerPosition(clientX, clientY) {
+        const rect = rootRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0 || rect.height === 0)
+            return null;
+        const x = (clientX - rect.left) / rect.width - 0.5;
+        const y = (clientY - rect.top) / rect.height - 0.5;
+        return { angle: normalizeAngle(Math.atan2(x, -y) * 180 / Math.PI), distance: Math.hypot(x, y) * resolvedDiameter };
+    }
+    function movePointer(clientX, clientY) {
+        const active = gesture.current;
+        const point = pointerPosition(clientX, clientY);
+        if (!active || !point || point.distance < Math.max(8, radius * 0.25))
+            return;
+        active.position = advanceArcPosition(active.position, active.angle, point.angle, sweep, clockwise);
+        active.angle = point.angle;
+        const next = snapCircularValue(min + active.position / sweep * (max - min), min, max, step);
+        if (next === active.value)
+            return;
+        active.value = next;
+        active.changed = true;
+        propose(next);
+    }
+    return _jsxs("div", { ...props, ref: rootRef, role: "slider", className: ['inkra-circular-slider', className].filter(Boolean).join(' '), "data-size": size, "data-disabled": disabled ? '' : undefined, "data-readonly": readOnly ? '' : undefined, "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Value'), "aria-labelledby": ariaLabelledBy, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": getValueLabel ? label : ariaValueText, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, tabIndex: disabled ? -1 : tabIndex ?? 0, style: { '--inkra-circular-slider-diameter': `${resolvedDiameter}px`, '--inkra-circular-slider-thumb-size': `${thumbSize}px`, '--inkra-circular-slider-center-width': `${centerWidth}px`, '--inkra-circular-slider-center-height': `${centerHeight + 6}px`, '--inkra-circular-slider-center-icon-size': `${centerIconSize}px`, '--inkra-circular-slider-center-font-size': combinedCenter ? centerFontSize : 'var(--inkra-text-lg)', '--inkra-circular-slider-center-line-height': combinedCenter ? `${centerLineHeight}px` : 'var(--inkra-line-ui)', ...style }, onPointerDown: event => {
+            onPointerDown?.(event);
+            if (event.defaultPrevented || blocked || gesture.current || event.button !== 0 || event.isPrimary === false)
+                return;
+            const point = pointerPosition(event.clientX, event.clientY);
+            if (!point || point.distance < Math.max(8, radius - 22) || point.distance > radius + 22)
+                return;
+            event.preventDefault();
+            event.currentTarget.focus({ preventScroll: true });
+            const thumbAngle = start + progress * sweep * (clockwise ? 1 : -1);
+            const delta = (point.angle - thumbAngle) * Math.PI / 180;
+            const thumbDistance = Math.sqrt(Math.max(0, point.distance ** 2 + radius ** 2 - 2 * point.distance * radius * Math.cos(delta)));
+            // The whole 44px thumb target grabs without changing the current value.
+            const position = thumbDistance <= 22 ? progress * sweep : initialArcPosition(point.angle, start, sweep, clockwise, progress * sweep);
+            const next = snapCircularValue(min + position / sweep * (max - min), min, max, step);
+            gesture.current = { id: event.pointerId, angle: point.angle, position, value: next, changed: next !== current };
+            try {
+                event.currentTarget.setPointerCapture(event.pointerId);
+            }
+            catch { /* Pointer capture is unavailable in some synthetic event environments. */ }
+            if (next !== current)
+                propose(next);
+        }, onPointerMove: event => {
+            onPointerMove?.(event);
+            if (event.defaultPrevented || blocked || event.pointerId !== gesture.current?.id)
+                return;
+            event.preventDefault();
+            movePointer(event.clientX, event.clientY);
+        }, onPointerUp: event => {
+            onPointerUp?.(event);
+            const active = gesture.current;
+            if (!active || active.id !== event.pointerId)
+                return;
+            if (!event.defaultPrevented && !blocked)
+                movePointer(event.clientX, event.clientY);
+            gesture.current = null;
+            releaseCapture(event.pointerId);
+            if (!event.defaultPrevented && !blocked && active.changed)
+                onValueCommit?.(active.value);
+        }, onPointerCancel: event => {
+            onPointerCancel?.(event);
+            if (event.pointerId !== gesture.current?.id)
+                return;
+            gesture.current = null;
+            releaseCapture(event.pointerId);
+        }, onLostPointerCapture: event => {
+            onLostPointerCapture?.(event);
+            if (event.pointerId === gesture.current?.id)
+                gesture.current = null;
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || blocked || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            let next;
+            if (event.key === 'Home')
+                next = min;
+            else if (event.key === 'End')
+                next = max;
+            else if (['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown', 'PageUp', 'PageDown'].includes(event.key)) {
+                const sign = ['ArrowRight', 'ArrowUp', 'PageUp'].includes(event.key) ? 1 : -1;
+                const count = event.key.startsWith('Page') || event.shiftKey ? 10 : 1;
+                next = stepCircularValue(current, sign * count, min, max, step);
+            }
+            else
+                return;
+            event.preventDefault();
+            if (next !== current) {
+                propose(next);
+                onValueCommit?.(next);
+            }
+        }, children: [_jsxs("span", { className: "inkra-circular-slider__arc", "aria-hidden": "true", style: { transform: `rotate(${start}deg) scaleX(${clockwise ? 1 : -1})` }, children: [_jsx("span", { className: "inkra-circular-slider__track", children: _jsx(ProgressRing, { diameter: ringDiameter, thickness: thickness, percent: sweep / 3.6, seed: `${resolvedSeed}-track` }) }), _jsx("span", { className: "inkra-circular-slider__range", children: _jsx(ProgressRing, { diameter: ringDiameter, thickness: thickness, percent: progress * sweep / 3.6, seed: `${resolvedSeed}-range` }) })] }), (hasCenterIcon || hasCenterContent) && _jsxs("div", { className: "inkra-circular-slider__center", "aria-hidden": "true", inert: true, children: [hasCenterIcon && _jsx("div", { className: "inkra-circular-slider__center-icon", children: centerIcon }), hasCenterContent && _jsx("div", { className: "inkra-circular-slider__center-content", children: typeof content === 'string' || typeof content === 'number'
+                            ? _jsx(PencilText, { className: "inkra-circular-slider__value", ellipsis: centerContent !== undefined, children: String(content) })
+                            : content })] }), _jsx("span", { "aria-hidden": "true", className: "inkra-circular-slider__thumb", style: { left: `${50 + Math.sin(angle) * radius / resolvedDiameter * 100}%`, top: `${50 - Math.cos(angle) * radius / resolvedDiameter * 100}%` }, children: _jsx(PencilSurface, { as: "span", className: "inkra-circular-slider__thumb-surface", variant: "paper", radius: thumbSize / 2, seed: `${resolvedSeed}-thumb`, children: _jsx(PencilSurface, { as: "span", className: "inkra-circular-slider__focus-ring", variant: "outline", radius: thumbSize / 2 + 4, seed: `${resolvedSeed}-focus` }) }) }), _jsx("input", { ref: inputRef, type: "hidden", name: name, form: form, value: current, disabled: disabled })] });
+});

package/dist/slider/circularMath.d.ts

@@ -0,0 +1,10 @@
+/** Clock angles: 0 points up and positive angles turn clockwise. */
+export declare const normalizeAngle: (angle: number) => number;
+export declare const clampCircularValue: (value: number, min: number, max: number) => number;
+/** Snap to the grid anchored at min, retaining max as an attainable final stop. */
+export declare function snapCircularValue(value: number, min: number, max: number, step: number): number;
+export declare function stepCircularValue(value: number, steps: number, min: number, max: number, step: number): number;
+/** Map an initial track press to an arc, selecting the closest endpoint in its gap. */
+export declare function initialArcPosition(angle: number, start: number, sweep: number, clockwise: boolean, current: number): number;
+/** Unwrap small consecutive movements; crossing the seam never resets to zero. */
+export declare function advanceArcPosition(position: number, previousAngle: number, angle: number, sweep: number, clockwise: boolean): number;

package/dist/slider/circularMath.js

@@ -0,0 +1,34 @@
+/** Clock angles: 0 points up and positive angles turn clockwise. */
+export const normalizeAngle = (angle) => ((angle % 360) + 360) % 360;
+export const clampCircularValue = (value, min, max) => Math.min(max, Math.max(min, value));
+function cleanNumber(value) {
+    return Number(value.toPrecision(14));
+}
+/** Snap to the grid anchored at min, retaining max as an attainable final stop. */
+export function snapCircularValue(value, min, max, step) {
+    if (!Number.isFinite(value))
+        return min;
+    const bounded = clampCircularValue(value, min, max);
+    const snapped = clampCircularValue(cleanNumber(min + Math.round((bounded - min) / step) * step), min, max);
+    return max - bounded < Math.abs(snapped - bounded) ? max : snapped;
+}
+export function stepCircularValue(value, steps, min, max, step) {
+    const position = (value - min) / step;
+    const index = steps > 0 ? Math.floor(position + 1e-9) : Math.ceil(position - 1e-9);
+    return clampCircularValue(cleanNumber(min + (index + steps) * step), min, max);
+}
+/** Map an initial track press to an arc, selecting the closest endpoint in its gap. */
+export function initialArcPosition(angle, start, sweep, clockwise, current) {
+    const position = normalizeAngle((angle - start) * (clockwise ? 1 : -1));
+    if (sweep < 360)
+        return position <= sweep ? position : position - sweep < 360 - position ? sweep : 0;
+    // Only the exact seam represents two values; other track presses are absolute.
+    if (position < 1e-7 || 360 - position < 1e-7)
+        return current > 180 ? 360 : 0;
+    return position;
+}
+/** Unwrap small consecutive movements; crossing the seam never resets to zero. */
+export function advanceArcPosition(position, previousAngle, angle, sweep, clockwise) {
+    const delta = normalizeAngle(angle - previousAngle + 180) - 180;
+    return clampCircularValue(position + delta * (clockwise ? 1 : -1), 0, sweep);
+}

package/dist/slider/index.d.ts

@@ -1,11 +1,16 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
 export type SliderSize = 'sm' | 'md' | 'lg';
 export type SliderVariant = 'standard' | 'inset';
+export type SliderThumbAlignment = 'edge' | 'contain';
 export interface SliderProps extends Omit<SliderPrimitive.SliderProps, 'children' | 'asChild'> {
     size?: SliderSize;
     variant?: SliderVariant;
+    /** Align thumb centers with track endpoints, or retain the inset hit-target bounds. */
+    thumbAlignment?: SliderThumbAlignment;
     seed?: string | number;
     thumbLabels?: readonly string[];
     getValueLabel?: (value: number, index: number) => string;
 }
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { CircularSlider } from './circular.js';
+export type { CircularSliderProps } from './circular.js';

package/dist/slider/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
-export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-valuetext': ariaValueText, className, defaultValue, dir, disabled = false, getValueLabel, inverted = false, min = 0, max = 100, name, form, onValueChange, onValueCommit, orientation = 'horizontal', seed, size = 'md', thumbLabels, value, variant = 'standard', ...props }, forwardedRef) {
+export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-valuetext': ariaValueText, className, defaultValue, dir, disabled = false, getValueLabel, inverted = false, min = 0, max = 100, name, form, onValueChange, onValueCommit, orientation = 'horizontal', seed, size = 'md', thumbAlignment = 'edge', thumbLabels, value, variant = 'standard', ...props }, forwardedRef) {
     const generatedId = useId();
     const rootRef = useRef(null);
     useImperativeHandle(forwardedRef, () => rootRef.current);
@@ -70,16 +70,17 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
     const clip = {
         clipPath: orientation === 'horizontal' ? `inset(0 ${end}% 0 ${start}%)` : `inset(${start}% 0 ${end}% 0)`,
     };
-    return _jsxs(SliderPrimitive.Root, { ...props, className: ['inkra-slider', className].filter(Boolean).join(' '), "data-size": size, "data-variant": variant, dir: resolvedDir, disabled: disabled, form: radixFormId, inverted: inverted, min: min, max: max, onValueChange: next => {
+    return _jsxs(SliderPrimitive.Root, { ...props, className: ['inkra-slider', className].filter(Boolean).join(' '), "data-size": size, "data-variant": variant, "data-thumb-alignment": thumbAlignment, dir: resolvedDir, disabled: disabled, form: radixFormId, inverted: inverted, min: min, max: max, onValueChange: next => {
             if (!controlled)
                 setUncontrolledValue(next);
             onValueChange?.(next);
         }, onValueCommit: onValueCommit, orientation: orientation, ref: rootRef, value: values, children: [_jsxs(SliderPrimitive.Track, { className: "inkra-slider__track", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__track-surface", variant: "outline", radius: variant === 'inset' ? 8 : 3, seed: `${resolvedSeed}-track` }), _jsx("span", { "aria-hidden": "true", className: "inkra-slider__range", style: clip, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__range-surface", variant: "selection", seed: `${resolvedSeed}-range` }) })] }), values.map((current, index) => {
+                const position = reversed ? 100 - percentage(current) : percentage(current);
                 const thumbLabel = thumbLabels?.[index];
                 const labelledBy = thumbLabel ? undefined : ariaLabelledBy;
                 const label = thumbLabel ?? (ariaLabel ? `${ariaLabel}${values.length > 1 ? ` ${index + 1}` : ''}` : labelledBy ? undefined : `Value${values.length > 1 ? ` ${index + 1}` : ''}`);
                 const inputName = name ? values.length > 1 ? `${name}[]` : name : undefined;
-                return _jsxs(SliderPrimitive.unstable_ThumbProvider, { name: inputName, children: [_jsx(SliderPrimitive.unstable_ThumbTrigger, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }), _jsx(SliderPrimitive.unstable_BubbleInput, { disabled: disabled, form: form, name: inputName, ref: input => {
+                return _jsxs(SliderPrimitive.unstable_ThumbProvider, { name: inputName, children: [_jsx(SliderPrimitive.unstable_ThumbTrigger, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", style: { '--inkra-slider-thumb-offset': `${position - 50}%` }, children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }), _jsx(SliderPrimitive.unstable_BubbleInput, { disabled: disabled, form: form, name: inputName, ref: input => {
                                 if (input)
                                     formInputRefs.current.set(index, input);
                                 else
@@ -87,3 +88,4 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
                             } })] }, index);
             })] });
 });
+export { CircularSlider } from './circular.js';

package/dist/styles/base.css

@@ -1,5 +1,7 @@
 @import "../tokens.css";
 
+@import "../assets/xiaolai.css";
+
 @font-face {
   font-family: "Trip Map Hand";
   font-style: normal;
@@ -129,13 +131,13 @@
 .inkra-pencil-text__source {
   color: inherit;
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
   font-kerning: none;
   font-variant-ligatures: none;
   letter-spacing: 0;
 }
 
 .inkra-pencil-text {
+  font-family: var(--inkra-font-hand);
   display: inline-block;
   max-width: 100%;
   min-width: 0;
@@ -216,7 +218,7 @@
   color: var(--inkra-on-accent, var(--inkra-accent-strong));
   cursor: pointer;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-weight: var(--inkra-weight-regular);
   justify-content: center;
   letter-spacing: var(--inkra-letter-spacing);

package/dist/styles/breadcrumb.css

@@ -55,7 +55,7 @@
   align-items: center;
   box-sizing: border-box;
   display: inline-flex;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-breadcrumb-item-font-size);
   gap: var(--inkra-breadcrumb-item-gap);
   justify-content: center;

package/dist/styles/log.css

@@ -13,8 +13,6 @@
 }
 
 .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
-.inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
-.inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
 
 .inkra-log__toolbar {
   align-items: center;
@@ -158,21 +156,15 @@
 }
 
 .inkra-log__latest {
-  align-items: center;
   display: flex;
-  justify-content: flex-end;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  padding: var(--inkra-space-2) var(--inkra-space-3);
-  position: relative;
+  inset-block-end: clamp(0px, calc(100% - var(--inkra-touch-target)), var(--inkra-space-2));
+  inset-inline-end: var(--inkra-space-3);
+  position: absolute;
   z-index: 2;
 }
 
-.inkra-log__latest-divider {
-  color: var(--inkra-border);
-  inset-block-start: -4px;
-  inset-inline: 0;
-  position: absolute;
+.inkra-log__latest .inkra-button__surface {
+  background: var(--inkra-paper);
 }
 
 @container (max-width: 36rem) {
@@ -188,11 +180,6 @@
   .inkra-log__follow-control .inkra-button__content,
   .inkra-log__follow-control .inkra-button__label,
   .inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
-  .inkra-log__latest .inkra-button { inline-size: 100%; }
-  .inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
-  .inkra-log__latest .inkra-button__content,
-  .inkra-log__latest .inkra-button__label,
-  .inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
 }
 
 @media (forced-colors: active) {

package/dist/styles/markdown.css

@@ -232,7 +232,7 @@
 .inkra-markdown__code-surface {
   background: transparent;
   color: var(--inkra-ink);
-  font-family: "Trip Map Hand", var(--inkra-font-hand);
+  font-family: var(--inkra-font-hand);
   font-size: var(--inkra-text-md);
   font-weight: var(--inkra-weight-regular);
   line-height: 1.8;

package/dist/styles/number-ticker.css

@@ -25,7 +25,7 @@
 
 .inkra-number-ticker__native-value {
   font: inherit;
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
 }
 
 .inkra-number-ticker__reels {
@@ -66,7 +66,48 @@
   flex: none;
 }
 
+.inkra-number-ticker[data-animation="morph"] { min-inline-size: 0; }
+
+.inkra-number-ticker[data-animation="morph"] .inkra-number-ticker__value {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__morph {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  height: 1lh;
+  line-height: var(--inkra-line-ui, 1.45);
+  overflow: hidden;
+  contain: paint;
+  unicode-bidi: isolate;
+}
+
+.inkra-number-ticker__morph-glyph {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__morph-glyph > .inkra-pencil-text { flex: none; }
+
 @media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__morph { width: auto !important; }
+  .inkra-number-ticker__morph-glyph[data-face="from"] { display: none; }
+  .inkra-number-ticker__morph-glyph[data-face="to"] {
+    position: relative !important;
+    left: auto !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
   .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
   .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
   .inkra-number-ticker__column[data-departing] { display: none; }

package/dist/styles/selection.css

@@ -262,3 +262,53 @@
     outline-offset: var(--inkra-focus-offset);
   }
 }
+
+/* Circular switches retain the native checkbox while sharing the dial's pencil geometry. */
+.inkra-switch--circular {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  align-content: start;
+  width: var(--inkra-circular-switch-diameter);
+  gap: 2px;
+}
+.inkra-switch--circular > .inkra-selection-control__input {
+  width: var(--inkra-circular-switch-diameter);
+  height: var(--inkra-circular-switch-diameter);
+  inset: 0 auto auto 0;
+  touch-action: manipulation;
+}
+.inkra-switch--circular > .inkra-selection-control__copy { width: 100%; text-align: center; }
+.inkra-switch[data-readonly="true"] { cursor: default; }
+.inkra-switch__circular { display: flex; align-items: center; justify-content: center; position: relative; width: var(--inkra-circular-switch-diameter); height: var(--inkra-circular-switch-diameter); pointer-events: none; user-select: none; }
+.inkra-switch__circular-arc { position: absolute; inset: 16px; transform: rotate(225deg); }
+.inkra-switch__circular-track, .inkra-switch__circular-range { position: absolute; inset: 0; }
+.inkra-switch__circular-track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-switch__circular-range { color: var(--inkra-accent-strong); }
+.inkra-switch__circular .inkra-progress__ring { color: inherit; }
+.inkra-switch__circular .inkra-progress__ring,
+.inkra-switch__circular .inkra-progress__ring-rotation,
+.inkra-switch__circular .inkra-progress__ring-direction,
+.inkra-switch__circular .inkra-progress__ring-ink,
+.inkra-switch__circular .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-switch__circular .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-switch__circular-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-switch-center-width); max-height: var(--inkra-circular-switch-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-switch__circular-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-switch-icon-size), 100%); height: var(--inkra-circular-switch-icon-size); }
+.inkra-switch__circular-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-switch__circular-content { width: 100%; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+.inkra-switch__circular-content > * { max-width: 100%; }
+.inkra-switch__circular-value { display: block; white-space: nowrap; max-width: 100%; text-align: center; font-size: var(--inkra-circular-switch-value-size); line-height: var(--inkra-circular-switch-value-line); }
+.inkra-switch__circular-focus { --inkra-ink: var(--inkra-focus); --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: 10px; opacity: 0; pointer-events: none; border-radius: 50%; }
+.inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular-focus { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-switch--circular > .inkra-selection-control__input { position: absolute; opacity: 0; z-index: 2; }
+  .inkra-switch__circular-track { color: GrayText; opacity: 1; }
+  .inkra-switch__circular-range { color: Highlight; }
+  .inkra-switch--circular:has(.inkra-selection-control__input:focus-visible) .inkra-switch__circular { outline: var(--inkra-focus-width) solid Highlight; outline-offset: -10px; border-radius: 50%; }
+  .inkra-switch__circular-focus { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-switch__circular .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}

package/dist/styles/slider.css

@@ -98,6 +98,17 @@
   width: var(--inkra-slider-thumb-size);
 }
 
+/* Radix insets its measured hit target by half a thumb at each endpoint.
+   Translate the whole target back so its visual center follows the track;
+   percentages use the actual thumb box and preserve its 44px hit area. */
+.inkra-slider[data-thumb-alignment="edge"] .inkra-slider__thumb {
+  translate: var(--inkra-slider-thumb-offset) 0;
+}
+
+.inkra-slider[data-thumb-alignment="edge"][data-orientation="vertical"] .inkra-slider__thumb {
+  translate: 0 var(--inkra-slider-thumb-offset);
+}
+
 .inkra-slider__thumb:focus-visible {
   outline: none;
 }
@@ -143,3 +154,57 @@
     display: none !important;
   }
 }
+
+.inkra-circular-slider {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--inkra-circular-slider-diameter);
+  height: var(--inkra-circular-slider-diameter);
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  vertical-align: middle;
+  outline: none;
+}
+.inkra-circular-slider[data-disabled] { cursor: not-allowed; opacity: .55; }
+.inkra-circular-slider[data-readonly] { cursor: default; }
+.inkra-circular-slider__arc { position: absolute; inset: 16px; pointer-events: none; }
+.inkra-circular-slider__track, .inkra-circular-slider__range { position: absolute; inset: 0; }
+.inkra-circular-slider__track { color: var(--inkra-ink-muted); opacity: .3; }
+.inkra-circular-slider__range { color: var(--inkra-accent-strong); }
+/* ProgressRing shares the stable pencil texture; these scoped rules also support slider-only styles. */
+.inkra-circular-slider .inkra-progress__ring { color: inherit; }
+.inkra-circular-slider .inkra-progress__ring,
+.inkra-circular-slider .inkra-progress__ring-rotation,
+.inkra-circular-slider .inkra-progress__ring-direction,
+.inkra-circular-slider .inkra-progress__ring-ink,
+.inkra-circular-slider .inkra-progress__ring-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-circular-slider .inkra-progress__ring-ink { visibility: hidden; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: visible; }
+.inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: hidden; }
+.inkra-circular-slider__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px; box-sizing: border-box; width: var(--inkra-circular-slider-center-width); max-height: var(--inkra-circular-slider-center-height); min-width: 0; overflow: hidden; pointer-events: none; text-align: center; }
+.inkra-circular-slider__center-icon { display: flex; align-items: center; justify-content: center; flex: none; width: min(var(--inkra-circular-slider-center-icon-size), 100%); height: var(--inkra-circular-slider-center-icon-size); }
+.inkra-circular-slider__center-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-circular-slider__center-content { width: 100%; min-width: 0; max-width: 100%; max-height: var(--inkra-circular-slider-center-height); overflow-wrap: anywhere; }
+.inkra-circular-slider__center-content > * { max-width: 100%; }
+.inkra-circular-slider__value { display: block; white-space: nowrap; max-width: 100%; pointer-events: none; text-align: center; font-size: var(--inkra-circular-slider-center-font-size); line-height: var(--inkra-circular-slider-center-line-height); }
+.inkra-circular-slider__thumb { position: absolute; transform: translate(-50%, -50%); width: var(--inkra-touch-target); height: var(--inkra-touch-target); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.inkra-circular-slider__thumb-surface { display: block !important; width: var(--inkra-circular-slider-thumb-size); height: var(--inkra-circular-slider-thumb-size); border-radius: 50%; }
+.inkra-circular-slider__focus-ring { --inkra-ink: var(--inkra-focus); position: absolute !important; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-circular-slider:focus-visible .inkra-circular-slider__focus-ring { opacity: 1; }
+@media (forced-colors: active) {
+  .inkra-circular-slider__track { color: GrayText; opacity: 1; }
+  .inkra-circular-slider__range { color: Highlight; }
+  .inkra-circular-slider__thumb-surface { border: 2px solid ButtonText; background: Canvas; }
+  .inkra-circular-slider:focus-visible .inkra-circular-slider__thumb-surface { outline: var(--inkra-focus-width) solid Highlight; outline-offset: var(--inkra-focus-offset); }
+  .inkra-circular-slider__focus-ring { display: none !important; }
+}
+@media (forced-colors: active), print {
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
+  .inkra-circular-slider .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
+}

package/dist/styles/slot.css

@@ -64,7 +64,7 @@
 
 .inkra-slot__empty-mark {
   color: var(--inkra-ink-muted);
-  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-family: var(--inkra-font-hand);
   font-size: calc(var(--inkra-slot-size) * 0.4);
   line-height: 1;
 }