cynx-lib 1.3.80 → 1.3.81

package/utils/utils/storage_manager.cjs

@@ -224,6 +224,24 @@ class StorageManager {
   invalidateStorageCache() {
     this.activeStorageCache = { data: null, ts: 0 };
   }
+  async _hasInspectionColumn() {
+    if (this._hasInspectionCol !== void 0) return this._hasInspectionCol;
+    if (!this.query) {
+      this._hasInspectionCol = false;
+      return false;
+    }
+    try {
+      const res = await this.query(
+        `SELECT 1 FROM information_schema.columns WHERE table_name = $1 AND column_name = 'inspection_id' LIMIT 1`,
+        [this.filesTable]
+      );
+      this._hasInspectionCol = res.rows && res.rows.length > 0;
+      return this._hasInspectionCol;
+    } catch {
+      this._hasInspectionCol = false;
+      return false;
+    }
+  }
   async getCachedFileRecord(fileId) {
     if (!fileId) return null;
     const now = Date.now();
@@ -918,7 +936,7 @@ class StorageManager {
     this._streamHttp(file, req, res, isInline, redirectCount);
   }
   _streamHttp(file, req, res, isInline, redirectCount = 0, knownProvider = null) {
-    let targetUrl = file.cloud_url;
+    let targetUrl = file.cloud_url || file.url || file.view_url;
     if (!targetUrl) {
       if (file.storage_id && file.cloud_public_id) {
         return this._streamFromS3(file, req, res, isInline);
@@ -935,6 +953,7 @@ class StorageManager {
     if (req?.headers && req.headers["range"]) {
       requestHeaders["Range"] = req.headers["range"];
     }
+    requestHeaders["Accept-Encoding"] = "identity";
     client.get(targetUrl, { agent, headers: requestHeaders }, (cloudRes) => {
       if (cloudRes.statusCode >= 300 && cloudRes.statusCode < 400 && cloudRes.headers.location) {
         const redirectUrl = new URL(cloudRes.headers.location, targetUrl).toString();
@@ -948,7 +967,36 @@ class StorageManager {
       if (cloudRes.statusCode >= 400) {
         return res.status(cloudRes.statusCode).send("Error loading file from storage");
       }
-      const mimeType = cloudRes.headers["content-type"] || file.mime_type || "application/octet-stream";
+      const rawHeaderType = cloudRes.headers["content-type"];
+      const ext = (file.original_name || "").split(".").pop()?.toLowerCase();
+      const EXT_MIMES = {
+        svg: "image/svg+xml",
+        png: "image/png",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        webp: "image/webp",
+        gif: "image/gif",
+        ico: "image/x-icon",
+        bmp: "image/bmp",
+        avif: "image/avif",
+        pdf: "application/pdf",
+        json: "application/json",
+        txt: "text/plain",
+        csv: "text/csv",
+        xml: "application/xml",
+        zip: "application/zip",
+        tar: "application/x-tar",
+        gz: "application/gzip",
+        mp4: "video/mp4",
+        webm: "video/webm",
+        mp3: "audio/mpeg",
+        wav: "audio/wav"
+      };
+      const inferredMime = ext ? EXT_MIMES[ext] : null;
+      let mimeType = rawHeaderType;
+      if (!mimeType || mimeType === "application/octet-stream") {
+        mimeType = file.mime_type && file.mime_type !== "application/octet-stream" ? file.mime_type : inferredMime || rawHeaderType || "application/octet-stream";
+      }
       const filename = file.original_name || "file";
       const safeFilename = filename.replace(/["\r\n]/g, "_");
       const encodedFilename = encodeURIComponent(filename);
@@ -961,6 +1009,9 @@ class StorageManager {
         `${disposition}; filename="${safeFilename}"; filename*=UTF-8''${encodedFilename}`
       );
       res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+      if (cloudRes.headers["content-encoding"]) {
+        res.setHeader("Content-Encoding", cloudRes.headers["content-encoding"]);
+      }
       if (cloudRes.headers["content-range"]) {
         res.setHeader("Content-Range", cloudRes.headers["content-range"]);
         res.status(206);
@@ -1020,7 +1071,7 @@ class StorageManager {
           const cloudPublicId = rf.cloudPublicId || rf.cloud_public_id || fileId;
           const storageId = rf.storageId || rf.storage_id || null;
           if (this.query) {
-            const hasInspectionCol = this.filesTable === "storage_files";
+            const hasInspectionCol = await this._hasInspectionColumn();
             const insertSql = hasInspectionCol ? `INSERT INTO ${this.filesTable} (
                   id, entity_type, entity_id, inspection_id, storage_id,
                   original_name, file_type, mime_type, file_size, cloud_url, cloud_public_id, created_at, updated_at
@@ -1077,7 +1128,7 @@ class StorageManager {
       const fileId = (0, import_uid.genUid)();
       const isInspection = entityType === "dot_inspection" || entityType === "inspection";
       const inspectionId = isInspection ? entityId : null;
-      const hasInspectionCol = this.filesTable === "storage_files";
+      const hasInspectionCol = await this._hasInspectionColumn();
       const insertSql = hasInspectionCol ? `INSERT INTO ${this.filesTable} (
             id, entity_type, entity_id, inspection_id, storage_id,
             original_name, file_type, mime_type, file_size, cloud_url, cloud_public_id

package/utils/utils/storage_manager.js

@@ -229,6 +229,25 @@ export class StorageManager {
     this.activeStorageCache = { data: null, ts: 0 };
   }
 
+  async _hasInspectionColumn() {
+    if (this._hasInspectionCol !== undefined) return this._hasInspectionCol;
+    if (!this.query) {
+      this._hasInspectionCol = false;
+      return false;
+    }
+    try {
+      const res = await this.query(
+        `SELECT 1 FROM information_schema.columns WHERE table_name = $1 AND column_name = 'inspection_id' LIMIT 1`,
+        [this.filesTable]
+      );
+      this._hasInspectionCol = res.rows && res.rows.length > 0;
+      return this._hasInspectionCol;
+    } catch {
+      this._hasInspectionCol = false;
+      return false;
+    }
+  }
+
   async getCachedFileRecord(fileId) {
     if (!fileId) return null;
     const now = Date.now();
@@ -1017,7 +1036,7 @@ export class StorageManager {
   }
 
   _streamHttp(file, req, res, isInline, redirectCount = 0, knownProvider = null) {
-    let targetUrl = file.cloud_url;
+    let targetUrl = file.cloud_url || file.url || file.view_url;
     if (!targetUrl) {
       if (file.storage_id && file.cloud_public_id) {
         return this._streamFromS3(file, req, res, isInline);
@@ -1037,6 +1056,9 @@ export class StorageManager {
     if (req?.headers && req.headers['range']) {
       requestHeaders['Range'] = req.headers['range'];
     }
+    // Prevent upstream providers (Cloudinary, Vercel, S3) from sending compressed gzip/br streams
+    // which would otherwise be piped raw to clients without correct decompression.
+    requestHeaders['Accept-Encoding'] = 'identity';
 
     client.get(targetUrl, { agent, headers: requestHeaders }, (cloudRes) => {
       if (cloudRes.statusCode >= 300 && cloudRes.statusCode < 400 && cloudRes.headers.location) {
@@ -1054,7 +1076,41 @@ export class StorageManager {
         return res.status(cloudRes.statusCode).send('Error loading file from storage');
       }
 
-      const mimeType = cloudRes.headers['content-type'] || file.mime_type || 'application/octet-stream';
+      const rawHeaderType = cloudRes.headers['content-type'];
+      const ext = (file.original_name || '').split('.').pop()?.toLowerCase();
+      const EXT_MIMES = {
+        svg: 'image/svg+xml',
+        png: 'image/png',
+        jpg: 'image/jpeg',
+        jpeg: 'image/jpeg',
+        webp: 'image/webp',
+        gif: 'image/gif',
+        ico: 'image/x-icon',
+        bmp: 'image/bmp',
+        avif: 'image/avif',
+        pdf: 'application/pdf',
+        json: 'application/json',
+        txt: 'text/plain',
+        csv: 'text/csv',
+        xml: 'application/xml',
+        zip: 'application/zip',
+        tar: 'application/x-tar',
+        gz: 'application/gzip',
+        mp4: 'video/mp4',
+        webm: 'video/webm',
+        mp3: 'audio/mpeg',
+        wav: 'audio/wav',
+      };
+      const inferredMime = ext ? EXT_MIMES[ext] : null;
+
+      let mimeType = rawHeaderType;
+      // If remote returned generic octet-stream, prioritize known DB mime_type or file extension
+      if (!mimeType || mimeType === 'application/octet-stream') {
+        mimeType = (file.mime_type && file.mime_type !== 'application/octet-stream')
+          ? file.mime_type
+          : inferredMime || rawHeaderType || 'application/octet-stream';
+      }
+
       const filename = file.original_name || 'file';
       const safeFilename = filename.replace(/["\r\n]/g, '_');
       const encodedFilename = encodeURIComponent(filename);
@@ -1069,6 +1125,10 @@ export class StorageManager {
       );
       res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
 
+      if (cloudRes.headers['content-encoding']) {
+        res.setHeader('Content-Encoding', cloudRes.headers['content-encoding']);
+      }
+
       if (cloudRes.headers['content-range']) {
         res.setHeader('Content-Range', cloudRes.headers['content-range']);
         res.status(206);
@@ -1140,7 +1200,7 @@ export class StorageManager {
           const storageId = rf.storageId || rf.storage_id || null;
 
           if (this.query) {
-            const hasInspectionCol = this.filesTable === 'storage_files';
+            const hasInspectionCol = await this._hasInspectionColumn();
             const insertSql = hasInspectionCol
               ? `INSERT INTO ${this.filesTable} (
                   id, entity_type, entity_id, inspection_id, storage_id,
@@ -1209,7 +1269,7 @@ export class StorageManager {
       const fileId = genUid();
       const isInspection = entityType === 'dot_inspection' || entityType === 'inspection';
       const inspectionId = isInspection ? entityId : null;
-      const hasInspectionCol = this.filesTable === 'storage_files';
+      const hasInspectionCol = await this._hasInspectionColumn();
 
       const insertSql = hasInspectionCol
         ? `INSERT INTO ${this.filesTable} (

package/utils/utils/ui.js

@@ -1,111 +1,111 @@
-/**
- * cynx/utils — UI and Formatting Helpers (ui.js)
- *
- * Universal classname merger (cn), clipboard helper, and friendly date/byte formatters.
- */
-
-/**
- * Universal class names combiner / merger (zero-dependency clsx replacement).
- * Handles strings, arrays, objects, booleans, and null/undefined values.
- *
- * @param {...any} inputs
- * @returns {string} Combined class string
- */
-export function cn(...inputs) {
-  const classes = [];
-
-  for (let i = 0; i < inputs.length; i++) {
-    const arg = inputs[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg)) {
-      if (arg.length) {
-        const inner = cn(...arg);
-        if (inner) classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (Object.prototype.hasOwnProperty.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}
-
-/**
- * Safely copy text to clipboard with modern Clipboard API and legacy fallback.
- *
- * @param {string} text
- * @returns {Promise<boolean>}
- */
-export async function copyToClipboard(text) {
-  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {}
-  }
-
-  if (typeof document !== 'undefined') {
-    try {
-      const el = document.createElement('textarea');
-      el.value = text;
-      el.setAttribute('readonly', '');
-      el.style.position = 'absolute';
-      el.style.left = '-9999px';
-      document.body.appendChild(el);
-      el.select();
-      const successful = document.execCommand('copy');
-      document.body.removeChild(el);
-      return successful;
-    } catch {}
-  }
-
-  return false;
-}
-
-/**
- * Format relative time (e.g. "5s ago", "12m ago", "3h ago", "2d ago").
- *
- * @param {Date|string|number} d
- * @returns {string}
- */
-export function fmtAgo(d) {
-  if (!d) return '—';
-  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000);
-  if (isNaN(s)) return '—';
-  if (s < 60) return `${Math.max(0, s)}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
-}
-
-/**
- * Format localized date or return fallback dash.
- *
- * @param {Date|string|number} d
- * @param {string} [locale='ru-RU']
- * @returns {string}
- */
-export function fmtDate(d, locale = 'ru-RU') {
-  if (!d) return '—';
-  try {
-    const date = new Date(d);
-    return isNaN(date.getTime()) ? '—' : date.toLocaleString(locale);
-  } catch {
-    return '—';
-  }
-}
-
-export default {
-  cn,
-  copyToClipboard,
-  fmtAgo,
-  fmtDate,
-};
+/**
+ * cynx/utils — UI and Formatting Helpers (ui.js)
+ *
+ * Universal classname merger (cn), clipboard helper, and friendly date/byte formatters.
+ */
+
+/**
+ * Universal class names combiner / merger (zero-dependency clsx replacement).
+ * Handles strings, arrays, objects, booleans, and null/undefined values.
+ *
+ * @param {...any} inputs
+ * @returns {string} Combined class string
+ */
+export function cn(...inputs) {
+  const classes = [];
+
+  for (let i = 0; i < inputs.length; i++) {
+    const arg = inputs[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = cn(...arg);
+        if (inner) classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (const key in arg) {
+        if (Object.prototype.hasOwnProperty.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Safely copy text to clipboard with modern Clipboard API and legacy fallback.
+ *
+ * @param {string} text
+ * @returns {Promise<boolean>}
+ */
+export async function copyToClipboard(text) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+
+  if (typeof document !== 'undefined') {
+    try {
+      const el = document.createElement('textarea');
+      el.value = text;
+      el.setAttribute('readonly', '');
+      el.style.position = 'absolute';
+      el.style.left = '-9999px';
+      document.body.appendChild(el);
+      el.select();
+      const successful = document.execCommand('copy');
+      document.body.removeChild(el);
+      return successful;
+    } catch {}
+  }
+
+  return false;
+}
+
+/**
+ * Format relative time (e.g. "5s ago", "12m ago", "3h ago", "2d ago").
+ *
+ * @param {Date|string|number} d
+ * @returns {string}
+ */
+export function fmtAgo(d) {
+  if (!d) return '—';
+  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000);
+  if (isNaN(s)) return '—';
+  if (s < 60) return `${Math.max(0, s)}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+/**
+ * Format localized date or return fallback dash.
+ *
+ * @param {Date|string|number} d
+ * @param {string} [locale='ru-RU']
+ * @returns {string}
+ */
+export function fmtDate(d, locale = 'ru-RU') {
+  if (!d) return '—';
+  try {
+    const date = new Date(d);
+    return isNaN(date.getTime()) ? '—' : date.toLocaleString(locale);
+  } catch {
+    return '—';
+  }
+}
+
+export default {
+  cn,
+  copyToClipboard,
+  fmtAgo,
+  fmtDate,
+};

package/vue/components/Badge.vue

@@ -1,79 +1,79 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const VARIANTS: Record<string, any> = {
-  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
-};
-
-const SIZE_MAP: Record<string, any> = {
-  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
-  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
-  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
-  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
-};
-
-const props = withDefaults(
-  defineProps<{
-    variant?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    dot?: boolean;
-    pill?: boolean;
-    plain?: boolean;
-    minimal?: boolean;
-  }>(),
-  {
-    variant: "dim",
-    size: "sm",
-    dot: false,
-    pill: true,
-    plain: false,
-    minimal: false,
-  }
-);
-
-const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
-const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
-const isPlain = computed(() => props.plain || props.minimal);
-</script>
-
-<template>
-  <span
-    :class="[
-      'inline-flex items-center gap-1.5 select-none',
-      isPlain ? 'font-semibold' : 'font-bold leading-none',
-      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
-    ]"
-    :style="{
-      background: isPlain ? 'transparent' : v.bg,
-      color: v.color,
-      border: isPlain ? 'none' : `1px solid ${v.border}`,
-      padding: isPlain ? s.plainPadding : s.padding,
-      fontSize: s.fontSize,
-    }"
-  >
-    <span
-      v-if="dot"
-      class="rounded-full flex-shrink-0"
-      :style="{
-        width: `${s.dotSize}px`,
-        height: `${s.dotSize}px`,
-        background: v.dot,
-      }"
-    />
-    <slot />
-  </span>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const VARIANTS: Record<string, any> = {
+  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
+};
+
+const SIZE_MAP: Record<string, any> = {
+  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
+  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
+  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
+  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    dot?: boolean;
+    pill?: boolean;
+    plain?: boolean;
+    minimal?: boolean;
+  }>(),
+  {
+    variant: "dim",
+    size: "sm",
+    dot: false,
+    pill: true,
+    plain: false,
+    minimal: false,
+  }
+);
+
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
+const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
+const isPlain = computed(() => props.plain || props.minimal);
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center gap-1.5 select-none',
+      isPlain ? 'font-semibold' : 'font-bold leading-none',
+      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
+    ]"
+    :style="{
+      background: isPlain ? 'transparent' : v.bg,
+      color: v.color,
+      border: isPlain ? 'none' : `1px solid ${v.border}`,
+      padding: isPlain ? s.plainPadding : s.padding,
+      fontSize: s.fontSize,
+    }"
+  >
+    <span
+      v-if="dot"
+      class="rounded-full flex-shrink-0"
+      :style="{
+        width: `${s.dotSize}px`,
+        height: `${s.dotSize}px`,
+        background: v.dot,
+      }"
+    />
+    <slot />
+  </span>
+</template>