@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-crop.scss

@@ -1,172 +1,407 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-crop.scss — Image cropper modal
-// Aligned with Figma matcha/crop:
-//   Ratio(2: 16:9, 1:1) — Crop area with overlay mask
-// Angular: matcha-crop (wraps cropper logic inside matcha-modal)
-// =============================================================================
-
-@mixin matcha-crop-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  .matcha-crop {
-    .matcha-crop__header {
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-    }
-
-    .matcha-crop__overlay {
-      background: rgba(#212121, 0.6); // ok: structural
-    }
-
-    .matcha-crop__area {
-      border: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    .matcha-crop__grid-line {
-      background: rgba(#ffffff, 0.3); // ok: structural
-    }
-
-    .matcha-crop__canvas {
-      background: var(--matcha-color-surface-inverse, #{if($is-dark, getSurface($theme), #121212)});
-    }
-
-    .matcha-crop__handle {
-      background: var(--matcha-color-surface, #{getSurface($theme)});
-      border-color: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-crop {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.matcha-crop__header {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-title-sm, 22px);
-}
-
-.matcha-crop__canvas {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  min-height: 300px;
-}
-
-.matcha-crop__image {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-.matcha-crop__overlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.matcha-crop__area {
-  position: absolute;
-  box-sizing: border-box;
-  cursor: move;
-  touch-action: none;
-}
-
-// ── Aspect ratios ──
-.matcha-crop__area--16x9 {
-  aspect-ratio: 16 / 9;
-}
-
-.matcha-crop__area--1x1 {
-  aspect-ratio: 1 / 1;
-  border-radius: 0;
-}
-
-.matcha-crop__area--1x1-circle {
-  aspect-ratio: 1 / 1;
-  border-radius: 50%;
-}
-
-// ── Rule of thirds grid ──
-.matcha-crop__grid {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
-  pointer-events: none;
-}
-
-.matcha-crop__grid-line {
-  &:nth-child(1) { grid-column: 2; grid-row: 1 / 4; width: var(--matcha-border-hairline, 1px); }
-  &:nth-child(2) { grid-column: 3; grid-row: 1 / 4; width: var(--matcha-border-hairline, 1px); }
-  &:nth-child(3) { grid-column: 1 / 4; grid-row: 2; height: var(--matcha-border-hairline, 1px); }
-  &:nth-child(4) { grid-column: 1 / 4; grid-row: 3; height: var(--matcha-border-hairline, 1px); }
-}
-
-// ── Resize handles ──
-.matcha-crop__handle {
-  position: absolute;
-  width: var(--matcha-space-150, 12px);
-  height: var(--matcha-space-150, 12px);
-  border: var(--matcha-border-thin, 2px) solid transparent;
-  border-radius: 50%;
-  pointer-events: auto;
-
-  // Offset negativo = -6px = -(handle/2) pra centralizar no canto
-  &--nw { top: calc(-1 * var(--matcha-space-075, 6px)); left: calc(-1 * var(--matcha-space-075, 6px)); cursor: nw-resize; }
-  &--ne { top: calc(-1 * var(--matcha-space-075, 6px)); right: calc(-1 * var(--matcha-space-075, 6px)); cursor: ne-resize; }
-  &--sw { bottom: calc(-1 * var(--matcha-space-075, 6px)); left: calc(-1 * var(--matcha-space-075, 6px)); cursor: sw-resize; }
-  &--se { bottom: calc(-1 * var(--matcha-space-075, 6px)); right: calc(-1 * var(--matcha-space-075, 6px)); cursor: se-resize; }
-}
-
-// ── Footer ──
-.matcha-crop__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--matcha-space-100, 8px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-  .matcha-crop__header {
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  }
-
-  .matcha-crop__footer {
-    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  }
-
-  .matcha-crop__canvas {
-    min-height: 240px;
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-crop__area,
-  .matcha-crop__image {
-    transition: none;
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-crop.scss — Image cropper (Tier 1 + Tier 2 gold)
+//
+// Estrutura:
+//   .matcha-crop                       — host flex column (data-state, data-shape, data-ratio)
+//   .matcha-crop__header               — title + toolbar (reset, lock)
+//   .matcha-crop__canvas               — image stage + interaction surface
+//   .matcha-crop__image                — source img (transforma via translate/scale)
+//   .matcha-crop__overlay              — punch-out mask via clip-path
+//   .matcha-crop__area                 — crop frame draggable + 8 handles
+//   .matcha-crop__handle--{nw|n|ne|...} — resize handles (44×44 touch target)
+//   .matcha-crop__zoom-bar             — slider de zoom
+//   .matcha-crop__state                — empty / loading / error visuals
+//   .matcha-crop__footer               — ng-content de actions
+// =============================================================================
+
+@mixin matcha-crop-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-crop {
+    color: var(--matcha-color-text-primary);
+
+    .matcha-crop__header {
+      color: var(--matcha-color-text-primary);
+      border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+    }
+
+    .matcha-crop__canvas {
+      background: var(--matcha-color-surface-inverse, #121212);
+    }
+
+    .matcha-crop__overlay {
+      background: var(--matcha-color-scrim, rgba(0, 0, 0, 0.55));
+    }
+
+    .matcha-crop__area {
+      border: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent);
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+      &:focus-visible {
+        outline: 3px solid var(--matcha-color-focus-ring);
+        outline-offset: 4px;
+      }
+    }
+
+    .matcha-crop__grid-line {
+      background: var(--matcha-color-on-overlay, rgba(255, 255, 255, 0.3));
+    }
+
+    .matcha-crop__handle {
+      background: var(--matcha-color-surface);
+      border-color: var(--matcha-color-accent);
+    }
+
+    .matcha-crop__zoom-bar {
+      background: var(--matcha-color-surface-card);
+      border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+      color: var(--matcha-color-text-secondary);
+    }
+
+    .matcha-crop__icon-btn {
+      color: var(--matcha-color-text-secondary);
+
+      &:hover { background: var(--matcha-color-surface-hover); color: var(--matcha-color-text-primary); }
+      &:focus-visible { outline: 2px solid var(--matcha-color-focus-ring); outline-offset: 2px; }
+      &.is-active { color: var(--matcha-color-accent); background: var(--matcha-color-accent-surface-hover); }
+    }
+
+    .matcha-crop__state-icon { color: var(--matcha-color-text-muted); }
+    .matcha-crop__state-title { color: var(--matcha-color-text-primary); }
+    .matcha-crop__state-desc  { color: var(--matcha-color-text-secondary); }
+
+    .matcha-crop__state--error .matcha-crop__state-icon { color: var(--matcha-color-danger); }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-crop {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+}
+
+// ── Header ──────────────────────────────────────────────────────────────────
+
+.matcha-crop__header {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-title-sm, 22px);
+  flex-shrink: 0;
+}
+
+.matcha-crop__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.matcha-crop__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+}
+
+.matcha-crop__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--matcha-radius-md, 4px);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+// ── Canvas (interaction area) ──────────────────────────────────────────────
+
+.matcha-crop__canvas {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 320px;
+  cursor: grab;
+  user-select: none;
+
+  &.is-interacting { cursor: grabbing; }
+}
+
+// `width/height: 100%` + `object-fit: contain` é o pareamento correto: força o
+// IMG box a ocupar o canvas inteiro (mesmo pra natural < container), com o
+// conteúdo escalado preservando aspect ratio. `max-width/height` causava bug
+// em fotos menores que o canvas (ex: thumbnail 80×80 num modal 432×320): o
+// browser não upscala via max-*, mas o JS calculava displayRatio = container/
+// natural > 1 assumindo upscale, fazendo o mapeamento display→source ficar
+// deslocado e o crop sair errado.
+.matcha-crop__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+  transform-origin: center center;
+  will-change: transform;
+  transition: transform 80ms ease-out;
+}
+
+// ── Overlay (punch-out via clip-path) ───────────────────────────────────────
+
+.matcha-crop__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transition: clip-path 80ms ease-out;
+}
+
+// ── Crop area ───────────────────────────────────────────────────────────────
+
+.matcha-crop__area {
+  position: absolute;
+  box-sizing: border-box;
+  cursor: move;
+  touch-action: none;
+
+  &--circle {
+    border-radius: 50%;
+  }
+}
+
+// Posicionado ACIMA da área de crop em vez do centro. Quando shape=circle,
+// o texto do centro era cruzado pelo border (visualmente parecia cortado).
+// Acima fica em zona de overlay escurecido, sempre legível.
+.matcha-crop__hint {
+  position: absolute;
+  bottom: calc(100% + var(--matcha-space-100, 8px));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: var(--matcha-radius-sm, 2px);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+// ── Rule of thirds grid (mostra só durante interação) ──────────────────────
+
+.matcha-crop__grid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  pointer-events: none;
+}
+
+.matcha-crop__grid-line {
+  &:nth-child(1) { grid-column: 2; grid-row: 1 / 4; width: 1px; justify-self: start; }
+  &:nth-child(2) { grid-column: 3; grid-row: 1 / 4; width: 1px; justify-self: start; }
+  &:nth-child(3) { grid-column: 1 / 4; grid-row: 2; height: 1px; align-self: start; }
+  &:nth-child(4) { grid-column: 1 / 4; grid-row: 3; height: 1px; align-self: start; }
+}
+
+// ── Resize handles (8 directions, 44×44 touch target) ──────────────────────
+
+.matcha-crop__handle {
+  position: absolute;
+  width: var(--matcha-crop-handle-size, 16px);
+  height: var(--matcha-crop-handle-size, 16px);
+  margin: calc(-1 * var(--matcha-crop-handle-size, 16px) / 2);
+  padding: 0;
+  background: transparent;
+  border: var(--matcha-border-thin, 2px) solid transparent;
+  border-radius: 50%;
+  pointer-events: auto;
+  z-index: 2;
+  touch-action: none;
+
+  // Expand touch target via ::after (visual = 16px, hit = 44px)
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -14px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--matcha-color-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+// ── Zoom bar ────────────────────────────────────────────────────────────────
+
+.matcha-crop__zoom-bar {
+  position: absolute;
+  bottom: var(--matcha-space-200, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-075, 6px) var(--matcha-space-150, 12px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  backdrop-filter: blur(8px);
+  font-size: var(--matcha-text-body-sm, 12px);
+  z-index: 3;
+}
+
+.matcha-crop__zoom-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 160px;
+  height: 4px;
+  background: var(--matcha-color-surface-border);
+  border-radius: 2px;
+  cursor: pointer;
+  outline: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--matcha-color-accent);
+    border: 2px solid var(--matcha-color-surface);
+    border-radius: 50%;
+    cursor: grab;
+  }
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--matcha-color-accent);
+    border: 2px solid var(--matcha-color-surface);
+    border-radius: 50%;
+    cursor: grab;
+  }
+  &:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px var(--matcha-color-focus-ring);
+  }
+}
+
+.matcha-crop__zoom-value {
+  min-width: 40px;
+  font-family: 'Fira Code', Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+// ── States (empty / loading / error) ────────────────────────────────────────
+
+.matcha-crop__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-300, 24px);
+  text-align: center;
+  max-width: 360px;
+}
+
+.matcha-crop__state-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  --matcha-icon-color: currentColor;
+
+  &--spin {
+    animation: matcha-crop-spin 1.2s linear infinite;
+  }
+}
+
+.matcha-crop__state-title {
+  margin: 0;
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+}
+
+.matcha-crop__state-desc {
+  margin: 0;
+  font-size: var(--matcha-text-body-sm, 12px);
+  line-height: 1.4;
+
+  code {
+    padding: 2px 6px;
+    background: var(--matcha-color-surface-card);
+    border-radius: var(--matcha-radius-sm, 2px);
+    font-family: 'Fira Code', Consolas, monospace;
+    font-size: 11px;
+  }
+}
+
+@keyframes matcha-crop-spin {
+  to { transform: rotate(360deg); }
+}
+
+// ── SR-only live region ────────────────────────────────────────────────────
+
+.matcha-crop__sr-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ── Footer ──────────────────────────────────────────────────────────────────
+// Footer só ocupa espaço quando ng-content tem children projetados.
+// Truque CSS: empty footer fica height 0 via :has() — quando vazio, esconde.
+
+.matcha-crop__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+  flex-shrink: 0;
+
+  &:empty {
+    padding: 0;
+  }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@media (max-width: 640px) {
+  .matcha-crop__header,
+  .matcha-crop__footer {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
+  }
+  .matcha-crop__canvas { min-height: 280px; }
+  .matcha-crop__zoom-slider { width: 120px; }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-crop__image,
+  .matcha-crop__overlay {
+    transition: none;
+  }
+  .matcha-crop__state-icon--spin {
+    animation: none;
+  }
+}