@fayz-ai/pos 0.20.0 → 0.20.2

package/dist/styles.css

@@ -46,15 +46,22 @@
   --pos-info: #5B8DEF;
   --pos-danger: #DC5C55;
 
-  /* --- category identity: assigned per category by data, never a status -- */
-  --pos-tone-mint: #BDE3CD;
-  --pos-tone-lilac: #D9CDED;
-  --pos-tone-sky: #C2DDF1;
-  --pos-tone-periwinkle: #CDD3F3;
-  --pos-tone-blush: #F1C2D5;
-  --pos-tone-sand: #E3D9CF;
-  --pos-tone-teal: #B6E4D6;
-  --pos-tone-rose: #EFC4C4;
+  /* --- category identity: assigned per category by data, never a status --
+     Saturados, na mesma força do mapa de mesas. Os pastéis vinham de quando o
+     salão também era discreto; com as mesas pintadas em cheio, uma grade de
+     cartões leitosos ao lado lia como outra tela, de outro produto.
+     Continuam LONGE dos quatro tons de status em matiz — nenhum verde-livre,
+     nenhum vermelho-atenção — porque cor aqui é identidade de categoria e lá é
+     estado; iguais, a mesma mancha significaria duas coisas na mesma sessão.
+     Todos escuros o bastante para texto `--pos-on-light` por cima passar AA. */
+  --pos-tone-mint: #59C08A;
+  --pos-tone-lilac: #A98BE0;
+  --pos-tone-sky: #4FA3DE;
+  --pos-tone-periwinkle: #7B86E4;
+  --pos-tone-blush: #E0719E;
+  --pos-tone-sand: #C9A268;
+  --pos-tone-teal: #3FB8A0;
+  --pos-tone-rose: #E07A6B;
 
   /* --- shape: softer than an instrument panel, tighter than a phone app -- */
   --pos-r: 10px;
@@ -74,6 +81,8 @@
      their hairlines and baselines missed each other by a few pixels — enough
      to read as a seam. */
   --pos-header-h: 72px;
+  /* Altura da barra de navegação do celular. Ver a casca de celular abaixo. */
+  --pos-navbar-h: 58px;
 
   --pos-t: 140ms;
   --pos-e: cubic-bezier(0.2, 0, 0, 1);
@@ -239,6 +248,11 @@
    Retaguarda de quem abre o PDV de dentro de um back office). */
 .pos-rail__top { padding: var(--pos-2x) var(--pos-1x) 0; }
 
+/* A busca, logo abaixo daquela chave. Só existe com a trilha por extenso: numa
+   trilha de 68px de ícones o campo não cabe, e ali ele volta para a faixa da
+   view (ver `useWideRail` na tela). */
+.pos-rail__search { padding: var(--pos-2x) var(--pos-1x) var(--pos-1x); }
+
 /* O disco com a inicial de quem atende. Sobrou da lista de turno que saiu do
    rail — a escolha do atendente ao abrir a mesa ainda o usa. */
 .pos-person__av {
@@ -302,16 +316,54 @@
 /* No page title here. The rail's highlighted entry already says which screen
    this is, and repeating it across the top is a breadcrumb for a product with
    nothing to breadcrumb — one level, no hierarchy, no way to get lost. */
+/* Três colunas, laterais com a MESMA medida (1fr): é isso que põe a busca no
+   meio da faixa, e não no meio do que sobra depois do título. Com flex +
+   `margin: auto` o campo andaria para os lados conforme o título ficasse mais
+   curto ou as abas de área aparecessem — e elas são condicionais. */
 .pos-head {
-  display: flex; align-items: center; gap: var(--pos-3x);
-  height: var(--pos-header-h); padding: 0 var(--pos-4x);
+  display: grid;
+  /* `auto | 1fr | auto`, e não três colunas simétricas: com os dois
+     segmentados à direita, a coluna de 420px do meio ficava espremida entre
+     eles e o título, e a busca — que é a casa do cursor — encolhia para ~200px
+     enquanto sobrava vão à esquerda. Aqui os lados pedem o que precisam e o
+     campo fica com o resto. */
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center; gap: var(--pos-3x);
+  height: var(--pos-header-h);
+  /* A direita cede o canto que o hospedeiro ocupa. Aberto dentro de um
+     Takeover, o ✕ dele flutua sobre esta faixa — e a busca, que vai de ponta a
+     ponta, ficava por baixo do botão. Fora de um takeover a variável não
+     existe e o valor cai em 0. */
+  padding: 0 calc(var(--pos-4x) + var(--fz-takeover-inset-right, 0px)) 0 var(--pos-4x);
   border-bottom: 1px solid var(--pos-line);
 }
-.pos-head__title { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; }
+/* Coluna 1: a view e a unidade, lado a lado. `min-width: 0` para que seja o
+   TÍTULO a encurtar com reticências, e não a unidade — o nome da unidade é o
+   dado que não se adivinha, e numa rede ler o caixa errado é o erro mais caro
+   que esta tela oferece. */
+.pos-head__where {
+  grid-column: 1;
+  display: flex; align-items: center; gap: var(--pos-2x); min-width: 0;
+}
+.pos-head__title {
+  min-width: 0; flex: 0 1 auto;
+  font-size: 17px; font-weight: 650; letter-spacing: -0.015em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
 
 .pos-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--pos-2); border-radius: 999px; }
-/* As áreas encostam na direita; o título fica na esquerda. */
-.pos-head > .pos-seg { margin-left: auto; }
+/* Título à esquerda, busca no meio, e à direita TODOS os segmentados — os de
+   forma (Grade|Planta) e os de área (Salão|Balcão|…) numa fila só, e não um
+   empurrando o outro para uma segunda linha. */
+.pos-head__views {
+  grid-column: 3; justify-self: end;
+  display: flex; align-items: center; gap: var(--pos-2x); min-width: 0;
+}
+.pos-head__views:empty { display: none; }
+/* A busca só cai na faixa quando a trilha colapsa (<=1180px). Acima disso a
+   coluna do meio fica vazia e o `1fr` dela é justamente o ar entre o título e
+   os segmentados. */
+.pos-head > .pos-field { grid-column: 2; }
 .pos-seg__btn {
   min-height: 36px; padding: 0 var(--pos-4x);
   border: none; border-radius: 999px; background: transparent;
@@ -327,9 +379,9 @@
      and cost a tap plus the sight of the control that answers "where is this
      item" — code+Enter is the fastest path in the product, so the field it
      types into must never be something to go find. */
-  /* Largura da trilha, não da barra: o campo virou linha do rail (a mesma
-     posição que a busca ocupa no back office), então ele preenche a coluna. */
-  width: 100%; min-width: 0; margin: var(--pos-2x) var(--pos-1x);
+  /* Preenche a coluna do meio da faixa, que já é quem define a largura (e o
+     centro). Sem margem própria: a `gap` do grid é que separa. */
+  width: 100%; min-width: 0; margin: 0;
   height: 36px; padding: 0 var(--pos-2x);
   /* Superfície tonal, sem contorno — a mesma leitura da busca do back office.
      Numa trilha escura um 1px é uma aresta dura brigando com todas as outras;
@@ -398,10 +450,62 @@
 /* No edge here. The status pill on the row already says it, and a coloured
    bar plus a coloured pill is the same fact charged twice. */
 .pos-dchip::before { display: none; }
-.pos-tbl[data-status='free']           { --pos-edge: var(--pos-ok); }
-.pos-tbl[data-status='occupied']       { --pos-edge: var(--pos-warn); }
-.pos-tbl[data-status='bill_requested'] { --pos-edge: var(--pos-info); }
-.pos-tbl[data-status='attention']      { --pos-edge: var(--pos-danger); }
+/* O cartão INTEIRO na cor do estado, não uma listra de 4px.
+ *
+ * É a convenção do setor (SaiPOS, TakeAt, Colibri): o mapa de mesas é lido de
+ * pé, a três metros, de relance e no meio do salão — e a essa distância o que
+ * chega é a mancha de cor, não uma faixa fina na borda nem uma pastilha de
+ * 12px. Com a listra, "ocupada" e "conta pedida" eram dois cartões cinzas com
+ * detalhes diferentes; pintados, são dois blocos que a periferia da visão já
+ * separa antes de o garçom focar em qualquer um.
+ *
+ * LIVRE fica sem pintura de propósito: se toda mesa tem cor, nenhuma cor chama.
+ * O que precisa saltar é o que pede AÇÃO — ocupada, conta pedida, atenção —, e
+ * a mesa livre é o fundo contra o qual as outras se destacam.
+ *
+ * Texto escuro sobre âmbar e branco sobre azul/vermelho: são os mesmos pares
+ * que a planta já usa, e os que passam contraste. A pastilha continua escrita,
+ * porque cor sozinha nunca carrega o estado — 8% dos homens não separa
+ * vermelho de verde, e um deles está no salão. */
+.pos-tbl[data-status='free'] {
+  --pos-edge: var(--pos-ok);
+}
+.pos-tbl[data-status='occupied'] {
+  --pos-edge: var(--pos-warn);
+  background: var(--pos-warn); border-color: var(--pos-warn); color: var(--pos-on-light);
+}
+.pos-tbl[data-status='bill_requested'] {
+  --pos-edge: var(--pos-info);
+  background: var(--pos-info); border-color: var(--pos-info); color: #fff;
+}
+.pos-tbl[data-status='attention'] {
+  --pos-edge: var(--pos-danger);
+  background: var(--pos-danger); border-color: var(--pos-danger); color: #fff;
+}
+
+/* Dentro de um cartão pintado, todo texto herda a cor da frente: os cinzas
+   (`--pos-fg-2/3`) foram calculados contra o fundo escuro e somem no âmbar. */
+.pos-tbl[data-status='occupied'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total),
+.pos-tbl[data-status='bill_requested'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total),
+.pos-tbl[data-status='attention'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total) {
+  color: inherit; opacity: 0.85;
+}
+.pos-tbl[data-status='occupied'] .pos-tbl__total,
+.pos-tbl[data-status='bill_requested'] .pos-tbl__total,
+.pos-tbl[data-status='attention'] .pos-tbl__total { opacity: 1; }
+
+/* A pastilha, sobre o cartão pintado, vira um vidro do próprio tom em vez de
+   um segundo bloco de cor brigando com o primeiro. */
+.pos-tbl[data-status='occupied'] .pos-badge,
+.pos-tbl[data-status='bill_requested'] .pos-badge,
+.pos-tbl[data-status='attention'] .pos-badge {
+  background: rgba(0, 0, 0, 0.18); color: inherit;
+}
+
+/* O hover não pode clarear um cartão já pintado — ele apagaria o estado. */
+.pos-tbl[data-status='occupied']:hover,
+.pos-tbl[data-status='bill_requested']:hover,
+.pos-tbl[data-status='attention']:hover { filter: brightness(1.06); }
 
 .pos-badge {
   display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
@@ -498,6 +602,24 @@
 .pos-item[data-filled='true']::before { width: 100%; }
 /* Content rides above the growing edge. */
 .pos-item > * { position: relative; z-index: 1; }
+
+/* A foto sangra até as bordas do cartão: margens negativas para cancelar o
+   padding, inclusive os 5px extras que a faixa lateral reserva. Um retângulo
+   flutuando com respiro em volta leria como um anexo, não como o cartão.
+   `aspect-ratio` fixo para que fotos de proporções diferentes não façam a
+   grade serrilhar, e `object-fit: cover` para cortar em vez de distorcer —
+   um prato achatado é pior que um prato aparado.
+   Ela some quando o item entra na comanda: com a faixa tonal preenchendo o
+   cartão inteiro, a foto por cima brigaria com o estado que ela anuncia. */
+/* Miniatura + identidade lado a lado; o passo-a-passo segue embaixo, inteiro. */
+.pos-item__top { display: flex; align-items: flex-start; gap: var(--pos-2x); min-width: 0; }
+.pos-item__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.pos-item__img {
+  flex: none; display: block; overflow: hidden;
+  width: 52px; height: 52px; border-radius: var(--pos-r-sm, 8px);
+  background: var(--pos-3);
+}
+.pos-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .pos-item { cursor: pointer; }
 .pos-item:hover { background: var(--pos-3); }
 .pos-item:active { transform: scale(0.99); }
@@ -571,6 +693,16 @@
 
 /* --- right rail: order + table detail (permanent) ----------------------- */
 
+.pos-aside__grab { display: none; }
+.pos-sheet-scrim { display: none; }
+
+.pos-tkt__collapse {
+  display: none; margin-left: auto; place-items: center;
+  height: 34px; width: 34px; border: none; border-radius: 999px;
+  background: none; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-tkt__collapse:hover { background: var(--pos-2); color: var(--pos-fg); }
+
 .pos-aside {
   display: flex; flex-direction: column; min-height: 0; min-width: 0;
   background: var(--pos-1); border-left: 1px solid var(--pos-line);
@@ -627,11 +759,13 @@
 
 
 .pos-ln {
-  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto;
+  /* A coluna do marcador encolheu de 22px para 14px: com o ponto no lugar da
+     bolha, o resto era recuo pago pelo NOME do prato, que é o que se lê. */
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto;
   align-items: center; gap: var(--pos-2x);
-  min-height: 56px; margin: 0 var(--pos-3x) var(--pos-2x);
-  padding: var(--pos-2x) var(--pos-3x);
-  border: 1px solid transparent; border-radius: var(--pos-r);
+  min-height: 58px; margin: 0 var(--pos-3x) var(--pos-2x);
+  padding: var(--pos-2x) var(--pos-3x) var(--pos-2x) var(--pos-2x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
   background: var(--pos-2); text-align: left; cursor: pointer;
   transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e);
 }
@@ -639,7 +773,7 @@
 .pos-ln:hover { background: var(--pos-3); }
 .pos-ln[aria-current='true'] { background: var(--pos-3); border-color: var(--pos-line-strong); }
 .pos-ln__i { font-size: 12px; font-weight: 650; color: var(--pos-fg-3); }
-.pos-ln__n { display: block; font-size: 14px; font-weight: 550; line-height: 1.3; }
+.pos-ln__n { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
 .pos-ln__note { display: block; font-size: 12px; color: var(--pos-fg-2); }
 .pos-ln__p { font-size: 14px; font-weight: 600; min-width: 78px; text-align: right; }
 .pos-ln .pos-step__b { border-color: var(--pos-line-strong); opacity: 1; color: var(--pos-fg); width: 32px; height: 32px; }
@@ -782,8 +916,6 @@
   .pos-rail { padding: var(--pos-3x) var(--pos-2x); }
   .pos-rail__label { display: none; }
   .pos-rail__top { display: none; }
-  .pos-field { justify-content: center; padding: 0; margin: var(--pos-2x) 0; }
-  .pos-field input, .pos-field__hint, .pos-field__clear { display: none; }
   .pos-nav__item { justify-content: center; padding: 0; }
   .pos-nav__text { display: none; }
   .pos-nav__count { position: absolute; top: 4px; right: 6px; margin: 0; }
@@ -803,8 +935,319 @@
 @media (max-width: 640px) {
   .pos-floor { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: var(--pos-3x); }
   .pos-items { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: var(--pos-3x); }
-  .pos-head { flex-wrap: wrap; }
-  .pos-field { max-width: none; margin-left: 0; width: 100%; }
+  /* No telefone a faixa vira duas linhas: título (com as áreas ao lado) em
+     cima, busca inteira embaixo. Centralizar num espaço que não sobra só
+     espremeria o campo. */
+  .pos-head {
+    grid-template-columns: 1fr auto;
+    height: auto; padding-top: var(--pos-2x); padding-bottom: var(--pos-2x);
+  }
+  .pos-head__where { grid-column: 1; }
+  .pos-head > .pos-field { grid-column: 1 / -1; }
+}
+
+
+/* --- casca de celular: abas no rodapé + gaveta "Mais" ---------------------
+   Portado do PDV do V1 (docs/v1-guide/restaurante/pdv-balcao no beautyplace).
+   Acima de 640px nada disto existe: a trilha da esquerda volta a ser a
+   navegação, que é o desenho certo para um terminal de balcão de 15".
+   -------------------------------------------------------------------------- */
+.pos-navbar { display: none; }
+.pos-more { display: none; }
+
+@media (max-width: 640px) {
+  /* A trilha SAI. Colapsada em 60px de ícones sem rótulo ela ocupava a coluna
+     mais difícil de alcançar com o polegar para dizer menos do que a barra de
+     baixo diz com a mesma área. */
+  .pos-rail { display: none; }
+  .pos-body { grid-template-columns: minmax(0, 1fr); }
+
+  /* A tira de mesas abertas também SAI. Na tela larga ela é o atalho para o
+     que está em andamento enquanto se olha outra coisa; no celular a Grade já
+     é essa lista — número, quem atende, há quanto tempo e quanto consumiu, nos
+     mesmos cartões — e a tira repetia tudo numa faixa que rola de lado, logo
+     acima das abas, que é justamente onde a barra da comanda precisa morar. */
+  .pos-dock { display: none; }
+
+  /* O título da view SAI da faixa: a aba acesa no rodapé já diz "Salão", e
+     repetir o nome gastava a primeira linha da tela mais estreita que o
+     produto tem. É o que o V1 faz — lá a faixa é só a busca. */
+  .pos-head__where { display: none; }
+  /* Busca em cima ocupando a largura inteira, áreas na linha de baixo — a
+     forma do V1. Dividindo a linha com o segmentado, "Buscar" cabia em 100px
+     e virava "Bu…": o campo que é a casa do cursor não pode ser o que encolhe. */
+  .pos-head {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto; padding-top: var(--pos-2x); padding-bottom: var(--pos-2x);
+  }
+  .pos-head > .pos-field { grid-column: 1; }
+  /* Os dois segmentados dividem UMA linha: empilhados, busca + forma + área
+     gastavam três faixas antes do primeiro cartão de mesa. */
+  /* --- categorias no celular: FILA, não grade ----------------------------
+     Uma casa com 18 categorias (e há: "Bebidas", "Couvert", "Almoço
+     Executivo", "Categoria iFood"…) enchia a tela inteira de filtro, e o
+     primeiro item do cardápio começava abaixo da dobra — a tela do cardápio
+     sem nenhum prato à vista.
+     Em fila, as categorias ocupam uma faixa de 44px e os itens começam logo
+     abaixo; escolher uma é rolar de lado, que é o gesto que a faixa anuncia.
+     É o desenho do V1, e ele existe por este motivo. */
+  .pos-cats {
+    /* TRÊS LINHAS, colunas correndo para o lado: nove categorias à vista e o
+       resto a um deslize. A fila de uma linha só resolvia a altura e cobrava
+       caro em rolagem — com 19 categorias, achar "Sobremesas" era passar por
+       quinze. Em 3×3 o mesmo espaço mostra três vezes mais, e o que sobra
+       continua na direção que a faixa anuncia. */
+    /* `flex: none` ANTES de tudo: a faixa é item de um flex em coluna (o
+       contêiner do CatalogView), e item de flex ENCOLHE por padrão. Com 19
+       categorias e a grade de itens disputando o mesmo eixo, ela era
+       espremida até virar a tira de cor de 8px — as três linhas de 42px
+       estavam lá; o contêiner é que as achatava. */
+    flex: none;
+    display: grid; grid-auto-flow: column;
+    /* `none` obrigatório: a regra base declara `grid-template-columns`, e
+       coluna EXPLÍCITA vence a automática — sem zerar, as primeiras colunas
+       continuavam com a medida da grade antiga e a paginação de três não
+       acontecia. */
+    grid-template-columns: none;
+    /* Altura de linha DEFINIDA, não `1fr`: a faixa vive dentro de um
+       contêiner de rolagem sem altura própria, e `1fr` ali resolve contra
+       espaço indefinido — as três linhas colapsavam para alguns pixels e
+       sobrava uma tira de cor no topo do cardápio. */
+    grid-template-rows: repeat(3, 42px);
+    align-content: start;
+    grid-auto-columns: calc((100% - var(--pos-2x) * 2) / 3);
+    overflow-x: auto;
+    gap: var(--pos-2x); padding: var(--pos-2x) var(--pos-3x);
+    /* `mandatory` e não `proximity`: a grade tem páginas de três colunas, e
+       parar no meio de uma corta a terceira ao meio em toda parada. */
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+  .pos-cats::-webkit-scrollbar { display: none; }
+  .pos-cat {
+    min-height: 0; height: 100%; min-width: 0;
+    padding: 0 var(--pos-2x); border-width: 1px;
+    scroll-snap-align: start;
+  }
+  /* Nome em duas linhas no máximo: "Guarnição s-acompanhamentos" existe, e numa
+     coluna de um terço da tela ele precisa quebrar em vez de estourar. */
+  .pos-cat__name {
+    white-space: normal; display: -webkit-box;
+    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    line-height: 1.15;
+  }
+  /* O ícone sai: numa pílula de 40px ele é o que sobra depois do nome, e o
+     nome é o que se procura. */
+  .pos-cat__icon { display: none; }
+  .pos-cat__name { font-size: 12.5px; }
+  .pos-cat__n { font-size: 10.5px; }
+  /* Sem régua: a faixa já se separa do que vem abaixo pela própria cor. */
+  .pos-cats-rule { display: none; }
+
+  .pos-head__views { grid-column: 1; justify-self: stretch; }
+  .pos-head__views .pos-seg { flex: 1; min-width: 0; }
+  .pos-head__views .pos-seg__btn { flex: 1; min-width: 0; padding: 0 var(--pos-2x); }
+  /* Um segmentado só no celular (as áreas): o de Grade|Planta não é montado
+     aqui — ver `usePhone` em PosScreen. */
+
+  /* O rodapé é fixo, então o conteúdo precisa terminar acima dele — inclusive
+     do indicador de home do iPhone. */
+  .pos-main { padding-bottom: calc(var(--pos-navbar-h) + env(safe-area-inset-bottom)); }
+
+  .pos-navbar {
+    position: fixed; inset: auto 0 0 0; z-index: 40;
+    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+    height: var(--pos-navbar-h); padding-bottom: env(safe-area-inset-bottom);
+    background: var(--pos-1); border-top: 1px solid var(--pos-line);
+  }
+  .pos-navbar__item {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 3px; border: none; background: none; cursor: pointer;
+    color: var(--pos-fg-3); font: inherit;
+    transition: color var(--pos-t) var(--pos-e);
+  }
+  .pos-navbar__item[aria-current='page'] { color: var(--pos-accent); }
+  .pos-navbar__icon { position: relative; display: grid; place-items: center; }
+  .pos-navbar__text { font-size: 11px; font-weight: 550; letter-spacing: 0.01em; }
+  .pos-navbar__count {
+    position: absolute; top: -4px; right: -10px;
+    min-width: 16px; padding: 0 4px; border-radius: 999px;
+    background: var(--pos-accent); color: var(--pos-accent-fg);
+    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
+  }
+
+  .pos-more { display: block; position: fixed; inset: 0; z-index: 50; }
+  .pos-more__scrim {
+    position: absolute; inset: 0; border: none; padding: 0;
+    background: rgba(0, 0, 0, 0.55); cursor: pointer;
+  }
+  /* Entra pela ESQUERDA, de onde a trilha saiu: é a mesma navegação, guardada
+     no mesmo lado em que ela morava na tela larga. */
+  .pos-more__panel {
+    position: absolute; inset: 0 auto 0 0; width: min(19rem, 86vw);
+    display: flex; flex-direction: column; gap: var(--pos-3x);
+    padding: var(--pos-4x) var(--pos-3x);
+    padding-bottom: calc(var(--pos-4x) + env(safe-area-inset-bottom));
+    background: var(--pos-1); border-right: 1px solid var(--pos-line);
+    animation: pos-more-in 220ms var(--pos-e);
+  }
+  @keyframes pos-more-in { from { transform: translateX(-100%) } to { transform: none } }
+  @media (prefers-reduced-motion: reduce) {
+    .pos-more__panel { animation: none; }
+  }
+  .pos-more__head { display: flex; align-items: center; gap: var(--pos-2x); }
+  .pos-more__close {
+    margin-left: auto; display: grid; place-items: center;
+    height: 36px; width: 36px; border: none; border-radius: 999px;
+    background: none; color: var(--pos-fg-2); cursor: pointer;
+  }
+  .pos-more__close:hover { background: var(--pos-2); color: var(--pos-fg); }
+  .pos-more__nav { display: flex; flex-direction: column; gap: 2px; }
+
+  /* A regra de trilha COLAPSADA (@1180px) esconde rótulo, centraliza o ícone e
+     joga o badge no canto — desenho certo para uma coluna de 68px, e errado
+     aqui dentro, onde há 19rem e o item é uma linha de menu. Ela alcança o
+     celular por largura, então é desfeita explicitamente na gaveta. */
+  .pos-more .pos-nav__text,
+  .pos-more .pos-brand__name,
+  .pos-more .pos-user__txt { display: inline; }
+  .pos-more .pos-nav__item {
+    justify-content: flex-start;
+    gap: var(--pos-2x);
+    padding: var(--pos-2x) var(--pos-2x);
+  }
+  .pos-more .pos-nav__count {
+    position: static; margin-left: auto;
+  }
+  .pos-more .pos-brand__name { font-size: 15px; font-weight: 650; }
+  .pos-more .pos-user__txt { font-size: 13px; color: var(--pos-fg-2); }
+  .pos-more__foot {
+    margin-top: auto; display: flex; align-items: center; gap: var(--pos-2x);
+    padding-top: var(--pos-3x); border-top: 1px solid var(--pos-line);
+  }
+
+  /* --- a comanda no celular ---------------------------------------------
+     Fechada, é uma barra acima das abas. Aberta, é a TELA INTEIRA — e não o
+     painel de 88vw do tablet: lançar item e conferir a conta são dois momentos
+     diferentes, e o segundo não divide atenção com o catálogo atrás. */
+  .pos-cartbar {
+    position: fixed; z-index: 41;
+    inset: auto 0 calc(var(--pos-navbar-h) + env(safe-area-inset-bottom)) 0;
+    display: flex; align-items: center; gap: var(--pos-3x);
+    padding: var(--pos-3x) var(--pos-4x);
+    border: none; border-top: 1px solid color-mix(in srgb, var(--pos-accent) 40%, transparent);
+    background: var(--pos-accent); color: var(--pos-accent-fg);
+    font: inherit; text-align: left; cursor: pointer;
+  }
+  .pos-cartbar__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
+  .pos-cartbar__where { font-size: 14px; font-weight: 650; }
+  .pos-cartbar__meta { font-size: 12px; opacity: 0.75; }
+  .pos-cartbar__total { font-size: 17px; font-weight: 700; }
+
+  .pos-aside {
+    position: fixed; inset: 0; width: 100%; z-index: 60;
+    transform: translateY(100%); box-shadow: none;
+    transition: transform 240ms var(--pos-e);
+  }
+  .pos-aside[data-open='true'] { transform: none; }
+  /* A alça É o controle de minimizar; a seta ao lado seria o mesmo verbo
+     duas vezes, e no canto onde o hospedeiro põe o ✕ de sair do PDV. */
+  .pos-tkt__collapse { display: none; }
+
+  /* Pedido | Atividade some no celular. Em tela cheia a comanda JÁ é a tela —
+     não há um segundo painel disputando com ela, e duas abas logo acima do
+     "Fechar conta" competem com o único botão que importa ali. O histórico
+     continua na coluna larga, onde há espaço para os dois. */
+  .pos-aside .pos-tabs { display: none; }
+
+  /* A comanda é uma FOLHA que sobe, com alça para arrastar de volta — o gesto
+     padrão de celular. Assim ela não encosta no topo, o ✕ do hospedeiro segue
+     visível e alcançável, e o caminho de volta deixa de ser um botão disputando
+     canto com ele: é puxar para baixo, que é o que a mão já sabe fazer. */
+  /* Vidro: o fundo é translúcido e o que passa por baixo é DESFOCADO, não
+     apagado — a folha fica por cima do catálogo sem fingir que ele sumiu, e o
+     contexto de onde o item veio continua legível na borda. O raio é grande
+     (22px) porque num canto de 16px sobre conteúdo o arredondamento some. */
+  /* Com a folha aberta, o ✕ de sair do PDV SOME.
+     Ele fica no canto para onde a mão vai quando quer fechar o que está na
+     frente — e o que está na frente é a folha. Clicando ali o operador sairia
+     do PDV inteiro no meio de uma comanda, que é um erro caro e silencioso.
+     Some enquanto a folha existe; volta quando ela desce. */
+  .saas-takeover-panel:has(.pos[data-cart-open]) ~ .saas-takeover-close { display: none; }
+
+  .pos-sheet-scrim {
+    display: block; position: fixed; inset: 0; z-index: 55;
+    border: none; padding: 0;
+    background: rgba(0, 0, 0, 0.45);
+    -webkit-backdrop-filter: blur(10px) saturate(115%);
+    backdrop-filter: blur(10px) saturate(115%);
+  }
+  .pos-aside {
+    top: max(4rem, env(safe-area-inset-top));
+    border-radius: 22px 22px 0 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.10);
+    background: color-mix(in srgb, var(--pos-1) 88%, transparent);
+    -webkit-backdrop-filter: blur(24px) saturate(160%);
+    backdrop-filter: blur(24px) saturate(160%);
+    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
+  }
+  /* A alça: 36×5 centrada, com respiro acima e abaixo — a medida do iOS, e a
+     que o polegar reconhece como "isto se arrasta" sem nenhum rótulo. */
+  .pos-aside__grab {
+    display: flex; align-items: center; justify-content: center;
+    height: 26px; flex: none; cursor: grab; touch-action: none;
+  }
+  .pos-aside__grab::before {
+    content: ''; width: 36px; height: 5px; border-radius: 999px;
+    background: rgba(255, 255, 255, 0.28);
+  }
+  .pos-aside[data-dragging='true'] { transition: none; }
+  .pos-aside[data-dragging='true'] .pos-aside__grab { cursor: grabbing; }
+  @media (prefers-reduced-motion: reduce) {
+    .pos-aside { transition: none; }
+  }
+}
+
+/* O "fechar mesmo assim" com o aviso embutido: duas linhas num alvo só, em
+   vez de uma faixa de alerta acima e um botão abaixo dizendo o mesmo número. */
+.pos-btn--warn { flex-direction: column; gap: 2px; padding-top: 8px; padding-bottom: 8px; height: auto; }
+.pos-btn__l1 { font-size: 14px; font-weight: 600; }
+.pos-btn__l2 {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 11.5px; font-weight: 550; color: var(--pos-warn);
+}
+
+/* "Abrindo no nome de X" — a linha que substituiu a lista de atendentes. */
+.pos-sheet__who {
+  margin: var(--pos-2x) 0 0; font-size: 13px; color: var(--pos-fg-2);
+}
+.pos-sheet__who strong { color: var(--pos-fg); font-weight: 650; }
+
+/* --- esqueleto de carregamento ------------------------------------------
+   Reusa a casca real (`.pos-tbl`, `.pos-item`, `.pos-cat`) e troca só o
+   conteúdo por barras: a grade que aparece é a mesma que vai ficar, então
+   quando o dado chega nada se desloca. */
+.pos-skel { pointer-events: none; cursor: default; }
+.pos-skel::before { display: none; }
+.pos-skel__b {
+  display: block; border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--pos-3) 25%,
+    color-mix(in srgb, var(--pos-4) 70%, transparent) 37%,
+    var(--pos-3) 63%
+  );
+  background-size: 320% 100%;
+  animation: pos-skel-wipe 1.25s ease-in-out infinite;
+}
+@keyframes pos-skel-wipe {
+  from { background-position: 120% 0 }
+  to { background-position: -20% 0 }
+}
+/* Quem pediu menos movimento recebe a mesma forma, parada. */
+@media (prefers-reduced-motion: reduce) {
+  .pos-skel__b { animation: none; background: var(--pos-3); }
 }
 
 /* --- floor: plan layout -------------------------------------------------
@@ -968,9 +1411,13 @@
 
 
 .pos-ln__state {
-  width: 22px; height: 22px; flex: none;
+  width: 14px; height: 22px; flex: none;
   display: grid; place-items: center; border-radius: 50%;
-  background: var(--pos-3); color: var(--pos-fg-2);
+  color: var(--pos-fg-3);
+}
+.pos-ln[data-state='pending'] .pos-ln__state::before {
+  content: ''; width: 8px; height: 8px; border-radius: 50%;
+  background: currentColor;
 }
 /* Pending is the only state that still needs someone to do something, so it
    carries the edge and the marker. It does NOT carry a word: right after
@@ -986,11 +1433,19 @@
 }
 .pos-ln[data-state='pending'] { padding-left: calc(var(--pos-4x) + 4px); }
 .pos-ln[data-state='pending'] .pos-ln__state {
-  background: var(--pos-warn); color: #14100A;
+  /* Um PONTO, não uma bolha com anel dentro: a linha já carrega a faixa âmbar
+     na borda esquerda, e o marcador só confirma. Menor que o ícone dos outros
+     estados de propósito — "ainda não saiu" é ausência de evento, e desenhar
+     ausência com mais tinta que presença inverte a leitura. */
+  background: transparent; color: var(--pos-warn);
+  box-shadow: none;
 }
 .pos-ln[data-state='fired'] .pos-ln__state { background: color-mix(in srgb, var(--pos-warn) 22%, transparent); }
 .pos-ln[data-state='delivered'] .pos-ln__state { background: color-mix(in srgb, var(--pos-ok) 22%, transparent); }
-.pos-ln[data-state='pending'] .pos-ln__state { color: var(--pos-fg-3); }
+/* O ponto é `currentColor`, então a cor AQUI é a cor do marcador. Cinza
+   sobrava de quando pendente era uma bolha âmbar com glifo escuro — com
+   a bolha fora, o cinza apagava justamente o estado que pede ação. */
+.pos-ln[data-state='pending'] .pos-ln__state { color: var(--pos-warn); }
 .pos-ln[data-state='fired'] .pos-ln__state { color: var(--pos-warn); }
 .pos-ln[data-state='delivered'] .pos-ln__state { color: var(--pos-ok); }
 /* A delivered line is history: it stays readable but stops competing with the
@@ -1413,6 +1868,18 @@
   border: none; border-radius: var(--pos-r);
   background: var(--pos-danger); color: #fff;
   font-size: 12px; font-weight: 650; cursor: pointer;
+  /* Escondido enquanto ninguém arrasta.
+     Ele mora ATRÁS da linha e era desenhado sempre, contando com a linha para
+     cobri-lo. Ao trocar de mesa, a comanda inteira remonta: o fundo vermelho
+     pinta um quadro antes de a linha nova chegar por cima, e o que se via era
+     um flash vermelho em cada troca. Invisível por padrão, ele não tem o que
+     vazar — e `pointer-events` acompanha para não roubar o toque da linha. */
+  opacity: 0; pointer-events: none;
+  transition: opacity 120ms var(--pos-e);
+}
+.pos-ln-wrap[data-open='true'] .pos-swipe-bg,
+.pos-ln-wrap[data-swiping='true'] .pos-swipe-bg {
+  opacity: 1; pointer-events: auto;
 }
 .pos-swipe-bg:hover { filter: brightness(1.08); }
 /* The row rides above it; sliding left is what uncovers it. */

package/package.json

@@ -3,7 +3,7 @@
   "fayz": {
     "status": "preview"
   },
-  "version": "0.20.0",
+  "version": "0.20.2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,7 +36,7 @@
     "zustand": "^4.5.0 || ^5.0.0"
   },
   "dependencies": {
-    "@fayz-ai/core": "^0.22.0"
+    "@fayz-ai/core": "^0.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",