@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/containers/data-grid/range.js

@@ -0,0 +1,78 @@
+function rangeBounds(range) {
+  return {
+    r0: Math.min(range.anchor.r, range.focus.r),
+    r1: Math.max(range.anchor.r, range.focus.r),
+    c0: Math.min(range.anchor.c, range.focus.c),
+    c1: Math.max(range.anchor.c, range.focus.c)
+  };
+}
+function inRange(range, r, c) {
+  if (!range) return false;
+  const b = rangeBounds(range);
+  return r >= b.r0 && r <= b.r1 && c >= b.c0 && c <= b.c1;
+}
+function extendRange(range, dr, dc, limits) {
+  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+  return {
+    anchor: range.anchor,
+    focus: {
+      r: clamp(range.focus.r + dr, limits.minR, limits.maxR),
+      c: clamp(range.focus.c + dc, limits.minC, limits.maxC)
+    }
+  };
+}
+function tsvField(text) {
+  return /[\t\r\n"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+function rangeToTSV(bounds, textAt) {
+  const cols = [];
+  for (let c = bounds.c0; c <= bounds.c1; c += 1) {
+    for (let r = bounds.r0; r <= bounds.r1; r += 1) {
+      if (textAt(r, c) !== null) {
+        cols.push(c);
+        break;
+      }
+    }
+  }
+  const lines = [];
+  for (let r = bounds.r0; r <= bounds.r1; r += 1) {
+    if (!cols.some((c) => textAt(r, c) !== null)) continue;
+    lines.push(cols.map((c) => tsvField(textAt(r, c) ?? "")).join("	"));
+  }
+  return lines.join("\n");
+}
+function rangeStats(bounds, valueAt) {
+  let count = 0;
+  let numeric = 0;
+  let sum = 0;
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (let r = bounds.r0; r <= bounds.r1; r += 1) {
+    for (let c = bounds.c0; c <= bounds.c1; c += 1) {
+      const value = valueAt(r, c);
+      if (value === void 0 || value === null || value === "") continue;
+      count += 1;
+      if (typeof value === "number" && Number.isFinite(value)) {
+        numeric += 1;
+        sum += value;
+        min = Math.min(min, value);
+        max = Math.max(max, value);
+      }
+    }
+  }
+  return {
+    count,
+    numeric,
+    sum: numeric ? sum : null,
+    avg: numeric ? sum / numeric : null,
+    min: numeric ? min : null,
+    max: numeric ? max : null
+  };
+}
+export {
+  extendRange,
+  inRange,
+  rangeBounds,
+  rangeStats,
+  rangeToTSV
+};

package/dist/containers/data-grid/rows.d.ts

@@ -0,0 +1,26 @@
+import type { DisplayRow } from "./types.js";
+export type RowPinSide = "top" | "bottom";
+export interface PinnedRows {
+    top: readonly string[];
+    bottom: readonly string[];
+}
+export declare const NO_PINNED_ROWS: PinnedRows;
+/** Pins `key` to `side`, or unpins it when it is already there. Moving sides keeps one entry. */
+export declare function togglePinnedRow(pinned: PinnedRows, key: string, side: RowPinSide): PinnedRows;
+export declare function pinnedSideOf(pinned: PinnedRows, key: string): RowPinSide | null;
+/**
+ * Pulls the pinned data rows out of the flat display list, in pin order. Ids that are no longer
+ * shown (filtered out, removed) are skipped.
+ */
+export declare function splitPinnedRows<T>(display: readonly DisplayRow<T>[], pinned: PinnedRows): {
+    top: DisplayRow<T>[];
+    middle: DisplayRow<T>[];
+    bottom: DisplayRow<T>[];
+};
+/** Inserts a detail row after every data row whose key is in `expanded`. */
+export declare function insertDetailRows<T>(rows: readonly DisplayRow<T>[], expanded: ReadonlySet<string>, heightOf: (row: T) => number): DisplayRow<T>[];
+/** Moves a row one step (keyboard). */
+export declare function moveRowBy(order: readonly string[], key: string, delta: number): string[];
+/** Moves a row before or after another one (drag and drop). */
+export declare function moveRowTo(order: readonly string[], key: string, targetKey: string, place: "before" | "after"): string[];
+export declare function toggleSetMember(set: ReadonlySet<string>, key: string): Set<string>;

package/dist/containers/data-grid/rows.js

@@ -0,0 +1,67 @@
+import { moveColumn, moveColumnTo } from "./model.js";
+const NO_PINNED_ROWS = { top: [], bottom: [] };
+function togglePinnedRow(pinned, key, side) {
+  const without = {
+    top: pinned.top.filter((id) => id !== key),
+    bottom: pinned.bottom.filter((id) => id !== key)
+  };
+  if (pinned[side].includes(key)) return without;
+  return { ...without, [side]: [...without[side], key] };
+}
+function pinnedSideOf(pinned, key) {
+  if (pinned.top.includes(key)) return "top";
+  if (pinned.bottom.includes(key)) return "bottom";
+  return null;
+}
+function splitPinnedRows(display, pinned) {
+  if (pinned.top.length === 0 && pinned.bottom.length === 0) {
+    return { top: [], middle: [...display], bottom: [] };
+  }
+  const byKey = /* @__PURE__ */ new Map();
+  for (const row of display) if (row.kind === "data") byKey.set(row.key, row);
+  const take = (keys) => keys.map((key) => byKey.get(key)).filter((row) => !!row);
+  const top = take(pinned.top);
+  const bottom = take(pinned.bottom);
+  const taken = /* @__PURE__ */ new Set([...top, ...bottom]);
+  return { top, middle: display.filter((row) => !taken.has(row)), bottom };
+}
+function insertDetailRows(rows, expanded, heightOf) {
+  if (expanded.size === 0) return [...rows];
+  const out = [];
+  for (const row of rows) {
+    out.push(row);
+    if (row.kind === "data" && expanded.has(row.key)) {
+      out.push({
+        kind: "detail",
+        key: `${row.key}::detail`,
+        depth: row.depth,
+        row: row.row,
+        rowKey: row.key,
+        height: heightOf(row.row)
+      });
+    }
+  }
+  return out;
+}
+function moveRowBy(order, key, delta) {
+  return moveColumn(order, key, delta);
+}
+function moveRowTo(order, key, targetKey, place) {
+  return moveColumnTo(order, key, targetKey, place);
+}
+function toggleSetMember(set, key) {
+  const next = new Set(set);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  return next;
+}
+export {
+  NO_PINNED_ROWS,
+  insertDetailRows,
+  moveRowBy,
+  moveRowTo,
+  pinnedSideOf,
+  splitPinnedRows,
+  togglePinnedRow,
+  toggleSetMember
+};

package/dist/containers/data-grid/spreadsheet.demos.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode } from "react";
+import { type Venta } from "./data-grid.fixtures.js";
+import { type CellChange, type DataGridProps, type RowsChange } from "./data-grid.js";
+import type { CellValue, DataGridColumn } from "./types.js";
+export type SheetControls = Pick<DataGridProps<Venta>, "density" | "height">;
+export declare const note = "text-[12.5px] text-ink-3";
+export declare function Stack({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Applies grid changes to a row list: what a parent that owns the data does. */
+export declare function applyCellChanges<T extends object>(rows: readonly T[], changes: readonly CellChange<T>[], idOf: (row: T) => string): T[];
+export declare function applyRowsChange<T extends object>(rows: readonly T[], change: RowsChange<T>, idOf: (row: T) => string): T[];
+export declare const editableVentaColumns: DataGridColumn<Venta>[];
+export declare function newVenta(): Venta;
+export declare function UndoRedoDemo({ density, height }: SheetControls): import("react").JSX.Element;
+export interface Linea {
+    id: string;
+    concepto: string;
+    cantidad: CellValue;
+    precio: CellValue;
+    subtotal: CellValue;
+    igv: CellValue;
+    total: CellValue;
+    nota: CellValue;
+}
+export declare const lineas: Linea[];
+export declare const lineaColumns: DataGridColumn<Linea>[];
+export interface Diagnostico {
+    id: string;
+    concepto: string;
+    valor: CellValue;
+    detalle: string;
+}
+export declare const diagnosticos: Diagnostico[];
+export declare const diagnosticoColumns: DataGridColumn<Diagnostico>[];
+export declare function FormulasDemo<T extends {
+    id: string;
+}>({ rows: initial, columns, label, density, height, hint, }: SheetControls & {
+    rows: readonly T[];
+    columns: readonly DataGridColumn<T>[];
+    label: string;
+    hint: string;
+}): import("react").JSX.Element;
+export declare function ExportXlsxDemo({ density, height }: SheetControls): import("react").JSX.Element;
+export interface Ingreso {
+    id: string;
+    barbero: string;
+    ene: number;
+    feb: number;
+    mar: number;
+    abr: number;
+    may: number;
+    jun: number;
+}
+export declare const ingresos: Ingreso[];
+export declare const ingresoColumns: DataGridColumn<Ingreso>[];
+export declare function ChartsDemo({ density, height }: SheetControls): import("react").JSX.Element;
+export declare function SparklineDemo({ density, height }: SheetControls): import("react").JSX.Element;
+export interface Reserva {
+    id: string;
+    silla: CellValue;
+    turno: CellValue;
+    dia: CellValue;
+    precio: CellValue;
+    doble: CellValue;
+}
+export declare const reservas: Reserva[];
+export declare const reservaColumns: DataGridColumn<Reserva>[];
+/** Range selection with the fill handle: series, dates, text with a number and formulas. */
+export declare function FillHandleDemo({ density, height }: SheetControls): import("react").JSX.Element;
+/**
+ * Fill handle going up and left on a tall grid: the data sits at the bottom, so dragging up has to
+ * scroll. Dates can be forced to count days or months with the `fillSeries.dateStep` option.
+ */
+export declare function FillBackwardsDemo({ density, height }: SheetControls): import("react").JSX.Element;

package/dist/containers/data-grid/spreadsheet.demos.js

@@ -0,0 +1,423 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { BARBEROS, seeded, ventaColumns, ventas } from "./data-grid.fixtures.js";
+import {
+  DataGrid
+} from "./data-grid.js";
+const note = "text-[12.5px] text-ink-3";
+function Stack({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-2", children });
+}
+function applyCellChanges(rows, changes, idOf) {
+  const byRow = /* @__PURE__ */ new Map();
+  for (const change of changes) {
+    byRow.set(change.rowId, { ...byRow.get(change.rowId), [change.columnId]: change.value });
+  }
+  return rows.map((row) => {
+    const patch = byRow.get(idOf(row));
+    return patch ? { ...row, ...patch } : row;
+  });
+}
+function applyRowsChange(rows, change, idOf) {
+  if (change.type === "remove") {
+    const gone = new Set(change.rows.map((entry) => entry.rowId));
+    return rows.filter((row) => !gone.has(idOf(row)));
+  }
+  const next = [...rows];
+  for (const entry of change.rows) next.splice(entry.index, 0, entry.row);
+  return next;
+}
+const editableVentaColumns = ventaColumns.map(
+  (column) => ["cliente", "total", "propina", "metodo"].includes(column.id) ? { ...column, editable: true } : column
+);
+let created = 0;
+function newVenta() {
+  created += 1;
+  return {
+    id: `V-N${String(created).padStart(3, "0")}`,
+    fecha: new Date(2026, 9, 8, 12),
+    cliente: "Cliente nuevo",
+    barbero: "Luis",
+    servicio: "Corte cl\xE1sico",
+    metodo: "Efectivo",
+    total: 35,
+    propina: 0,
+    estado: "Pendiente"
+  };
+}
+function UndoRedoDemo({ density, height }) {
+  const [rows, setRows] = useState(() => ventas.slice(0, 24));
+  const [summary, setSummary] = useState(null);
+  const [last, setLast] = useState("");
+  const idOf = useCallback((row) => row.id, []);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": "Ventas con historial de cambios",
+        data: rows,
+        columns: editableVentaColumns,
+        getRowId: idOf,
+        selectable: true,
+        rangeSelection: true,
+        history: true,
+        historyDepth: 50,
+        createRow: newVenta,
+        defaultPinned: { left: ["id"] },
+        onHistoryChange: setSummary,
+        onCellChange: (change) => {
+          setLast(
+            `${change.source}: ${change.columnId} ${String(change.previous)} \u2192 ${String(change.value)}`
+          );
+          setRows((previous) => applyCellChanges(previous, [change], idOf));
+        },
+        onCellsChange: (changes) => {
+          setLast(`${changes[0]?.source}: ${changes.length} celdas`);
+          setRows((previous) => applyCellChanges(previous, changes, idOf));
+        },
+        onRowsChange: (change) => {
+          setLast(
+            `${change.source}: ${change.type === "add" ? "agreg\xF3" : "quit\xF3"} ${change.rows.length} fila(s)`
+          );
+          setRows((previous) => applyRowsChange(previous, change, idOf));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, "aria-live": "polite", children: summary ? `Historial: ${summary.undoCount} para deshacer, ${summary.redoCount} para rehacer. \xDAltimo: ${last || "\u2014"}` : "Edita Cliente, Total, Propina o M\xE9todo (doble clic o Enter), pega con Ctrl + V, rellena con Ctrl + D o Ctrl + R, agrega o elimina filas. Ctrl + Z deshace; May\xFAs + Ctrl + Z o Ctrl + Y rehace." })
+  ] });
+}
+const productos = [
+  ["Corte cl\xE1sico", 40, 35],
+  ["Corte + barba", 22, 55],
+  ["Perfilado de barba", 18, 25],
+  ["Fade degradado", 15, 40],
+  ["Afeitado con navaja", 9, 30],
+  ["Tinte de barba", 6, 45],
+  ["Cera para peinar", 12, 28]
+];
+const lineas = [
+  ...productos.map(([concepto, cantidad, precio], index) => {
+    const row = index + 1;
+    return {
+      id: `L-${row}`,
+      concepto,
+      cantidad,
+      precio,
+      subtotal: `=B${row}*C${row}`,
+      igv: `=ROUND(D${row}*0.18,2)`,
+      total: `=D${row}+E${row}`,
+      nota: `=IF(F${row}>1000,"Alto","Normal")`
+    };
+  }),
+  {
+    id: "L-8",
+    concepto: "Totales",
+    cantidad: "=SUM(B1:B7)",
+    precio: "=AVERAGE(C1:C7)",
+    subtotal: "=SUM(D1:D7)",
+    igv: "=SUM(E1:E7)",
+    total: "=SUM(F1:F7)",
+    nota: '=IF(F8>5000,"Meta superada","Bajo la meta")'
+  }
+];
+const editable = { editable: true, resizable: true };
+const lineaColumns = [
+  { id: "concepto", header: "Concepto", accessor: "concepto", width: 180, ...editable },
+  { id: "cantidad", header: "Cant.", accessor: "cantidad", type: "number", width: 92, ...editable },
+  { id: "precio", header: "Precio", accessor: "precio", type: "currency", width: 112, ...editable },
+  {
+    id: "subtotal",
+    header: "Subtotal",
+    accessor: "subtotal",
+    type: "currency",
+    width: 120,
+    ...editable
+  },
+  { id: "igv", header: "IGV", accessor: "igv", type: "currency", width: 108, ...editable },
+  { id: "total", header: "Total", accessor: "total", type: "currency", width: 124, ...editable },
+  { id: "nota", header: "Nota", accessor: "nota", width: 140, ...editable }
+];
+const diagnosticos = [
+  { id: "D-1", concepto: "Divisi\xF3n por cero", valor: "=1/0", detalle: "#DIV/0!" },
+  { id: "D-2", concepto: "Funci\xF3n desconocida", valor: "=PROMEDIO(1,2)", detalle: "#NAME?" },
+  { id: "D-3", concepto: "Referencia fuera de rango", valor: "=Z99", detalle: "#REF!" },
+  { id: "D-4", concepto: "Texto en una cuenta", valor: '="a"*2', detalle: "#VALUE!" },
+  { id: "D-5", concepto: "Ciclo (B6)", valor: "=B6", detalle: "#CYCLE!" },
+  { id: "D-6", concepto: "Ciclo (B5)", valor: "=B5", detalle: "#CYCLE!" },
+  { id: "D-7", concepto: "Suma con error", valor: "=SUM(B1:B4)", detalle: "El error se propaga" }
+];
+const diagnosticoColumns = [
+  { id: "concepto", header: "Caso", accessor: "concepto", width: 200, ...editable },
+  { id: "valor", header: "Resultado", accessor: "valor", width: 150, ...editable },
+  { id: "detalle", header: "Esperado", accessor: "detalle", width: 170, ...editable }
+];
+function FormulasDemo({
+  rows: initial,
+  columns,
+  label,
+  density,
+  height,
+  hint
+}) {
+  const [rows, setRows] = useState([...initial]);
+  const idOf = useCallback((row) => row.id, []);
+  const apply = useCallback(
+    (changes) => setRows((previous) => applyCellChanges(previous, changes, idOf)),
+    [idOf]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": label,
+        data: rows,
+        columns,
+        getRowId: idOf,
+        formulas: true,
+        history: true,
+        hideToolbar: false,
+        onCellChange: (change) => apply([change]),
+        onCellsChange: apply
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, children: hint })
+  ] });
+}
+function ExportXlsxDemo({ density, height }) {
+  const [last, setLast] = useState(null);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": "Ventas para exportar a Excel",
+        data: ventas,
+        columns: ventaColumns,
+        getRowId: (row) => row.id,
+        selectable: true,
+        exportFilename: false,
+        exportXlsx: "ventas-octubre.xlsx",
+        onExportXlsx: setLast,
+        defaultPinned: { left: ["id"] }
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, "aria-live": "polite", children: last ? `${last.filename}: ${last.rowCount} filas, ${last.bytes.length} bytes, firma ${String.fromCharCode(last.bytes[0] ?? 0, last.bytes[1] ?? 0)} (ZIP).` : "Exportar XLSX usa las filas filtradas y ordenadas y las columnas visibles; con filas seleccionadas exporta solo la selecci\xF3n. N\xFAmeros como n\xFAmeros, fechas como fechas." })
+  ] });
+}
+const MESES = ["ene", "feb", "mar", "abr", "may", "jun"];
+const randomIngreso = seeded(11);
+const ingresos = BARBEROS.map((barbero, index) => {
+  const base = 1100 + index * 140;
+  const [ene, feb, mar, abr, may, jun] = MESES.map(
+    (_, month) => Math.round(base + month * (40 + index * 15) + (randomIngreso() - 0.5) * 360)
+  );
+  return { id: `B-${index + 1}`, barbero, ene, feb, mar, abr, may, jun };
+});
+const mes = (id, header) => ({
+  id,
+  header,
+  accessor: id,
+  type: "currency",
+  width: 104,
+  aggregate: "sum"
+});
+const ingresoColumns = [
+  { id: "barbero", header: "Barbero", accessor: "barbero", width: 140 },
+  mes("ene", "Ene"),
+  mes("feb", "Feb"),
+  mes("mar", "Mar"),
+  mes("abr", "Abr"),
+  mes("may", "May"),
+  mes("jun", "Jun"),
+  {
+    id: "tendencia",
+    header: "Tendencia",
+    accessor: "jun",
+    type: "sparkline",
+    width: 160,
+    filterable: false,
+    sparkline: {
+      values: (row) => MESES.map((month) => row[month]),
+      kind: "area",
+      label: (row) => `Ingresos de ${row.barbero} de enero a junio`
+    }
+  }
+];
+function ChartsDemo({ density, height }) {
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": "Ingresos por barbero y mes",
+        data: ingresos,
+        columns: ingresoColumns,
+        getRowId: (row) => row.id,
+        charts: true,
+        showFooter: true
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, children: "Arrastra sobre las celdas (por ejemplo Barbero hasta Jun) o usa May\xFAs + flechas y pulsa Graficar: la columna de texto da las categor\xEDas y cada columna num\xE9rica es una serie." })
+  ] });
+}
+function SparklineDemo({ density, height }) {
+  return /* @__PURE__ */ jsx(
+    DataGrid,
+    {
+      density,
+      height,
+      "aria-label": "Ingresos con minigr\xE1ficos",
+      data: ingresos,
+      columns: ingresoColumns,
+      getRowId: (row) => row.id
+    }
+  );
+}
+const reservaSeeds = [
+  { silla: "Silla 1", turno: 10, dia: new Date(2026, 9, 1, 12), precio: 25 },
+  { silla: null, turno: 20, dia: new Date(2026, 10, 1, 12), precio: 25 },
+  { silla: null, turno: 30, dia: new Date(2026, 11, 1, 12), precio: 30 }
+];
+const reservas = Array.from({ length: 14 }, (_unused, index) => {
+  const seed = reservaSeeds[index];
+  const row = index + 1;
+  return {
+    id: `R-${row}`,
+    silla: seed?.silla ?? null,
+    turno: seed?.turno ?? null,
+    dia: seed?.dia ?? null,
+    precio: seed?.precio ?? null,
+    doble: index === 0 ? `=D${row}*2` : null
+  };
+});
+const reservaColumns = [
+  { id: "silla", header: "Silla", accessor: "silla", width: 130, ...editable },
+  { id: "turno", header: "Turno", accessor: "turno", type: "number", width: 96, ...editable },
+  { id: "dia", header: "D\xEDa", accessor: "dia", type: "date", width: 130, ...editable },
+  { id: "precio", header: "Precio", accessor: "precio", type: "currency", width: 112, ...editable },
+  { id: "doble", header: "Doble", accessor: "doble", type: "currency", width: 112, ...editable }
+];
+function FillHandleDemo({ density, height }) {
+  const [rows, setRows] = useState(reservas);
+  const [last, setLast] = useState("");
+  const idOf = useCallback((row) => row.id, []);
+  const apply = useCallback(
+    (changes) => {
+      setRows((previous) => applyCellChanges(previous, changes, idOf));
+      const sources = new Set(changes.map((change) => change.source));
+      setLast(
+        `${changes.length} ${changes.length === 1 ? "cambio" : "cambios"} (${[...sources].join(", ")})`
+      );
+    },
+    [idOf]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": "Reservas por silla",
+        data: rows,
+        columns: reservaColumns,
+        getRowId: idOf,
+        formulas: true,
+        history: true,
+        rangeSelection: true,
+        hideToolbar: false,
+        onCellChange: (change) => apply([change]),
+        onCellsChange: apply
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, children: "Selecciona celdas con datos y arrastra el cuadro del borde inferior derecho hacia abajo o a la derecha: 10, 20 sigue 30, 40; \xABSilla 1\xBB sigue \xABSilla 2\xBB; las fechas mensuales siguen mes a mes y las f\xF3rmulas ajustan sus referencias. Ctrl al soltar solo copia. Una sola operaci\xF3n en el historial: Ctrl + Z la deshace." }),
+    /* @__PURE__ */ jsxs("p", { className: note, "aria-live": "polite", children: [
+      "\xDAltimo relleno: ",
+      last || "ninguno"
+    ] })
+  ] });
+}
+const reservasBackwards = Array.from({ length: 40 }, (_unused, index) => {
+  const row = index + 1;
+  const seed = index === 30 ? reservaSeeds[0] : index === 31 ? reservaSeeds[1] : void 0;
+  const last = index === 32 ? reservaSeeds[2] : void 0;
+  const filled = seed ?? last;
+  return {
+    id: `R-${row}`,
+    silla: index === 32 ? "Silla 3" : null,
+    turno: filled?.turno ?? null,
+    dia: filled?.dia ?? null,
+    precio: filled?.precio ?? null,
+    doble: null
+  };
+});
+const DATE_STEPS = ["auto", "day", "month"];
+function FillBackwardsDemo({ density, height }) {
+  const [rows, setRows] = useState(reservasBackwards);
+  const [dateStep, setDateStep] = useState("auto");
+  const idOf = useCallback((row) => row.id, []);
+  const apply = useCallback(
+    (changes) => setRows((previous) => applyCellChanges(previous, changes, idOf)),
+    [idOf]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs("label", { className: note, children: [
+      "Paso de fechas",
+      " ",
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: dateStep,
+          onChange: (event) => setDateStep(event.target.value),
+          children: DATE_STEPS.map((step) => /* @__PURE__ */ jsx("option", { value: step, children: step }, step))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        density,
+        height,
+        "aria-label": "Reservas por silla, relleno hacia arriba",
+        data: rows,
+        columns: reservaColumns,
+        getRowId: idOf,
+        history: true,
+        rangeSelection: true,
+        fillSeries: { dateStep },
+        hideToolbar: false,
+        onCellChange: (change) => apply([change]),
+        onCellsChange: apply
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: note, children: "Los datos est\xE1n al final. Selecciona \xABTurno\xBB (10, 20) o \xABSilla 3\xBB y arrastra el cuadro del borde inferior derecho hacia arriba o a la izquierda: la serie retrocede (0, -10; \xABSilla 2\xBB) y la tabla se desplaza sola cuando el puntero se acerca al borde. Suelta o pulsa Escape para parar." })
+  ] });
+}
+export {
+  ChartsDemo,
+  ExportXlsxDemo,
+  FillBackwardsDemo,
+  FillHandleDemo,
+  FormulasDemo,
+  SparklineDemo,
+  Stack,
+  UndoRedoDemo,
+  applyCellChanges,
+  applyRowsChange,
+  diagnosticoColumns,
+  diagnosticos,
+  editableVentaColumns,
+  ingresoColumns,
+  ingresos,
+  lineaColumns,
+  lineas,
+  newVenta,
+  note,
+  reservaColumns,
+  reservas
+};