@astryx-vue/lab 0.1.0 → 0.2.0

package/lab.css

@@ -8,3 +8,4 @@
 @import './styles/transfer-list.css';
 @import './styles/transfer-list-selector.css';
 @import './styles/list-input.css';
+@import './styles/diff-viewer.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@astryx-vue/core": "^0.5.1"
+    "@astryx-vue/core": "^0.6.0"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
     "unplugin-vue": "8.0.0",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12",
-    "@astryx-vue/core": "^0.5.1"
+    "@astryx-vue/core": "^0.6.0"
   },
   "scripts": {
     "build": "tsdown",

package/styles/diff-viewer.css

@@ -0,0 +1,340 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 文件级 diff：表头是路径、状态、增删行数和可折叠开关，主体是按 hunk
+   * 排布的表格。颜色都走 CodeBlock 的 diff 槽位，同一套语法主题能同时
+   * 给 CodeBlock 和 DiffViewer 上色。
+   */
+  .astryx-diff-viewer {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background-color: var(--astryx-code-block-background, var(--astryx-color-background-surface, light-dark(#ffffff, #262626)));
+  }
+
+  .astryx-diff-viewer__header {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    background-color: var(--astryx-color-background-surface, light-dark(#ffffff, #262626));
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-diff-viewer__header--divided {
+    border-block-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+  }
+
+  .astryx-diff-viewer__toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-diff-viewer__toggle:focus-visible,
+  .astryx-diff-viewer__gutter-button:focus-visible {
+    outline: 2px solid var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    outline-offset: 2px;
+  }
+
+  .astryx-diff-viewer__chevron {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--astryx-color-icon-secondary, light-dark(#525252, #9e9e9e));
+    transition: transform var(--astryx-duration-fast-max, 165ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-diff-viewer__chevron--expanded {
+    transform: rotate(90deg);
+  }
+
+  .astryx-diff-viewer__path {
+    min-width: 0;
+    overflow: hidden;
+    font-family: var(--astryx-font-family-code, monospace);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-diff-viewer__stats {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: var(--astryx-spacing-1, 4px);
+    font-family: var(--astryx-font-family-code, monospace);
+  }
+
+  .astryx-diff-viewer__stat-added {
+    color: var(--astryx-color-text-green, light-dark(#0b5615, #a4d6a3));
+  }
+
+  .astryx-diff-viewer__stat-removed {
+    color: var(--astryx-color-text-red, light-dark(#8a0011, #ffc4be));
+  }
+
+  .astryx-diff-viewer__header-end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    margin-inline-start: auto;
+  }
+
+  .astryx-diff-viewer__message {
+    padding-block: var(--astryx-spacing-3, 12px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+  }
+
+  /* 代码区在 RTL 页面里也保持从左到右，和代码编辑器一致。 */
+  .astryx-diff-viewer__viewport {
+    direction: ltr;
+    min-width: 0;
+  }
+
+  .astryx-diff-viewer__content {
+    min-width: 0;
+  }
+
+  .astryx-diff-viewer__table {
+    width: max-content;
+    min-width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    color: var(--astryx-code-syntax-variable, #111111);
+    font-family: var(--astryx-font-family-code, monospace);
+    font-size: var(--astryx-text-code-size, 0.875rem);
+    line-height: var(--astryx-text-code-leading, 1.4286);
+    tab-size: 2;
+  }
+
+  .astryx-diff-viewer__table--wrapped {
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  .astryx-diff-viewer__gutter-col {
+    width: calc(var(--astryx-diff-viewer-gutter-width, 2ch) + 2 * var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-diff-viewer__marker-col {
+    width: calc(1ch + var(--astryx-spacing-1, 4px) + var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-diff-viewer__gutter {
+    padding: 0 var(--astryx-spacing-2, 8px);
+    color: var(--astryx-code-syntax-punctuation, #6a6a6a);
+    text-align: end;
+    vertical-align: top;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .astryx-diff-viewer__gutter-button {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .astryx-diff-viewer__gutter-button:hover {
+    text-decoration: underline;
+  }
+
+  .astryx-diff-viewer__marker {
+    padding: 0 var(--astryx-spacing-2, 8px) 0 var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+    vertical-align: top;
+    white-space: pre;
+    user-select: none;
+  }
+
+  .astryx-diff-viewer__code {
+    padding: 0 var(--astryx-spacing-4, 16px) 0 0;
+    text-align: start;
+    vertical-align: top;
+    white-space: pre;
+  }
+
+  .astryx-diff-viewer__code--wrapped {
+    white-space: pre-wrap;
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+
+  /* 分栏时旧文件一侧负责画中间的分隔线。 */
+  .astryx-diff-viewer__code--old {
+    border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+  }
+
+  .astryx-diff-viewer__gutter.is-added,
+  .astryx-diff-viewer__marker.is-added,
+  .astryx-diff-viewer__code.is-added {
+    background-color: var(--astryx-code-syntax-added, color-mix(in srgb, var(--astryx-color-success-muted, #bbf7d0) 25%, transparent));
+  }
+
+  .astryx-diff-viewer__gutter.is-removed,
+  .astryx-diff-viewer__marker.is-removed,
+  .astryx-diff-viewer__code.is-removed {
+    background-color: var(--astryx-code-syntax-removed, color-mix(in srgb, var(--astryx-color-error-muted, #fecaca) 25%, transparent));
+  }
+
+  .astryx-diff-viewer__gutter.is-added,
+  .astryx-diff-viewer__marker.is-added {
+    color: var(--astryx-code-syntax-added-marker, var(--astryx-color-text-green, #0b5615));
+  }
+
+  .astryx-diff-viewer__gutter.is-removed,
+  .astryx-diff-viewer__marker.is-removed {
+    color: var(--astryx-code-syntax-removed-marker, var(--astryx-color-text-red, #8a0011));
+  }
+
+  .astryx-diff-viewer__gutter.is-filler,
+  .astryx-diff-viewer__marker.is-filler,
+  .astryx-diff-viewer__code.is-filler {
+    background-color: var(--astryx-code-syntax-diff-header, var(--astryx-color-background-muted, #f5f5f5));
+  }
+
+  .astryx-diff-viewer__hunk {
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-3, 12px);
+    border-block: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+    background-color: var(--astryx-code-syntax-diff-header, var(--astryx-color-background-muted, #f5f5f5));
+    color: var(--astryx-code-syntax-punctuation, #6a6a6a);
+    white-space: pre;
+  }
+
+  .astryx-diff-viewer__ltr {
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+
+  /*
+   * 行内高亮：和行底色用同一档颜色。行底色本身带透明度，叠一层后
+   * 变化的那几个词会更实，没有底色时也仍然看得见。
+   */
+  .astryx-diff-viewer__change {
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+
+  .astryx-diff-viewer__change[data-kind='added'] {
+    background-color: var(--astryx-code-syntax-added, color-mix(in srgb, var(--astryx-color-success-muted, #bbf7d0) 25%, transparent));
+  }
+
+  .astryx-diff-viewer__change[data-kind='removed'] {
+    background-color: var(--astryx-code-syntax-removed, color-mix(in srgb, var(--astryx-color-error-muted, #fecaca) 25%, transparent));
+  }
+
+  .astryx-diff-viewer__annotation {
+    padding: var(--astryx-spacing-2, 8px) var(--astryx-spacing-3, 12px);
+    border-block: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+    background-color: var(--astryx-color-background-surface, light-dark(#ffffff, #262626));
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-family: var(--astryx-font-family-body, inherit);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.5);
+    vertical-align: top;
+    white-space: normal;
+  }
+
+  /*
+   * 注释内容跟随页面方向；它仍然待在从左到右的代码区里，跟着代码一起
+   * 横向滚动。inline-size containment 防止长注释把表格撑得更宽。
+   */
+  .astryx-diff-viewer__annotation-content {
+    contain: inline-size;
+    overflow-wrap: anywhere;
+  }
+
+  :dir(rtl) .astryx-diff-viewer__annotation-content {
+    direction: rtl;
+  }
+
+  /*
+   * 语法 token 的类名和 CodeBlock 共用。这里再声明一遍，是为了让只引
+   * DiffViewer 的样式、没有引 core CodeBlock 样式的用户也能看到高亮。
+   */
+  .astryx-diff-viewer .astryx-token-keyword {
+    color: var(--astryx-code-syntax-keyword, #6b187c);
+  }
+
+  .astryx-diff-viewer .astryx-token-string {
+    color: var(--astryx-code-syntax-string, #0b5615);
+  }
+
+  .astryx-diff-viewer .astryx-token-comment {
+    color: var(--astryx-code-syntax-comment, #6a6a6a);
+  }
+
+  .astryx-diff-viewer .astryx-token-number {
+    color: var(--astryx-code-syntax-number, #733100);
+  }
+
+  .astryx-diff-viewer .astryx-token-function {
+    color: var(--astryx-code-syntax-function, #00458c);
+  }
+
+  .astryx-diff-viewer .astryx-token-type {
+    color: var(--astryx-code-syntax-type, #6b187c);
+  }
+
+  .astryx-diff-viewer .astryx-token-tag {
+    color: var(--astryx-code-syntax-tag, #8a0011);
+  }
+
+  .astryx-diff-viewer .astryx-token-attribute {
+    color: var(--astryx-code-syntax-attribute, #584400);
+  }
+
+  .astryx-diff-viewer .astryx-token-property {
+    color: var(--astryx-code-syntax-property, #005348);
+  }
+
+  .astryx-diff-viewer .astryx-token-operator {
+    color: var(--astryx-code-syntax-operator, #6a6a6a);
+  }
+
+  .astryx-diff-viewer .astryx-token-constant {
+    color: var(--astryx-code-syntax-constant, #733100);
+  }
+
+  .astryx-diff-viewer .astryx-token-punctuation {
+    color: var(--astryx-code-syntax-punctuation, #6a6a6a);
+  }
+
+  .astryx-diff-viewer .astryx-token-variable {
+    color: var(--astryx-code-syntax-variable, #111111);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-diff-viewer__chevron {
+      transition: none;
+    }
+  }
+}