@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-color-picker/sui-color-picker.css

@@ -0,0 +1,463 @@
+@charset "UTF-8";
+/* ═══ SUI Color Picker — SUI Design System 2.0 (full) ═════════════════════════════
+ * Portado 1:1 desde el SCSS Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-picker/).
+ * Specs from Figma 8p1k72aKKvzJV4XcvPS4VO node 4456:115795 "Color Picker [1.1]"
+ * + sub-nodes 4456:115716 (Colors section), 4456:115765 (Recommended Colors),
+ * 4415:53669 (Hue Slider), 4415:53670 (Opacity Slider), 4456:115720 (Color Input).
+ *  Doc canon: la guía del DS (color picker).
+ *
+ * EXACT (pulled from Figma — VERIFIED via MCP):
+ *   - Panel: w-272px, rounded-16px, border 1px stroke/soft-200,
+ *     shadow regular-shadow/medium (0 16px 32px -12px #0e121b1a), overflow-clip.
+ *   - 2 secciones flex-col:
+ *       . "Colors"             -> p-16px, gap-12px, border-b 1px stroke/soft-200
+ *       . "Recommended Colors" -> p-16px, gap-8px
+ *   - Color Spectrum: 232x232 (w-full en el panel), rounded-8, overflow-clip.
+ *       Gradiente: white->transparent (saturación) sobre black->transparent
+ *       (value) sobre el hue base.
+ *   - Hue/Opacity slider: container h-16px, track h-8px top-4px rounded-full,
+ *       thumb 16px circle.
+ *   - Color Input row: border 1px stroke/soft-200 rounded-8, overflow-clip.
+ *       Cada celda izquierda aporta su propio border-r (spec Figma 4456:115724):
+ *       sip (p-6px, border-r) | hex (flex-1, px-10px py-6px, border-r) | opacity (px-10px py-6px, sin border)
+ *   - Dropdown label: "Hex" Label/Small 14px medium + arrow-down-s-line 20px, gap-2px.
+ *   - Recommended Colors: label Paragraph/X Small 12px text-sub-600 +
+ *       grid flex-wrap gap-4px (8 dots canon, SUI extiende a 10).
+ *
+ * Render 100% CSS — los gradientes del HSV spectrum se hacen con
+ * `linear-gradient` stacked. Sin canvas API, sin SVG. Pointer events para
+ * drag (touch + mouse + pen unificado).
+ *
+ * El popover usa `position: absolute` referenciado al :host.
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  position: relative;
+  display: inline-block;
+  font-family: var(--sui-font-sans);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* ───── Trigger ─────────────────────────────────────────────────────── */
+.sui-color-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 6px 6px;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  border-radius: var(--sui-radius-8);
+  cursor: pointer;
+  appearance: none;
+  font: inherit;
+  color: var(--sui-text-strong-950);
+  font-size: var(--sui-type-label-sm-size);
+  font-weight: var(--sui-type-label-sm-weight);
+  line-height: var(--sui-type-label-sm-line);
+  letter-spacing: var(--sui-type-label-sm-spacing);
+  transition: background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+.sui-color-picker__trigger:hover {
+  background: var(--sui-bg-weak-50);
+}
+.sui-color-picker__trigger:focus-visible {
+  outline: 2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));
+  outline-offset: 2px;
+}
+.sui-color-picker__trigger:active {
+  transform: none;
+}
+
+:host([data-sui-open]) .sui-color-picker__trigger {
+  border-color: var(--sui-stroke-strong-950, var(--sui-text-strong-950));
+}
+
+:host([data-sui-disabled]) .sui-color-picker__trigger {
+  background: var(--sui-bg-weak-50);
+  color: var(--sui-text-disabled-300);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Muestra del color en el trigger — mismo dibujo que sui-color-dot en
+   `selected` (24×24: punto de 12 + anillo de 18 con borde 2), pero con un
+   <span> para no meter un botón dentro del botón (fix a11y 04-10-2026). */
+.sui-color-picker__swatch {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+.sui-color-picker__swatch::after {
+  content: "";
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--c);
+}
+.sui-color-picker__swatch::before {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  border: 2px solid var(--c);
+}
+
+/* ───── Size large — size nuevo 04-10-2026 ─────────────────────────────
+   Dueño: el piso táctil en el teléfono es 44. El trigger medium mide 38
+   (6 + 24 + 6 + borde 2). `large`: 9 + 24 + 9 + 2 = 44, texto Label/Medium
+   16/24 (regla 03-10-2026); la muestra y el chevron no cambian. `medium` no
+   cambia. */
+:host([data-sui-size=large]) .sui-color-picker__trigger {
+  padding: 9px 12px 9px 9px;
+  font-size: var(--sui-type-label-md-size, 16px);
+  line-height: var(--sui-type-label-md-line, 24px);
+  letter-spacing: var(--sui-type-label-md-spacing, -0.011em);
+}
+
+.sui-color-picker__placeholder-dot {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--sui-bg-soft-200);
+}
+
+.sui-color-picker__label {
+  flex: 1 0 auto;
+  white-space: nowrap;
+}
+
+.sui-color-picker__chevron {
+  flex-shrink: 0;
+  color: var(--sui-icon-sub-600);
+  transition: transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+
+:host([data-sui-open]) .sui-color-picker__chevron {
+  transform: rotate(180deg);
+}
+
+/* ───── Panel popover ───────────────────────────────────────────────── */
+.sui-color-picker__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 100;
+  width: 272px; /* Figma: w-272px exacto */
+  box-sizing: border-box;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  border-radius: var(--sui-radius-16); /* Figma: rounded-16px */
+  box-shadow: var(--sui-shadow-medium); /* regular-shadow/medium */
+  overflow: hidden; /* Figma: overflow-clip */
+  display: flex;
+  flex-direction: column;
+  animation: sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+
+/* Fallbacks de posición (ver place() en el .tsx): arriba si no entra abajo,
+   alineado a la derecha si no entra a la izquierda. */
+:host([data-sui-flip]) .sui-color-picker__panel {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+:host([data-sui-align-end]) .sui-color-picker__panel {
+  left: auto;
+  right: 0;
+}
+
+@keyframes sui-color-picker__fade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Sección "Colors" — Figma 4456:115716: p-16px, gap-12px, border-b */
+.sui-color-picker__section {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  width: 100%;
+}
+
+.sui-color-picker__section--colors {
+  border-bottom: 1px solid var(--sui-stroke-soft-200);
+}
+
+/* Sección "Recommended Colors" — Figma 4456:115765: p-16px, gap-8px */
+.sui-color-picker__section--recommended {
+  gap: 8px;
+}
+
+/* presetsOnly mode: solo la sección recommended, sin border-b previo */
+:host([data-sui-presets-only]) .sui-color-picker__section--recommended {
+  border-bottom: none;
+}
+
+/* ───── HSV Color Spectrum ──────────────────────────────────────────── */
+.sui-color-picker__canvas {
+  /* Figma 4456:115425 Color Spectrum: 232x232 (w-full en el panel), rounded-8.
+     En el panel de 272px con p-16px a cada lado, usable = 240px de ancho. */
+  position: relative;
+  width: 100%;
+  height: 232px;
+  border-radius: var(--sui-radius-8);
+  cursor: crosshair;
+  user-select: none;
+  touch-action: none; /* evita scroll de página durante el drag */
+  overflow: hidden;
+  /* Gradientes stacked: white -> transparent (horizontal, saturación)
+     superpuesto a transparent -> black (vertical, value), sobre el hue base. */
+  background-color: var(--hue-color, #335cff);
+  background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+
+.sui-color-picker__canvas-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--sui-static-white, #fff);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  /* el background-color lo aplica el host via inline style — refleja el hex actual */
+}
+
+/* ───── Sliders (hue + opacity) ─────────────────────────────────────── */
+/* Container — Figma 4415:53669/53670: h-16px (alinea el thumb 16px). */
+.sui-color-picker__slider {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+/* Track — Figma BG: h-8px, top-4px, rounded-full. */
+.sui-color-picker__slider-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  height: 8px;
+  border-radius: var(--sui-radius-full);
+  overflow: hidden;
+}
+
+/* Hue track: arcoíris hsl 0..360 con full saturation/lightness 50%. */
+.sui-color-picker__hue .sui-color-picker__slider-track {
+  background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+}
+
+/* Opacity track: checkerboard (10.88px tiles, opacity 30%) + transparent->color
+   gradient. Figma 4415:53670 = white base + checker pattern + gradient overlay.
+   El checker es FIJO (hex, no tokens): representa transparencia (convención
+   de los editores gráficos) y NO debe invertir en dark. */
+.sui-color-picker__opacity .sui-color-picker__slider-track {
+  background-color: #fff;
+  background-image: linear-gradient(to right, transparent, var(--opacity-color, #335cff)), conic-gradient(#ebebeb 0 25%, transparent 0 50%, #ebebeb 0 75%, transparent 0);
+  background-size: auto, 10.88px 10.88px;
+}
+
+/* Thumb — Figma "Color" node size-16px circle con ring. */
+.sui-color-picker__slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--sui-static-white, #fff);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* El thumb de opacity muestra el color con su alpha real sobre checkerboard. */
+.sui-color-picker__opacity .sui-color-picker__slider-thumb {
+  background-image: linear-gradient(var(--thumb-color, #335cff), var(--thumb-color, #335cff)), conic-gradient(#ebebeb 0 25%, #fff 0 50%, #ebebeb 0 75%, #fff 0);
+  background-size: auto, 6px 6px;
+}
+
+/* ───── Color Input row ─────────────────────────────────────────────── */
+/* Color Input wrapper — Figma 4456:115720: gap-4px flex-col. */
+.sui-color-picker__color-input {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+/* Dropdown label row — Figma 4456:115721: gap-2px items-center. */
+.sui-color-picker__format {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: default;
+  font: inherit;
+  color: var(--sui-text-strong-950);
+}
+
+.sui-color-picker__format-label {
+  font-size: var(--sui-type-label-sm-size);
+  font-weight: var(--sui-type-label-sm-weight);
+  line-height: var(--sui-type-label-sm-line);
+  letter-spacing: var(--sui-type-label-sm-spacing);
+  white-space: nowrap;
+}
+
+.sui-color-picker__format-chevron {
+  flex-shrink: 0;
+  color: var(--sui-icon-sub-600);
+}
+
+/* Input row — Figma 4456:115724: border 1px stroke/soft-200 rounded-8. */
+.sui-color-picker__input-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  border-radius: var(--sui-radius-8);
+  overflow: hidden;
+}
+
+/* Sip (eyedropper) — Figma 4456:115796: p-6px, border-r. */
+.sui-color-picker__sip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border: none;
+  border-right: 1px solid var(--sui-stroke-soft-200);
+  background: var(--sui-bg-white-0);
+  color: var(--sui-icon-sub-600);
+  cursor: pointer;
+  appearance: none;
+  flex-shrink: 0;
+  transition: background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+.sui-color-picker__sip:hover {
+  background: var(--sui-bg-weak-50);
+}
+.sui-color-picker__sip:focus-visible {
+  outline: 2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));
+  outline-offset: -2px;
+}
+.sui-color-picker__sip:active {
+  transform: none;
+}
+
+/* Hex input cell — Figma 4456:115725: flex-1, px-10px py-6px, border-r.
+   El separador hex|opacity lo aporta el border-right de ESTA celda (igual que
+   el spec de Figma, que pone la responsabilidad del borde en la celda izquierda). */
+.sui-color-picker__hex-cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  min-width: 0;
+  padding: 6px 10px;
+  border-right: 1px solid var(--sui-stroke-soft-200);
+  /* Sin opacity cell (alpha=false), el hex es la última celda: no debe quedar
+     un border-right colgado contra la esquina redondeada. */
+}
+.sui-color-picker__hex-cell:last-child {
+  border-right: none;
+}
+
+.sui-color-picker__hex-field {
+  flex: 1 0 0;
+  min-width: 0;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  appearance: none;
+  color: var(--sui-text-strong-950);
+  font-family: inherit;
+  font-size: var(--sui-type-paragraph-sm-size);
+  font-weight: var(--sui-type-paragraph-sm-weight);
+  line-height: var(--sui-type-paragraph-sm-line);
+  letter-spacing: var(--sui-type-paragraph-sm-spacing);
+  text-transform: uppercase;
+}
+.sui-color-picker__hex-field::placeholder {
+  color: var(--sui-text-soft-400);
+  text-transform: none;
+}
+
+/* Opacity field cell — Figma 4456:115727: px-10px py-6px, sin border propio.
+   El separador hex|opacity lo aporta el border-right de la celda hex (spec Figma). */
+.sui-color-picker__opacity-cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 6px 10px;
+}
+
+.sui-color-picker__opacity-field {
+  width: 3.5ch;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  appearance: none;
+  text-align: right;
+  color: var(--sui-text-sub-600);
+  font-family: inherit;
+  font-size: var(--sui-type-paragraph-sm-size);
+  font-weight: var(--sui-type-paragraph-sm-weight);
+  line-height: var(--sui-type-paragraph-sm-line);
+  letter-spacing: var(--sui-type-paragraph-sm-spacing);
+}
+
+.sui-color-picker__opacity-suffix {
+  color: var(--sui-text-sub-600);
+  font-size: var(--sui-type-paragraph-sm-size);
+  font-weight: var(--sui-type-paragraph-sm-weight);
+  line-height: var(--sui-type-paragraph-sm-line);
+  letter-spacing: var(--sui-type-paragraph-sm-spacing);
+}
+
+/* ───── Recommended Colors grid ─────────────────────────────────────── */
+.sui-color-picker__panel-label {
+  margin: 0;
+  font-size: var(--sui-type-paragraph-xs-size);
+  font-weight: var(--sui-type-paragraph-xs-weight);
+  line-height: var(--sui-type-paragraph-xs-line);
+  letter-spacing: var(--sui-type-paragraph-xs-spacing);
+  color: var(--sui-text-sub-600);
+}
+
+/* Figma 4456:115767: flex flex-wrap gap-4px (NO grid fijo). */
+.sui-color-picker__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+/* Size large: puntos de 32 (sui-color-dot large) separados 12 → paso de 44
+   entre centros, 5 por fila en el panel de 272 (5·32 + 4·12 = 208 ≤ 240).
+   Clase en el grid (como en Angular, donde el panel vive en el overlay). */
+.sui-color-picker__grid--large {
+  gap: 12px;
+}

package/dist/collection/components/sui-color-picker/sui-color-picker.data.js

@@ -0,0 +1,214 @@
+/* ════════════════════════════════════════════════════════════════════════
+ * sui-color-picker — catálogos, mapas y helpers.
+ *
+ * Stencil prohíbe `export const` / `export function` / `export enum` en el
+ * archivo del @Component (rompe el build entero), así que TODA la data y los
+ * helpers HSV↔RGB↔HEX viven acá, en el archivo hermano `.data.ts`. El `.tsx`
+ * importa de aquí lo que necesita.
+ *
+ * Portado 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-picker/).
+ * ════════════════════════════════════════════════════════════════════════ */
+/* ── Re-export de la data del color-dot (mismos valores canon) ──
+ * Se re-declaran acá los 10 colores + el mapa preset→hex para que el picker
+ * no dependa de ningún `export const` dentro del .tsx del color-dot (que NO
+ * los expone — Stencil lo prohíbe). Mismos valores exactos que
+ * sui-color-dot.data.ts. */
+export const SUI_COLOR_DOT_COLORS = [
+    'gray',
+    'blue',
+    'orange',
+    'red',
+    'green',
+    'yellow',
+    'purple',
+    'sky',
+    'pink',
+    'teal',
+];
+/** Mapa preset → hex canónico (Figma `<color>/500`). orange = #fa7319 brand. */
+export const SUI_COLOR_DOT_HEX = {
+    gray: '#7b7b7b',
+    blue: '#335cff',
+    orange: '#fa7319',
+    red: '#fb3748',
+    green: '#1fc16b',
+    yellow: '#f6b51e',
+    purple: '#7d52f4',
+    sky: '#47c2ff',
+    pink: '#fb4ba3',
+    teal: '#22d3bb',
+};
+/** Mapa inverso: hex (lowercase, 6 chars con #) → preset name. */
+export const SUI_HEX_TO_COLOR = Object.entries(SUI_COLOR_DOT_HEX).reduce((acc, [name, hex]) => {
+    acc[hex.toLowerCase()] = name;
+    return acc;
+}, {});
+/** Labels en español de cada preset (para el trigger label y aria-labels). */
+export const SUI_COLOR_DOT_LABELS = {
+    gray: 'Gris',
+    blue: 'Azul',
+    orange: 'Naranja',
+    red: 'Rojo',
+    green: 'Verde',
+    yellow: 'Amarillo',
+    purple: 'Morado',
+    sky: 'Celeste',
+    pink: 'Rosado',
+    teal: 'Turquesa',
+};
+/* ════════════════════════════════════════════════════════════════════════
+ * HSV ↔ RGB ↔ HEX conversion helpers
+ *
+ * Internal model: { h: [0..360), s: [0..1], v: [0..1] }, alpha [0..1].
+ * Public value:   `#rrggbb` (6 chars) cuando alpha=off o a===1;
+ *                 `#rrggbbaa` (8 chars) cuando alpha=on y a<1.
+ *
+ * Math reference:
+ *   https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative
+ * ════════════════════════════════════════════════════════════════════════ */
+export function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+export function hsvToRgb(h, s, v) {
+    // Implementación canon — h in [0,360), s/v in [0,1], r/g/b out in [0,255].
+    const c = v * s;
+    const hh = (h % 360) / 60;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hh < 1) {
+        r1 = c;
+        g1 = x;
+        b1 = 0;
+    }
+    else if (hh < 2) {
+        r1 = x;
+        g1 = c;
+        b1 = 0;
+    }
+    else if (hh < 3) {
+        r1 = 0;
+        g1 = c;
+        b1 = x;
+    }
+    else if (hh < 4) {
+        r1 = 0;
+        g1 = x;
+        b1 = c;
+    }
+    else if (hh < 5) {
+        r1 = x;
+        g1 = 0;
+        b1 = c;
+    }
+    else {
+        r1 = c;
+        g1 = 0;
+        b1 = x;
+    }
+    const m = v - c;
+    return {
+        r: Math.round((r1 + m) * 255),
+        g: Math.round((g1 + m) * 255),
+        b: Math.round((b1 + m) * 255),
+    };
+}
+export function rgbToHsv(r, g, b) {
+    const r1 = r / 255;
+    const g1 = g / 255;
+    const b1 = b / 255;
+    const max = Math.max(r1, g1, b1);
+    const min = Math.min(r1, g1, b1);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === r1)
+            h = ((g1 - b1) / d) % 6;
+        else if (max === g1)
+            h = (b1 - r1) / d + 2;
+        else
+            h = (r1 - g1) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h, s, v };
+}
+export function rgbToHex(r, g, b) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+/**
+ * Normaliza un string hex al formato canon `#rrggbb` (lowercase, con #).
+ * Devuelve null si el input no es un hex válido (3 o 6 chars).
+ * Aceptado: '#fff', 'FFF', '#FFFFFF', 'ffffff'.
+ */
+export function normalizeHex(input) {
+    if (!input)
+        return null;
+    const raw = input.trim().replace(/^#/, '').toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(raw)) {
+        return ('#' +
+            raw
+                .split('')
+                .map((ch) => ch + ch)
+                .join(''));
+    }
+    if (/^[0-9a-f]{6}$/.test(raw)) {
+        return '#' + raw;
+    }
+    return null;
+}
+/**
+ * Parsea un hex 3/4/6/8 chars → { hex: #rrggbb, alpha: [0..1], hasAlpha }.
+ * Devuelve null si no es válido. Soporta:
+ *   #rgb, #rgba, #rrggbb, #rrggbbaa (con o sin `#`, case-insensitive).
+ */
+export function parseHexWithAlpha(input) {
+    if (!input)
+        return null;
+    let raw = input.trim().replace(/^#/, '').toLowerCase();
+    // Expand shorthand 3/4 → 6/8
+    let hadAlphaShorthand = false;
+    if (/^[0-9a-f]{3}$/.test(raw)) {
+        raw = raw
+            .split('')
+            .map((ch) => ch + ch)
+            .join('');
+    }
+    else if (/^[0-9a-f]{4}$/.test(raw)) {
+        raw = raw
+            .split('')
+            .map((ch) => ch + ch)
+            .join('');
+        hadAlphaShorthand = true;
+    }
+    if (/^[0-9a-f]{6}$/.test(raw) && !hadAlphaShorthand) {
+        return { hex: '#' + raw, alpha: 1, hasAlpha: false };
+    }
+    if (/^[0-9a-f]{8}$/.test(raw)) {
+        const alpha = parseInt(raw.slice(6, 8), 16) / 255;
+        return { hex: '#' + raw.slice(0, 6), alpha, hasAlpha: true };
+    }
+    return null;
+}
+export function hexToRgb(hex) {
+    const n = normalizeHex(hex);
+    if (!n)
+        return null;
+    return {
+        r: parseInt(n.slice(1, 3), 16),
+        g: parseInt(n.slice(3, 5), 16),
+        b: parseInt(n.slice(5, 7), 16),
+    };
+}
+/** Convierte alpha [0..1] → 2-char hex (00..ff). */
+export function alphaToHex(alpha) {
+    return Math.round(clamp01(alpha) * 255)
+        .toString(16)
+        .padStart(2, '0');
+}