@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/showcase/dataviz-bento.js

@@ -0,0 +1,444 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BubbleChart } from "../charts/bubble-chart/index.js";
+import { CandlestickChart } from "../charts/candlestick-chart/index.js";
+import { GanttChart } from "../charts/gantt-chart/index.js";
+import { PictogramChart } from "../charts/pictogram-chart/index.js";
+import { PolarAreaChart } from "../charts/polar-area-chart/index.js";
+import { RadarChart } from "../charts/radar-chart/index.js";
+import { SankeyChart } from "../charts/sankey-chart/index.js";
+import { ScatterChart } from "../charts/scatter-chart/index.js";
+import { SunburstChart } from "../charts/sunburst-chart/index.js";
+import { TreeChart } from "../charts/tree-chart/index.js";
+import { TreemapChart } from "../charts/treemap-chart/index.js";
+import { WaffleChart } from "../charts/waffle-chart/index.js";
+import { seeded } from "../dashboards/data.js";
+import { BentoGrid, Tile } from "./bento.js";
+const ventas = {
+  name: "Ventas de octubre",
+  children: [
+    {
+      name: "Cortes",
+      children: [
+        { name: "Corte cl\xE1sico", value: 6480 },
+        { name: "Degradado", value: 5320 },
+        { name: "Corte infantil", value: 1890 },
+        { name: "Rapado", value: 760 }
+      ]
+    },
+    {
+      name: "Barba",
+      children: [
+        { name: "Perfilado", value: 2960 },
+        { name: "Afeitado cl\xE1sico", value: 1740 },
+        { name: "Toalla caliente", value: 1210 }
+      ]
+    },
+    {
+      name: "Productos",
+      children: [
+        { name: "Cera mate", value: 1480 },
+        { name: "Pomada", value: 1120 },
+        { name: "Shampoo", value: 860 },
+        { name: "Aceite de barba", value: 790 }
+      ]
+    },
+    {
+      name: "Color",
+      children: [
+        { name: "Tinte", value: 1650 },
+        { name: "Mechas", value: 980 }
+      ]
+    },
+    {
+      name: "Combos",
+      children: [
+        { name: "Corte + barba", value: 3870 },
+        { name: "Novio VIP", value: 900 }
+      ]
+    }
+  ]
+};
+const sedes = {
+  name: "Servicios de octubre",
+  children: [
+    {
+      name: "Miraflores",
+      children: [
+        {
+          name: "Kevin",
+          children: [
+            { name: "Cl\xE1sico", value: 64 },
+            { name: "Degradado", value: 48 },
+            { name: "Barba", value: 22 }
+          ]
+        },
+        {
+          name: "Renzo",
+          children: [
+            { name: "Degradado", value: 57 },
+            { name: "Combo", value: 31 }
+          ]
+        }
+      ]
+    },
+    {
+      name: "Barranco",
+      children: [
+        {
+          name: "Abel",
+          children: [
+            { name: "Cl\xE1sico", value: 42 },
+            { name: "Afeitado", value: 26 }
+          ]
+        },
+        {
+          name: "Diego",
+          children: [
+            { name: "Degradado", value: 38 },
+            { name: "Infantil", value: 17 }
+          ]
+        }
+      ]
+    },
+    {
+      name: "San Isidro",
+      children: [
+        {
+          name: "Luis",
+          children: [
+            { name: "Combo", value: 35 },
+            { name: "Cl\xE1sico", value: 29 }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const flujoNodos = [
+  { id: "instagram", name: "Instagram" },
+  { id: "referidos", name: "Referidos" },
+  { id: "google", name: "Google Maps" },
+  { id: "paso", name: "Paso por la tienda" },
+  { id: "corte", name: "Corte" },
+  { id: "barba", name: "Barba" },
+  { id: "combo", name: "Corte + barba" },
+  { id: "yape", name: "Yape / Plin" },
+  { id: "tarjeta", name: "Tarjeta" },
+  { id: "efectivo", name: "Efectivo" }
+];
+const flujoLinks = [
+  { source: "instagram", target: "corte", value: 142 },
+  { source: "instagram", target: "combo", value: 64 },
+  { source: "referidos", target: "corte", value: 88 },
+  { source: "referidos", target: "barba", value: 41 },
+  { source: "referidos", target: "combo", value: 37 },
+  { source: "google", target: "corte", value: 56 },
+  { source: "google", target: "barba", value: 22 },
+  { source: "paso", target: "corte", value: 47 },
+  { source: "paso", target: "barba", value: 29 },
+  { source: "corte", target: "yape", value: 196 },
+  { source: "corte", target: "tarjeta", value: 78 },
+  { source: "corte", target: "efectivo", value: 59 },
+  { source: "barba", target: "yape", value: 51 },
+  { source: "barba", target: "efectivo", value: 41 },
+  { source: "combo", target: "tarjeta", value: 58 },
+  { source: "combo", target: "yape", value: 43 }
+];
+const organigrama = {
+  id: "dueno",
+  name: "Carlos Mendoza",
+  subtitle: "Due\xF1o",
+  badge: "3 sedes",
+  children: [
+    {
+      id: "miraflores",
+      name: "Luc\xEDa Paredes",
+      subtitle: "Encargada",
+      badge: "Miraflores",
+      children: [
+        { id: "kevin", name: "Kevin Rojas", subtitle: "Barbero senior" },
+        { id: "andrea", name: "Andrea Quispe", subtitle: "Colorista" }
+      ]
+    },
+    {
+      id: "surco",
+      name: "Jorge Vargas",
+      subtitle: "Encargado",
+      badge: "Surco",
+      children: [
+        { id: "luis", name: "Luis Fern\xE1ndez", subtitle: "Barbero senior" },
+        { id: "camila", name: "Camila Torres", subtitle: "Recepci\xF3n" }
+      ]
+    },
+    {
+      id: "barranco",
+      name: "Valeria N\xFA\xF1ez",
+      subtitle: "Encargada",
+      badge: "Barranco",
+      children: [{ id: "abel", name: "Abel R\xEDos", subtitle: "Barbero" }]
+    }
+  ]
+};
+const day = (month, date) => new Date(2026, month - 1, date);
+const remodelacion = [
+  { id: "plan", name: "Planificaci\xF3n", start: day(9, 14), end: day(9, 26) },
+  {
+    id: "brief",
+    name: "Brief con el due\xF1o",
+    parentId: "plan",
+    start: day(9, 14),
+    end: day(9, 16),
+    progress: 1
+  },
+  {
+    id: "diseno",
+    name: "Dise\xF1o del local",
+    parentId: "plan",
+    start: day(9, 16),
+    end: day(9, 23),
+    progress: 1,
+    dependencies: ["brief"]
+  },
+  {
+    id: "aprobado",
+    name: "Dise\xF1o aprobado",
+    parentId: "plan",
+    start: day(9, 25),
+    end: day(9, 25),
+    milestone: true,
+    dependencies: ["diseno"]
+  },
+  { id: "obra", name: "Obra", start: day(9, 28), end: day(10, 24) },
+  {
+    id: "demolicion",
+    name: "Demolici\xF3n",
+    parentId: "obra",
+    start: day(9, 28),
+    end: day(10, 3),
+    progress: 1,
+    dependencies: ["aprobado"]
+  },
+  {
+    id: "electrico",
+    name: "Instalaci\xF3n el\xE9ctrica",
+    parentId: "obra",
+    start: day(10, 5),
+    end: day(10, 13),
+    progress: 0.6,
+    dependencies: ["demolicion"]
+  },
+  {
+    id: "sillones",
+    name: "Sillones y lavaderos",
+    parentId: "obra",
+    start: day(10, 12),
+    end: day(10, 21),
+    progress: 0.2,
+    dependencies: ["electrico"]
+  },
+  {
+    id: "apertura",
+    name: "Inauguraci\xF3n",
+    start: day(10, 26),
+    end: day(10, 26),
+    milestone: true,
+    dependencies: ["sillones"]
+  }
+];
+const random = seeded(7);
+let precio = 42;
+const pomada = Array.from({ length: 40 }, (_, index) => {
+  const open = precio;
+  const close = Math.max(1.6, open + (random() - 0.46) * 3.8);
+  const high = Math.max(open, close) + random() * 1.4;
+  const low = Math.max(0.8, Math.min(open, close) - random() * 1.4);
+  precio = close;
+  const round = (value) => Math.round(value * 100) / 100;
+  return {
+    date: new Date(2026, 0, 5 + index * 7),
+    open: round(open),
+    high: round(high),
+    low: round(low),
+    close: round(close),
+    volume: Math.round(40 + random() * 160)
+  };
+});
+function atenciones(seed, count, base, porMinuto) {
+  const next = seeded(seed);
+  return Array.from({ length: count }, () => {
+    const duracion = Math.round(15 + next() * 55);
+    return { x: duracion, y: Math.round(base + duracion * porMinuto + (next() - 0.5) * 22) };
+  });
+}
+const habilidades = ["Corte", "Degradado", "Barba", "Atenci\xF3n", "Puntualidad", "Limpieza"];
+const barberos = [
+  { id: "kevin", name: "Kevin", data: [92, 88, 70, 85, 90, 78] },
+  { id: "renzo", name: "Renzo", data: [75, 95, 82, 70, 65, 88] },
+  { id: "abel", name: "Abel", data: [60, 72, 94, 90, 80, 68] }
+];
+const citasPorDia = [
+  { id: "lun", name: "Lunes", value: 18 },
+  { id: "mar", name: "Martes", value: 24 },
+  { id: "mie", name: "Mi\xE9rcoles", value: 27 },
+  { id: "jue", name: "Jueves", value: 33 },
+  { id: "vie", name: "Viernes", value: 46 },
+  { id: "sab", name: "S\xE1bado", value: 58 },
+  { id: "dom", name: "Domingo", value: 12 }
+];
+const servicios = [
+  { label: "Corte cl\xE1sico", x: 28, y: 35, size: 186 },
+  { label: "Degradado", x: 38, y: 45, size: 142 },
+  { label: "Corte + barba", x: 52, y: 60, size: 97 },
+  { label: "Barba", x: 18, y: 25, size: 74 },
+  { label: "Tinte", x: 65, y: 90, size: 31 },
+  { label: "Lavado", x: 12, y: 15, size: 22 }
+];
+const pagos = [
+  { id: "yape", name: "Yape", value: 412 },
+  { id: "efectivo", name: "Efectivo", value: 268 },
+  { id: "tarjeta", name: "Tarjeta", value: 187 },
+  { id: "plin", name: "Plin", value: 96 }
+];
+const clientesHoy = [
+  { id: "nuevos", name: "Nuevos", value: 18 },
+  { id: "frecuentes", name: "Frecuentes", value: 42 },
+  { id: "vip", name: "Membres\xEDa VIP", value: 11 }
+];
+const minutos = (value) => `${Math.round(value)} min`;
+function DataVizBento() {
+  return /* @__PURE__ */ jsxs(BentoGrid, { rowHeight: 136, children: [
+    /* @__PURE__ */ jsx(Tile, { title: "Treemap", subtitle: "Ventas por categor\xEDa y producto", cols: 4, rows: 3, index: 0, children: /* @__PURE__ */ jsx(
+      TreemapChart,
+      {
+        height: "fill",
+        title: "Ventas por categor\xEDa y producto",
+        data: ventas,
+        valueFormat: "currency",
+        depth: 2,
+        legend: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Sunburst", subtitle: "Sede, barbero y servicio", cols: 2, rows: 3, index: 1, children: /* @__PURE__ */ jsx(
+      SunburstChart,
+      {
+        height: "fill",
+        title: "Servicios por sede, barbero y servicio",
+        data: sedes,
+        valueFormat: "integer",
+        levels: 3,
+        legend: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Sankey", subtitle: "De d\xF3nde vienen y c\xF3mo pagan", cols: 4, rows: 3, index: 2, children: /* @__PURE__ */ jsx(
+      SankeyChart,
+      {
+        height: "fill",
+        title: "Origen de clientes, servicio y medio de pago",
+        nodes: flujoNodos,
+        links: flujoLinks,
+        columns: ["Origen", "Servicio", "Pago"],
+        valueFormat: "integer"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Radar", subtitle: "Evaluaci\xF3n del equipo", cols: 2, rows: 3, index: 3, children: /* @__PURE__ */ jsx(
+      RadarChart,
+      {
+        height: "fill",
+        title: "Evaluaci\xF3n de barberos por habilidad",
+        axes: habilidades,
+        series: barberos,
+        valueFormat: "integer"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Tile,
+      {
+        title: "Gantt",
+        subtitle: "Remodelaci\xF3n de la sede San Isidro",
+        cols: 6,
+        rows: 3,
+        index: 4,
+        flush: true,
+        children: /* @__PURE__ */ jsx(
+          GanttChart,
+          {
+            height: "fill",
+            title: "Remodelaci\xF3n de la sede San Isidro",
+            tasks: remodelacion,
+            today: day(10, 8),
+            defaultZoom: "week"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Tile, { title: "Velas", subtitle: "Precio semanal de la pomada", cols: 3, rows: 3, index: 5, children: /* @__PURE__ */ jsx(
+      CandlestickChart,
+      {
+        height: "fill",
+        title: "Precio semanal de la pomada (S/ por unidad)",
+        data: pomada,
+        valueFormat: "currency"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Organigrama", subtitle: "Equipo por sede", cols: 3, rows: 3, index: 6, children: /* @__PURE__ */ jsx(TreeChart, { height: "fill", title: "Equipo de la barber\xEDa", data: organigrama }) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Dispersi\xF3n", subtitle: "Duraci\xF3n vs. ticket", cols: 2, rows: 2, index: 7, children: /* @__PURE__ */ jsx(
+      ScatterChart,
+      {
+        height: "fill",
+        title: "Duraci\xF3n del servicio vs. ticket",
+        series: [
+          { id: "corte", name: "Corte", points: atenciones(401, 40, 10, 0.75) },
+          { id: "combo", name: "Combo", points: atenciones(402, 30, 22, 0.9) }
+        ],
+        xFormat: minutos,
+        yFormat: "currency"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Burbujas", subtitle: "Duraci\xF3n, ticket y volumen", cols: 2, rows: 2, index: 8, children: /* @__PURE__ */ jsx(
+      BubbleChart,
+      {
+        height: "fill",
+        title: "Servicios: duraci\xF3n, ticket y volumen",
+        series: [{ id: "servicios", name: "Servicios", points: servicios }],
+        xFormat: minutos,
+        yFormat: "currency",
+        sizeFormat: "integer",
+        sizeLegend: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "\xC1rea polar", subtitle: "Citas por d\xEDa", cols: 2, rows: 2, index: 9, children: /* @__PURE__ */ jsx(
+      PolarAreaChart,
+      {
+        height: "fill",
+        title: "Citas por d\xEDa de la semana",
+        data: citasPorDia,
+        valueFormat: "integer"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Waffle", subtitle: "Pagos del mes", cols: 2, rows: 2, index: 10, children: /* @__PURE__ */ jsx(
+      WaffleChart,
+      {
+        height: "fill",
+        title: "Pagos del mes por medio",
+        data: pagos,
+        rows: 10,
+        columns: 10,
+        valueFormat: "integer"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tile, { title: "Pictograma", subtitle: "Clientes atendidos hoy", cols: 4, rows: 2, index: 11, children: /* @__PURE__ */ jsx(
+      PictogramChart,
+      {
+        height: "fill",
+        title: "Clientes atendidos hoy",
+        data: clientesHoy,
+        icon: "person",
+        unitLabel: "clientes",
+        valueFormat: "integer"
+      }
+    ) })
+  ] });
+}
+export {
+  DataVizBento
+};

package/dist/showcase/kit-tiles.d.ts

@@ -0,0 +1,15 @@
+/** Reserve flow: pick services and a payment method. */
+export declare function BookingTile({ index }: {
+    index: number;
+}): import("react").JSX.Element;
+/** Slider, rating, stepper, inline select and emoji reactions. */
+export declare function TuningTile({ index }: {
+    index: number;
+}): import("react").JSX.Element;
+export declare function NoteTile({ index }: {
+    index: number;
+}): import("react").JSX.Element;
+/** Mini assistant: a conversation, a tool call, a Markdown table and the prompt input. */
+export declare function AssistantTile({ index }: {
+    index: number;
+}): import("react").JSX.Element;

package/dist/showcase/kit-tiles.js

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Banknote, CreditCard, Scissors, Smartphone, Smile, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { ChatMessage } from "../ai/chat-message/index.js";
+import { Conversation } from "../ai/conversation/index.js";
+import { Markdown } from "../ai/markdown/index.js";
+import { PromptInput } from "../ai/prompt-input/index.js";
+import { PromptSuggestion, PromptSuggestionList } from "../ai/prompt-suggestion/index.js";
+import { ToolCall } from "../ai/tool-call/index.js";
+import { CheckboxButtonGroup } from "../forms/checkbox-button-group/index.js";
+import { EmojiReactionBar } from "../forms/emoji-reaction-button/index.js";
+import { InlineSelect } from "../forms/inline-select/index.js";
+import { NumberStepper } from "../forms/number-stepper/index.js";
+import { RadioButtonGroup } from "../forms/radio-button-group/index.js";
+import { Rating } from "../forms/rating/index.js";
+import { Slider } from "../forms/slider/index.js";
+import { RichTextEditor } from "../rich-text/index.js";
+import { Tile, useOverlayContainer } from "./bento.js";
+const servicios = [
+  { value: "corte", label: "Corte", description: "S/ 35 \xB7 30 min", icon: /* @__PURE__ */ jsx(Scissors, {}) },
+  { value: "barba", label: "Barba", description: "S/ 25 \xB7 20 min", icon: /* @__PURE__ */ jsx(Smile, {}) },
+  { value: "facial", label: "Limpieza facial", description: "S/ 40 \xB7 25 min", icon: /* @__PURE__ */ jsx(Sparkles, {}) }
+];
+const pagos = [
+  { value: "yape", label: "Yape", description: "Pago inmediato", icon: /* @__PURE__ */ jsx(Smartphone, {}) },
+  { value: "tarjeta", label: "Tarjeta", description: "Visa / Mastercard", icon: /* @__PURE__ */ jsx(CreditCard, {}) },
+  { value: "efectivo", label: "Efectivo", description: "En el local", icon: /* @__PURE__ */ jsx(Banknote, {}) }
+];
+const frecuencias = [
+  { value: "dia", label: "d\xEDa" },
+  { value: "semana", label: "semana" },
+  { value: "mes", label: "mes" }
+];
+function BookingTile({ index }) {
+  return /* @__PURE__ */ jsx(Tile, { title: "Reserva", subtitle: "Servicios y medio de pago", cols: 3, rows: 3, index, children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-col justify-center gap-density", children: [
+    /* @__PURE__ */ jsx(CheckboxButtonGroup, { options: servicios, defaultValue: ["corte"], "aria-label": "Servicios" }),
+    /* @__PURE__ */ jsx(RadioButtonGroup, { options: pagos, defaultValue: "yape", "aria-label": "M\xE9todo de pago" })
+  ] }) });
+}
+function TuningTile({ index }) {
+  const container = useOverlayContainer();
+  const [reactions, setReactions] = useState([
+    { emoji: "\u{1F525}", count: 7, reacted: true },
+    { emoji: "\u{1F488}", count: 4 }
+  ]);
+  const react = (emoji, reacted) => setReactions((list) => {
+    const found = list.find((item) => item.emoji === emoji);
+    if (!found) return [...list, { emoji, count: 1, reacted: true }];
+    return list.map(
+      (item) => item.emoji === emoji ? { ...item, reacted, count: Math.max(0, item.count + (reacted ? 1 : -1)) } : item
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    Tile,
+    {
+      title: "Ajustes del servicio",
+      subtitle: "Controles num\xE9ricos",
+      cols: 3,
+      rows: 3,
+      index,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-col justify-center gap-density", children: [
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            min: 0,
+            max: 50,
+            step: 5,
+            defaultValue: 15,
+            showValue: true,
+            formatValue: (value) => `${value}%`,
+            "aria-label": "Descuento por fidelidad"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-density-sm", children: [
+          /* @__PURE__ */ jsx(Rating, { defaultValue: 4, "aria-label": "Valoraci\xF3n del corte", showValue: true }),
+          /* @__PURE__ */ jsx(
+            NumberStepper,
+            {
+              className: "shrink-0",
+              defaultValue: 2,
+              min: 0,
+              max: 10,
+              unit: "unid.",
+              "aria-label": "Productos"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "m-0 flex flex-wrap items-center gap-x-1 text-body text-ink", children: [
+          "Repetir la cita cada",
+          " ",
+          /* @__PURE__ */ jsx(InlineSelect, { options: frecuencias, defaultValue: "semana", "aria-label": "Frecuencia" }),
+          "con el mismo barbero."
+        ] }),
+        /* @__PURE__ */ jsx(EmojiReactionBar, { reactions, onReact: react, container })
+      ] })
+    }
+  );
+}
+function NoteTile({ index }) {
+  return /* @__PURE__ */ jsx(
+    Tile,
+    {
+      title: "Nota del cliente",
+      subtitle: "Editor de texto enriquecido",
+      cols: 2,
+      rows: 4,
+      index,
+      children: /* @__PURE__ */ jsx(
+        RichTextEditor,
+        {
+          defaultValue: "<p><strong>Degradado alto</strong> con la parte superior a tijera. Prefiere <em>sin cera</em>.</p>",
+          "aria-label": "Nota de estilo del cliente",
+          minHeightRem: 9
+        }
+      )
+    }
+  );
+}
+const RESPUESTA = `Ma\xF1ana Diego tiene **3 huecos libres**:
+
+| Hora | Servicio | Precio |
+| :-- | :-- | --: |
+| 10:00 | Corte cl\xE1sico | S/ 35 |
+| 11:30 | Corte + barba | S/ 55 |
+| 16:00 | Perfilado | S/ 25 |`;
+function AssistantTile({ index }) {
+  const [turns, setTurns] = useState([]);
+  const send = (user) => setTurns((list) => [...list, { id: list.length + 1, user }]);
+  return /* @__PURE__ */ jsx(
+    Tile,
+    {
+      title: "Asistente IA",
+      subtitle: "Pregunta por turnos, clientes o ingresos",
+      cols: 4,
+      rows: 4,
+      index,
+      flush: true,
+      children: /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-label": "Asistente de la barber\xEDa",
+          className: "grid h-full min-h-0 grid-rows-[1fr_auto]",
+          children: [
+            /* @__PURE__ */ jsxs(Conversation, { label: "Conversaci\xF3n con el asistente", children: [
+              /* @__PURE__ */ jsx(
+                ChatMessage,
+                {
+                  author: "assistant",
+                  name: "Asistente",
+                  content: "Hola, soy el asistente de la barber\xEDa. Puedo revisar la agenda y los ingresos."
+                }
+              ),
+              turns.length === 0 ? /* @__PURE__ */ jsxs(PromptSuggestionList, { children: [
+                /* @__PURE__ */ jsx(PromptSuggestion, { onSelect: send, children: "\xBFQu\xE9 turnos libres hay ma\xF1ana?" }),
+                /* @__PURE__ */ jsx(PromptSuggestion, { onSelect: send, children: "Resume los ingresos de la semana" })
+              ] }) : null,
+              turns.map((turn) => /* @__PURE__ */ jsxs("div", { className: "grid gap-density-lg", children: [
+                /* @__PURE__ */ jsx(ChatMessage, { author: "user", name: "Luis", content: turn.user }),
+                /* @__PURE__ */ jsx(ChatMessage, { author: "assistant", name: "Asistente", status: "done", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-density-sm", children: [
+                  /* @__PURE__ */ jsx(
+                    ToolCall,
+                    {
+                      name: "buscar_turnos",
+                      status: "done",
+                      args: { fecha: "2026-10-09", barbero: "Diego Quispe" },
+                      result: { libres: ["10:00", "11:30", "16:00"] }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Markdown, { children: RESPUESTA })
+                ] }) })
+              ] }, turn.id))
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-card pt-0", children: /* @__PURE__ */ jsx(
+              PromptInput,
+              {
+                onSubmit: send,
+                placeholder: "Pregunta por turnos, clientes o ingresos\u2026",
+                hint: "Enter env\xEDa \xB7 Shift+Enter agrega una l\xEDnea"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  AssistantTile,
+  BookingTile,
+  NoteTile,
+  TuningTile
+};

package/dist/showcase/operations-bento.d.ts

@@ -0,0 +1,2 @@
+/** Operations bento: the day of a barbershop, from agenda to the cash register. */
+export declare function OperationsBento(): import("react").JSX.Element;