pixelon 0.3.75 → 0.3.76

package/dist/components/molecules/chat/StructuredContent/components/ReactiveCrud/DeadlineCountdown.d.ts

@@ -0,0 +1,9 @@
+import './DeadlineCountdown.scss';
+interface Props {
+    /** Hora límite en ISO. */
+    deadline: string;
+    label?: string;
+    expiredLabel?: string;
+}
+export declare function DeadlineCountdown({ deadline, label, expiredLabel }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default DeadlineCountdown;

package/dist/components/molecules/chat/StructuredContent/components/ReactiveCrud/types.d.ts

@@ -144,5 +144,22 @@ export interface ReactiveCrudConfig {
         x?: number | string;
         y?: number | string;
     };
+    /** SPEC-087 — cuenta atrás en el panel de un registro. Ver `DeadlineConfig`. */
+    deadline?: DeadlineConfig;
+}
+/** SPEC-087 — fecha límite de un registro, pintada como cuenta atrás junto a sus acciones.
+ *
+ *  Es deliberadamente genérico: dice «esta tarjeta tiene una fecha límite», no de qué es el plazo.
+ *  El campo apunta a un dato de la fila con un INSTANTE en ISO, nunca a una duración: una duración
+ *  se queda vieja en cuanto se guarda, y estas cards viven para siempre en el chat.
+ *
+ *  Si el campo viene vacío no se pinta nada — no hay plazo que enseñar. */
+export interface DeadlineConfig {
+    /** Campo de la fila con la hora límite en ISO. */
+    field: string;
+    /** Texto sobre el contador. Ej: 'Para que salga la grúa'. */
+    label?: string;
+    /** Qué decir cuando ya venció. Se sigue mostrando: desaparecer sería volver al silencio. */
+    expiredLabel?: string;
 }
 export type { FilterManager };

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export type { ChatNavigatorConfig, ChatNavigatorItem, ChatNavigatorEndpoint } fr
 export { UserTools } from './components/molecules/chat/StructuredContent/components/UserTools/UserTools';
 export type { UserToolsConfig, UserToolItem } from './components/molecules/chat/StructuredContent/components/UserTools/types';
 export { ReactiveCrud } from './components/molecules/chat/StructuredContent/components/ReactiveCrud/ReactiveCrud';
-export type { ReactiveCrudConfig, ReactiveCrudField, RowActionDef, EndpointRef, CrudMolecule, CrudFieldOptionsEndpoint, RowActionVisibleWhen, } from './components/molecules/chat/StructuredContent/components/ReactiveCrud/types';
+export type { ReactiveCrudConfig, ReactiveCrudField, DeadlineConfig, RowActionDef, EndpointRef, CrudMolecule, CrudFieldOptionsEndpoint, RowActionVisibleWhen, } from './components/molecules/chat/StructuredContent/components/ReactiveCrud/types';
 export { Chat } from './components/organisms/chat/Chat';
 export type { ChatProps } from './components/organisms/chat/Chat';
 export type { ChatMessage } from './core/chat';

package/dist/index.esm.js

@@ -15871,6 +15871,41 @@ function ReactiveCrudChat({ component, eventBus, assistantMessageId }) {
   ] });
 }
 
+function restante(hasta) {
+  return Math.max(0, hasta - Date.now());
+}
+function formatear(ms) {
+  const total = Math.floor(ms / 1e3);
+  const min = Math.floor(total / 60);
+  const seg = total % 60;
+  return `${String(min).padStart(2, "0")}:${String(seg).padStart(2, "0")}`;
+}
+function DeadlineCountdown({ deadline, label, expiredLabel }) {
+  const hasta = new Date(deadline).getTime();
+  const valida = !Number.isNaN(hasta);
+  const [ms, setMs] = useState(() => valida ? restante(hasta) : 0);
+  useEffect(() => {
+    if (!valida) return;
+    setMs(restante(hasta));
+    const id = setInterval(() => setMs(restante(hasta)), 1e3);
+    return () => clearInterval(id);
+  }, [hasta, valida]);
+  if (!valida) return null;
+  const vencido = ms <= 0;
+  const apurado = !vencido && ms <= 6e4;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `px-deadline${vencido ? " is-expired" : ""}${apurado ? " is-urgent" : ""}`,
+      role: "status",
+      children: vencido ? /* @__PURE__ */ jsx("span", { className: "px-deadline__expired", children: expiredLabel ?? "El plazo venci\xF3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        label && /* @__PURE__ */ jsx("span", { className: "px-deadline__label", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "px-deadline__time", children: formatear(ms) })
+      ] })
+    }
+  );
+}
+
 function ReactiveCrudItemChat({ component, eventBus }) {
   const { resolveModuleConfig } = useChatConfig();
   const props = component.props ?? {};
@@ -15938,6 +15973,14 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     ] }),
     crud.loading && !row && /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__hint", children: "Cargando\u2026" }),
     !crud.loading && !row && /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__hint", children: "No se encontr\xF3 el servicio." }),
+    row && config.deadline && typeof row[config.deadline.field] === "string" && /* @__PURE__ */ jsx(
+      DeadlineCountdown,
+      {
+        deadline: row[config.deadline.field],
+        label: config.deadline.label,
+        expiredLabel: config.deadline.expiredLabel
+      }
+    ),
     row && /* @__PURE__ */ jsxs("div", { className: "px-chat-crud-item__actions", children: [
       config.detail && /* @__PURE__ */ jsx("button", { type: "button", className: "px-chat-crud-item__action", onClick: () => setDetailRow(row), children: "Ver" }),
       actions.map((a) => {

package/dist/index.js

@@ -15892,6 +15892,41 @@ function ReactiveCrudChat({ component, eventBus, assistantMessageId }) {
   ] });
 }
 
+function restante(hasta) {
+  return Math.max(0, hasta - Date.now());
+}
+function formatear(ms) {
+  const total = Math.floor(ms / 1e3);
+  const min = Math.floor(total / 60);
+  const seg = total % 60;
+  return `${String(min).padStart(2, "0")}:${String(seg).padStart(2, "0")}`;
+}
+function DeadlineCountdown({ deadline, label, expiredLabel }) {
+  const hasta = new Date(deadline).getTime();
+  const valida = !Number.isNaN(hasta);
+  const [ms, setMs] = React.useState(() => valida ? restante(hasta) : 0);
+  React.useEffect(() => {
+    if (!valida) return;
+    setMs(restante(hasta));
+    const id = setInterval(() => setMs(restante(hasta)), 1e3);
+    return () => clearInterval(id);
+  }, [hasta, valida]);
+  if (!valida) return null;
+  const vencido = ms <= 0;
+  const apurado = !vencido && ms <= 6e4;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `px-deadline${vencido ? " is-expired" : ""}${apurado ? " is-urgent" : ""}`,
+      role: "status",
+      children: vencido ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-deadline__expired", children: expiredLabel ?? "El plazo venci\xF3" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-deadline__label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-deadline__time", children: formatear(ms) })
+      ] })
+    }
+  );
+}
+
 function ReactiveCrudItemChat({ component, eventBus }) {
   const { resolveModuleConfig } = useChatConfig();
   const props = component.props ?? {};
@@ -15959,6 +15994,14 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     ] }),
     crud.loading && !row && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__hint", children: "Cargando\u2026" }),
     !crud.loading && !row && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__hint", children: "No se encontr\xF3 el servicio." }),
+    row && config.deadline && typeof row[config.deadline.field] === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+      DeadlineCountdown,
+      {
+        deadline: row[config.deadline.field],
+        label: config.deadline.label,
+        expiredLabel: config.deadline.expiredLabel
+      }
+    ),
     row && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-crud-item__actions", children: [
       config.detail && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-chat-crud-item__action", onClick: () => setDetailRow(row), children: "Ver" }),
       actions.map((a) => {