@pactor-app/ui 1.44.0 → 1.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/ui",
-  "version": "1.44.0",
+  "version": "1.47.0",
   "description": "Pactor UI kit (shadcn): the single built-in UI kit — vendored shadcn/ui components (Base UI primitives + cva + tailwind-merge + lucide-react), props contracts, interaction core (OverlayManager / UiBridge) and layouts, with build-time Tailwind v4 prebuilt styles.css (zero consumer-side Tailwind config)",
   "keywords": [
     "pactor",
@@ -75,7 +75,8 @@
         "default": "./dist/ui/index.cjs"
       }
     },
-    "./styles.css": "./styles.css"
+    "./styles.css": "./styles.css",
+    "./theme-bridge.css": "./src/theme-bridge.css"
   },
   "sideEffects": [
     "./styles.css"
@@ -85,7 +86,8 @@
   },
   "files": [
     "dist",
-    "styles.css"
+    "styles.css",
+    "src/theme-bridge.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -106,11 +108,11 @@
     "react-resizable-panels": "^4.12.3",
     "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2",
-    "@pactor-app/core": "1.44.0",
-    "@pactor-app/permission": "1.44.0",
-    "@pactor-app/router": "1.44.0",
-    "@pactor-app/markdown": "1.44.0",
-    "@pactor-app/runtime": "1.44.0"
+    "@pactor-app/core": "1.47.0",
+    "@pactor-app/permission": "1.47.0",
+    "@pactor-app/markdown": "1.47.0",
+    "@pactor-app/runtime": "1.47.0",
+    "@pactor-app/router": "1.47.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/theme-bridge.css

@@ -0,0 +1,54 @@
+/**
+ * @pactor-app/ui 语义令牌桥（全仓单一定义，spec: unified-styles-entry /
+ * 语义令牌桥单源）：语义令牌 → Tailwind 工具类映射（@theme inline）。
+ * ui 自身样式表经 `@import ./theme-bridge.css` 内联；chat / blocks / chart
+ * 样式源经 `@import @pactor-app/ui/theme-bridge.css` 在编译期内联——
+ * 映射运行时读 var()，令牌值本体仅由 ui styles.css 的 :root / 暗色块定义。
+ */
+
+/* 语义令牌 → 工具类桥接（运行时解析 var()，支持暗色覆盖与宿主换肤） */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}

package/styles.css

@@ -15,7 +15,6 @@
     --breakpoint-xl: 80rem;
     --container-sm: 24rem;
     --container-lg: 32rem;
-    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --text-xs: 0.75rem;
@@ -206,9 +205,6 @@
   }
 }
 @layer utilities {
-  .\@container {
-    container-type: inline-size;
-  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -256,6 +252,9 @@
   .inset-y-0 {
     inset-block: 0px;
   }
+  .inset-y-1 {
+    inset-block: var(--spacing);
+  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
@@ -274,9 +273,6 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
-  .top-3 {
-    top: calc(var(--spacing) * 3);
-  }
   .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
@@ -316,9 +312,6 @@
   .right-10 {
     right: calc(var(--spacing) * 10);
   }
-  .right-full {
-    right: 100%;
-  }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
   }
@@ -334,9 +327,6 @@
   .bottom-10 {
     bottom: calc(var(--spacing) * 10);
   }
-  .bottom-full {
-    bottom: 100%;
-  }
   .-left-12 {
     left: calc(var(--spacing) * -12);
   }
@@ -346,9 +336,6 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -361,9 +348,6 @@
   .left-\[50\%\] {
     left: 50%;
   }
-  .left-auto {
-    left: auto;
-  }
   .isolate {
     isolation: isolate;
   }
@@ -394,6 +378,9 @@
   .order-last {
     order: 9999;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
   .col-start-2 {
     grid-column-start: 2;
   }
@@ -427,9 +414,6 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
-  .mx-0\.5 {
-    margin-inline: calc(var(--spacing) * 0.5);
-  }
   .mx-1 {
     margin-inline: var(--spacing);
   }
@@ -499,8 +483,8 @@
   .-mr-0\.5 {
     margin-right: calc(var(--spacing) * -0.5);
   }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
+  .mr-0\.5 {
+    margin-right: calc(var(--spacing) * 0.5);
   }
   .mb-1 {
     margin-bottom: var(--spacing);
@@ -523,18 +507,12 @@
   .-ml-px {
     margin-left: -1px;
   }
-  .ml-0\.5 {
-    margin-left: calc(var(--spacing) * 0.5);
-  }
   .ml-1 {
     margin-left: var(--spacing);
   }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
-  .ml-5 {
-    margin-left: calc(var(--spacing) * 5);
-  }
   .ml-6 {
     margin-left: calc(var(--spacing) * 6);
   }
@@ -562,12 +540,6 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
   .block {
     display: block;
   }
@@ -610,36 +582,6 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
-  .scrollbar-subtle {
-    scrollbar-width: thin;
-    scrollbar-color: var(--muted-foreground) transparent;
-    @supports (color: color-mix(in lab, red, red)) {
-      scrollbar-color: color-mix(in oklch, var(--muted-foreground) 30%, transparent) transparent;
-    }
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--muted-foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        background: color-mix(in oklch, var(--muted-foreground) 25%, transparent);
-      }
-      border-radius: 999px;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: var(--muted-foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        background: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
-      }
-    }
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-  }
   .size-1\.5 {
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
@@ -700,9 +642,6 @@
     width: 100%;
     height: 100%;
   }
-  .h-1 {
-    height: var(--spacing);
-  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -793,9 +732,6 @@
   .max-h-\[32rem\] {
     max-height: 32rem;
   }
-  .max-h-\[40\%\] {
-    max-height: 40%;
-  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -841,9 +777,6 @@
   .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
-  .w-\(--pactor-chat-rail-width\) {
-    width: var(--pactor-chat-rail-width);
-  }
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
@@ -916,18 +849,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
-  .w-\[52px\] {
-    width: 52px;
-  }
-  .w-\[61\.8cqw\] {
-    width: 61.8cqw;
-  }
   .w-\[100px\] {
     width: 100px;
   }
-  .w-\[250px\] {
-    width: 250px;
-  }
   .w-auto {
     width: auto;
   }
@@ -979,9 +903,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xl {
-    max-width: var(--container-xl);
-  }
   .min-w-\(--anchor-width\) {
     min-width: var(--anchor-width);
   }
@@ -1078,6 +999,24 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-50 {
+    --tw-scale-x: 50%;
+    --tw-scale-y: 50%;
+    --tw-scale-z: 50%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
+  .rotate-0 {
+    rotate: 0deg;
+  }
   .rotate-45 {
     rotate: 45deg;
   }
@@ -1171,9 +1110,6 @@
   .auto-rows-min {
     grid-auto-rows: min-content;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1198,9 +1134,6 @@
   .flex-row {
     flex-direction: row;
   }
-  .flex-row-reverse {
-    flex-direction: row-reverse;
-  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1597,12 +1530,6 @@
   .bg-muted-foreground {
     background-color: var(--muted-foreground);
   }
-  .bg-muted-foreground\/50 {
-    background-color: var(--muted-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
-    }
-  }
   .bg-muted\/40 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1675,12 +1602,12 @@
   .p-0 {
     padding: 0px;
   }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
   .p-1 {
     padding: var(--spacing);
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1720,9 +1647,6 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
-  .px-3\.5 {
-    padding-inline: calc(var(--spacing) * 3.5);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1786,6 +1710,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pr-1\.5 {
+    padding-right: calc(var(--spacing) * 1.5);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1819,15 +1746,9 @@
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
-  .pl-5 {
-    padding-left: calc(var(--spacing) * 5);
-  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
-  .pl-7 {
-    padding-left: calc(var(--spacing) * 7);
-  }
   .text-center {
     text-align: center;
   }
@@ -1840,9 +1761,6 @@
   .align-middle {
     vertical-align: middle;
   }
-  .align-super {
-    vertical-align: super;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1891,13 +1809,6 @@
   .text-\[10px\] {
     font-size: 10px;
   }
-  .text-\[13px\] {
-    font-size: 13px;
-  }
-  .leading-4 {
-    --tw-leading: calc(var(--spacing) * 4);
-    line-height: calc(var(--spacing) * 4);
-  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1906,10 +1817,6 @@
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
-  .leading-\[18px\] {
-    --tw-leading: 18px;
-    line-height: 18px;
-  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1967,9 +1874,6 @@
   .text-\(--menu-active-foreground\) {
     color: var(--menu-active-foreground);
   }
-  .text-accent-foreground {
-    color: var(--accent-foreground);
-  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -2055,6 +1959,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow-\(--card-shadow\) {
     --tw-shadow: var(--card-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2129,12 +2036,6 @@
   .ring-ring {
     --tw-ring-color: var(--ring);
   }
-  .ring-ring\/50 {
-    --tw-ring-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
   .ring-sidebar-ring {
     --tw-ring-color: var(--sidebar-ring);
   }
@@ -2166,6 +2067,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[grid-template-columns\] {
+    transition-property: grid-template-columns;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[height\] {
     transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2186,6 +2092,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,color\] {
+    transition-property: transform,color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[transform\,width\,opacity\] {
+    transition-property: transform,width,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\,height\,padding\] {
     transition-property: width,height,padding;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2221,6 +2137,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -2257,9 +2177,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .running {
-    animation-play-state: running;
-  }
   .zoom-in {
     --tw-enter-scale: 0;
   }
@@ -2390,6 +2307,13 @@
   .group-data-\[size\=sm\]\/attachment\:w-8:is(:where(.group\/attachment)[data-size="sm"] *) {
     width: calc(var(--spacing) * 8);
   }
+  .group-data-\[size\=sm\]\/tabs-list\:py-0\.5:is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .group-data-\[size\=sm\]\/tabs-list\:text-xs:is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .group-data-\[size\=xs\]\/attachment\:w-7:is(:where(.group\/attachment)[data-size="xs"] *) {
     width: calc(var(--spacing) * 7);
   }
@@ -2503,34 +2427,6 @@
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--muted-foreground);
   }
-  .not-last\:before\:absolute:not(:last-child)::before {
-    content: var(--tw-content);
-    position: absolute;
-  }
-  .not-last\:before\:top-7:not(:last-child)::before {
-    content: var(--tw-content);
-    top: calc(var(--spacing) * 7);
-  }
-  .not-last\:before\:-bottom-1:not(:last-child)::before {
-    content: var(--tw-content);
-    bottom: calc(var(--spacing) * -1);
-  }
-  .not-last\:before\:left-\[7\.5px\]:not(:last-child)::before {
-    content: var(--tw-content);
-    left: 7.5px;
-  }
-  .not-last\:before\:w-px:not(:last-child)::before {
-    content: var(--tw-content);
-    width: 1px;
-  }
-  .not-last\:before\:bg-border:not(:last-child)::before {
-    content: var(--tw-content);
-    background-color: var(--border);
-  }
-  .not-last\:before\:content-\[\"\"\]:not(:last-child)::before {
-    --tw-content: "";
-    content: var(--tw-content);
-  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
@@ -2608,9 +2504,6 @@
     }
   }
   @media (hover: hover) {
-    .hover\:border-primary:hover {
-      border-color: var(--primary);
-    }
     .hover\:border-primary\/50:hover {
       border-color: var(--primary);
     }
@@ -2724,9 +2617,6 @@
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
-    .hover\:opacity-80:hover {
-      opacity: 80%;
-    }
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
@@ -2806,6 +2696,12 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .active\:cursor-grabbing:active {
     cursor: grabbing;
   }
@@ -2968,9 +2864,6 @@
   .data-\[active\=true\]\:border-ring[data-active="true"] {
     border-color: var(--ring);
   }
-  .data-\[active\=true\]\:bg-accent[data-active="true"] {
-    background-color: var(--accent);
-  }
   .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
     background-color: var(--sidebar-accent);
   }
@@ -3015,9 +2908,6 @@
   .data-\[instant\]\:transition-none[data-instant] {
     transition-property: none;
   }
-  .data-\[open\=true\]\:rotate-90[data-open="true"] {
-    rotate: 90deg;
-  }
   .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
     height: 1px;
   }
@@ -3278,6 +3168,12 @@
     .motion-reduce\:animate-none {
       animation: none;
     }
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+    .motion-reduce\:active\:transform-none:active {
+      transform: none;
+    }
   }
   @media (width >= 40rem) {
     .sm\:block {
@@ -3298,9 +3194,6 @@
     .sm\:max-w-sm {
       max-width: var(--container-sm);
     }
-    .sm\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -3570,6 +3463,10 @@
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
   }
+  .\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-4 svg:not([class*=size-]) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -4168,8 +4065,6 @@
   --flex-gap-md: calc(var(--flex-gap) * 1.33);
   --flex-gap-lg: calc(var(--flex-gap) * 2);
   --grid-gap: 16px;
-  --pactor-chat-rail-width: 40px;
-  --pactor-chat-rail-popover-width: 320px;
 }
 [data-pactor-theme='dark'] {
   color-scheme: dark;
@@ -4283,6 +4178,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -4587,6 +4497,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;