create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/icons/index.tsx

@@ -0,0 +1,294 @@
+// Icon — SVG inline từ path data GỐC primeicons (npm primeicons 7.0.0, thư mục
+// raw-svg). Bảng PATHS SINH BẰNG SCRIPT từ raw-svg — đừng sửa path tay (hỏng glyph).
+// viewBox 24×24, fill currentColor → kế thừa màu text cha (text-ink/accent/…).
+// Icon lạ (name ngoài IconName, cast runtime) → fallback 'help-circle'.
+// Tree-shake: consumer import thẳng { Icon } from 'ui-kit/src/ui/icons' — không barrel.
+
+export type IconName =
+  | 'chevron-up'
+  | 'chevron-down'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'angle-double-left'
+  | 'angle-double-right'
+  | 'search'
+  | 'plus'
+  | 'minus'
+  | 'times'
+  | 'check'
+  | 'check-circle'
+  | 'info-circle'
+  | 'exclamation-triangle'
+  | 'upload'
+  | 'download'
+  | 'calendar'
+  | 'clock'
+  | 'user'
+  | 'users'
+  | 'home'
+  | 'settings'
+  | 'menu-bars'
+  | 'ellipsis-h'
+  | 'ellipsis-v'
+  | 'pencil'
+  | 'trash'
+  | 'eye'
+  | 'eye-slash'
+  | 'refresh'
+  | 'filter'
+  | 'filter-fill'
+  | 'filter-slash'
+  | 'sort'
+  | 'sort-up'
+  | 'sort-down'
+  | 'arrow-up'
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'caret-up'
+  | 'caret-down'
+  | 'caret-left'
+  | 'caret-right'
+  | 'star'
+  | 'heart'
+  | 'bell'
+  | 'external-link'
+  | 'copy'
+  | 'folder'
+  | 'file'
+  | 'help-circle';
+
+const PATHS = {
+  'chevron-up': [
+    "M17,15.25a.74.74,0,0,1-.53-.22L12,10.56,7.53,15A.75.75,0,0,1,6.47,14l5-5a.75.75,0,0,1,1.06,0l5,5a.75.75,0,0,1,0,1.06A.74.74,0,0,1,17,15.25Z",
+  ],
+  'chevron-down': [
+    "M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z",
+  ],
+  'chevron-left': [
+    "M14,17.75a.74.74,0,0,1-.53-.22l-5-5a.75.75,0,0,1,0-1.06l5-5a.75.75,0,0,1,1.06,1.06L10.06,12l4.47,4.47a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,17.75Z",
+  ],
+  'chevron-right': [
+    "M10,17.75a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06L13.94,12,9.47,7.53a.75.75,0,0,1,1.06-1.06l5,5a.75.75,0,0,1,0,1.06l-5,5A.74.74,0,0,1,10,17.75Z",
+  ],
+  'angle-double-left': [
+    "M11,16.25a.74.74,0,0,1-.53-.22L7,12.53a.75.75,0,0,1,0-1.06L10.47,8A.75.75,0,0,1,11.53,9l-3,3,3,3a.75.75,0,0,1,0,1.06A.74.74,0,0,1,11,16.25Z",
+    "M16.5,16.25A.74.74,0,0,1,16,16l-3.5-3.5a.75.75,0,0,1,0-1.06L16,8A.75.75,0,0,1,17,9l-3,3,3,3A.75.75,0,0,1,17,16,.74.74,0,0,1,16.5,16.25Z",
+  ],
+  'angle-double-right': [
+    "M13,16.25a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06l3-3-3-3A.75.75,0,0,1,13.53,8l3.5,3.5a.75.75,0,0,1,0,1.06L13.53,16A.74.74,0,0,1,13,16.25Z",
+    "M7.5,16.25A.74.74,0,0,1,7,16,.75.75,0,0,1,7,15l3-3L7,9A.75.75,0,0,1,8,8l3.5,3.5a.75.75,0,0,1,0,1.06L8,16A.74.74,0,0,1,7.5,16.25Z",
+  ],
+  'search': [
+    "M10.77,18.3a7.53,7.53,0,1,1,7.53-7.53A7.53,7.53,0,0,1,10.77,18.3Zm0-13.55a6,6,0,1,0,6,6A6,6,0,0,0,10.77,4.75Z",
+    "M20,20.75a.74.74,0,0,1-.53-.22L15.34,16.4a.75.75,0,0,1,1.06-1.06l4.13,4.13a.75.75,0,0,1,0,1.06A.74.74,0,0,1,20,20.75Z",
+  ],
+  'plus': [
+    "M12.75,11.25V5a.75.75,0,0,0-1.5,0v6.25H5a.75.75,0,0,0,0,1.5h6.25V19a.76.76,0,0,0,.75.75.75.75,0,0,0,.75-.75V12.75H19a.75.75,0,0,0,.75-.75.76.76,0,0,0-.75-.75Z",
+  ],
+  'minus': [
+    "M20,13H4a1,1,0,0,1,0-2H20a1,1,0,0,1,0,2Z",
+  ],
+  'times': [
+    "M13.06,12l4.42-4.42a.75.75,0,1,0-1.06-1.06L12,10.94,7.58,6.52A.75.75,0,0,0,6.52,7.58L10.94,12,6.52,16.42a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0L12,13.06l4.42,4.42a.75.75,0,0,0,1.06,0,.75.75,0,0,0,0-1.06Z",
+  ],
+  'check': [
+    "M9,18.25A.74.74,0,0,1,8.47,18l-5-5A.75.75,0,1,1,4.53,12L9,16.44,19.47,6A.75.75,0,0,1,20.53,7l-11,11A.74.74,0,0,1,9,18.25Z",
+  ],
+  'check-circle': [
+    "M10.5,15.25A.74.74,0,0,1,10,15L7,12A.75.75,0,0,1,8,11l2.47,2.47L19,5A.75.75,0,0,1,20,6l-9,9A.74.74,0,0,1,10.5,15.25Z",
+    "M12,21a9,9,0,0,1-7.87-4.66,8.67,8.67,0,0,1-1.07-3.41A9,9,0,0,1,7.66,4.12a8.67,8.67,0,0,1,3.41-1.07,8.86,8.86,0,0,1,3.55.34.75.75,0,1,1-.43,1.43,7.62,7.62,0,0,0-3-.28,7.43,7.43,0,0,0-2.84.89,7.5,7.5,0,0,0-2.2,1.84,7.42,7.42,0,0,0-1.64,5.51,7.43,7.43,0,0,0,.89,2.84,7.5,7.5,0,0,0,1.84,2.2,7.42,7.42,0,0,0,5.51,1.64,7.43,7.43,0,0,0,2.84-.89,7.5,7.5,0,0,0,2.2-1.84,7.42,7.42,0,0,0,1.64-5.51A.75.75,0,1,1,21,11.07a9,9,0,0,1-4.61,8.81A8.67,8.67,0,0,1,12.93,21C12.62,21,12.3,21,12,21Z",
+  ],
+  'info-circle': [
+    "M12,16.75a.76.76,0,0,1-.75-.75V11a.75.75,0,0,1,1.5,0v5A.76.76,0,0,1,12,16.75Z",
+    "M12,9.25a.76.76,0,0,1-.75-.75V8a.75.75,0,0,1,1.5,0v.5A.76.76,0,0,1,12,9.25Z",
+    "M12,21a9,9,0,1,1,9-9A9,9,0,0,1,12,21ZM12,4.5A7.5,7.5,0,1,0,19.5,12,7.5,7.5,0,0,0,12,4.5Z",
+  ],
+  'exclamation-triangle': [
+    "M20,18.75H4a.76.76,0,0,1-.65-.37.77.77,0,0,1,0-.75l8-14a.78.78,0,0,1,1.3,0l8,14a.77.77,0,0,1,0,.75A.76.76,0,0,1,20,18.75ZM5.29,17.25H18.71L12,5.51Z",
+    "M12,13.25a.76.76,0,0,1-.75-.75V9a.75.75,0,0,1,1.5,0v3.5A.76.76,0,0,1,12,13.25Z",
+    "M12,16.25a.76.76,0,0,1-.75-.75V15a.75.75,0,0,1,1.5,0v.5A.76.76,0,0,1,12,16.25Z",
+  ],
+  'upload': [
+    "M18.22,20.75H5.78A2.64,2.64,0,0,1,3.25,18V15a.75.75,0,0,1,1.5,0v3a1.16,1.16,0,0,0,1,1.25H18.22a1.16,1.16,0,0,0,1-1.25V15a.75.75,0,0,1,1.5,0v3A2.64,2.64,0,0,1,18.22,20.75Z",
+    "M16,8.75a.74.74,0,0,1-.53-.22L12,5.06,8.53,8.53A.75.75,0,0,1,7.47,7.47l4-4a.75.75,0,0,1,1.06,0l4,4a.75.75,0,0,1,0,1.06A.74.74,0,0,1,16,8.75Z",
+    "M12,15.75a.76.76,0,0,1-.75-.75V4a.75.75,0,0,1,1.5,0V15A.76.76,0,0,1,12,15.75Z",
+  ],
+  'download': [
+    "M18.22,20.75H5.78A2.64,2.64,0,0,1,3.25,18V15a.75.75,0,0,1,1.5,0v3a1.16,1.16,0,0,0,1,1.25H18.22a1.16,1.16,0,0,0,1-1.25V15a.75.75,0,0,1,1.5,0v3A2.64,2.64,0,0,1,18.22,20.75Z",
+    "M12,15.75a.74.74,0,0,1-.53-.22l-4-4a.75.75,0,0,1,1.06-1.06L12,13.94l3.47-3.47a.75.75,0,0,1,1.06,1.06l-4,4A.74.74,0,0,1,12,15.75Z",
+    "M12,15.75a.76.76,0,0,1-.75-.75V4a.75.75,0,0,1,1.5,0V15A.76.76,0,0,1,12,15.75Z",
+  ],
+  'calendar': [
+    "M17,4.25H15.75V3a.75.75,0,0,0-1.5,0V4.25H9.75V3a.75.75,0,0,0-1.5,0V4.25H7A2.75,2.75,0,0,0,4.25,7V18A2.75,2.75,0,0,0,7,20.75H17A2.75,2.75,0,0,0,19.75,18V7A2.75,2.75,0,0,0,17,4.25ZM7,5.75H8.25V7a.75.75,0,0,0,1.5,0V5.75h4.5V7a.75.75,0,0,0,1.5,0V5.75H17A1.25,1.25,0,0,1,18.25,7V9.75H5.75V7A1.25,1.25,0,0,1,7,5.75Zm10,13.5H7A1.25,1.25,0,0,1,5.75,18V11.25h12.5V18A1.25,1.25,0,0,1,17,19.25Z",
+  ],
+  'clock': [
+    "M12,21a9,9,0,1,1,9-9A9,9,0,0,1,12,21ZM12,4.5A7.5,7.5,0,1,0,19.5,12,7.5,7.5,0,0,0,12,4.5Z",
+    "M15,12.75H12a.76.76,0,0,1-.75-.75V7a.75.75,0,0,1,1.5,0v4.25H15a.75.75,0,0,1,0,1.5Z",
+  ],
+  'user': [
+    "M12,12.25A3.75,3.75,0,1,1,15.75,8.5,3.75,3.75,0,0,1,12,12.25Zm0-6A2.25,2.25,0,1,0,14.25,8.5,2.25,2.25,0,0,0,12,6.25Z",
+    "M19,19.25a.76.76,0,0,1-.75-.75c0-1.95-1.06-3.25-6.25-3.25s-6.25,1.3-6.25,3.25a.75.75,0,0,1-1.5,0c0-4.75,5.43-4.75,7.75-4.75s7.75,0,7.75,4.75A.76.76,0,0,1,19,19.25Z",
+  ],
+  'users': [
+    "M14,12.25A3.75,3.75,0,1,1,17.75,8.5,3.75,3.75,0,0,1,14,12.25Zm0-6A2.25,2.25,0,1,0,16.25,8.5,2.25,2.25,0,0,0,14,6.25Z",
+    "M21,19.25a.76.76,0,0,1-.75-.75c0-1.95-1.06-3.25-6.25-3.25s-6.25,1.3-6.25,3.25a.75.75,0,0,1-1.5,0c0-4.75,5.43-4.75,7.75-4.75s7.75,0,7.75,4.75A.76.76,0,0,1,21,19.25Z",
+    "M8.32,13.06H8a3,3,0,1,1,.58-6,.75.75,0,1,1-.15,1.49,1.46,1.46,0,0,0-1.09.34,1.47,1.47,0,0,0-.54,1,1.49,1.49,0,0,0,1.35,1.64,1.53,1.53,0,0,0,.93-.22.75.75,0,0,1,.79,1.28A3,3,0,0,1,8.32,13.06Z",
+    "M3,18.5a.76.76,0,0,1-.75-.75c0-2.7.72-4.5,4.25-4.5a.75.75,0,0,1,0,1.5c-2.35,0-2.75.75-2.75,3A.76.76,0,0,1,3,18.5Z",
+  ],
+  'home': [
+    "M20,11.75a.74.74,0,0,1-.45-.15L12,5.94,4.45,11.6a.75.75,0,0,1-.9-1.2l8-6a.75.75,0,0,1,.9,0l8,6a.75.75,0,0,1,.15,1A.74.74,0,0,1,20,11.75Z",
+    "M18,19.75H6A.76.76,0,0,1,5.25,19V9.5a.75.75,0,0,1,1.5,0v8.75h10.5V9.5a.75.75,0,0,1,1.5,0V19A.76.76,0,0,1,18,19.75Z",
+    "M14,19.75a.76.76,0,0,1-.75-.75V12.75h-2.5V19a.75.75,0,0,1-1.5,0V12a.76.76,0,0,1,.75-.75h4a.76.76,0,0,1,.75.75v7A.76.76,0,0,1,14,19.75Z",
+  ],
+  'settings': [
+    "M12,14.93A2.93,2.93,0,1,1,14.93,12,2.93,2.93,0,0,1,12,14.93Zm0-4.36A1.43,1.43,0,1,0,13.43,12,1.43,1.43,0,0,0,12,10.57Z",
+    "M12.06,20.75a2.22,2.22,0,0,1-2.21-2.24.48.48,0,0,0-.29-.42.51.51,0,0,0-.56.09,2.24,2.24,0,0,1-1.56.65,2.26,2.26,0,0,1-1.58-.63,2.22,2.22,0,0,1,0-3.14A.5.5,0,0,0,6,14.54a.56.56,0,0,0-.48-.28,2.27,2.27,0,0,1-2.26-2.2A2.22,2.22,0,0,1,5.49,9.85a.48.48,0,0,0,.42-.29A.51.51,0,0,0,5.82,9a2.24,2.24,0,0,1-.65-1.56A2.2,2.2,0,0,1,5.8,5.86a2.22,2.22,0,0,1,3.14,0A.58.58,0,0,0,9.49,6a.6.6,0,0,0,.31-.48A2.27,2.27,0,0,1,12,3.25a2.22,2.22,0,0,1,2.2,2.24.52.52,0,0,0,.28.44A.5.5,0,0,0,15,5.82a2.24,2.24,0,0,1,1.56-.65,2.13,2.13,0,0,1,1.58.63,2.22,2.22,0,0,1,0,3.14.58.58,0,0,0-.11.55.6.6,0,0,0,.48.31A2.27,2.27,0,0,1,20.75,12a2.22,2.22,0,0,1-2.24,2.2.52.52,0,0,0-.44.28h0a.5.5,0,0,0,.11.52,2.24,2.24,0,0,1,.65,1.56,2.2,2.2,0,0,1-.63,1.58,2.22,2.22,0,0,1-3.14,0,.5.5,0,0,0-.52-.11.56.56,0,0,0-.28.48A2.27,2.27,0,0,1,12.06,20.75ZM9.35,16.54a1.83,1.83,0,0,1,.77.16,2,2,0,0,1,1.23,1.8.74.74,0,0,0,.71.75.76.76,0,0,0,.7-.77,2.06,2.06,0,0,1,1.18-1.85,2,2,0,0,1,2.18.43.7.7,0,1,0,1-1,2,2,0,0,1-.42-2.18,2,2,0,0,1,1.82-1.18.73.73,0,0,0,.74-.7.75.75,0,0,0-.77-.7,2.1,2.1,0,0,1-1.85-1.22,2.05,2.05,0,0,1,.43-2.2.7.7,0,1,0-1-1,2,2,0,0,1-3.36-1.4.73.73,0,0,0-.7-.74.75.75,0,0,0-.7.77,2.1,2.1,0,0,1-1.22,1.85,2.05,2.05,0,0,1-2.2-.43.7.7,0,1,0-1,1,2,2,0,0,1,.41,2.18,2,2,0,0,1-1.8,1.23.74.74,0,0,0-.75.71.76.76,0,0,0,.77.7,2.06,2.06,0,0,1,1.85,1.18,2,2,0,0,1-.43,2.18.7.7,0,1,0,1,1A2.06,2.06,0,0,1,9.35,16.54Zm8-2.36h0Z",
+  ],
+  'menu-bars': [
+    "M19,12.75H5a.75.75,0,0,1,0-1.5H19a.75.75,0,0,1,0,1.5Z",
+    "M19,8.25H5a.75.75,0,0,1,0-1.5H19a.75.75,0,0,1,0,1.5Z",
+    "M19,17.25H5a.75.75,0,0,1,0-1.5H19a.75.75,0,0,1,0,1.5Z",
+  ],
+  'ellipsis-h': [
+    "M10.25,12 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+    "M17.25,12 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+    "M3.25,12 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+  ],
+  'ellipsis-v': [
+    "M10.25,12 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+    "M10.25,5 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+    "M10.25,19 a1.75,1.75 0 1,0 3.5,0 a1.75,1.75 0 1,0 -3.5,0Z",
+  ],
+  'pencil': [
+    "M4.21,20.52a.73.73,0,0,1-.52-.21.75.75,0,0,1-.22-.6l.31-3.84A.73.73,0,0,1,4,15.4L15.06,4.34a3.19,3.19,0,0,1,2.28-.86,3.3,3.3,0,0,1,2.25.91,3.31,3.31,0,0,1,.11,4.5L8.63,20a.77.77,0,0,1-.46.22l-3.89.35Zm1-4.26L5,19l2.74-.25L18.64,7.83A1.72,1.72,0,0,0,17.31,5a1.61,1.61,0,0,0-1.19.42h0ZM15.59,4.87h0Z",
+  ],
+  'trash': [
+    "M20,8.7H4A.75.75,0,1,1,4,7.2H20a.75.75,0,0,1,0,1.5Z",
+    "M16.44,20.75H7.56A2.4,2.4,0,0,1,5,18.49V8a.75.75,0,0,1,1.5,0V18.49c0,.41.47.76,1,.76h8.88c.56,0,1-.35,1-.76V8A.75.75,0,1,1,19,8V18.49A2.4,2.4,0,0,1,16.44,20.75Zm.12-13A.74.74,0,0,1,15.81,7V5.51c0-.41-.48-.76-1-.76H9.22c-.55,0-1,.35-1,.76V7a.75.75,0,1,1-1.5,0V5.51A2.41,2.41,0,0,1,9.22,3.25h5.56a2.41,2.41,0,0,1,2.53,2.26V7A.75.75,0,0,1,16.56,7.76Z",
+    "M10.22,17a.76.76,0,0,1-.75-.75V11.72a.75.75,0,0,1,1.5,0v4.52A.75.75,0,0,1,10.22,17Z",
+    "M13.78,17a.75.75,0,0,1-.75-.75V11.72a.75.75,0,0,1,1.5,0v4.52A.76.76,0,0,1,13.78,17Z",
+  ],
+  'eye': [
+    "M12,18.75c-5.83,0-8.57-6.19-8.69-6.45a.78.78,0,0,1,0-.6c.12-.26,2.86-6.45,8.69-6.45s8.57,6.19,8.69,6.45a.78.78,0,0,1,0,.6C20.57,12.56,17.83,18.75,12,18.75ZM4.83,12c.59,1.15,3,5.25,7.17,5.25s6.58-4.1,7.17-5.25c-.59-1.15-3-5.25-7.17-5.25S5.42,10.85,4.83,12Z",
+    "M12,15.25A3.25,3.25,0,1,1,15.25,12,3.26,3.26,0,0,1,12,15.25Zm0-5A1.75,1.75,0,1,0,13.75,12,1.76,1.76,0,0,0,12,10.25Z",
+  ],
+  'eye-slash': [
+    "M20.69,11.7c-.12-.26-2.86-6.45-8.69-6.45a7.67,7.67,0,0,0-1.66.18.75.75,0,0,0,.32,1.46A6.62,6.62,0,0,1,12,6.75c4.18,0,6.58,4.1,7.17,5.25a13.28,13.28,0,0,1-1.26,2,.75.75,0,0,0,.59,1.21.75.75,0,0,0,.59-.29,13.42,13.42,0,0,0,1.6-2.59A.78.78,0,0,0,20.69,11.7Z",
+    "M6.53,5.47A.75.75,0,0,0,5.47,6.53l.92.92a13.16,13.16,0,0,0-3.08,4.26.76.76,0,0,0,0,.59c.12.26,2.86,6.45,8.69,6.45a7.93,7.93,0,0,0,4.39-1.3l1.08,1.08a.75.75,0,0,0,1.06,0,.75.75,0,0,0,0-1.06Zm3.83,6,2.21,2.22a1.81,1.81,0,0,1-1.81-.4A1.74,1.74,0,0,1,10.36,11.42ZM12,17.25c-4.19,0-6.58-4.11-7.17-5.25A12,12,0,0,1,7.45,8.51L9.24,10.3a3.24,3.24,0,0,0,4.46,4.46l1.61,1.61A6.5,6.5,0,0,1,12,17.25Z",
+  ],
+  'refresh': [
+    "M12,20.75a7.25,7.25,0,0,1,0-14.5h2.5a.75.75,0,0,1,0,1.5H12a5.75,5.75,0,1,0,5.75,5.75.75.75,0,0,1,1.5,0A7.26,7.26,0,0,1,12,20.75Z",
+    "M12,10.75a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06L13.94,7,11.47,4.53a.75.75,0,1,1,1.06-1.06l3,3a.75.75,0,0,1,0,1.06l-3,3A.74.74,0,0,1,12,10.75Z",
+  ],
+  'filter': [
+    "M14,20.5H10a.76.76,0,0,1-.75-.75V12L3.9,4.69a.73.73,0,0,1-.07-.78A.76.76,0,0,1,4.5,3.5h15a.76.76,0,0,1,.67.41.73.73,0,0,1-.07.78L14.75,12v7.75A.76.76,0,0,1,14,20.5ZM10.75,19h2.5V11.75a.71.71,0,0,1,.15-.44L18,5H6l4.62,6.31a.71.71,0,0,1,.15.44Z",
+  ],
+  // filter-fill + filter-slash — chuyển hóa từ table/icons.tsx (svg 14×14 tự vẽ,
+  // xoá khi migrate Table 2026-10-24): scale path ×12/7 (24/14) lên hệ toạ độ 24;
+  // slash là hình bình hành FILL dày 2.06 (≈ stroke 1.2 bản 14 — PATHS không hỗ trợ stroke).
+  'filter-fill': [
+    "M0.857,2.571h22.286L15.429,12.857v7.714l-6.857,-2.571V12.857L0.857,2.571z",
+  ],
+  'filter-slash': [
+    "M0.857,2.571h22.286L15.429,12.857v7.714l-6.857,-2.571V12.857L0.857,2.571z",
+    "M2.727,22.227L22.227,2.727L20.773,1.273L1.273,20.773z",
+  ],
+  'sort': [
+    "M18,10.75H6a.74.74,0,0,1-.69-.46.75.75,0,0,1,.16-.82l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,.16.82A.74.74,0,0,1,18,10.75ZM7.81,9.25h8.38L12,5.06Z",
+    "M12,20.75a.74.74,0,0,1-.53-.22l-6-6a.75.75,0,0,1-.16-.82A.74.74,0,0,1,6,13.25H18a.74.74,0,0,1,.69.46.75.75,0,0,1-.16.82l-6,6A.74.74,0,0,1,12,20.75Zm-4.19-6L12,18.94l4.19-4.19Z",
+  ],
+  'sort-up': [
+    "M19,16.25H5a.74.74,0,0,1-.69-.46A.75.75,0,0,1,4.47,15l7-7a.75.75,0,0,1,1.06,0l7,7a.75.75,0,0,1,.16.82A.74.74,0,0,1,19,16.25ZM6.81,14.75H17.19L12,9.56Z",
+  ],
+  'sort-down': [
+    "M12,16.25a.74.74,0,0,1-.53-.22l-7-7A.75.75,0,0,1,5,7.75H19A.75.75,0,0,1,19.53,9l-7,7A.74.74,0,0,1,12,16.25Zm-5.19-7L12,14.44l5.19-5.19Z",
+  ],
+  'arrow-up': [
+    "M18,11.75a.74.74,0,0,1-.53-.22L12,6.06,6.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,18,11.75Z",
+    "M12,19.75a.76.76,0,0,1-.75-.75V5a.75.75,0,0,1,1.5,0V19A.76.76,0,0,1,12,19.75Z",
+  ],
+  'arrow-down': [
+    "M12,19.75a.74.74,0,0,1-.53-.22l-6-6a.75.75,0,0,1,1.06-1.06L12,17.94l5.47-5.47a.75.75,0,0,1,1.06,1.06l-6,6A.74.74,0,0,1,12,19.75Z",
+    "M12,19.75a.76.76,0,0,1-.75-.75V5a.75.75,0,0,1,1.5,0V19A.76.76,0,0,1,12,19.75Z",
+  ],
+  'arrow-left': [
+    "M11,18.75a.74.74,0,0,1-.53-.22l-6-6a.75.75,0,0,1,0-1.06l6-6a.75.75,0,0,1,1.06,1.06L6.06,12l5.47,5.47a.75.75,0,0,1,0,1.06A.74.74,0,0,1,11,18.75Z",
+    "M19,12.75H5a.75.75,0,0,1,0-1.5H19a.75.75,0,0,1,0,1.5Z",
+  ],
+  'arrow-right': [
+    "M13,18.75a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06L17.94,12,12.47,6.53a.75.75,0,0,1,1.06-1.06l6,6a.75.75,0,0,1,0,1.06l-6,6A.74.74,0,0,1,13,18.75Z",
+    "M19,12.75H5a.75.75,0,0,1,0-1.5H19a.75.75,0,0,1,0,1.5Z",
+  ],
+  'caret-up': [
+    "M18,16.75H6a.76.76,0,0,1-.67-.41.75.75,0,0,1,.07-.79l6-8a.77.77,0,0,1,1.2,0l6,8a.75.75,0,0,1,.07.79A.76.76,0,0,1,18,16.75ZM7.5,15.25h9l-4.5-6Z",
+  ],
+  'caret-down': [
+    "M12,16.75a.74.74,0,0,1-.6-.3l-6-8a.75.75,0,0,1-.07-.79A.76.76,0,0,1,6,7.25H18a.76.76,0,0,1,.67.41.75.75,0,0,1-.07.79l-6,8A.74.74,0,0,1,12,16.75Zm-4.5-8,4.5,6,4.5-6Z",
+  ],
+  'caret-left': [
+    "M16,18.75a.74.74,0,0,1-.45-.15l-8-6a.75.75,0,0,1,0-1.2l8-6a.75.75,0,0,1,.79-.07.76.76,0,0,1,.41.67V18a.76.76,0,0,1-.41.67A.84.84,0,0,1,16,18.75ZM9.25,12l6,4.5v-9Z",
+  ],
+  'caret-right': [
+    "M8,18.75a.76.76,0,0,1-.33-.08A.75.75,0,0,1,7.25,18V6a.75.75,0,0,1,.42-.67.74.74,0,0,1,.78.07l8,6a.75.75,0,0,1,0,1.2l-8,6A.74.74,0,0,1,8,18.75ZM8.75,7.5v9l6-4.5Z",
+  ],
+  'star': [
+    "M17.2,20.75a.73.73,0,0,1-.35-.09L12,18.11,7.15,20.66a.75.75,0,0,1-.79-.05.76.76,0,0,1-.3-.74L7,14.47,3.06,10.65a.75.75,0,0,1-.18-.77.74.74,0,0,1,.6-.51L8.9,8.58l2.43-4.91a.78.78,0,0,1,1.34,0L15.1,8.58l5.42.79a.74.74,0,0,1,.6.51.75.75,0,0,1-.18.77L17,14.47l.93,5.4a.76.76,0,0,1-.3.74A.79.79,0,0,1,17.2,20.75ZM12,16.52a.85.85,0,0,1,.35.08l3.85,2-.73-4.29a.78.78,0,0,1,.21-.67l3.12-3L14.49,10a.76.76,0,0,1-.56-.41L12,5.69,10.07,9.6a.76.76,0,0,1-.56.41l-4.31.63,3.12,3a.78.78,0,0,1,.21.67L7.8,18.63l3.85-2A.85.85,0,0,1,12,16.52Z",
+  ],
+  'heart': [
+    "M12,19.75a.75.75,0,0,1-.53-.22L4.7,12.74a5,5,0,0,1,0-7,4.95,4.95,0,0,1,7,0L12,6l.28-.28a4.92,4.92,0,0,1,3.51-1.46h0A4.92,4.92,0,0,1,19.3,5.71h0a5,5,0,0,1,0,7l-6.77,6.79A.75.75,0,0,1,12,19.75Zm-3.79-14a3.44,3.44,0,0,0-2.45,1,3.48,3.48,0,0,0,0,4.91L12,17.94l6.23-6.26a3.47,3.47,0,0,0,0-4.91h0a3.4,3.4,0,0,0-2.44-1h0a3.44,3.44,0,0,0-2.45,1l-.81.81a.77.77,0,0,1-1.06,0l-.81-.81A3.44,3.44,0,0,0,8.21,5.75Z",
+  ],
+  'bell': [
+    "M20.53,16.25c-.09,0-2.11-.36-2.11-6.25C18.42,5.84,16,3.25,12,3.25S5.58,5.84,5.58,10c0,6-2.09,6.25-2.08,6.25a.75.75,0,0,0,0,1.5H8.33a3.74,3.74,0,0,0,7.34,0h4.84a.75.75,0,0,0,0-1.5Zm-8.53,3a2.24,2.24,0,0,1-2.11-1.5h4.22A2.24,2.24,0,0,1,12,19.25Zm-6.24-3c.72-1.09,1.32-3,1.32-6.25S8.88,4.75,12,4.75,16.92,6.66,16.92,10s.6,5.16,1.32,6.25Z",
+  ],
+  'external-link': [
+    "M18,20.75H6A2.75,2.75,0,0,1,3.25,18V6A2.75,2.75,0,0,1,6,3.25h6a.75.75,0,0,1,0,1.5H6A1.25,1.25,0,0,0,4.75,6V18A1.25,1.25,0,0,0,6,19.25H18A1.25,1.25,0,0,0,19.25,18V12a.75.75,0,0,1,1.5,0v6A2.75,2.75,0,0,1,18,20.75Z",
+    "M20,8.75A.76.76,0,0,1,19.25,8V4.75H16a.75.75,0,0,1,0-1.5h4a.76.76,0,0,1,.75.75V8A.76.76,0,0,1,20,8.75Z",
+    "M13.5,11.25A.74.74,0,0,1,13,11,.75.75,0,0,1,13,10l6.5-6.5a.75.75,0,1,1,1.06,1.06L14,11A.74.74,0,0,1,13.5,11.25Z",
+  ],
+  'copy': [
+    "M19.53,8,14,2.47a.75.75,0,0,0-.53-.22H11A2.75,2.75,0,0,0,8.25,5V6.25H7A2.75,2.75,0,0,0,4.25,9V19A2.75,2.75,0,0,0,7,21.75h7A2.75,2.75,0,0,0,16.75,19V17.75H17A2.75,2.75,0,0,0,19.75,15V8.5A.75.75,0,0,0,19.53,8ZM14.25,4.81l2.94,2.94H14.25Zm1,14.19A1.25,1.25,0,0,1,14,20.25H7A1.25,1.25,0,0,1,5.75,19V9A1.25,1.25,0,0,1,7,7.75H8.25V15A2.75,2.75,0,0,0,11,17.75h4.25ZM17,16.25H11A1.25,1.25,0,0,1,9.75,15V5A1.25,1.25,0,0,1,11,3.75h1.75V8.5a.76.76,0,0,0,.75.75h4.75V15A1.25,1.25,0,0,1,17,16.25Z",
+  ],
+  'help-circle': [
+    "M12,3C7.04,3,3,7.04,3,12s4.04,9,9,9,9-4.04,9-9S16.96,3,12,3Zm0,16.5c-4.14,0-7.5-3.36-7.5-7.5s3.36-7.5,7.5-7.5,7.5,3.36,7.5,7.5-3.36,7.5-7.5,7.5Zm2.3-11.8c.61,.61,.95,1.43,.95,2.3s-.34,1.68-.95,2.3c-.43,.43-.97,.73-1.55,.86v.34c0,.41-.34,.75-.75,.75s-.75-.34-.75-.75v-1c0-.41,.34-.75,.75-.75,.47,0,.91-.18,1.24-.51,.33-.33,.51-.77,.51-1.24s-.18-.91-.51-1.24c-.66-.66-1.81-.66-2.47,0-.33,.33-.51,.77-.51,1.24,0,.41-.34,.75-.75,.75s-.75-.34-.75-.75c0-.87,.34-1.68,.95-2.3,1.23-1.23,3.37-1.23,4.6,0Zm-1.3,8.55c0,.55-.45,1-1,1s-1-.45-1-1,.45-1,1-1,1,.45,1,1Z",
+  ],
+  'folder': [
+    "M17.5,19.25H6.5A2.75,2.75,0,0,1,3.75,16.5v-9A2.75,2.75,0,0,1,6.5,4.75H9A.77.77,0,0,1,9.57,5l2.77,3.24H17.5A2.75,2.75,0,0,1,20.25,11v5.5A2.75,2.75,0,0,1,17.5,19.25Zm-11-13A1.25,1.25,0,0,0,5.25,7.5v9A1.25,1.25,0,0,0,6.5,17.75h11a1.25,1.25,0,0,0,1.25-1.25V11A1.25,1.25,0,0,0,17.5,9.75H12a.77.77,0,0,1-.57-.26L8.66,6.25Z",
+  ],
+  'file': [
+    "M18.53,9,13,3.47a.75.75,0,0,0-.53-.22H8A2.75,2.75,0,0,0,5.25,6V18A2.75,2.75,0,0,0,8,20.75h8A2.75,2.75,0,0,0,18.75,18V9.5A.75.75,0,0,0,18.53,9ZM13.25,5.81l2.94,2.94H13.25ZM16,19.25H8A1.25,1.25,0,0,1,6.75,18V6A1.25,1.25,0,0,1,8,4.75h3.75V9.5a.76.76,0,0,0,.75.75h4.75V18A1.25,1.25,0,0,1,16,19.25Z",
+  ],
+} as const satisfies Record<IconName, readonly string[]>;
+
+// eslint-disable-next-line react-refresh/only-export-components -- ICON_NAMES là public API đọc được (docs/test); tách file riêng chỉ để tắt warning fast-refresh — chấp nhận.
+export const ICON_NAMES = Object.keys(PATHS) as IconName[];
+
+const FALLBACK: IconName = 'help-circle';
+
+export interface IconProps {
+  name: IconName;
+  /** Kích thước px (width + height) — default 14. */
+  size?: number;
+  className?: string;
+  /** Ẩn với screen reader — default true (icon decorative). */
+  'aria-hidden'?: boolean;
+}
+
+export function Icon({ name, size = 14, className, 'aria-hidden': ariaHidden = true }: IconProps) {
+  const paths = PATHS[name] ?? PATHS[FALLBACK];
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="currentColor"
+      aria-hidden={ariaHidden}
+      focusable="false"
+      className={className}
+    >
+      {paths.map((d, i) => (
+        <path key={i} d={d} />
+      ))}
+    </svg>
+  );
+}

package/stack-template/app/ui-kit/src/ui/image/image.stories.tsx

@@ -0,0 +1,231 @@
+// UiImage stories — real photography via picsum.photos (seeded URLs: stable
+// across loads, no auth, plain-CORS <img> safe). Matrix: basic, aspect ratios,
+// caption, click-to-zoom preview, gallery grid, error fallback, sizes, dark.
+// Tests stay offline (image.test.tsx uses local paths — network-free by design).
+import { useEffect, useRef, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from '../icons/index.js';
+import { UiImage } from './index';
+
+// Meta WITHOUT `component` — src/alt are required props, and CSF types then
+// force `args` onto every story (render-only stories would fail typecheck).
+const meta = { title: 'Data Display/Image', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Seeded picsum URL — deterministic real photo per seed name. */
+function photo(seed: string, w: number, h: number) {
+  return `https://picsum.photos/seed/${seed}/${w}/${h}`;
+}
+
+const VALLEY = photo('orca-valley', 1280, 720);
+
+/** Basic — a real photo with a descriptive alt (alt also names the preview dialog). */
+export const Basic: Story = {
+  name: 'Basic — real photo with descriptive alt',
+  render: () => (
+    <UiImage src={VALLEY} alt="Mountain valley landscape at dawn (picsum seed: orca-valley)" width={400} />
+  ),
+};
+
+/** AspectRatios — one source framed 16:9 / 4:3 / 1:1 / 9:16 via wrapper + object-cover. */
+export const AspectRatios: Story = {
+  name: 'Aspect ratios — 16:9 / 4:3 / 1:1 / 9:16',
+  render: () => (
+    <div className="grid max-w-3xl grid-cols-2 items-start gap-4 sm:grid-cols-4">
+      {(
+        [
+          ['16:9', 'aspect-video', photo('orca-city', 640, 360), 'City skyline (picsum seed: orca-city)'],
+          ['4:3', 'aspect-[4/3]', photo('orca-harbor', 640, 480), 'Harbor at midday (picsum seed: orca-harbor)'],
+          ['1:1', 'aspect-square', photo('orca-plaza', 640, 640), 'Stone plaza square crop (picsum seed: orca-plaza)'],
+          ['9:16', 'aspect-[9/16]', photo('orca-tower', 360, 640), 'Tower, tall crop (picsum seed: orca-tower)'],
+        ] as const
+      ).map(([ratio, aspect, src, alt]) => (
+        <figure key={ratio} className="m-0 flex flex-col gap-2">
+          <div className={`overflow-hidden rounded-lg ${aspect}`}>
+            <UiImage src={src} alt={alt} className="h-full w-full object-cover" />
+          </div>
+          <figcaption className="text-center font-mono text-meta text-ink3">{ratio}</figcaption>
+        </figure>
+      ))}
+    </div>
+  ),
+};
+
+/** WithCaption — image in a figure with a caption + supporting description line. */
+export const WithCaption: Story = {
+  name: 'With caption — figure + caption + description',
+  render: () => (
+    <figure className="m-0 flex w-fit flex-col gap-2">
+      <UiImage
+        src={photo('orca-coast', 960, 540)}
+        alt="Rocky coastline under an overcast sky (picsum seed: orca-coast)"
+        width={420}
+        className="w-[420px] object-cover"
+      />
+      <figcaption>
+        <span className="text-body font-medium text-ink">Coastal survey — site 12</span>
+        <span className="mt-1 block text-meta text-ink3">
+          Reference shot for the field report; click the image to open the zoom preview.
+        </span>
+      </figcaption>
+    </figure>
+  ),
+};
+
+/** PreviewZoom — high-res source (1600×900) shown small; the overlay keeps it sharp. */
+export const PreviewZoom: Story = {
+  name: 'Preview zoom — hi-res source stays sharp in the overlay',
+  render: () => (
+    <div className="flex max-w-md flex-col gap-3">
+      <UiImage
+        src={photo('orca-gallery', 1600, 900)}
+        alt="Gallery hero photo, high resolution (picsum seed: orca-gallery)"
+        width={320}
+      />
+      <span className="text-meta text-ink3">
+        Thumbnail renders at 320px from a 1600×900 source — click it: the overlay shows the full-resolution
+        image, ESC or a click on the backdrop closes.
+      </span>
+    </div>
+  ),
+};
+
+/** GalleryGrid — four real photos in a 2-col grid; each opens its own preview. */
+export const GalleryGrid: Story = {
+  name: 'Gallery grid — 4 real photos, click to zoom any tile',
+  render: () => (
+    <div className="grid max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
+      {(
+        [
+          ['orca-team', 600, 400, 'Team standup around a table (picsum seed: orca-team)'],
+          ['orca-workshop', 600, 400, 'Engineer working at a bench (picsum seed: orca-workshop)'],
+          ['orca-code', 600, 400, 'Screen with code, close-up (picsum seed: orca-code)'],
+          ['orca-forest', 600, 400, 'Forest trail, natural light (picsum seed: orca-forest)'],
+        ] as const
+      ).map(([seed, w, h, alt]) => (
+        <UiImage key={seed} src={photo(seed, w, h)} alt={alt} className="aspect-[3/2] w-full object-cover" />
+      ))}
+    </div>
+  ),
+};
+
+/** ErrorState — broken URL degrades to a graceful placeholder, not a broken-image icon. */
+export const ErrorState: Story = {
+  name: 'Error state — broken URL → graceful fallback',
+  render: () => <ErrorStateDemo />,
+};
+
+/** Sizes — width as px number vs CSS string percentage. */
+export const Sizes: Story = {
+  name: 'Sizes — width px vs percentage',
+  render: () => (
+    <div className="flex flex-wrap items-start gap-4">
+      <UiImage
+        src={photo('orca-street', 480, 320)}
+        alt="Street scene at 240 px wide (picsum seed: orca-street)"
+        width={240}
+      />
+      <div className="w-64">
+        <UiImage
+          src={photo('orca-street', 480, 320)}
+          alt="Street scene at 100% container width (picsum seed: orca-street)"
+          className="w-full object-cover"
+        />
+      </div>
+    </div>
+  ),
+};
+
+/** DarkTheme — real photo on the dark canvas (tokens cascade, no per-component work). */
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="w-fit rounded-xl bg-canvas p-4">
+      <UiImage src={photo('orca-night', 800, 450)} alt="Night scene on dark canvas (picsum seed: orca-night)" width={360} />
+    </div>
+  ),
+};
+
+/**
+ * ErrorState demo — UiImage has no built-in fallback, so the wrapper listens for
+ * the <img> error event in the capture phase (resource errors don't bubble) and
+ * swaps the image for a quiet placeholder. Copy this pattern in consumers.
+ */
+function ErrorStateDemo() {
+  const [failed, setFailed] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const onErr = () => setFailed(true);
+    el.addEventListener('error', onErr, true);
+    return () => el.removeEventListener('error', onErr, true);
+  }, []);
+
+  if (failed) {
+    return (
+      <div
+        role="status"
+        className="flex h-52 w-80 flex-col items-center justify-center gap-2 rounded-lg border border-line bg-s2"
+      >
+        <Icon name="file" size={24} className="text-ink3" />
+        <span className="px-6 text-center text-meta text-ink3">Image unavailable — check the URL or re-upload.</span>
+      </div>
+    );
+  }
+  return (
+    <div ref={wrapRef}>
+      <UiImage src="https://invalid.example/x.jpg" alt="Broken image URL demo" width={320} />
+    </div>
+  );
+}
+
+// ── Real-world usage (2026-10-25): product & editorial contexts ──
+
+const PRODUCTS = [
+  { seed: 'product-teapot', name: 'Stoneware teapot', price: '$42' },
+  { seed: 'product-lamp', name: 'Brass desk lamp', price: '$88' },
+  { seed: 'product-chair', name: 'Oak lounge chair', price: '$240' },
+  { seed: 'product-mug', name: 'Ceramic mug set', price: '$28' },
+];
+
+/** ProductAlbum — e-commerce grid: 4 photo tiles, name + price captions, each tile zooms. */
+export const ProductAlbum: Story = {
+  name: 'Product album — 4-photo grid with name + price captions',
+  render: () => (
+    <div className="grid max-w-2xl grid-cols-2 gap-4">
+      {PRODUCTS.map((p) => (
+        <figure key={p.seed} className="m-0 flex flex-col gap-2">
+          <UiImage
+            src={photo(p.seed, 600, 450)}
+            alt={`${p.name} on a neutral background (picsum seed: ${p.seed})`}
+            className="aspect-[4/3] w-full rounded-lg object-cover"
+          />
+          <figcaption className="flex items-baseline justify-between gap-2">
+            <span className="text-body font-medium text-ink">{p.name}</span>
+            <span className="font-mono text-meta text-ink2">{p.price}</span>
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+  ),
+};
+
+/** ArticleCover — editorial hero: full-width 1200×630 cover + figcaption credit line. */
+export const ArticleCover: Story = {
+  name: 'Article cover — full-width hero + figcaption credit',
+  render: () => (
+    <figure className="m-0 flex max-w-2xl flex-col gap-2">
+      <UiImage
+        src={photo('orca-article-cover', 1200, 630)}
+        alt="Rolling hills at golden hour — article cover photo (picsum seed: orca-article-cover)"
+        className="aspect-[1200/630] w-full rounded-xl object-cover"
+      />
+      <figcaption className="text-meta text-ink3">
+        Field notes from the design systems offsite, October 2026 — click the cover to zoom.
+      </figcaption>
+    </figure>
+  ),
+};

package/stack-template/app/ui-kit/src/ui/image/image.test.tsx

@@ -0,0 +1,79 @@
+// Image tests — img render + preview portal + ESC đóng (+ keyboard mở preview batch ⑫).
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { UiImage } from './index.js';
+
+afterEach(cleanup);
+
+describe('UiImage', () => {
+  it('img render với alt + width (role button vì click mở preview — batch ⑫)', () => {
+    render(<UiImage src="/a.png" alt="Ảnh demo" width={200} />);
+    const img = screen.getByRole('button', { name: 'Ảnh demo — phóng to' });
+    expect(img).toHaveAttribute('width', '200');
+    expect(img).toHaveAttribute('alt', 'Ảnh demo');
+  });
+
+  it('click → preview portal; ESC đóng', async () => {
+    const user = userEvent.setup();
+    render(<UiImage src="/a.png" alt="Ảnh demo" />);
+    await user.click(screen.getByRole('button', { name: 'Ảnh demo — phóng to' }));
+    expect(document.querySelector('[data-testid="image-preview"]')).not.toBeNull();
+    await user.keyboard('{Escape}');
+    expect(document.querySelector('[data-testid="image-preview"]')).toBeNull();
+  });
+
+  it('keyboard: Enter/Space mở preview (a11y batch ⑫)', () => {
+    render(<UiImage src="/a.png" alt="Ảnh demo" />);
+    const img = screen.getByRole('button', { name: 'Ảnh demo — phóng to' });
+    fireEvent.keyDown(img, { key: 'Enter' });
+    expect(document.querySelector('[data-testid="image-preview"]')).not.toBeNull();
+  });
+});
+
+describe('UiImage — branch phụ', () => {
+  it('width undefined + className → img không width attr', () => {
+    render(<UiImage src="/b.png" alt="b" className="marker-img" />);
+    const img = screen.getByRole('button', { name: 'b — phóng to' });
+    expect(img).not.toHaveAttribute('width');
+    expect(img).toHaveClass('marker-img');
+  });
+
+  it('width string → passthrough nguyên văn (%, ch)', () => {
+    render(<UiImage src="/b.png" alt="b" width="50%" />);
+    expect(screen.getByRole('button', { name: 'b — phóng to' })).toHaveAttribute('width', '50%');
+  });
+});
+
+describe('UiImage — preview dialog (a11y batch F)', () => {
+  it('overlay là dialog: role=dialog + aria-modal + aria-label=alt', async () => {
+    const user = userEvent.setup();
+    render(<UiImage src="/a.png" alt="Ảnh demo" />);
+    await user.click(screen.getByRole('button', { name: 'Ảnh demo — phóng to' }));
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).toHaveAttribute('aria-label', 'Ảnh demo');
+  });
+
+  it('click overlay → đóng preview', async () => {
+    const user = userEvent.setup();
+    render(<UiImage src="/a.png" alt="Ảnh demo" />);
+    await user.click(screen.getByRole('button', { name: 'Ảnh demo — phóng to' }));
+    await user.click(screen.getByRole('dialog'));
+    expect(document.querySelector('[data-testid="image-preview"]')).toBeNull();
+  });
+
+  it('focus trap: mở → focus overlay, đóng → trả focus về thumbnail', async () => {
+    const user = userEvent.setup();
+    render(<UiImage src="/a.png" alt="Ảnh demo" />);
+    const thumb = screen.getByRole('button', { name: 'Ảnh demo — phóng to' });
+    await user.click(thumb);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveFocus(); // không focusable bên trong → focus chính overlay
+    // Tab vòng trong — focus không thoát khỏi dialog
+    await user.tab();
+    expect(dialog).toContainElement(document.activeElement as HTMLElement);
+    await user.keyboard('{Escape}');
+    expect(thumb).toHaveFocus(); // trả focus về trigger
+  });
+});