@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/rich-text-editor/react.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createRichTextEditor, type RichTextEditorInstance, type RichTextEditorOptions } from './engine';
+
+export interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'defaultValue'>, RichTextEditorOptions {}
+
+export type RichTextEditorHandle = Pick<RichTextEditorInstance, 'focus' | 'exec' | 'setValue'>;
+
+/**
+ * <RichTextEditor value={html} onChange={(html) => setHtml(html)} maxLength={500} />.
+ * `value` is the first content; later a different value from the app replaces it (the echo of onChange does not).
+ */
+export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(function RichTextEditor(
+  { value, placeholder, toolbar, maxLength, counter, name, label, readOnly, markdown, onChange, className, ...props },
+  handle,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<RichTextEditorInstance | null>(null);
+  const change = useLatest(onChange);
+  const shown = useRef(value);
+  useImperativeHandle(
+    handle,
+    () => ({
+      focus: () => instance.current?.focus(),
+      exec: (command, argument) => instance.current?.exec(command, argument),
+      setValue: (html) => instance.current?.setValue(html),
+    }),
+    [],
+  );
+  useIsomorphicLayoutEffect(() => {
+    const created = createRichTextEditor(ref.current, {
+      value: shown.current,
+      placeholder,
+      toolbar,
+      maxLength,
+      counter,
+      name,
+      label,
+      readOnly,
+      markdown,
+      onChange: (html, text) => {
+        shown.current = html;
+        change.current?.(html, text);
+      },
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [placeholder, String(toolbar), maxLength, String(counter), name, label, readOnly, markdown]);
+  useIsomorphicLayoutEffect(() => {
+    if (value === undefined || value === shown.current) return;
+    shown.current = value;
+    instance.current?.setValue(value);
+  }, [value]);
+  return <div {...props} ref={ref} className={['mk-rich-text-editor', className].filter(Boolean).join(' ')} />;
+});

package/src/components/rich-text-editor/rich-text-editor.css

@@ -0,0 +1,283 @@
+/* rich-text-editor — a 20 px panel (surface-1, outline-soft border, the accent when it has the focus, the error
+   colour past the limit) with the toolbar on top (8 px buttons; an active format is an accent-soft pill that grows
+   in; groups split by hairlines), the writing area (headings, lists, quotes with an accent bar, code on surface-3,
+   accent links) and the counter under it. The link editor is a 12 px bubble under its button. The area grows up to
+   --mk-rte-max-height (28rem), then scrolls. */
+.mk-rich-text-editor,
+mk-rich-text-editor {
+  --mk-rte-max-height: 28rem;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-focused] {
+  border-color: var(--mk-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 20%, transparent);
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-over] {
+  border-color: var(--mk-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-error) 18%, transparent);
+}
+
+[data-mk-rte-toolbar] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border-bottom: 1px solid var(--mk-outline-soft);
+}
+
+[data-mk-rte-group] {
+  display: flex;
+  gap: 0.125rem;
+  margin-right: 0.125rem;
+  padding-right: 0.25rem;
+  border-right: 1px solid var(--mk-outline-soft);
+}
+
+[data-mk-rte-group]:last-child {
+  border-right: 0;
+}
+
+[data-mk-rte-group]:empty {
+  display: none;
+}
+
+[data-mk-rte-toolbar] button {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+[data-mk-rte-toolbar] button:hover {
+  background: color-mix(in srgb, var(--mk-text) 7%, transparent);
+  color: var(--mk-text);
+}
+
+/* The pill of an active format grows in behind its icon. */
+[data-mk-rte-toolbar] button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  transform: scale(0.6);
+  transition:
+    opacity 0.15s,
+    transform 0.25s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-rte-toolbar] button[aria-pressed='true'] {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-rte-toolbar] button[aria-pressed='true']::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+[data-mk-rte-toolbar] button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 1px;
+}
+
+[data-mk-rte-content] {
+  position: relative;
+  min-height: 10rem;
+  max-height: var(--mk-rte-max-height);
+  overflow-y: auto;
+  padding: 1rem 1.125rem;
+  outline: none;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-rte-content]::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  top: 1rem;
+  left: 1.125rem;
+  color: var(--mk-muted);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+[data-mk-rte-content][data-empty]::before {
+  opacity: 1;
+}
+
+[data-mk-rte-content] > :first-child {
+  margin-top: 0;
+}
+
+[data-mk-rte-content] p {
+  margin: 0 0 0.75rem;
+}
+
+[data-mk-rte-content] h2 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+[data-mk-rte-content] h3 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+[data-mk-rte-content] :is(ul, ol) {
+  margin: 0 0 0.75rem;
+  padding-left: 1.5rem;
+}
+
+[data-mk-rte-content] blockquote {
+  margin: 0 0 0.75rem;
+  padding: 0.25rem 0 0.25rem 1rem;
+  border-left: 3px solid var(--mk-accent);
+  color: var(--mk-muted);
+}
+
+[data-mk-rte-content] code {
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  background: var(--mk-surface-3);
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.875em;
+}
+
+[data-mk-rte-content] pre {
+  overflow-x: auto;
+  margin: 0 0 0.75rem;
+  padding: 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-rte-content] pre code {
+  padding: 0;
+  background: none;
+}
+
+[data-mk-rte-content] a {
+  color: var(--mk-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+[data-mk-rte-fresh] {
+  animation: mk-rte-fresh 1s ease-out;
+}
+
+@keyframes mk-rte-fresh {
+  from {
+    background-color: color-mix(in srgb, var(--mk-accent) 30%, transparent);
+  }
+}
+
+[data-mk-rte-foot] {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.375rem 0.875rem 0.5rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-mk-rte-foot][hidden],
+[data-mk-rte-link][hidden],
+[data-mk-rte-link] [hidden] {
+  display: none;
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-over] [data-mk-rte-counter] {
+  color: var(--mk-error);
+  font-weight: 600;
+}
+
+[data-mk-rte-link] {
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  box-sizing: border-box;
+  width: min(22rem, calc(100% - 1rem));
+  padding: 0.375rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 12px;
+  background: var(--mk-surface-1);
+  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+}
+
+[data-mk-rte-link] input {
+  flex: 1;
+  min-width: 0;
+  height: 2rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: 8px;
+  outline: none;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+}
+
+[data-mk-rte-link] input:focus-visible {
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-rte-link] button {
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-rte-link] [data-mk-rte-link-apply] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-rte-toolbar] button::before,
+  [data-mk-rte-content]::before {
+    transition: none;
+  }
+
+  [data-mk-rte-fresh] {
+    animation: none;
+  }
+}

package/src/components/sankey-chart/README.md

@@ -0,0 +1,48 @@
+# sankey-chart
+
+Flujos entre etapas con enlaces proporcionales a su valor, entrada escalonada y selección de recorridos.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { SankeyChart } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add sankey-chart --react --elements
+```
+
+## React
+
+```tsx
+<SankeyChart nodes={[{ id: "visitas", label: "Visitas" }, { id: "ventas", label: "Ventas" }]} links={[{ source: "visitas", target: "ventas", value: 42 }]} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-sankey-chart nodes='[{"id":"visitas","label":"Visitas"},{"id":"ventas","label":"Ventas"}]' links='[{"source":"visitas","target":"ventas","value":42}]'></mk-sankey-chart>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-sankey-chart']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createSankeyChart } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+nodes: {id, label?, color?}[]. links: {source, target, value}[]. height: 320 px. nodeWidth: 12 px. nodePadding: 14 px. Usa un grafo dirigido sin ciclos; se omiten enlaces inválidos, no positivos o sin nodo.
+
+Todos los gráficos aceptan `label`, `emptyLabel` y `formatValue`. Se actualizan con `update(options)` sin desmontarse; `select(index | null)` y `selected` controlan la selección (en heatmap se usa una fecha). `onSelect` también emite `mk:select`.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-chart-1…8, --mk-chart-surface.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

package/src/components/sankey-chart/element.ts

@@ -0,0 +1,31 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createSankeyChart, type SankeyChartInstance, type SankeyChartOptions } from './engine';
+
+/**
+ * <mk-sankey-chart class="mk-chart mk-sankey-chart" label="Embudo de ventas"
+ *   nodes='[{"id":"visitas","label":"Visitas"},{"id":"carrito","label":"Carrito"}]'
+ *   links='[{"source":"visitas","target":"carrito","value":420}]'></mk-sankey-chart>
+ * Attribute changes glide in place. Emits mk:select ({index, source, target, value}).
+ */
+export class MkSankeyChartElement extends MkElement<SankeyChartInstance> {
+  static options: Record<string, OptionType> = { nodes: 'json', links: 'json', height: 'number', nodeWidth: 'number', nodePadding: 'number', label: 'string', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createSankeyChart(this, options as SankeyChartOptions);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update(this.options as SankeyChartOptions);
+  }
+
+  update(options: SankeyChartOptions) {
+    this.instance?.update(options);
+  }
+
+  select(index: number | null) {
+    this.instance?.select(index);
+  }
+}
+
+export const defineSankeyChart = () => defineElement('mk-sankey-chart', MkSankeyChartElement);