@yewdiel21/motion-kit 0.15.0 → 0.16.0

package/src/components/radial-chart/engine.ts

@@ -3,7 +3,7 @@ import { reduced } from '../../core/reduced';
 import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 import { blurIn, rollDigits } from '../../motion/micro';
-import { chartFrame, finite, formatNumber, onWidth, polar, round, slotColor, svg } from '../chart/parts';
+import { arcPath, chartFrame, finite, formatNumber, onWidth, polar, round, slotColor, svg } from '../chart/parts';
 
 /*
  * Radial chart: totals as rings, one inside the other, each filling its track
@@ -33,6 +33,10 @@ export interface RadialChartOptions {
   size?: number;
   /** Ring thickness in px (default: what fits, up to 16). */
   thickness?: number;
+  /** Discrete sectors per ring (0: continuous, default). */
+  segments?: number;
+  /** Show values (default) or progress toward the goals in the middle. */
+  center?: 'value' | 'percent';
   label?: string;
   /** The middle when nothing is chosen (default 'Total'). */
   totalLabel?: string;
@@ -90,6 +94,7 @@ export function createRadialChart(root: HTMLElement | null, initial: RadialChart
   const percent = (ring: { value: number; max: number }) => new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 0 }).format(ring.value / ring.max);
   const sweep = () => (Math.min(360, Math.max(90, finite(options.sweep) ? options.sweep : 360)) * Math.PI) / 180;
   const startAngle = () => -sweep() / 2 + (sweep() >= Math.PI * 2 - 1e-6 ? Math.PI : 0);
+  const segments = () => finite(options.segments) ? Math.max(0, Math.min(80, Math.round(options.segments))) : 0;
 
   let geometry = { size: 240, cx: 120, cy: 120, radii: [] as number[], thickness: 12 };
   let arcs: SVGPathElement[] = [];
@@ -109,17 +114,35 @@ export function createRadialChart(root: HTMLElement | null, initial: RadialChart
     const thickness = finite(options.thickness) ? options.thickness : Math.max(4, Math.min(16, fit));
     const spacing = thickness * 1.35;
     geometry = { size, cx: size / 2, cy: size / 2, thickness, radii: model.map((_, i) => outer - thickness / 2 - i * spacing) };
-    canvas.setAttribute('viewBox', `0 0 ${size} ${size}`);
+    const half = sweep() <= Math.PI + 1e-6;
+    const height = half ? size / 2 + 54 : size;
+    canvas.setAttribute('viewBox', `0 0 ${size} ${height}`);
     canvas.setAttribute('width', String(size));
-    canvas.setAttribute('height', String(size));
+    canvas.setAttribute('height', String(height));
     plot.style.setProperty('--mk-radial-size', `${size}px`);
     plot.style.setProperty('--mk-radial-thickness', `${thickness}px`);
+    plot.style.setProperty('--mk-radial-center-y', half ? `${size / 2}px` : '50%');
+    plot.style.setProperty('--mk-radial-center-width', n === 1 ? '0.68' : '0.36');
   };
   scope.add(() => {
     plot.style.removeProperty('--mk-radial-size');
     plot.style.removeProperty('--mk-radial-thickness');
+    plot.style.removeProperty('--mk-radial-center-y');
+    plot.style.removeProperty('--mk-radial-center-width');
   });
 
+  const segmentedPath = (radius: number, share: number) => {
+    const count = segments(), step = sweep() / count, a0 = startAngle();
+    const gap = Math.min(step * 0.3, 4 / Math.max(1, radius));
+    const limit = a0 + sweep() * Math.min(1, Math.max(0, share));
+    const outer = radius + geometry.thickness / 2 - 1, inner = Math.max(0, radius - geometry.thickness / 2 + 1);
+    return Array.from({ length: count }, (_, index) => {
+      const from = a0 + index * step + gap / 2;
+      const to = Math.min(a0 + (index + 1) * step - gap / 2, limit);
+      return to > from ? arcPath(geometry.cx, geometry.cy, outer, inner, from, to) : '';
+    }).join('');
+  };
+
   const build = () => {
     canvas.replaceChildren();
     const { cx, cy, radii } = geometry;
@@ -127,13 +150,14 @@ export function createRadialChart(root: HTMLElement | null, initial: RadialChart
     const back = svg('g', { 'data-mk-part': 'tracks' });
     const front = svg('g', { 'data-mk-part': 'series' });
     tracks = model.map((_, i) => {
-      const track = svg('path', { d: strokeArc(cx, cy, radii[i]!, a0, a0 + sweep()), 'data-mk-index': i });
+      const track = svg('path', { d: segments() ? segmentedPath(radii[i]!, 1) : strokeArc(cx, cy, radii[i]!, a0, a0 + sweep()), 'data-mk-index': i });
       back.append(track);
       return track;
     });
     arcs = model.map((ring, i) => {
       const arc = svg('path', { 'data-mk-index': i, 'data-mk-part': 'ring' });
       arc.style.stroke = ring.color;
+      if (segments()) arc.style.fill = ring.color;
       front.append(arc);
       return arc;
     });
@@ -146,14 +170,16 @@ export function createRadialChart(root: HTMLElement | null, initial: RadialChart
     const a0 = startAngle();
     arcs.forEach((arc, i) => {
       const share = Math.min(1, Math.max(0, (values[i] ?? 0) / model[i]!.max));
-      arc.setAttribute('d', share > 0.001 ? strokeArc(cx, cy, radii[i]!, a0, a0 + sweep() * share) : '');
+      arc.setAttribute('d', share > 0.001 ? segments() ? segmentedPath(radii[i]!, share) : strokeArc(cx, cy, radii[i]!, a0, a0 + sweep() * share) : '');
     });
   };
 
   const paintCenter = (animate: boolean) => {
     center.hidden = !model.length;
     const ring = selected === null ? null : model[selected];
-    const text = ring ? format(ring.value) : format(total());
+    const denominator = ring ? ring.max : model.reduce((sum, each) => sum + each.max, 0);
+    const value = ring ? ring.value : total();
+    const text = options.center === 'percent' ? new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 1 }).format(value / (denominator || 1)) : format(value);
     const caption = ring ? `${ring.label} · ${percent(ring)}` : (options.totalLabel ?? 'Total');
     const changed = centerLabel.textContent !== caption;
     if (centerValue.textContent !== text) {
@@ -178,6 +204,7 @@ export function createRadialChart(root: HTMLElement | null, initial: RadialChart
 
   const draw = (animate: boolean) => {
     glide?.kill();
+    scope.attr(root, 'data-mk-segmented', segments() ? '' : null);
     const name = options.label ?? 'Gráfica radial';
     canvas.setAttribute('aria-label', model.length ? `${name}. ${model.length} anillos, total ${format(total())}. Usa las flechas para recorrerlos.` : `${name}: ${options.emptyLabel ?? 'sin datos'}`);
     frame.fillTable(name, ['Anillo', 'Valor', 'Meta', 'Avance'], model.map((ring) => [ring.label, format(ring.value), format(ring.max), percent(ring)]));

package/src/components/radial-chart/radial-chart.css

@@ -32,6 +32,13 @@ mk-radial-chart {
   stroke: var(--mk-chart-grid);
 }
 
+[data-mk-chart-type='radial'][data-mk-segmented] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='tracks'] path { fill: var(--mk-chart-track); stroke: var(--mk-chart-track); }
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='series'] path[data-mk-on] { filter: brightness(1.12); stroke-width: 2px; }
+
 [data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-on] {
   stroke-width: calc(var(--mk-radial-thickness, 12px) + 4px);
 }
@@ -42,12 +49,12 @@ mk-radial-chart {
 
 [data-mk-radial-center] {
   position: absolute;
-  top: 50%;
+  top: var(--mk-radial-center-y, 50%);
   left: 50%;
   display: grid;
   justify-items: center;
   gap: 0.15rem;
-  max-width: calc(var(--mk-radial-size, 240px) * 0.36);
+  max-width: calc(var(--mk-radial-size, 240px) * var(--mk-radial-center-width, 0.36));
   transform: translate(-50%, -50%);
   text-align: center;
   pointer-events: none;

package/src/components/radial-chart/react.tsx

@@ -8,7 +8,7 @@ export interface RadialChartProps extends Omit<HTMLAttributes<HTMLDivElement>, '
 }
 
 /** <RadialChart label="Metas" data={[{ label: 'Pasos', value: 7400, max: 10000 }, …]} /> */
-export function RadialChart({ data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }: RadialChartProps) {
-  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel } as RadialChartOptions, { formatValue, onSelect }, instanceRef);
+export function RadialChart({ data, max, sweep, size, thickness, segments, center, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }: RadialChartProps) {
+  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, segments, center, label, totalLabel, legend, emptyLabel } as RadialChartOptions, { formatValue, onSelect }, instanceRef);
   return <div {...props} ref={ref} className={['mk-chart mk-radial-chart', className].filter(Boolean).join(' ')} />;
 }

package/src/components/scroll-island/README.md

@@ -1,34 +1,44 @@
-# scroll-island
-
-Qué hace, en una frase.
-
-Origen: archivo del kit y parámetros (tiempos, curvas).
-
-## HTML / Astro
-
-```html
-<mk-scroll-island></mk-scroll-island>
-<script>
-  import { defineElements } from '@yewdiel21/motion-kit/elements';
-  defineElements(['mk-scroll-island']);
-</script>
-```
-
-## React
-
-```tsx
-<ScrollIsland />
-```
-
-## Opciones
-
-| Opción | Atributo | Por defecto | Qué hace |
-|---|---|---|---|
-
-## Variables CSS
-
-`--mk-scroll-island-radius`
-
-## Accesibilidad
-
-Roles, foco y teclado. Con movimiento reducido…
+# scroll-island
+
+Una barra fina que se transforma en una píldora con el porcentaje y la sección actual al acercar el puntero al borde derecho. Arrastra la píldora o pulsa su carril para desplazarte.
+
+## React
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { ScrollIsland } from '@yewdiel21/motion-kit/react';
+
+<ScrollIsland persistent style={{ height: 360, overflow: 'auto' }}
+  tabIndex={0} role="region" aria-label="Guía de diseño">
+  <section style={{ minHeight: 400 }}><h3>Introducción</h3>Contenido…</section>
+  <section style={{ minHeight: 400 }}><h3>Detalles</h3>Contenido…</section>
+</ScrollIsland>
+```
+
+**El contenedor debe tener altura limitada, overflow y contenido suficiente para desplazarse.** Si todo cabe, la barra se oculta. `persistent` deja visible la barra fina mientras está en reposo; por defecto aparece al desplazarse y desaparece después.
+
+## HTML / Astro
+
+```html
+<mk-scroll-island persistent style="display:block;height:360px;overflow:auto"
+  tabindex="0" role="region" aria-label="Guía">
+  <section style="min-height:400px"><h3>Introducción</h3>Contenido…</section>
+  <section style="min-height:400px"><h3>Detalles</h3>Contenido…</section>
+</mk-scroll-island>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-scroll-island']);
+</script>
+```
+
+## Opciones
+
+- `page`: sigue el scroll de la página en vez del contenedor. En React `<ScrollIsland page />` no dibuja contenedor propio.
+- `sections`: selector de encabezados, `h2, h3` por defecto; `false` omite el nombre de sección en la factory/React.
+- `reach`: distancia del borde que activa la píldora, 56 px.
+- `idle`: demora para ocultarse, 900 ms.
+- `persistent`: mantiene la barra fina visible, false por defecto.
+- `onSection(section)`: cambio de sección, también `mk:section` con `detail.section`.
+- Factory `createScrollIsland(root, options)`; instancia `refresh()` y `destroy()`.
+
+El overlay decorativo usa `aria-hidden`; el contenido mantiene su desplazamiento nativo por teclado y tacto. Dale `tabindex="0"` y un nombre al panel. Respeta movimiento reducido, se adapta al tamaño del contenedor y elimina el overlay al desmontarse.

package/src/components/scroll-island/element.ts

@@ -6,7 +6,7 @@ import { createScrollIsland, type ScrollIslandInstance } from './engine';
  * or <mk-scroll-island page></mk-scroll-island> for the page. Emits mk:section ({section}).
  */
 export class MkScrollIslandElement extends MkElement<ScrollIslandInstance> {
-  static options: Record<string, OptionType> = { sections: 'string', reach: 'number', idle: 'number', page: 'boolean' };
+  static options: Record<string, OptionType> = { sections: 'string', reach: 'number', idle: 'number', persistent: 'boolean', page: 'boolean' };
 
   protected create(options: Record<string, unknown>) {
     return createScrollIsland(options.page ? document.documentElement : this, options);

package/src/components/scroll-island/engine.ts

@@ -23,6 +23,8 @@ export interface ScrollIslandOptions {
   reach?: number;
   /** ms the bar stays after scrolling stops (default 900). */
   idle?: number;
+  /** Keep the thin bar visible while idle (default false). */
+  persistent?: boolean;
   /** Follow the page's scroll (default: when the root is <html> or <body>). */
   page?: boolean;
   /** The current section changed (its heading's text, or null before the first). */
@@ -52,6 +54,7 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   const marked = page ? document.documentElement : root;
   // The scroller's own bar hides (scroll-island.css).
   scope.attr(marked, 'data-mk-scroll-island-host', '');
+  scope.attr(root, 'data-mk-ready', '');
 
   const island = document.createElement('div');
   island.dataset.mkScrollIsland = '';
@@ -99,6 +102,16 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   let section: string | null | undefined;
   let hideTimer: ReturnType<typeof setTimeout> | undefined;
   let dragging: { id: number; offset: number } | null = null;
+  let scrollBehavior: { value: string; priority: string; hadStyle: boolean } | null = null;
+  const restoreBehavior = () => {
+    if (!scrollBehavior) return;
+    const previous = scrollBehavior;
+    if (previous.value) scroller.style.setProperty('scroll-behavior', previous.value, previous.priority);
+    else scroller.style.removeProperty('scroll-behavior');
+    if (!previous.hadStyle && !scroller.getAttribute('style')) scroller.removeAttribute('style');
+    scrollBehavior = null;
+  };
+  scope.add(restoreBehavior);
   scope.add(() => clearTimeout(hideTimer));
 
   const headings = () => (options.sections === false ? [] : [...(page ? document.body : root).querySelectorAll<HTMLElement>(options.sections ?? 'h2, h3')]);
@@ -116,7 +129,7 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
     const size = as === 'island' ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
     const top = (height - size) * progress();
     if (as !== 'island') return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
-    return { top, height: size, width: Math.max(ISLAND_HEIGHT, content.scrollWidth + 28), borderRadius: size / 2 };
+    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, content.scrollWidth + 28)), borderRadius: size / 2 };
   };
 
   const place = () => {
@@ -158,7 +171,7 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   const settleLater = () => {
     clearTimeout(hideTimer);
     hideTimer = setTimeout(() => {
-      if (state === 'bar' && !dragging) go('hidden');
+      if (state === 'bar' && !dragging && !options.persistent) go('hidden');
     }, idle);
   };
 
@@ -213,6 +226,9 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
     if (state !== 'island' || down.button !== 0) return;
     down.preventDefault();
     down.stopPropagation();
+    if (!scrollBehavior) scrollBehavior = { value: scroller.style.getPropertyValue('scroll-behavior'), priority: scroller.style.getPropertyPriority('scroll-behavior'), hadStyle: scroller.hasAttribute('style') };
+    // A drag follows the pointer directly even when the app uses smooth scrolling.
+    scroller.style.setProperty('scroll-behavior', 'auto', 'important');
     const box = thumb.getBoundingClientRect();
     dragging = { id: down.pointerId, offset: down.clientY - box.top || ISLAND_HEIGHT / 2 };
     island.setAttribute('data-mk-dragging', '');
@@ -225,6 +241,7 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   const release = (event: Event) => {
     if (!dragging || (event as PointerEvent).pointerId !== dragging.id) return;
     dragging = null;
+    restoreBehavior();
     island.removeAttribute('data-mk-dragging');
   };
   scope.on(window, 'pointerup', release);
@@ -240,7 +257,12 @@ export function createScrollIsland(root: HTMLElement | null, options: ScrollIsla
   });
 
   paintText();
-  go('hidden');
+  go(options.persistent ? 'bar' : 'hidden');
+  if (typeof ResizeObserver === 'function') {
+    const observer = scope.observe(new ResizeObserver(() => { paintText(); go(state, true); }));
+    observer.observe(root);
+    for (const child of root.children) observer.observe(child);
+  }
 
   return {
     refresh: () => {

package/src/components/scroll-island/react.tsx

@@ -9,14 +9,14 @@ export interface ScrollIslandProps extends HTMLAttributes<HTMLDivElement>, Scrol
  * <ScrollIsland style={{ height: 400, overflow: 'auto' }}>…</ScrollIsland> scrolls its children with the island;
  * <ScrollIsland page /> puts it on the page (it renders nothing of its own then).
  */
-export function ScrollIsland({ sections, reach, idle, page, onSection, className, children, ...props }: ScrollIslandProps) {
+export function ScrollIsland({ sections, reach, idle, persistent, page, onSection, className, children, ...props }: ScrollIslandProps) {
   const ref = useRef<HTMLDivElement>(null);
   const section = useLatest(onSection);
   useIsomorphicLayoutEffect(() => {
-    const created = createScrollIsland(page ? document.documentElement : ref.current, { sections, reach, idle, page, onSection: (name) => section.current?.(name) });
+    const created = createScrollIsland(page ? document.documentElement : ref.current, { sections, reach, idle, persistent, page, onSection: (name) => section.current?.(name) });
     return () => created.destroy();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sections, reach, idle, page]);
+  }, [sections, reach, idle, persistent, page]);
   if (page) return null;
   return (
     <div {...props} ref={ref} className={['mk-scroll-island', className].filter(Boolean).join(' ')}>

package/src/components/scroll-island/scroll-island.css

@@ -73,6 +73,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  max-width: 100%;
+  min-width: 0;
   align-items: center;
   gap: 0.5rem;
   padding: 0 14px;
@@ -91,6 +93,7 @@ mk-scroll-island {
 }
 
 [data-mk-island-section] {
+  min-width: 0;
   max-width: 12rem;
   overflow: hidden;
   color: rgb(255 255 255 / 0.68);