Guiadalajara POS — Matriz de paridad de componentes Web ↔ Flutter

14 de septiembre de 2026 · matriz viva (control anti-deriva, §8 del plan de paridad)

Cruce medido de los componentes de design system: Web (@dockethub/ui + @dockethub/ui-restaurant) contra Flutter (gdl_ui Ds*). Fuente de verdad de "qué existe en ambos, qué falta, y qué diverge". Doble storybook vivo: Web · Flutter.

Leyenda: ✅ en ambos · 🟡 en ambos con divergencia (nombre/variantes) · 🔵 solo Flutter (falta en Web) · 🟣 solo Web (falta en Flutter) · 🔨 por crear.

1. Qué revela la matriz (medido)

Flutter va adelante en primitivas atómicas. gdl_ui expone como componente propio muchas piezas que @dockethub/ui no tiene sueltas (usa HTML nativo o wrappers de app): switch, checkbox, radio, slider, segmented, tag, accordion, pagination, tooltip, progress, spinner, skeleton, avatar, qr, breadcrumbs.
Web va adelante en dominio POS. @dockethub/ui-restaurant ya tiene ~21 componentes de dominio (NumPad, InteractiveFloor, KdsColumn…) que en Flutter no existen (pos_ui por crear).
Los enums de variante/tono divergen entre lados — hay que reconciliarlos (§4). Es la deriva concreta a cerrar.

2. Primitivas — `@dockethub/ui` ↔ `gdl_ui/src/ds`

Web (`@dockethub/ui`)	Flutter (`Ds*`)	Estado	Nota
`Button`	`DsButton`	✅	variantes reconciliadas (accent agregado a Web, 14-sep)
—	`DsIconButton`	🔵	Web usa `Button` con ícono
`Input`	`DsInput`	✅
`Input`/`Textarea`	`DsTextarea`	✅
`Select`	`DsSelect`	✅
—	`DsCheckbox`	🔵	Web usa `<input type=checkbox>`
—	`DsRadio`	🔵	Web usa `<input type=radio>`
—	`DsSwitch`	🔵	falta en Web
—	`DsSlider`	🔵	falta en Web
—	`DsSegmentedControl`	🔵	falta en Web
`Badge`	`DsBadge`	✅	tonos reconciliados (info/role/neutral/brand en Web, 14-sep)
—	`DsTag`	🔵	chip removible; falta en Web
`Card`	`DsCard`	✅	elevación reconciliada (Web ganó prop `elevation` none/sm/md/lg, 14-sep)
`Stat`	`DsStat`	✅
`Table` (+ subcomp.)	`DsTable`	✅	Web componible; Flutter data-driven
`Tabs`	`DsTabs`	✅
`PageHeader` (breadcrumb)	`DsBreadcrumbs`	🟡	Web lo integra en PageHeader; Flutter suelto
—	`DsPagination`	🔵	falta en Web
`ActionMenu`	`DsMenu`	✅
—	`DsAccordion`	🔵	falta en Web
`ErrorBanner`	`DsAlert`	🟡	Web solo danger; Flutter tonos
`Toast`	`DsToast`	✅	tonos reconciliados (warning/info/danger en Web, 14-sep)
`Dialog` / `ConfirmDialog`	`DsDialog` (+`preguntar`)	✅
—	`DsTooltip`	🔵	falta en Web
—	`DsProgress`	🔵	falta en Web
—	`DsSpinner`	🔵	falta en Web
—	`DsSkeleton`	🔵	Web lo tiene local en admin, no en `ui`
—	`DsAvatar` / `DsAvatarGroup`	🔵	Web tiene `AvatarMenu` local, no primitiva
—	`DsQrCode`	🔵	falta en Web
`EmptyState`	`GdlEmptyState`	✅	(Flutter legacy → `DsEmptyState`)
`ErrorBanner`	`GdlErrorView`	✅
`Field`	(param de `DsInput`)	🟡	Web componente; Flutter es prop
`Header`	(parte del shell)	🟣	Web componente; Flutter en scaffold
`Section`	—	🟣	layout Web
`BarcodeInput`	—	🟣	falta en Flutter
`charts/*` (recharts)	`DsBarChart`/`DsDashboardGrid`	🔨	Web tiene; Flutter por crear
`TenantBranding`	(gdl_theme/brand)	🟣	provider Web
—	`DsAuthBrandHeader`	🔵	falta en Web
—	`DsGeoPatternBackground`	🔵	falta en Web

Conteo: ✅ 14 · 🟡 2 (divergencia) · 🔵 15 (solo Flutter) · 🟣 4 (solo Web) · 🔨 1.

3. Dominio POS — `@dockethub/ui-restaurant` ↔ `pos_ui` (Flutter por crear)

Web ya lo tiene; en Flutter se creó el paquete pos_ui y se portó 13/13 ✅. Mapeo:

Web (`@dockethub/ui-restaurant`)	Flutter `pos_ui` (🔨)
`NumPad`	`PosKeypad` ✅ (14-sep)
`InteractiveFloor` / `FloorEditor` / `FloorMapPage`	`PosTableTile` ✅ átomo (editor pend.)
`KdsColumn` / `TicketCard`	`PosKdsTicket` ✅ (14-sep)
`OrderPanel`	`PosOrderCard` ✅ (14-sep)
`ModifierDialog`	`PosModifierSheet` ✅ (14-sep)
`TemplatePreview`	`PosReceipt` ✅ (14-sep)
`CashDenominationsForm`	`PosCashCount` ✅ (14-sep)
`SplitDialog`	`PosSplit` ✅ (14-sep)
`ChangeDueDisplay`	`PosChangeDue` ✅ (14-sep)
`TipSelector`	`PosTipSelector` ✅ (14-sep)
`CoversStepper`	`PosCoversStepper` ✅ (14-sep)
`PrinterStatusBadge`	`PosPrinterStatusBadge` ✅ (14-sep)
`LockScreen`	`PosLockScreen` ✅ (reusa PosKeypad, 14-sep)

4. Divergencias de enum a reconciliar (la deriva concreta)

Componente	Web	Flutter	Acción
Button variant	`secondary, primary, accent, ghost, danger`	`primary, accent, secondary, ghost, danger`	✅ RECONCILIADO — `accent` amarillo agregado a `@dockethub/ui` Button (14-sep).
Badge tone	`neutral, brand, success, warning, danger, info, role` (+alias default/primary)	`neutral, brand, success, danger, warning, info, role`	✅ RECONCILIADO — Web ganó neutral/brand/info/role (14-sep).
Toast tone	`default, success, error`	`neutral, success, danger, warning, info`	✅ RECONCILIADO — Web ganó warning/info/danger (14-sep).
Card elevación	`elevation: none/sm/md/lg` (+alias `elevated`)	`DsCardElevation{none,sm,md,lg}`	✅ RECONCILIADO — Web ganó prop `elevation` (14-sep).

Regla: la fuente de nombres de variante debería salir del mismo lugar que los tokens (o de un contrato compartido), para que Button/Badge/Toast tengan el mismo set en ambos lados. Candidato a @dockethub/contracts o al paquete design-tokens.

5. Acciones priorizadas

Reconciliar los 4 enums (§4) — es la deriva medible; barato y de alto impacto. Empezar por Button.accent (marca) y tonos de Badge/Toast.
Crear pos_ui en Flutter (§3) portando @dockethub/ui-restaurant — cierra el dominio POS del lado móvil.
Decidir política de primitivas 🔵 (15 solo-Flutter): ¿se promueven a @dockethub/ui en Web (para paridad real) o se acepta que Web use HTML nativo? Recomendado: promover las que aparecen en vistas (switch, checkbox, radio, tooltip, progress) para que el storybook Web las muestre.
Cerrar 🟣 solo-Web (BarcodeInput, charts, Header) del lado Flutter cuando las vistas lo pidan.

Servicios Creativos — SCMDG Soft · matriz viva, se actualiza al tocar componentes.

guiadalajara.comServicios Creativos — Guadalajara, MX