cynx-lib 1.3.50 → 1.3.52

package/ui/index.cjs

@@ -55,6 +55,7 @@ __export(index_exports, {
   Pagination: () => Pagination,
   PulseDot: () => PulseDot,
   Select: () => Select,
+  Sidebar: () => Sidebar,
   Skeleton: () => Skeleton,
   SkeletonCard: () => SkeletonCard,
   SkeletonRows: () => SkeletonRows,
@@ -126,8 +127,10 @@ var import_FilePicker = __toESM(require("./components/FilePicker.jsx"), 1);
 var import_Divider = __toESM(require("./components/Divider.jsx"), 1);
 var import_InfoBadge = __toESM(require("./components/InfoBadge.jsx"), 1);
 var import_Layout = __toESM(require("./components/Layout.jsx"), 1);
+var import_Sidebar = __toESM(require("./components/Sidebar.jsx"), 1);
 var import_LoginPage = __toESM(require("./components/LoginPage.jsx"), 1);
 const Layout = import_Layout.default;
+const Sidebar = import_Sidebar.default;
 const LoginPage = import_LoginPage.default;
 const Button = import_Button.default;
 const FilePicker = import_FilePicker.default;

package/ui/index.js

@@ -38,9 +38,11 @@ import { default as _FilePicker } from './components/FilePicker.jsx';
 import { default as _Divider } from './components/Divider.jsx';
 import { default as _InfoBadge } from './components/InfoBadge.jsx';
 import { default as _Layout } from './components/Layout.jsx';
+import { default as _Sidebar } from './components/Sidebar.jsx';
 import { default as _LoginPage } from './components/LoginPage.jsx';
 
 export const Layout = _Layout;
+export const Sidebar = _Sidebar;
 export const LoginPage = _LoginPage;
 export const Button = _Button;
 export const FilePicker = _FilePicker;

package/utils/utils/db.cjs

@@ -196,6 +196,7 @@ async function sync_db(options = {}) {
     freshCheckTable,
     logger: rawLogger = console,
     dryRun = false,
+    syncColumnTypes = false,
     maxRetries = 3,
     retryDelayMs = 300,
     throwOnError = false
@@ -316,16 +317,21 @@ async function sync_db(options = {}) {
     log("Analyzing schema.sql and comparing with database catalogs (Zero-Lock)...");
     const [tablesRes, colsRes, idxRes, conRes] = await Promise.all([
       queryFn("SELECT table_name FROM information_schema.tables WHERE table_schema = $1 AND table_type = 'BASE TABLE'", [tableSchema]),
-      queryFn("SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = $1", [tableSchema]),
+      queryFn("SELECT table_name, column_name, data_type, udt_name FROM information_schema.columns WHERE table_schema = $1", [tableSchema]),
       queryFn("SELECT indexname FROM pg_indexes WHERE schemaname = $1", [tableSchema]),
       queryFn("SELECT conname FROM pg_constraint")
     ]);
     const existingTables = new Set((tablesRes.rows || []).map((r) => String(r.table_name).toLowerCase()));
     const existingColumns = new Set((colsRes.rows || []).map((r) => `${String(r.table_name).toLowerCase()}.${String(r.column_name).toLowerCase()}`));
+    const existingColumnTypes = new Map((colsRes.rows || []).map((r) => [
+      `${String(r.table_name).toLowerCase()}.${String(r.column_name).toLowerCase()}`,
+      { dataType: String(r.data_type || "").toLowerCase(), udtName: String(r.udt_name || "").toLowerCase() }
+    ]));
     const existingIndexes = new Set((idxRes.rows || []).map((r) => String(r.indexname).toLowerCase()));
     const existingConstraints = new Set((conRes.rows || []).map((r) => String(r.conname).toLowerCase()));
     const createdTables = [];
     const addedColumns = [];
+    const alteredColumns = [];
     const createdIndexes = [];
     const droppedConstraints = [];
     const droppedIndexes = [];
@@ -373,6 +379,36 @@ async function sync_db(options = {}) {
               addedColumns.push(colKey);
               log(`[DryRun] Would add column: ${colKey}`);
             }
+          } else if (syncColumnTypes) {
+            const currentType = existingColumnTypes.get(colKey);
+            const defUpper = col.def.toUpperCase().trim();
+            let targetType = null;
+            if (/\bTIMESTAMPTZ\b|\bTIMESTAMP\s+WITH\s+TIME\s+ZONE\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === "timestamp without time zone" || currentType.udtName === "timestamp")) {
+                targetType = "TIMESTAMPTZ";
+              }
+            } else if (/\bBIGINT\b|\bBIGSERIAL\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === "integer" || currentType.udtName === "int4")) {
+                targetType = "BIGINT";
+              }
+            } else if (/\bTEXT\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === "character varying" || currentType.udtName === "varchar")) {
+                targetType = "TEXT";
+              }
+            }
+            if (targetType) {
+              const sql = `ALTER TABLE ${table.name} ALTER COLUMN ${col.name} TYPE ${targetType};`;
+              if (!dryRun) {
+                const ok = await runSafeDdl(queryFn, sql, `alter column ${colKey} to ${targetType}`, safeDdlOpts);
+                if (ok) {
+                  alteredColumns.push(`${colKey} (${targetType})`);
+                  log(`Altered column type: ${colKey} -> ${targetType}`);
+                }
+              } else {
+                alteredColumns.push(`${colKey} (${targetType})`);
+                log(`[DryRun] Would alter column type: ${colKey} -> ${targetType}`);
+              }
+            }
           }
         }
       }
@@ -445,11 +481,12 @@ async function sync_db(options = {}) {
     const summaryParts = [];
     if (createdTables.length > 0) summaryParts.push(`${createdTables.length} tables created`);
     if (addedColumns.length > 0) summaryParts.push(`${addedColumns.length} columns added`);
+    if (alteredColumns.length > 0) summaryParts.push(`${alteredColumns.length} columns altered`);
     if (createdIndexes.length > 0) summaryParts.push(`${createdIndexes.length} indexes created`);
     if (droppedConstraints.length > 0) summaryParts.push(`${droppedConstraints.length} constraints dropped`);
     if (droppedIndexes.length > 0) summaryParts.push(`${droppedIndexes.length} indexes dropped`);
     if (executedDoBlocks > 0) summaryParts.push(`${executedDoBlocks} migration blocks run`);
-    const changesCount = createdTables.length + addedColumns.length + createdIndexes.length + droppedConstraints.length + droppedIndexes.length;
+    const changesCount = createdTables.length + addedColumns.length + alteredColumns.length + createdIndexes.length + droppedConstraints.length + droppedIndexes.length;
     const summary = summaryParts.length > 0 ? `Database synced in ${durationMs}ms: ${summaryParts.join(", ")}` : `Database schema is up to date (0 changes needed, ${durationMs}ms)`;
     log(summary);
     return {
@@ -457,6 +494,7 @@ async function sync_db(options = {}) {
       isFreshDb: false,
       createdTables,
       addedColumns,
+      alteredColumns,
       createdIndexes,
       droppedConstraints,
       droppedIndexes,

package/utils/utils/db.js

@@ -281,6 +281,7 @@ export async function sync_db(options = {}) {
     freshCheckTable,
     logger: rawLogger = console,
     dryRun = false,
+    syncColumnTypes = false,
     maxRetries = 3,
     retryDelayMs = 300,
     throwOnError = false,
@@ -409,18 +410,23 @@ export async function sync_db(options = {}) {
     // ── 2. Query System Catalogs in parallel (AccessShareLock only - 0ms blocking) ──
     const [tablesRes, colsRes, idxRes, conRes] = await Promise.all([
       queryFn("SELECT table_name FROM information_schema.tables WHERE table_schema = $1 AND table_type = 'BASE TABLE'", [tableSchema]),
-      queryFn("SELECT table_name, column_name FROM information_schema.columns WHERE table_schema = $1", [tableSchema]),
+      queryFn("SELECT table_name, column_name, data_type, udt_name FROM information_schema.columns WHERE table_schema = $1", [tableSchema]),
       queryFn("SELECT indexname FROM pg_indexes WHERE schemaname = $1", [tableSchema]),
       queryFn("SELECT conname FROM pg_constraint"),
     ]);
 
     const existingTables = new Set((tablesRes.rows || []).map((r) => String(r.table_name).toLowerCase()));
     const existingColumns = new Set((colsRes.rows || []).map((r) => `${String(r.table_name).toLowerCase()}.${String(r.column_name).toLowerCase()}`));
+    const existingColumnTypes = new Map((colsRes.rows || []).map((r) => [
+      `${String(r.table_name).toLowerCase()}.${String(r.column_name).toLowerCase()}`,
+      { dataType: String(r.data_type || '').toLowerCase(), udtName: String(r.udt_name || '').toLowerCase() }
+    ]));
     const existingIndexes = new Set((idxRes.rows || []).map((r) => String(r.indexname).toLowerCase()));
     const existingConstraints = new Set((conRes.rows || []).map((r) => String(r.conname).toLowerCase()));
 
     const createdTables = [];
     const addedColumns = [];
+    const alteredColumns = [];
     const createdIndexes = [];
     const droppedConstraints = [];
     const droppedIndexes = [];
@@ -476,6 +482,39 @@ export async function sync_db(options = {}) {
               addedColumns.push(colKey);
               log(`[DryRun] Would add column: ${colKey}`);
             }
+          } else if (syncColumnTypes) {
+            // Check for safe column type discrepancies when syncColumnTypes flag is true
+            const currentType = existingColumnTypes.get(colKey);
+            const defUpper = col.def.toUpperCase().trim();
+
+            let targetType = null;
+            if (/\bTIMESTAMPTZ\b|\bTIMESTAMP\s+WITH\s+TIME\s+ZONE\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === 'timestamp without time zone' || currentType.udtName === 'timestamp')) {
+                targetType = 'TIMESTAMPTZ';
+              }
+            } else if (/\bBIGINT\b|\bBIGSERIAL\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === 'integer' || currentType.udtName === 'int4')) {
+                targetType = 'BIGINT';
+              }
+            } else if (/\bTEXT\b/.test(defUpper)) {
+              if (currentType && (currentType.dataType === 'character varying' || currentType.udtName === 'varchar')) {
+                targetType = 'TEXT';
+              }
+            }
+
+            if (targetType) {
+              const sql = `ALTER TABLE ${table.name} ALTER COLUMN ${col.name} TYPE ${targetType};`;
+              if (!dryRun) {
+                const ok = await runSafeDdl(queryFn, sql, `alter column ${colKey} to ${targetType}`, safeDdlOpts);
+                if (ok) {
+                  alteredColumns.push(`${colKey} (${targetType})`);
+                  log(`Altered column type: ${colKey} -> ${targetType}`);
+                }
+              } else {
+                alteredColumns.push(`${colKey} (${targetType})`);
+                log(`[DryRun] Would alter column type: ${colKey} -> ${targetType}`);
+              }
+            }
           }
         }
       }
@@ -556,12 +595,13 @@ export async function sync_db(options = {}) {
     const summaryParts = [];
     if (createdTables.length > 0) summaryParts.push(`${createdTables.length} tables created`);
     if (addedColumns.length > 0) summaryParts.push(`${addedColumns.length} columns added`);
+    if (alteredColumns.length > 0) summaryParts.push(`${alteredColumns.length} columns altered`);
     if (createdIndexes.length > 0) summaryParts.push(`${createdIndexes.length} indexes created`);
     if (droppedConstraints.length > 0) summaryParts.push(`${droppedConstraints.length} constraints dropped`);
     if (droppedIndexes.length > 0) summaryParts.push(`${droppedIndexes.length} indexes dropped`);
     if (executedDoBlocks > 0) summaryParts.push(`${executedDoBlocks} migration blocks run`);
 
-    const changesCount = createdTables.length + addedColumns.length + createdIndexes.length + droppedConstraints.length + droppedIndexes.length;
+    const changesCount = createdTables.length + addedColumns.length + alteredColumns.length + createdIndexes.length + droppedConstraints.length + droppedIndexes.length;
     const summary = summaryParts.length > 0
       ? `Database synced in ${durationMs}ms: ${summaryParts.join(', ')}`
       : `Database schema is up to date (0 changes needed, ${durationMs}ms)`;
@@ -573,6 +613,7 @@ export async function sync_db(options = {}) {
       isFreshDb: false,
       createdTables,
       addedColumns,
+      alteredColumns,
       createdIndexes,
       droppedConstraints,
       droppedIndexes,

package/vue/components/Badge.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const VARIANTS: Record<string, any> = {
+  ok: { bg: "rgba(39,174,96,.1)", color: "#16a34a", border: "rgba(39,174,96,.2)", dot: "#16a34a" },
+  err: { bg: "rgba(246,71,71,.1)", color: "#ef4444", border: "rgba(246,71,71,.2)", dot: "#ef4444" },
+  warn: { bg: "rgba(249,158,44,.1)", color: "#f59e0b", border: "rgba(249,158,44,.25)", dot: "#f59e0b" },
+  blue: { bg: "rgba(39,130,228,.1)", color: "#2563eb", border: "rgba(39,130,228,.2)", dot: "#2563eb" },
+  teal: { bg: "rgba(18,103,93,.1)", color: "#12675D", border: "rgba(18,103,93,.25)", dot: "#12675D" },
+  dim: { bg: "#f1f5f9", color: "#64748b", border: "#e2e8f0", dot: "#64748b" },
+};
+
+const SIZE_MAP: Record<string, any> = {
+  xs: { padding: "1.5px 6px", fontSize: "9.5px", dotSize: 5 },
+  sm: { padding: "2px 8px", fontSize: "11px", dotSize: 6 },
+  md: { padding: "3px 9px", fontSize: "12px", dotSize: 6.5 },
+  lg: { padding: "4px 12px", fontSize: "13px", dotSize: 8 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    dot?: boolean;
+    pill?: boolean;
+  }>(),
+  {
+    variant: "dim",
+    size: "sm",
+    dot: false,
+    pill: true,
+  }
+);
+
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
+const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center gap-1.5 font-bold leading-none select-none',
+      pill ? 'rounded-full' : 'rounded-md'
+    ]"
+    :style="{
+      background: v.bg,
+      color: v.color,
+      border: `1px solid ${v.border}`,
+      padding: 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>

package/vue/components/Button.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Spinner from "./Spinner.vue";
+
+const VARIANTS: Record<string, any> = {
+  default: {
+    background: "var(--surface, #fff)",
+    color: "var(--def-btn-text, #0f111c)",
+    border: "1px solid var(--bd, #d7d8e0)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "var(--grey-2, #ebebee)",
+  },
+  primary: {
+    background: "var(--accent, #12675D)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "var(--accent-hover, #0e524a)",
+    hoverShadow: "0 2px 8px rgba(18, 103, 93, .35)",
+  },
+  secondary: {
+    background: "var(--blue-bg, rgba(39,130,228,.1))",
+    color: "var(--blue, #2782e4)",
+    border: "1px solid var(--infd, rgba(39,130,228,.2))",
+    hoverBg: "var(--infd, rgba(39,130,228,.18))",
+    hoverShadow: "0 2px 8px rgba(39,130,228,.25)",
+  },
+  danger: {
+    background: "var(--danger-bg, rgba(246,71,71,.1))",
+    color: "var(--danger, #f64747)",
+    border: "1px solid var(--dd, rgba(246,71,71,.2))",
+    hoverBg: "var(--dd, rgba(246,71,71,.18))",
+    hoverShadow: "0 2px 8px rgba(246,71,71,.25)",
+  },
+  "danger-solid": {
+    background: "var(--danger, #EF4444)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "#dc2626",
+    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
+  },
+  "danger-fill": {
+    background: "var(--danger, #EF4444)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "#dc2626",
+    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
+  },
+  success: {
+    background: "var(--success-bg, rgba(39,174,96,.1))",
+    color: "var(--success, #27ae60)",
+    border: "1px solid var(--sd, rgba(39,174,96,.2))",
+    hoverBg: "var(--sd, rgba(39,174,96,.18))",
+    hoverShadow: "0 2px 8px rgba(39,174,96,.25)",
+  },
+  warning: {
+    background: "var(--accent-bg, rgba(249,158,44,.1))",
+    color: "var(--accent, #f99e2c)",
+    border: "1px solid var(--accent-border, rgba(249,158,44,.25))",
+    hoverBg: "var(--pd, rgba(249,158,44,.18))",
+    hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
+  },
+  ghost: {
+    background: "var(--surface, #ffffff)",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid var(--bd, #d7d8e0)",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "var(--grey-2, #ebebee)",
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--accent, #12675D)",
+    border: "1px solid var(--accent, #12675D)",
+    hoverBg: "var(--accent-bg, rgba(18, 103, 93, .1))",
+  },
+  link: {
+    background: "transparent",
+    color: "var(--accent, #12675D)",
+    border: "1px solid transparent",
+    paddingLeft: "4px",
+    paddingRight: "4px",
+    boxShadow: "none",
+  },
+  "no-line": {
+    background: "none",
+    border: "none",
+    boxShadow: "none",
+    color: "var(--t3, #8a96b0)",
+    paddingLeft: "14px",
+    paddingRight: "14px",
+    borderRadius: "var(--rmd, 8px)",
+  },
+};
+
+const SIZES: Record<string, any> = {
+  xs: { padding: "0 6px", fontSize: 11, height: 24 },
+  sm: { padding: "0 8px", fontSize: 11.5, height: 28 },
+  md: { padding: "0 14px", fontSize: 13, height: 32 },
+  lg: { padding: "0 18px", fontSize: 14, height: 36 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "button" | "submit" | "reset";
+  }>(),
+  {
+    variant: "default",
+    size: "md",
+    disabled: false,
+    loading: false,
+    type: "button",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
+const s = computed(() => SIZES[props.size] || SIZES.md);
+const isIconOnly = computed(() => props.variant === "icon");
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[`btn btn-${variant}`, 'inline-flex items-center justify-center gap-1.5 font-medium transition select-none']"
+    :style="{
+      borderRadius: 'var(--rads, 8px)',
+      fontFamily: 'var(--f, var(--sans, inherit))',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      whiteSpace: 'nowrap',
+      letterSpacing: '-.01em',
+      outline: 'none',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+      opacity: disabled ? 0.45 : 1,
+      pointerEvents: disabled ? 'none' : undefined,
+      background: v.background,
+      color: v.color,
+      border: v.border,
+      padding: isIconOnly ? '0' : s.padding,
+      fontSize: `${s.fontSize}px`,
+      height: `${s.height}px`,
+      width: isIconOnly ? `${s.height}px` : undefined,
+      ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
+      ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
+      ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
+    }"
+    @click="emit('click', $event)"
+  >
+    <Spinner v-if="loading" :size="14" inline color="currentColor" />
+    <slot v-if="!loading" name="icon" />
+    <slot v-if="!loading" />
+    <slot v-if="!loading" name="iconRight" />
+  </button>
+</template>

package/vue/components/Checkbox.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    label?: string;
+  }>(),
+  {
+    modelValue: false,
+    checked: false,
+    indeterminate: false,
+    disabled: false,
+    size: "md",
+    label: "",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", value: boolean): void;
+}>();
+
+const isChecked = computed(() => props.modelValue || props.checked);
+const dims = computed(() =>
+  props.size === "sm" ? { w: 14, h: 14, icon: 8 } : { w: 16, h: 16, icon: 10 }
+);
+
+const toggle = () => {
+  if (props.disabled) return;
+  const next = !isChecked.value;
+  emit("update:modelValue", next);
+  emit("change", next);
+};
+</script>
+
+<template>
+  <label
+    class="inline-flex items-center gap-1.5 cursor-pointer select-none m-0 p-0 leading-none transition"
+    :style="{
+      opacity: disabled ? 0.45 : 1,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    }"
+    @click.prevent="toggle"
+  >
+    <span
+      class="relative flex-shrink-0 transition-all duration-150 flex items-center justify-center"
+      :style="{
+        width: `${dims.w}px`,
+        height: `${dims.h}px`,
+        border: `1.5px solid ${isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)'}`,
+        borderRadius: size === 'sm' ? '3px' : '4px',
+        background: isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--input-bg, #ffffff)',
+      }"
+    >
+      <!-- Indeterminate dash -->
+      <svg
+        v-if="indeterminate"
+        :width="dims.icon"
+        :height="dims.icon"
+        viewBox="0 0 10 10"
+        fill="none"
+      >
+        <line x1="2" y1="5" x2="8" y2="5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
+      </svg>
+
+      <!-- Checked checkmark -->
+      <svg
+        v-else-if="isChecked"
+        :width="dims.icon"
+        :height="dims.icon"
+        viewBox="0 0 10 10"
+        fill="none"
+      >
+        <polyline
+          points="1.5,5 4,7.5 8.5,2.5"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+
+    <span
+      v-if="label || $slots.default"
+      :style="{ fontSize: size === 'sm' ? '.72rem' : '.78rem' }"
+      class="text-slate-800 font-semibold"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>