lkd-web-kit 0.9.2 → 0.10.1

package/codex/skills/create-modal-component/SKILL.md

@@ -0,0 +1,168 @@
+---
+name: create-modal-component
+description: Crear modales en proyectos internos con el modal manager global de lkd-web-kit. Usar cuando Codex deba agregar, modificar o registrar modales bajo src/components/modals, envolverlos con withModalManager, elegir entre un modal interno del proyecto o Modal de Mantine, organizar el modal en carpeta propia, tipar props para showModal, actualizar dynamicModals, MyModalManagerProvider, module augmentation o loadModals.
+---
+
+# Crear Modal Component
+
+Usar este flujo para modales abiertos con `useModalManager().showModal(...)`.
+
+## Lectura Obligatoria
+
+1. Leer `docs/lkd-web-kit.md` y `docs/local-components.md`.
+2. Leer `src/components/modals/index.ts`.
+3. Leer `src/contexts/MyModalManagerContext/index.tsx`.
+4. Leer `src/types/lkd-web-kit.d.ts`.
+5. Buscar si existe un modal interno en `src/components/ui` o componentes compartidos antes de importar `Modal` de Mantine.
+6. Leer un modal existente del mismo dominio en `src/components/modals/{dominio}`.
+7. Si se toca `next/dynamic` o lazy loading, leer `node_modules/next/dist/docs/01-app/02-guides/lazy-loading.md`.
+
+## Arquitectura Actual
+
+- `lkd-web-kit` exporta `ModalManagerProvider`, `useModalManager`, `withModalManager`, `ModalRegistryItem`, `ModalKey` y tipos relacionados.
+- El proyecto no usa `src/contexts/ModalManagerContext`; no recrearlo.
+- `src/contexts/MyModalManagerContext/index.tsx` adapta el provider del kit y le pasa `dynamicModals`.
+- `src/types/lkd-web-kit.d.ts` hace module augmentation para que `showModal` infiera keys y props desde `dynamicModals`.
+- `src/app/PageProviders.tsx` envuelve la app con `MyModalManagerProvider` y propaga `loadModals`.
+
+## Estructura
+
+- Crear modales en `src/components/modals/{dominio}/{NombreModal}/index.tsx` cuando tengan formulario, schema, hooks internos, assets o subcomponentes.
+- Usar archivo plano `src/components/modals/{dominio}/{NombreModal}.tsx` solo para modales triviales de una pieza, siguiendo el patron existente.
+- Colocar piezas privadas junto al modal: `schema.ts`, `helpers.ts`, subcomponentes o assets dentro de la misma carpeta.
+- No mover logica compartida a `src/components/ui` salvo que ya exista mas de un consumidor real.
+
+## Implementacion
+
+1. Definir props exportadas si el modal recibe datos desde `showModal`:
+
+```tsx
+export interface MyModalProps {
+  itemId: string;
+  onSuccess?: () => void;
+}
+```
+
+2. Envolver el componente con `withModalManager<Props>`.
+3. Recibir `modalProps` desde el wrapper y pasarlo al modal raiz.
+4. Antes de usar `Modal` de `@mantine/core`, corroborar si el proyecto tiene un modal interno que ya envuelve Mantine y usarlo si cubre el caso.
+5. Usar clases Tailwind para spacing, radius, shadow, margin y padding; evitar props Mantine equivalentes si `className` resuelve el caso.
+6. Usar wrappers locales del proyecto o `lkd-web-kit` antes que primitivas Mantine directas.
+7. No usar `any`.
+
+Modal base con modal interno:
+
+```tsx
+import { withModalManager } from "lkd-web-kit";
+import ButtonAE from "src/components/ui/ButtonAE";
+import InternalModal from "src/components/ui/InternalModal";
+
+export interface MyModalProps {
+  onConfirm?: () => void;
+}
+
+const MyModal = withModalManager<MyModalProps>(
+  ({ onConfirm, modalProps }) => {
+    return (
+      <InternalModal {...modalProps} size="lg">
+        <InternalModal.Header>Titulo</InternalModal.Header>
+        <InternalModal.Body className="grid gap-4">Contenido</InternalModal.Body>
+        <InternalModal.Footer>
+          <ButtonAE
+            onClick={() => {
+              onConfirm?.();
+              modalProps.onClose?.();
+            }}
+          >
+            Guardar
+          </ButtonAE>
+        </InternalModal.Footer>
+      </InternalModal>
+    );
+  },
+);
+
+export default MyModal;
+```
+
+Fallback con Mantine, solo si no hay modal interno aplicable:
+
+```tsx
+import { Modal } from "@mantine/core";
+import { withModalManager } from "lkd-web-kit";
+
+const MyModal = withModalManager(({ modalProps }) => (
+  <Modal {...modalProps} title="Titulo">
+    Contenido
+  </Modal>
+));
+
+export default MyModal;
+```
+
+## Registro
+
+1. Exportar las props publicas desde el modal.
+2. Importar el tipo de props en `src/components/modals/index.ts`:
+
+```ts
+import type { MyModalProps } from "./domain/MyModal";
+```
+
+3. Registrar con `dynamicModal<Props>("domain/MyModal")`:
+
+```ts
+"domain.myModal": dynamicModal<MyModalProps>("domain/MyModal"),
+```
+
+4. Usar una key estable con formato `{dominio}.{accion}`.
+5. No tocar `src/types/lkd-web-kit.d.ts` si `dynamicModals` sigue siendo la fuente unica. La augmentacion ya apunta a `typeof dynamicModals`.
+6. Si se cambia la forma del registro, mantener `ModalRegistryItem<T>` y que cada item tenga `component`, `load` y `path`.
+
+## Contexto y Precarga
+
+- Para rutas que ya usan `PageProviders`, pasar `loadModals` ahi:
+
+```tsx
+<PageProviders loadModals={["domain.myModal"]}>{children}</PageProviders>
+```
+
+- `loadModals` acepta una key exacta o un prefijo, por ejemplo `"development"` para precargar todos los modales cuyo key empieza con ese prefijo.
+- Para layouts que no usan `PageProviders`, envolver el arbol con `MyModalManagerProvider`:
+
+```tsx
+import { MyModalManagerProvider } from "src/contexts/MyModalManagerContext";
+
+<MyModalManagerProvider loadModals={["domain.myModal"]}>
+  {children}
+</MyModalManagerProvider>
+```
+
+- Evitar providers anidados salvo que haya una razon real: un provider interno aisla estado y puede cerrar o reemplazar modales inesperadamente.
+- Invocar siempre con `useModalManager` desde `lkd-web-kit`, nunca importando el modal directo desde una vista:
+
+```tsx
+import { useModalManager } from "lkd-web-kit";
+
+const { showModal, closeModal } = useModalManager();
+showModal("domain.myModal", { itemId: "123" });
+closeModal("domain.myModal");
+```
+
+## Formularios Dentro de Modales
+
+- Usar la skill `rhf-lkd-forms` si el modal contiene formulario.
+- Pasar `onSuccess={modalProps.onClose}` o cerrar en el submit exitoso.
+- En errores de API, mostrar la alerta esperada y luego hacer `throw error`.
+- No poner mensajes textuales en reglas base de Zod.
+
+## Checklist
+
+- El modal exporta default envuelto con `withModalManager`.
+- Las props publicas estan exportadas y registradas en `dynamicModals`.
+- `showModal("key", props)` queda tipado sin `any`.
+- `useModalManager` se importa desde `lkd-web-kit`.
+- La ruta esta bajo `PageProviders` o `MyModalManagerProvider`.
+- `loadModals` se agrega solo cuando conviene precargar.
+- Se reutiliza el modal interno del proyecto salvo necesidad concreta de Mantine directo.
+- Se ejecuta una verificacion focalizada si el cambio no es trivial.

package/codex/skills/create-modal-component/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Create Modal Component"
+  short_description: "Create project modals with manager registration."
+  default_prompt: "Use $create-modal-component to create a modal following this project's modal manager pattern."

package/codex/skills/create-svg-icon/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: create-svg-icon
+description: Create SVG icon files in projects that expose SVGs from src/icons. Use when Codex must add a new icon under src/icons from user-provided SVG markup, normalize SVG colors to currentColor for Tailwind text-* styling, and export the icon alias from src/icons/index.ts.
+---
+
+# Create SVG Icon
+
+Use this skill when the user provides SVG markup and the desired icon name, usually in the form `Icon{Name}`.
+
+## Required Workflow
+
+1. Read `src/icons/index.ts` before editing.
+2. Determine the component export name from the user input.
+   - Expected format: `Icon{Name}`.
+   - Keep the export alias with the `Icon` prefix.
+3. Verify the icon does not already exist.
+   - Check for the exact alias in `src/icons/index.ts`.
+   - Check for the target SVG filename in `src/icons/`.
+   - If either exists, cancel the operation and notify the user.
+4. Build the SVG filename.
+   - Remove the leading `Icon` prefix.
+   - Convert the remaining name to kebab-case.
+   - Save it as `src/icons/{name}.svg`.
+   - Example: `IconBuildingTower` -> `src/icons/building-tower.svg`.
+5. Normalize the provided SVG.
+   - Replace every explicit visual color value with `currentColor`.
+   - Include colors expressed as hex, rgb(), rgba(), hsl(), hsla(), named colors, or inline style values.
+   - Apply this to attributes such as `fill`, `stroke`, `color`, `stop-color`, and CSS declarations inside `style`.
+   - Preserve `fill="none"`, `stroke="none"`, `currentColor`, `transparent`, masks, clipping, sizing, viewBox, paths, and structural SVG attributes.
+   - Do not convert opacity values to `currentColor`.
+6. Create the SVG file in `src/icons/`.
+7. Add the alias in `src/icons/index.ts` following the existing export style in that file.
+8. Report the created SVG path and the added export alias.
+
+## Guardrails
+
+- Do not use `any`.
+- Do not create React wrapper components for the icon unless the existing icon system requires it.
+- Do not overwrite an existing icon file or alias.
+- Do not invent SVG path data; use the SVG supplied by the user.
+- Keep edits scoped to `src/icons/{name}.svg` and `src/icons/index.ts` unless the user asks for something else.

package/codex/skills/create-svg-icon/agents/openai.yaml

@@ -0,0 +1,3 @@
+display_name: Create SVG Icon
+short_description: Create project SVG icons with currentColor and index exports.
+default_prompt: Create an SVG icon for this project from the SVG markup and icon name I provide.

package/codex/skills/create-table-component/SKILL.md

@@ -0,0 +1,187 @@
+---
+name: create-table-component
+description: Crear, extraer o refactorizar tablas/listados tabulares en proyectos internos usando el patron estricto de componente encapsulado con MyTable, TableWrapper y createColumnHelper. Usar cuando Codex deba mostrar datos en tabla, mover columnas/hook de servicio a un componente de tabla, agregar paginacion, header/footer de tabla, acciones por fila, tablas verticales o adaptar una vista para no usar MyTablePagination.
+---
+
+# Create Table Component
+
+Usar este skill para crear o refactorizar tablas del proyecto.
+
+## Workflow obligatorio
+
+1. Leer primero `docs/local-components.md` y `docs/lkd-web-kit.md`.
+2. Si toca Next.js, leer la documentacion relevante en `node_modules/next/dist/docs/`.
+3. Revisar un ejemplo cercano antes de editar; preferir `Table{EntityPlural}.tsx`.
+4. Crear o mantener la tabla en un componente encapsulado junto a la vista/feature que la consume.
+5. Usar `createColumnHelper<RowData>()`; no declarar `any`.
+6. Usar `MyTable` para renderizar la tabla.
+7. Usar `TableWrapper` como raiz visual de la tabla.
+8. No usar `MyTablePagination` para nuevas tablas.
+
+## Checklist antes de escribir columnas
+
+- Definir si la tabla es horizontal o `variant="vertical"`.
+- Definir que representa cada header: solo deben ser columnas/campos reales de la tabla.
+- Distinguir contenido superior/inferior de estructura tabular: titulos, subtitulos, emails, filtros, secciones y acciones van en `TableWrapperHeader`/`TableWrapperFooter`, no en columnas falsas.
+- Definir si la data representa registros completos o pares label/value. Para `variant="vertical"`, preferir registros completos con campos reales.
+
+## Decisiones que hay que preguntar
+
+Si el usuario no lo especifica y no se puede inferir del codigo cercano, preguntar:
+
+- Si la tabla lleva contenido arriba de la tabla.
+- Si la tabla lleva contenido abajo de la tabla.
+- Si la tabla lleva paginacion.
+- Si la tabla debe ser horizontal o `variant="vertical"`.
+
+No asumir que `TableWrapperHeader` implica titulo. Usarlo para cualquier contenido superior: titulo, filtros, acciones, botones, tabs, resumen, subtitulo, email o encabezado de seccion.
+
+No asumir que `TableWrapperFooter` implica paginacion. Usarlo para cualquier contenido inferior: paginacion, totales, leyendas, acciones o resumen.
+
+Si hay titulo, usar `TableWrapperTitle` dentro de `TableWrapperHeader`.
+
+Si hay paginacion, usar `TableWrapperPagination` dentro de `TableWrapperFooter`.
+
+## Paginacion
+
+- Usar `TableWrapperPagination`, nunca `MyTablePagination` en tablas nuevas.
+- Usar `variant="short"` para paginacion compacta con texto tipo `1-10 de 15 filas`; queda alineada a la derecha por defecto.
+- Para `variant="short"`, pasar siempre `pageSize`. Si los datos vienen async, usar un fallback estable como `pageSize={currentPage?.pageSize ?? 10}`.
+- No armar el texto de rango en la vista si alcanza con metadata: pasar `totalRows`, `pageSize` y `currentRows`.
+- Usar `text` solo como override manual del texto calculado.
+- Mantener `variant="long"` o sin `variant` para la paginacion completa.
+
+## Tablas verticales
+
+Para `MyTable variant="vertical"`, modelar los campos como columnas reales y la data como una fila/registro completo. Los nombres de campos van en `column.header`; los valores van en `column.cell`.
+
+No simular una tabla vertical con una columna `entry`, `{ field, value }` o un `grid` dentro de una celda.
+
+Ejemplo:
+
+```tsx
+type UserInformationRow = {
+  name: string | undefined;
+  lastName: string | undefined;
+  email: string | undefined;
+};
+
+const columnHelper = createColumnHelper<UserInformationRow>();
+
+const columns = [
+  columnHelper.accessor("name", {
+    header: "Nombre",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+  columnHelper.accessor("lastName", {
+    header: "Apellido",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+  columnHelper.accessor("email", {
+    header: "Email",
+    cell: (cell) => cell.getValue() ?? "-",
+  }),
+];
+
+<TableWrapper>
+  <TableWrapperHeader>
+    <TableWrapperTitle>Informacion del usuario</TableWrapperTitle>
+    <span>{user.email}</span>
+    <div>Datos personales</div>
+  </TableWrapperHeader>
+  <MyTable columns={columns} data={[user]} variant="vertical" />
+</TableWrapper>;
+```
+
+## Encapsulacion
+
+- Mover `columns` al componente `Table{EntityPlural}`.
+- Si la tabla consulta datos, mover el hook/servicio al componente de tabla.
+- Si la tabla pagina, mover `pageIndex` y `setPageIndex` al componente de tabla.
+- El padre solo debe pasar entradas externas reales: filtros ya aplicados, ids, callbacks o flags.
+- Al cambiar filtros externos, resetear la pagina dentro del componente de tabla con `useEffect` si aplica.
+
+## Patron base
+
+```tsx
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import MyTable from "src/components/ui/MyTable";
+import TableWrapper, {
+  TableWrapperFooter,
+  TableWrapperHeader,
+  TableWrapperPagination,
+  TableWrapperTitle,
+} from "src/components/ui/TableWrapper";
+
+type ItemTableData = {
+  id: string;
+  name: string;
+};
+
+type TableItemsProps = {
+  selectedFilters: Record<string, unknown>;
+};
+
+const columnHelper = createColumnHelper<ItemTableData>();
+
+const TableItems = ({ selectedFilters }: TableItemsProps) => {
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: "Nombre",
+        cell: (cell) => cell.getValue(),
+      }),
+    ],
+    [],
+  );
+
+  return (
+    <TableWrapper>
+      <TableWrapperHeader>
+        <TableWrapperTitle>Items</TableWrapperTitle>
+      </TableWrapperHeader>
+      <MyTable columns={columns} data={[]} />
+      <TableWrapperFooter>
+        <TableWrapperPagination
+          total={1}
+          value={pageIndex + 1}
+          onChange={(page) => setPageIndex(page - 1)}
+        />
+      </TableWrapperFooter>
+    </TableWrapper>
+  );
+};
+
+export default TableItems;
+```
+
+Ejemplo short:
+
+```tsx
+<TableWrapperPagination
+  variant="short"
+  total={pageData?.total.pages ?? 1}
+  value={(pageData?.currentPage.pageIndex ?? 0) + 1}
+  totalRows={pageData?.total.elements}
+  pageSize={pageData?.currentPage.pageSize ?? 10}
+  currentRows={pageData?.currentPage.elements}
+  onChange={(page) => setPageIndex(page - 1)}
+/>;
+```
+
+## Antipatrones
+
+- No dejar columnas o hooks de servicio de la tabla en la vista padre.
+- No crear wrappers nuevos si `TableWrapper` y `MyTable` alcanzan.
+- No usar `Paper` directamente para la tabla cuando el patron pide `TableWrapper`.
+- No usar `MyTablePagination` en codigo nuevo.
+- No usar `paginationVariant` ni `paginationText` en `TableWrapperPagination`; usar `variant` y `text`.
+- No calcular `1-10 de 15 filas` en la vista si `TableWrapperPagination` puede calcularlo.
+- No agregar abstracciones compartidas antes de tener reutilizacion real.
+- No crear `MyTableVertical` si `MyTable variant="vertical"` resuelve el caso.
+- No poner titulos de seccion como "Datos personales" o "Informacion del usuario" como headers de columna.

package/codex/skills/create-table-component/agents/openai.yaml

@@ -0,0 +1,3 @@
+display_name: Create Table Component
+short_description: Create encapsulated project tables with MyTable and TableWrapper.
+default_prompt: Create or refactor a table component using this project's MyTable and TableWrapper pattern.

package/codex/skills/rhf-lkd-forms/SKILL.md

@@ -0,0 +1,186 @@
+---
+name: rhf-lkd-forms
+description: Crear y revisar formularios, filtros, campos controlados, integraciones con React Hook Form, validaciones Zod, reglas superRefine, botones de submit y patrones Form* de lkd-web-kit. Usar cuando Codex trabaje en interfaces de formularios, filtros, wrappers de campos, schemas, valores iniciales, mapeo de payloads, flujos de submit o comportamiento de validación en proyectos que usan React Hook Form, Zod y lkd-web-kit.
+---
+
+# Formularios RHF + lkd-web-kit
+
+Usar este skill para formularios, filtros y campos controlados construidos con React Hook Form, Zod y `lkd-web-kit`.
+
+## Workflow obligatorio
+
+1. Leer primero la documentación de formularios del proyecto: `docs/lkd-web-kit.md` o el equivalente local.
+2. Reutilizar la familia `Form*` existente antes de crear algo nuevo:
+   `Form`, `FormTextInput`, `FormSelect`, `FormMultiSelect`, `FormTextarea`,
+   `FormNumberInput`, `FormMonthPickerInput`, `FormCheckbox`,
+   `FormRadioGroup`, `FormSubmitButton` y wrappers cercanos del proyecto.
+3. Importar primero desde `lkd-web-kit`. Usar wrappers locales solo cuando el proyecto ya los tenga y agreguen estilos o comportamiento propio.
+4. No crear un wrapper nuevo si el kit o el proyecto ya tienen un campo equivalente.
+5. Para formularios con validación, usar `useForm` con `zodResolver(schema)`.
+6. Pasar `mode` solo cuando la API del componente lo soporte. No inventar props.
+
+## Estructura recomendada
+
+- Mantener formularios triviales inline.
+- Cuando un formulario mapea datos de API o construye un payload, separar lo repetitivo:
+  - `schema`: objeto Zod y tipo inferido.
+  - `createDefaultValues`: datos de API/dominio a valores del formulario.
+  - `createPayload`: valores del formulario a payload de API.
+- Usar `z.input<typeof schema>` para defaults cuando haya transforms o preprocess.
+- Usar `z.infer<typeof schema>` para datos ya validados en submit.
+- Colocar el código privado junto a la ruta o feature, salvo que sea realmente compartido.
+
+## Validaciones con Zod
+
+- Poner reglas de campo en el schema base.
+- No poner mensajes textuales en reglas base de Zod como `min(1, "Texto")`; usar la configuración global de errores o la capa de traducciones del proyecto.
+- Usar `superRefine` para reglas cruzadas entre campos y reglas de negocio.
+- En `superRefine`, asociar el issue al campo que el usuario puede corregir usando `path`.
+- Permitir mensajes custom en `superRefine` cuando el proyecto no tenga un mapeo de códigos para esa regla de negocio.
+- Preferir `ctx.addIssue(...)`; usar `ctx.issues.push(...)` solo si ya es el patrón local.
+
+## Campos y filtros
+
+- Todo input que modifique estado de React Hook Form debe ser un componente `Form*`.
+- Usar `My*` o inputs Mantine solo para UI standalone fuera de React Hook Form.
+- Preferir componentes de campo del proyecto, como `NameField` o `StatusField`, cuando ya provean `name`, labels, opciones traducidas o carga de datos.
+- Los filtros siguen el mismo patrón: `useForm` + `Form` + `Form*`.
+- El submit de filtros puede actualizar query params, estado local o estado del padre según el proyecto; no agregar una librería de estado solo por un filtro.
+- Si un campo client lee catálogos o datos cacheados, verificar que la página o el padre carguen esos datos según la convención del proyecto.
+
+## Submit y errores
+
+- Usar `FormSubmitButton` para acciones de submit. No usar aliases como `FormButtonSubmit` salvo que el proyecto realmente los exporte.
+- Dejar que `FormSubmitButton` maneje el loading de submit mediante React Hook Form.
+- En submits async, mostrar la notificación de éxito o error esperada por el proyecto.
+- En `catch`, mostrar la notificación de error y luego hacer `throw error` para que el wrapper del formulario pueda reaccionar visualmente.
+- Recortar o normalizar valores en el límite donde se arma el payload de API, no en handlers sueltos de campos.
+
+## Antipatrones
+
+- No usar `register` directamente para campos ya cubiertos por `Form*`.
+- No duplicar wrappers tipo `FormTextInput` o `FormSelect`.
+- No usar `any`; tipar valores del formulario desde el schema.
+- No agregar helpers custom de validación cuando Zod ya cubre la regla.
+- No mezclar campos Mantine no controlados dentro de un formulario de React Hook Form.
+- No agregar dependencias nuevas para estado de formulario, validación de campos o filtros comunes.
+
+## Ejemplos mínimos
+
+Formulario de edición:
+
+```tsx
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  FormSelect,
+  FormSubmitButton,
+  FormTextInput,
+} from "lkd-web-kit";
+import { useForm } from "react-hook-form";
+import z from "zod";
+import Form from "src/components/form/Form";
+
+const editSchema = z.object({
+  name: z.string().min(1),
+  status: z.string().nullable(),
+});
+
+type EditValues = z.infer<typeof editSchema>;
+
+const createDefaultValues = (item: { name: string; status: string | null }): EditValues => ({
+  name: item.name,
+  status: item.status,
+});
+
+const createPayload = (data: EditValues) => ({
+  name: data.name.trim(),
+  status: data.status || undefined,
+});
+
+export function EditItemForm({ item }: { item: { name: string; status: string | null } }) {
+  const methods = useForm<EditValues>({
+    defaultValues: createDefaultValues(item),
+    resolver: zodResolver(
+      editSchema.superRefine((data, ctx) => {
+        if (data.status === "published" && data.name.trim().length < 3) {
+          ctx.addIssue({
+            code: "custom",
+            message: "El nombre es demasiado corto para publicar",
+            path: ["name"],
+          });
+        }
+      }),
+    ),
+  });
+
+  return (
+    <Form
+      methods={methods}
+      onSubmit={async (data) => {
+        try {
+          await updateItem(createPayload(data));
+        } catch (error) {
+          showErrorNotification();
+          throw error;
+        }
+      }}
+    >
+      <FormTextInput name="name" label="Nombre" />
+      <FormSelect
+        name="status"
+        label="Estado"
+        data={[
+          { value: "draft", label: "Borrador" },
+          { value: "published", label: "Publicado" },
+        ]}
+      />
+      <FormSubmitButton>Guardar</FormSubmitButton>
+    </Form>
+  );
+}
+```
+
+Filtro:
+
+```tsx
+"use client";
+
+import { FormSelect, FormSubmitButton, FormTextInput } from "lkd-web-kit";
+import { useForm } from "react-hook-form";
+import Form from "src/components/form/Form";
+
+type FilterValues = {
+  search: string;
+  status: string | null;
+};
+
+export function ItemFilters({
+  onApply,
+}: {
+  onApply: (values: FilterValues) => void;
+}) {
+  const methods = useForm<FilterValues>({
+    defaultValues: {
+      search: "",
+      status: null,
+    },
+  });
+
+  return (
+    <Form methods={methods} onSubmit={onApply}>
+      <FormTextInput name="search" label="Buscar" />
+      <FormSelect
+        name="status"
+        label="Estado"
+        data={[
+          { value: "draft", label: "Borrador" },
+          { value: "published", label: "Publicado" },
+        ]}
+      />
+      <FormSubmitButton>Aplicar</FormSubmitButton>
+    </Form>
+  );
+}
+```

package/dist/contexts/ModalManagerContext/index.cjs

@@ -0,0 +1,73 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/contexts/ModalManagerContext/index.tsx
+var ModalManagerContext = (0, react.createContext)(void 0);
+var ModalManagerProvider = ({ children, modals, loadModals = [] }) => {
+	const [statusModal, setStatusModal] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		loadModals.forEach((modalKey) => {
+			Object.keys(modals).filter((key) => key.startsWith(modalKey)).forEach((key) => {
+				const item = modals[key];
+				item.load?.().then((modal) => {
+					item.component = modal.default;
+				});
+			});
+		});
+	}, [loadModals, modals]);
+	const showModal = (key, props, options) => {
+		const { multiple, ...modalProps } = options ?? {};
+		const modalState = {
+			modalKey: key,
+			props,
+			modalProps,
+			opened: true
+		};
+		setStatusModal((prev) => multiple ? [...prev, modalState] : [modalState]);
+	};
+	const closeModal = (key) => {
+		if (key === void 0) {
+			setStatusModal((prev) => prev.map((modal) => ({
+				...modal,
+				opened: false
+			})));
+			return;
+		}
+		setStatusModal((prev) => prev.map((modal) => modal.modalKey === key ? {
+			...modal,
+			opened: false
+		} : modal));
+	};
+	const renderModals = (0, react.useMemo)(() => statusModal.map(({ modalKey, props, opened, modalProps }, i) => {
+		const Component = modals[modalKey]?.component;
+		if (!Component) return null;
+		return /* @__PURE__ */ (0, react.createElement)(Component, {
+			...props,
+			key: `${modalKey}-${i}`,
+			modalProps: {
+				...modalProps,
+				opened,
+				zIndex: 200 + i
+			},
+			removeModal: () => {
+				setStatusModal((prev) => prev.filter((_, index) => index !== i));
+			}
+		});
+	}), [statusModal, modals]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalManagerContext.Provider, {
+		value: {
+			showModal,
+			closeModal
+		},
+		children: [renderModals, children]
+	});
+};
+var useModalManager = () => {
+	const context = (0, react.use)(ModalManagerContext);
+	if (context === void 0) throw Error("Out of context: useModalManager");
+	return context;
+};
+//#endregion
+exports.ModalManagerProvider = ModalManagerProvider;
+exports.useModalManager = useModalManager;

package/dist/contexts/ModalManagerContext/index.d.ts

@@ -0,0 +1,35 @@
+import { ModalProps } from '@mantine/core';
+import { ComponentType, ReactNode } from 'react';
+import { ModalManagerWrapperProps } from '../../hocs';
+export interface ModalRegistryItem<Props extends object = object> {
+    component?: ComponentType<ModalManagerWrapperProps<object>>;
+    load?: () => Promise<{
+        default: ComponentType<ModalManagerWrapperProps<object>>;
+    }>;
+    path?: string;
+    readonly __props?: Props;
+}
+export type ModalRegistryRecord = Record<string, ModalRegistryItem>;
+export interface ModalManagerRegistryOverride {
+}
+export type ModalRegistry = ModalManagerRegistryOverride extends {
+    modals: infer Registry extends ModalRegistryRecord;
+} ? Registry : ModalRegistryRecord;
+export type ModalKey = Extract<keyof ModalRegistry, string>;
+export type ShowModalOptions = {
+    multiple?: boolean;
+} & Partial<ModalProps>;
+export interface ModalManagerProviderProps {
+    children: ReactNode;
+    modals: ModalRegistry;
+    loadModals?: (ModalKey | (string & {}))[];
+}
+type PublicModalProps<Key extends ModalKey> = ModalRegistry[Key] extends ModalRegistryItem<infer Props> ? Props : never;
+type ModalManagerValues = {
+    showModal: <Key extends ModalKey>(key: Key, props?: PublicModalProps<Key>, options?: ShowModalOptions) => void;
+    closeModal: (key?: ModalKey) => void;
+};
+export declare const ModalManagerProvider: ({ children, modals, loadModals, }: ModalManagerProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useModalManager: () => ModalManagerValues;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/contexts/ModalManagerContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/ModalManagerContext/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAExD,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3D,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAA;KAAE,CAAC,CAAA;IAClF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CACzB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEnE,MAAM,WAAW,4BAA4B;CAAG;AAEhD,MAAM,MAAM,aAAa,GAAG,4BAA4B,SAAS;IAC/D,MAAM,EAAE,MAAM,QAAQ,SAAS,mBAAmB,CAAA;CACnD,GACG,QAAQ,GACR,mBAAmB,CAAA;AAEvB,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,aAAa,EAAE,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE3E,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,EAAE,aAAa,CAAA;IACrB,UAAU,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAA;CAC1C;AAED,KAAK,gBAAgB,CAAC,GAAG,SAAS,QAAQ,IACxC,aAAa,CAAC,GAAG,CAAC,SAAS,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAA;AAS3E,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,CAAC,GAAG,SAAS,QAAQ,EAC9B,GAAG,EAAE,GAAG,EACR,KAAK,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC7B,OAAO,CAAC,EAAE,gBAAgB,KACvB,IAAI,CAAA;IACT,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAmE3B,CAAA;AAED,eAAO,MAAM,eAAe,0BAM3B,CAAA"}

package/dist/contexts/ModalManagerContext/index.js

@@ -0,0 +1,71 @@
+"use client";
+import { createContext, createElement, use, useEffect, useMemo, useState } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/contexts/ModalManagerContext/index.tsx
+var ModalManagerContext = createContext(void 0);
+var ModalManagerProvider = ({ children, modals, loadModals = [] }) => {
+	const [statusModal, setStatusModal] = useState([]);
+	useEffect(() => {
+		loadModals.forEach((modalKey) => {
+			Object.keys(modals).filter((key) => key.startsWith(modalKey)).forEach((key) => {
+				const item = modals[key];
+				item.load?.().then((modal) => {
+					item.component = modal.default;
+				});
+			});
+		});
+	}, [loadModals, modals]);
+	const showModal = (key, props, options) => {
+		const { multiple, ...modalProps } = options ?? {};
+		const modalState = {
+			modalKey: key,
+			props,
+			modalProps,
+			opened: true
+		};
+		setStatusModal((prev) => multiple ? [...prev, modalState] : [modalState]);
+	};
+	const closeModal = (key) => {
+		if (key === void 0) {
+			setStatusModal((prev) => prev.map((modal) => ({
+				...modal,
+				opened: false
+			})));
+			return;
+		}
+		setStatusModal((prev) => prev.map((modal) => modal.modalKey === key ? {
+			...modal,
+			opened: false
+		} : modal));
+	};
+	const renderModals = useMemo(() => statusModal.map(({ modalKey, props, opened, modalProps }, i) => {
+		const Component = modals[modalKey]?.component;
+		if (!Component) return null;
+		return /* @__PURE__ */ createElement(Component, {
+			...props,
+			key: `${modalKey}-${i}`,
+			modalProps: {
+				...modalProps,
+				opened,
+				zIndex: 200 + i
+			},
+			removeModal: () => {
+				setStatusModal((prev) => prev.filter((_, index) => index !== i));
+			}
+		});
+	}), [statusModal, modals]);
+	return /* @__PURE__ */ jsxs(ModalManagerContext.Provider, {
+		value: {
+			showModal,
+			closeModal
+		},
+		children: [renderModals, children]
+	});
+};
+var useModalManager = () => {
+	const context = use(ModalManagerContext);
+	if (context === void 0) throw Error("Out of context: useModalManager");
+	return context;
+};
+//#endregion
+export { ModalManagerProvider, useModalManager };

package/dist/contexts/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ModalManagerContext';
 export { NavigationHistoryProvider } from './NavigationHistoryContext';
 export * from './NavigationHistoryContext/hook';
 export * from './PageDataContext';

package/dist/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AACtE,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AACtE,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA"}

package/dist/index.cjs

@@ -20,9 +20,10 @@ const require_index$15 = require("./components/MyTimeInput/index.cjs");
 const require_NavItems = require("./components/NavItems.cjs");
 const require_http_status = require("./consts/http-status.cjs");
 const require_revalidate = require("./consts/revalidate.cjs");
-const require_index$16 = require("./contexts/NavigationHistoryContext/index.cjs");
+const require_index$16 = require("./contexts/ModalManagerContext/index.cjs");
+const require_index$17 = require("./contexts/NavigationHistoryContext/index.cjs");
 const require_hook = require("./contexts/NavigationHistoryContext/hook.cjs");
-const require_index$17 = require("./contexts/PageDataContext/index.cjs");
+const require_index$18 = require("./contexts/PageDataContext/index.cjs");
 const require_withController = require("./hocs/withController.cjs");
 const require_withModalManager = require("./hocs/withModalManager.cjs");
 const require_FormCheckbox = require("./form/base/FormCheckbox.cjs");
@@ -81,6 +82,7 @@ exports.HttpStatus = require_http_status.HttpStatus;
 exports.Icon = require_Icon.Icon;
 exports.InfinityLoadMoreButton = require_index$1.InfinityLoadMoreButton;
 exports.InfinitySelect = require_index$2.InfinitySelect;
+exports.ModalManagerProvider = require_index$16.ModalManagerProvider;
 exports.MyCheckboxGroup = require_index$3.MyCheckboxGroup;
 exports.MyDateInput = require_index$4.MyDateInput;
 exports.MyDatePickerInput = require_index$5.MyDatePickerInput;
@@ -95,8 +97,8 @@ exports.MyTextInput = require_index$14.MyTextInput;
 exports.MyTextarea = require_index$13.MyTextarea;
 exports.MyTimeInput = require_index$15.MyTimeInput;
 exports.NavItems = require_NavItems.NavItems;
-exports.NavigationHistoryProvider = require_index$16.NavigationHistoryProvider;
-exports.PageDataProvider = require_index$17.PageDataProvider;
+exports.NavigationHistoryProvider = require_index$17.NavigationHistoryProvider;
+exports.PageDataProvider = require_index$18.PageDataProvider;
 exports.QP_BACK_URL_NAME = require_hook.QP_BACK_URL_NAME;
 exports.Revalidate = require_revalidate.Revalidate;
 exports.addBodyJsonHook = require_addBodyJsonHook.addBodyJsonHook;
@@ -120,9 +122,10 @@ exports.timeInputToNumber = require_FormTimeInput.timeInputToNumber;
 exports.toTailwindColors = require_to_tailwind_colors.toTailwindColors;
 exports.useBreakpoint = require_useBreakpoint.useBreakpoint;
 exports.useFetchNextPageOnScroll = require_useFetchNextPageOnScroll.useFetchNextPageOnScroll;
+exports.useModalManager = require_index$16.useModalManager;
 exports.useNavigationHistory = require_hook.useNavigationHistory;
 exports.useOnScrollProgress = require_useOnScrollProgress.useOnScrollProgress;
-exports.usePageData = require_index$17.usePageData;
+exports.usePageData = require_index$18.usePageData;
 exports.useUpdateSearchParams = require_useUpdateSearchParams.useUpdateSearchParams;
 exports.useZodConfig = require_useZodConfig.useZodConfig;
 exports.withController = require_withController.withController;

package/dist/index.js

@@ -19,6 +19,7 @@ import { MyTimeInput } from "./components/MyTimeInput/index.js";
 import { NavItems } from "./components/NavItems.js";
 import { HttpStatus } from "./consts/http-status.js";
 import { Revalidate } from "./consts/revalidate.js";
+import { ModalManagerProvider, useModalManager } from "./contexts/ModalManagerContext/index.js";
 import { NavigationHistoryProvider } from "./contexts/NavigationHistoryContext/index.js";
 import { QP_BACK_URL_NAME, useNavigationHistory } from "./contexts/NavigationHistoryContext/hook.js";
 import { PageDataProvider, usePageData } from "./contexts/PageDataContext/index.js";
@@ -59,4 +60,4 @@ import { addBodyJsonHook } from "./utils/ky/addBodyJsonHook.js";
 import { parseJSON } from "./utils/ky/parseJson.js";
 import { queryStringify } from "./utils/query-stringify.js";
 import { createNewRoute, newRoute } from "./utils/new-route.js";
-export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };
+export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, ModalManagerProvider, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useModalManager, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -19,11 +19,14 @@
       "import": "./dist/index.js"
     }
   },
+  "bin": {
+    "lkd-install-codex-skills": "./scripts/install-codex-skills.mjs"
+  },
   "sideEffects": false,
   "engines": {
     "node": ">=22.12.0"
   },
-  "files": ["dist"],
+  "files": ["dist", "codex/skills", "scripts/install-codex-skills.mjs"],
   "scripts": {
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",

package/scripts/install-codex-skills.mjs

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, mkdirSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const scriptDir = dirname(fileURLToPath(import.meta.url))
+const source = join(scriptDir, '..', 'codex', 'skills')
+const target = join(process.cwd(), '.agents', 'skills')
+
+if (!existsSync(source)) {
+  throw new Error(`No se encontraron skills en ${source}`)
+}
+
+mkdirSync(target, { recursive: true })
+cpSync(source, target, { recursive: true, force: true })
+
+console.log(`Skills instaladas en ${target}`)