Guiadalajara POS — Directorio de componentes

Razonamiento

Capa compartida ds.css — codifica las reglas de marca una vez (línea de acento recta, amarillo solo relleno, DM Mono para datos, radios, modo oscuro). Da la unidad.
7 archetipos responsive — cada vista se clasificó en uno (lista, maestro-detalle, form, dashboard, board, focus, hub) y eso dictó el layout y el uso del espacio por tamaño.
Shell por app — Caja: Hub + pestañas · Cocina: kiosco · Gestión: riel ↔ cajón. Invariantes: recibo siempre claro, displays LAN siempre oscuros.

Sistema de nombrado

Todo componente cae en una capa y lleva un prefijo por paquete. Así sabes dónde nace cada pieza nueva y no se duplica.

Capa	Qué es	Dónde vive	Prefijo
0 · Tokens	color, tipografía, radio, espacio, motion, sombra	`gdl_theme/src/scmdg/`	`Ds*`
1 · Primitivas	botón, campo, badge, card, tabla… (marca genérica)	`gdl_ui/lib/src/ds/`	`Ds*`
2 · Dominio POS	mesa, ticket KDS, recibo, display LAN, teclado	`pos_ui/` (paquete nuevo)	`Pos*`
3 · Shells	andamiaje de navegación (riel↔cajón↔tabbar, maestro-detalle)	`gdl_ui` / `pos_ui`	`Ds` / `Pos`
4 · Pantallas	una vista concreta de una app	`apps/<app>/lib/features/<f>/screens/`	`NameScreen`

Prefijos: Ds* (gdl_ui) = marca reusable por TODAS las apps · Gdl* = legacy "Mexican Brutalism", aún en uso, se migra a Ds* al tocarlo (no crear nuevos) · Pos* (pos_ui) = dominio POS compartido por las 3 apps + displays. Regla de promoción: si un widget aparece en ≥2 apps o ≥2 features, deja de ser clase privada y sube a paquete.

Idioma

Código en inglés — clases, archivos, carpetas, parámetros: OrderCard, order_queue_screen.dart, features/orders/.
UI visible en español (es-MX, tono tú) — todo string que ve el usuario.
Deuda a normalizar (medida): la app soporte y varias features (cupones/, resenas/) están en español en el código; params lista/detalle/haySeleccion en MasterDetailScaffold. Se ingesan al tocarlos.

Sufijos de archivo (formalizar)

Hoy existen como clases privadas, casi no como archivos. Al extraer a paquete: un componente = un archivo con sufijo.

Sufijo	Para	Ejemplo → clase
`_screen.dart`	pantalla (capa 4)	order_queue_screen.dart → OrderQueueScreen
`_card.dart`	tarjeta	order_card.dart → PosOrderCard
`_tile.dart`	azulejo (grid/hub/piso)	table_tile.dart → PosTableTile
`_row.dart`	fila de lista/datos	key_value_row.dart → DsKeyValueRow
`_sheet.dart`	bottom sheet / panel	address_form_sheet.dart
`_section.dart`	bloque compuesto	totals_section.dart
`_scaffold.dart`	shell (capa 3)	pos_scaffold.dart → PosScaffold

Tokens (capa 0)

Fuente vigente = SCMDG Soft. Se leen con context.dsTokens (ThemeExtension DsTokens, valores distintos claro/oscuro). Tema: buildScmdgSoftTheme(brightness:).

Marca & superficies

DsColors / DsTokens

Amarillo #FFE60A = brand400 = rol accent. Regla AA: siempre relleno tras texto oscuro (accentFg), nunca texto suelto. primary = bloque inverso que se voltea a amarillo en oscuro.

accent #FFE60A

primary

success

danger

warning

info

surface

Tipografía

DsTypography

Space Grotesk = UI/display · DM Mono tabular = datos, labels, IDs. Sin color propio (lo pone el token).

Space Grotesk h1 / 32

body / 15 — cuerpo de la interfaz en Space Grotesk regular.

label · 11 · dm mono · tracking .08

$1,240.00 · POS-4821 · 14:38 DM Mono tabular

Radio · espacio · motion

DsRadius / DsSpacing / DsMotion

Radio base 6 (sm 4 · lg 8 · xl 12). Espacio base 4px (space1..24). control 40 / touch 44. Motion 120/180/260ms, curvas calmas. Sombra de foco = anillo amarillo.

4 · sm

6 · base

8 · lg

12 · xl

🔴 No existe token de "línea de acento". La línea recta inferior de la marca se compone: accent + DsBorder.width en la base cuadrada del contenedor. Al portar a Flutter conviene un helper DsAccentLine para no re-derivarla por pantalla.

Layout & shell

Barra superior

PosScaffold 🔨 pos_ui

25 + 35 vistas · parte del shell PosScaffold (capa 3) · gtop = modo Gestión

Shell de Gestión (riel ↔ cajón)

PosScaffold 🔨 pos_ui

21 vistas · riel en ≥768px, cajón (hamburguesa) en teléfono · base = main_scaffold.dart ×4 + admin_shell.dart a consolidar

Pestañas inferiores

NavigationBar ✅ tema SCMDG

10 vistas · solo teléfono (se ocultan ≥768px) · Material NavigationBar ya tematizado (indicador = accent)

Navegación

Segmented control

DsSegmentedControl<T> ✅ gdl_ui

10 vistas · enum DsSegmentedControlSize{sm,md} · full

Chips de filtro

DsTag ✅ gdl_ui

9 vistas · selected / onRemove · también DsTabs (subrayado) y DsBreadcrumbs

TodosTacosBebidasPostres

Botones

Botón

DsButton ✅ gdl_ui

52 vistas · enum DsButtonVariant{primary,accent,secondary,ghost,danger} · DsButtonSize{sm,md,lg} · full, iconLeft/Right. Ícono solo = DsIconButton.

Badges & chips

Badge

DsBadge ✅ gdl_ui

41 vistas · enum DsBadgeTone{neutral,brand,success,danger,warning,info,role} · dot

successwarningdangerinfoneutral

Tag / chip

DsTag ✅ gdl_ui

15 vistas · selected, onRemove (más suave y redondo que DsBadge)

Folio POS-48212 por aceptarDestacado

Tarjetas

Tarjeta

DsCard + DsAccentLine ✅ card 🔨 accent-line

22 vistas · DsCardElevation{none,sm,md,lg}, DsCardHeader · accentline (21) = línea RECTA compuesta con accent+borde (no hay token)

Tarjeta base

Contenido

Destacada

Línea recta al borde

Stat (KPI)

DsStat ✅ gdl_ui

9 vistas · label, value, delta, up, icon, accent (línea inferior)

Ventas hoy

$18,240

+12% vs ayer

Bajo mínimo

17

requieren compra

Datos

Fila de datos

DsListRow / DsTable 🔨 DsListRow ✅ DsTable

23 vistas · lista densa = DsTable<RowT> (ya existe) · fila con slots izq/centro/der = DsListRow (crear en gdl_ui)

INS-0311

Aguacate Hass

Cocina fría · mín 25 kg

6 kgCrítico

Voz de datos

DsTypography.mono ✅ token

30 vistas · DM Mono tabular: montos, IDs, tiempos · mono 13 / monoLabel 11

$979.00POS-482114:38

Formularios

Campo

DsInput ✅ gdl_ui

cj-23, ge-36/37, kd-04 · enum DsInputSize{sm,md,lg} · label/hint/error/mono son params. También DsTextarea, DsSelect<T>, DsCheckbox, DsRadio<T>, DsSlider.

Correo

tu@negocio.com

Switch

DsSwitch ✅ gdl_ui

kd-04, cj-20 · value, onChanged, label, disabled

Pasos (wizard)

DsSteps 🔨 gdl_ui

ge-37 · genérico, sube a gdl_ui

Teclado numérico

PosKeypad 🔨 pos_ui

cj-22 (PIN) / cj-10 (monto) · dominio POS

1

2

3

4

5

6

Inventario 100% — gdl_ui

Todo lo que ya vive en packages/gdl_ui (medido). Los demos de arriba muestran una parte; esta es la lista completa para que no falte ninguno. Variantes = parámetro enum, no constructores nombrados.

Design system SCMDG Soft — `src/ds/` (31)

Componente	Variantes (enum)	Rol
`DsButton`	Variant{primary,accent,secondary,ghost,danger} · Size{sm,md,lg}	acción principal
`DsIconButton`	Variant{ghost,secondary,primary,accent} · Size{sm,md,lg}	botón de un glifo
`DsInput`	Size{sm,md,lg}	campo de texto
`DsTextarea`	—	multilínea
`DsSelect<T>`	Size{sm,md,lg}	dropdown (overlay propio)
`DsCheckbox`	—	booleano
`DsRadio<T>`	—	opción única
`DsSwitch`	—	toggle
`DsSlider`	—	numérico continuo
`DsSegmentedControl<T>`	Size{sm,md}	2-4 opciones exclusivas
`DsBadge`	Tone{neutral,brand,success,danger,warning,info,role}	pastilla de estado
`DsTag`	—	chip removible/seleccionable
`DsCard` + `DsCardHeader`	Elevation{none,sm,md,lg}	superficie base
`DsStat`	—	tarjeta KPI
`DsTable<RowT>`	Align{left,right,center} · factory .text	tabla estilo consola
`DsTabs<T>`	—	tabs subrayado
`DsBreadcrumbs`	—	rastro de ruta
`DsPagination`	—	paginación
`DsMenu`	Align{left,right}	menú de acciones
`DsAccordion`	—	divulgación apilada
`DsAlert`	Tone{neutral,success,danger,warning,info}	banner inline
`DsToast`	Tone{neutral,success,danger,warning,info}	transitorio
`DsDialogContent`	—	modal
`DsTooltip`	Side{top,bottom,left,right}	tooltip local
`DsProgress`	—	barra determinada
`DsSpinner`	—	carga indeterminada
`DsSkeleton`	—	placeholder shimmer
`DsAvatar` + `DsAvatarGroup`	—	avatar / grupo apilado
`DsQrCode`	—	QR escaneable
`DsAuthBrandHeader`	—	cabecera marca (auth)
`DsGeoPatternBackground`	—	fondo geométrico (auth)

Legacy / dominio `Gdl*` — `src/` (7, en migración)

Componente	Nota de migración
`GdlAvatar`	→ usar `DsAvatar`
`BusinessCard`	consolidar 4 variantes → `DsBusinessCard`
`GdlCachedImage`	mantener (utilidad de red)
`GdlEmptyState`	→ candidato `DsEmptyState`
`GdlErrorView`	→ candidato `DsErrorView`
`GdlSkeleton` / `GdlLoadingView`	→ usar `DsSkeleton`
`GdlRatingStars`	display de calificación
`MasterDetailScaffold`	shell capa 3 ya vivo (params a inglesar); reusar para maestro-detalle

Helpers (funciones, no widgets)

showDsDialog<T>(...) — presenta un DsDialogContent.
mostrarPanelDs<T>(...) — reconstruye por frame (diálogos con estado).
preguntar(...) — sí/no; destructivo en rojo.
showDsToast(...) — overlay apilado abajo-derecha.

Galería visual de primitivas

Ejemplo en vivo de las primitivas que en el inventario solo salían como fila de texto — dibujadas con la piel de la marca (réplica CSS de ds.css; la versión fiel definitiva vive en el storybook Flutter de gdl_ui). Alterna claro/oscuro para verlas en ambos temas.

DsSelectdropdown

Sucursal Centro

DsTextareamultilínea

Notas del pedido…

DsCheckboxbooleano

DsRadio<T>opción única

DsSlidernumérico

DsTabs<T>subrayado

ActivosPausadosTodos

DsBreadcrumbsrastro

Inventario/Existencias/Aguacate

DsPaginationpáginas

1234

DsMenuacciones

DsAccordiondivulgación

Ingredientes+Alérgenos+

DsAlertbanner

Guardado

Los cambios se aplicaron.

DsToasttransitorio

Ticket enviado

A la impresora de barra.

DsTooltiplocal

Reimprimir

DsProgressdeterminada

DsSpinnerindeterminada

DsSkeletoncarga

DsAvatarGroupapilado

LMSGJR+3

DsQrCodeescaneable

DsAuthBrandHeaderauth

ġ

Consola de gestión

DsGeoPatternBackgroundfondo auth

Dominio POS (pos_ui · Pos*)

Piezas de dominio POS por crear en el paquete nuevo pos_ui, compartidas por Caja + Cocina + Gestión y los displays LAN. Las genéricas (Hub, roster) suben a gdl_ui como Ds*.

Azulejo del Hub

DsLiveTile 🔨 gdl_ui

cj-01 · genérico (transversal) · variantes: normal · feat · danger

9

Piso

mesas ocupadas

2

Por aceptar

órdenes

Mesa del piso

PosTableTile 🔨 pos_ui

cj-02 · estado por línea inferior: free/busy/pay/clean

02

00:24 · $340

03

$612

04

Limpiar

06

Libre

Ticket de KDS

PosKdsTicket 🔨 pos_ui

kd-01, cj-16 · variantes: normal · soon · urgent

#4815 · Mesa 0206:12

1 Volcán
2 Quesataco

#4808 · Mesa 0911:40

3 Campechano

Bandeja de orden

PosOrderCard 🔨 pos_ui

cj-05/06 · variante aceptar/rechazar (línea roja)

ORD-4830 · UberPro

2× pastor · 1× consomé

Roster de staff

DsStaffCard 🔨 gdl_ui

cj-17 (turno) · genérico (transversal) · variante seleccionado

LM

Luis M.

Cajero

SG

Sofía G.

Mesera

Recibo (papel claro invariante)

PosReceipt 🔨 pos_ui

cj-14 · light-invariante (se mantiene claro aun en modo oscuro)

Tacos El Güero

2 Tacos al pastor$130

1 Costilla BBQ$245

TOTAL$979

EFECTIVO$1,020

Display LAN (oscuro invariante)

PosDisplaySurface 🔨 pos_ui

dp-01/02 · dark-invariante; variantes account / ready-board; números grandes

Listos · pasa a recoger

412415421

Comprobantes impresos

Ya diseñados y cerrados en papel con Gustavo (24-jul-2026). 5 formatos térmicos (ESC/POS 80 mm) generados por gdl_tickets.py, más comprobantes en color tamaño carta (Factura CFDI 4.0 y Corte de caja Z). Viven en apps/marketplace/pos/docs/ticket-design/.

Factura CFDI 4.0 (carta, color)

letter/comprobantes-color.html

Receptor · claves SAT · IVA · QR SAT · sello digital · cadena original. Se imprime en HP Smart Tank via CUPS.

Descargar PDF (carta · márgenes reales de impresión)

Corte de caja Z (carta, color)

letter/comprobantes-color.html

Ventas por método · movimientos · esperado vs contado · diferencia · denominaciones contadas · firma.

Tickets térmicos — 80 mm (ESC/POS) · los 5 formatos

thermal/gdl_tickets.py

venta · precuenta · comanda · corte · factura · generados como ESC/POS · preview B/N.

Parámetros (spec firme)

Parámetro	Valor / decisión
Ancho	48 columnas font A (576 dots, 80 mm @ 203 dpi) — NO los 42 del default del Bridge
Estética	CERO rellenos negros: banners tipográficos con línea inferior (rasters pre-render, receta 6× + umbral 160)
Momento-dinero	TOTAL / DIFERENCIA como raster con UNA línea debajo
Sello de plataforma	wordmark `guiadalajara.com POS` (sin ġ, sin chip)
Códigos QR	raster `GS v 0` (python3-qrcode) · QR de ticket + QR SAT
Voz de datos	fuente del printer (kv, items con wrap, sub-líneas) · horas 24h
Impresión	térmica de red 80 mm · CFDI + corte también en HP Smart Tank (cola CUPS `HP-SmartTank`, 192.168.0.99)
Contrato de datos	dicts `DEMO_*` en el generador = las llaves a llenar con datos reales

Dónde vive (control)

thermal/gdl_tickets.py — generador ESC/POS de los 5 formatos (CLI: --formatos, --tira, --lista).
thermal/render_assets.mjs + thermal/assets/*.png — banners raster (b_venta, b_cfdi, b_corte, b_comanda, b_precuenta, bizname, plataforma, totalbar, totalbar_corte).
letter/comprobantes-color.html — CFDI 4.0 + Corte Z en color (carta) · letter/tickets-letter.html — preview B/N · letter/qr_sat.png, qr_ticket.png.
Copia local para esta galería: gdl-pos-allmocks/ticket-design/.

Reconciliación mock → código

Para que el storyboard y Flutter hablen el mismo idioma: cada clase CSS de los mocks, su clase real, su paquete y su estado. De ~28 patrones: 11 ya existen · 3 se reusan de shells vivos · 14 son nuevos (10 → gdl_ui genéricos, 4 → pos_ui de dominio).

Mock (CSS)	Clase Flutter	Paquete	Estado
`btn`	DsButton	gdl_ui	✅ existe
`icobtn`	DsIconButton	gdl_ui	✅ existe
`badge`	DsBadge	gdl_ui	✅ existe
`chip / cat`	DsTag	gdl_ui	✅ existe
`seg`	DsSegmentedControl	gdl_ui	✅ existe
`card / accentline`	DsCard + DsAccentLine	gdl_ui	✅ card 🔨 line
`stat`	DsStat	gdl_ui	✅ existe
`tbl`	DsTable	gdl_ui	✅ existe
`fld / inp`	DsInput	gdl_ui	✅ existe
`sw`	DsSwitch	gdl_ui	✅ existe
`topbar/rail/gshell`	PosScaffold	pos_ui	🔨 crear
`tabbar`	NavigationBar (tema)	gdl_ui	✅ tema
`kv / kk`	DsKeyValueRow	gdl_ui	🔨 crear
`dd` (2 paneles)	MasterDetailScaffold	gdl_ui	✅ reusar
`rrow/qrow/tk`	DsListRow	gdl_ui	🔨 crear
`htile`	DsLiveTile	gdl_ui	🔨 crear
`rp / bar`	DsDashboardGrid + DsBarChart	gdl_ui	🔨 crear
`staff`	DsStaffCard	gdl_ui	🔨 crear
`st-card/whc`	DsStatusCard	gdl_ui	🔨 crear
`pcard`	DsProductCard	gdl_ui	🔨 crear
`steps`	DsSteps	gdl_ui	🔨 crear
`ttile`	PosTableTile	pos_ui	🔨 crear
`kticket`	PosKdsTicket	pos_ui	🔨 crear
`ocard / acard`	PosOrderCard	pos_ui	🔨 crear
`receipt`	PosReceipt	pos_ui	🔨 crear
`disp / num`	PosDisplaySurface	pos_ui	🔨 crear
`keys / key`	PosKeypad	pos_ui	🔨 crear

Deuda de duplicación (medida)

Duplicados reales encontrados en el repo. Regla: si aparece en ≥2 apps o ≥2 features, deja de ser clase privada y sube a paquete (Ds transversal / Pos dominio).

Hoy	Duplicación medida	Consolidar en
`ds_states.dart`	copia literal en consumer + repartidor	gdl_ui (loading/empty/error)
`main_scaffold.dart`	4 copias + admin_shell.dart	`PosScaffold` / DsAppScaffold parametrizable
tarjeta de negocio	4 nombres: AppBusinessCard, MapBusinessCard, GdlBusinessCard, business_card	`DsBusinessCard`
stat cards / detail rows	_StatCard, _MiniStatCard, _DetailRow, _InfoRow, _SummaryRow, SettingsRow (privadas por feature)	`DsStat` (existe) + `DsKeyValueRow`
splash / login / push	5 copias c/u	plantillas + `DsAuthBrandHeader` + `DsGeoPatternBackground` (existen)

Por qué "faltaban" componentes

No había storybook — _showcase/ solo enlaza a las apps corriendo; este catálogo es el primero.
Los componentes de bajo nivel no son archivos, son clases privadas _XxxCard/_DetailRow dentro de cada *_screen.dart; por eso se reinventan por pantalla.
Nombrado es/en mezclado — el mayor obstáculo; resuelto con la política inglés-código / español-UI de arriba.

Directorio de componentes

Razonamiento

Sistema de nombrado

Idioma

Sufijos de archivo (formalizar)

Tokens (capa 0)

Marca & superficies

Tipografía

Radio · espacio · motion

Layout & shell

Barra superior

Título del módulo

Shell de Gestión (riel ↔ cajón)

Pestañas inferiores

Navegación

Segmented control

Chips de filtro

Botones

Botón

Badges & chips

Badge

Tag / chip

Tarjetas

Tarjeta

Stat (KPI)

Datos

Fila de datos

Voz de datos

Formularios

Campo

Switch

Pasos (wizard)

Teclado numérico

Inventario 100% — gdl_ui

Design system SCMDG Soft — src/ds/ (31)

Legacy / dominio Gdl* — src/ (7, en migración)

Helpers (funciones, no widgets)

Galería visual de primitivas

Dominio POS (pos_ui · Pos*)

Azulejo del Hub

Mesa del piso

Ticket de KDS

Bandeja de orden

Roster de staff

Recibo (papel claro invariante)

Display LAN (oscuro invariante)

Comprobantes impresos

Factura CFDI 4.0 (carta, color)

Corte de caja Z (carta, color)

Tickets térmicos — 80 mm (ESC/POS) · los 5 formatos

Parámetros (spec firme)

Dónde vive (control)

Reconciliación mock → código

Deuda de duplicación (medida)

Por qué "faltaban" componentes

Design system SCMDG Soft — `src/ds/` (31)

Legacy / dominio `Gdl*` — `src/` (7, en migración)