@astryx-vue/lab 0.5.1 → 0.5.3

package/lab.css

@@ -13,3 +13,9 @@
 @import './styles/code-editor.css';
 @import './styles/chat-emoji-picker.css';
 @import './styles/chat-reaction-bar.css';
+@import './styles/comment-composer.css';
+@import './styles/comment-thread.css';
+@import './styles/comments.css';
+@import './styles/comment-pin.css';
+@import './styles/emoji-picker.css';
+@import './styles/schedule.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "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.7.14"
+    "@astryx-vue/core": "^0.7.20"
   },
   "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.7.14"
+    "@astryx-vue/core": "^0.7.20"
   },
   "scripts": {
     "build": "tsdown",

package/styles/comment-composer.css

@@ -0,0 +1,64 @@
+.astryx-comment-composer {
+  width: 100%;
+}
+
+.astryx-comment-composer .astryx-chat-composer {
+  --_chat-composer-radius: var(--astryx-radius-container, 0.75rem);
+}
+
+.astryx-comment-composer__quote {
+  width: 100%;
+  border-radius: var(--astryx-radius-inner, 0.375rem);
+}
+
+.astryx-comment-error-banner {
+  width: 100%;
+}
+
+.astryx-metadata-action {
+  white-space: nowrap;
+}
+
+.astryx-quoted-passage__text {
+  font-style: italic;
+}
+
+.astryx-quoted-passage[data-highlight-color='blue'] {
+  border-inline-start-color: var(--astryx-color-border-blue);
+}
+
+.astryx-quoted-passage[data-highlight-color='cyan'] {
+  border-inline-start-color: var(--astryx-color-border-cyan);
+}
+
+.astryx-quoted-passage[data-highlight-color='gray'] {
+  border-inline-start-color: var(--astryx-color-border-gray);
+}
+
+.astryx-quoted-passage[data-highlight-color='green'] {
+  border-inline-start-color: var(--astryx-color-border-green);
+}
+
+.astryx-quoted-passage[data-highlight-color='orange'] {
+  border-inline-start-color: var(--astryx-color-border-orange);
+}
+
+.astryx-quoted-passage[data-highlight-color='pink'] {
+  border-inline-start-color: var(--astryx-color-border-pink);
+}
+
+.astryx-quoted-passage[data-highlight-color='purple'] {
+  border-inline-start-color: var(--astryx-color-border-purple);
+}
+
+.astryx-quoted-passage[data-highlight-color='red'] {
+  border-inline-start-color: var(--astryx-color-border-red);
+}
+
+.astryx-quoted-passage[data-highlight-color='teal'] {
+  border-inline-start-color: var(--astryx-color-border-teal);
+}
+
+.astryx-quoted-passage[data-highlight-color='yellow'] {
+  border-inline-start-color: var(--astryx-color-border-yellow);
+}

package/styles/comment-pin.css

@@ -0,0 +1,159 @@
+/* CommentPin: a speech-bubble annotation marker. The 2px logical bottom-start
+   corner is intentional; no radius token is 2px, and themes may change
+   --astryx-radius-inner. */
+
+.astryx-comment-pin {
+  appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  transform-origin: left bottom;
+  margin: 0;
+  border-width: var(--astryx-border-width, 1px);
+  border-style: solid;
+  border-color: transparent;
+  border-end-start-radius: 2px;
+  background-color: var(--astryx-color-background-popover);
+  background-image: none;
+  box-shadow: var(--astryx-shadow-med);
+  color: var(--astryx-color-text-secondary);
+  cursor: pointer;
+  font-family: var(--astryx-font-family-body);
+  font-size: var(--astryx-text-supporting-size);
+  font-weight: var(--astryx-font-weight-semibold);
+  line-height: var(--astryx-text-supporting-leading);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.astryx-comment-pin:dir(rtl) {
+  transform-origin: right bottom;
+}
+
+.astryx-comment-pin[data-grouped='grouped'],
+.astryx-comment-pin[data-unread='unread'] {
+  justify-content: flex-start;
+  gap: var(--astryx-spacing-1);
+}
+
+.astryx-comment-pin[data-size='sm'] {
+  min-width: var(--astryx-size-element-sm);
+  height: var(--astryx-size-element-sm);
+  padding: calc((var(--astryx-size-element-sm) - 22px) / 2 - var(--astryx-border-width, 1px));
+  border-start-start-radius: calc(var(--astryx-size-element-sm) / 2);
+  border-start-end-radius: calc(var(--astryx-size-element-sm) / 2);
+  border-end-end-radius: calc(var(--astryx-size-element-sm) / 2);
+}
+
+.astryx-comment-pin[data-size='md'] {
+  min-width: var(--astryx-size-element-md);
+  height: var(--astryx-size-element-md);
+  padding: calc((var(--astryx-size-element-md) - 24px) / 2 - var(--astryx-border-width, 1px));
+  border-start-start-radius: calc(var(--astryx-size-element-md) / 2);
+  border-start-end-radius: calc(var(--astryx-size-element-md) / 2);
+  border-end-end-radius: calc(var(--astryx-size-element-md) / 2);
+}
+
+.astryx-comment-pin[data-size='lg'] {
+  min-width: var(--astryx-size-element-lg);
+  height: var(--astryx-size-element-lg);
+  padding: calc((var(--astryx-size-element-lg) - 28px) / 2 - var(--astryx-border-width, 1px));
+  border-start-start-radius: calc(var(--astryx-size-element-lg) / 2);
+  border-start-end-radius: calc(var(--astryx-size-element-lg) / 2);
+  border-end-end-radius: calc(var(--astryx-size-element-lg) / 2);
+}
+
+.astryx-comment-pin[data-selected='selected'] {
+  forced-color-adjust: none;
+  opacity: 1;
+  border-color: transparent;
+  background-color: var(--astryx-color-background-popover);
+  box-shadow: 0 0 0 2px var(--astryx-color-accent), var(--astryx-shadow-med);
+  color: var(--astryx-color-text-secondary);
+}
+
+.astryx-comment-pin[data-dimmed='dimmed']:not([data-selected='selected']) {
+  opacity: 0.4;
+}
+
+.astryx-comment-pin[data-disabled='disabled'] {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.astryx-comment-pin[data-disabled='disabled'][data-selected='selected'] {
+  opacity: 1;
+}
+
+.astryx-comment-pin:focus-visible {
+  outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+  outline-offset: var(--astryx-focus-outline-offset, 3px);
+}
+
+.astryx-comment-pin__avatar-rail {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.astryx-comment-pin__avatar-rail--grouped {
+  margin-inline-start: -2px;
+}
+
+.astryx-comment-pin__overflow {
+  padding-inline: 0;
+}
+
+.astryx-comment-pin__trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--astryx-spacing-1);
+  padding-inline-end: var(--astryx-spacing-1);
+}
+
+.astryx-comment-pin__count {
+  color: inherit;
+  font-variant-numeric: tabular-nums;
+}
+
+.astryx-comment-pin__unread {
+  display: inline-flex;
+  align-items: center;
+  forced-color-adjust: none;
+  color: var(--astryx-color-on-accent);
+}
+
+.astryx-comment-pin__unread :deep(.astryx-status-dot),
+.astryx-comment-pin__unread .astryx-status-dot {
+  background-color: var(--astryx-color-accent);
+  color: var(--astryx-color-on-accent);
+}
+
+@media (forced-colors: active) {
+  .astryx-comment-pin[data-selected='selected'] {
+    border-color: Highlight;
+    background-color: Highlight;
+    box-shadow: none;
+    color: HighlightText;
+  }
+
+  .astryx-comment-pin[data-dimmed='dimmed']:not([data-selected='selected']),
+  .astryx-comment-pin[data-disabled='disabled'] {
+    opacity: 1;
+  }
+
+  .astryx-comment-pin[data-disabled='disabled']:not([data-selected='selected']) {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .astryx-comment-pin__unread,
+  .astryx-comment-pin__unread .astryx-status-dot {
+    color: inherit;
+    background-color: currentColor;
+  }
+}

package/styles/comment-thread.css

@@ -0,0 +1,279 @@
+.astryx-comment-thread {
+  width: 100%;
+}
+
+.astryx-comment-thread:focus {
+  outline: none;
+}
+
+.astryx-comment-avatar-frame {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  min-width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  height: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  background-color: var(--astryx-color-background-card);
+}
+
+.astryx-comment-avatar-frame[data-avatar-shape='person'] {
+  border-radius: var(--astryx-radius-full);
+}
+
+.astryx-comment-avatar-frame[data-avatar-shape='agent'] {
+  border-radius: var(--astryx-radius-element);
+}
+
+.astryx-comment-avatar-spacer,
+.astryx-comment-avatar {
+  width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  min-width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  height: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+}
+
+.astryx-comment-nowrap {
+  white-space: nowrap;
+}
+
+.astryx-comment-body-clamped[data-comment-body-clamp='3'] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.astryx-comment-unread-badge {
+  animation-name: astryx-comment-unread-fade;
+  animation-delay: 5s;
+  animation-duration: var(--astryx-duration-slow-max, 500ms);
+  animation-timing-function: var(--astryx-ease-standard, ease);
+  animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .astryx-comment-unread-badge {
+    animation-duration: 1ms;
+  }
+}
+
+@keyframes astryx-comment-unread-fade {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.astryx-comment-anchor-quote {
+  padding-block: var(--astryx-spacing-1, 4px);
+  width: 100%;
+}
+
+.astryx-comment-progress-label {
+  color: var(--astryx-color-text-secondary);
+}
+
+@supports (background-clip: text) {
+  .astryx-comment-progress-label {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--astryx-color-text-secondary) 40%,
+      var(--astryx-color-text-primary) 50%,
+      var(--astryx-color-text-secondary) 60%
+    );
+    background-size: 250% 100%;
+    background-clip: text;
+    animation-name: astryx-comment-progress-shimmer;
+    animation-duration: calc(var(--astryx-duration-slow-max, 500ms) * 2);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .astryx-comment-progress-label {
+    color: var(--astryx-color-text-secondary);
+    background-image: none;
+    animation-name: none;
+  }
+}
+
+@keyframes astryx-comment-progress-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: 0 0;
+  }
+}
+
+.astryx-thread-rail-row {
+  position: relative;
+}
+
+.astryx-thread-rail {
+  position: absolute;
+  inset-inline-start: calc(var(--astryx-spacing-3, 12px) + var(--astryx-border-width, 1px));
+  width: var(--astryx-spacing-0-5, 2px);
+  background-color: var(--astryx-color-border-emphasized);
+  pointer-events: none;
+}
+
+.astryx-thread-rail[data-from='avatar'] {
+  inset-block-start: calc(
+    var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px) + var(--astryx-spacing-1, 4px)
+  );
+}
+
+.astryx-thread-rail[data-from='row'] {
+  inset-block-start: 0;
+}
+
+.astryx-thread-rail[data-to='avatar'] {
+  inset-block-end: calc(var(--astryx-spacing-1, 4px) - var(--astryx-spacing-2, 8px));
+}
+
+.astryx-thread-rail[data-to='row'] {
+  inset-block-end: calc(-1 * var(--astryx-spacing-2, 8px));
+}
+
+.astryx-thread-rail--collapsed {
+  position: absolute;
+  inset-block-start: calc(
+    var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px) + var(--astryx-spacing-1, 4px)
+  );
+  inset-block-end: 0;
+  inset-inline-start: calc(var(--astryx-spacing-3, 12px) + var(--astryx-border-width, 1px));
+  width: var(--astryx-spacing-0-5, 2px);
+  background-image: linear-gradient(to bottom, var(--astryx-color-border-emphasized), transparent);
+  pointer-events: none;
+  z-index: -1;
+}
+
+.astryx-thread-surface[data-selectable='true'] {
+  cursor: pointer;
+}
+
+.astryx-thread-surface[data-focused='true'] {
+  outline-style: var(--astryx-focus-outline-style, solid);
+  outline-width: var(--astryx-focus-outline-width, 2px);
+  outline-color: var(--astryx-focus-outline-color, Highlight);
+  outline-offset: var(--astryx-focus-outline-offset, 2px);
+}
+
+.astryx-thread-surface[data-thread-surface='card'][data-filled='true'] {
+  background-color: var(--astryx-color-background-muted);
+}
+
+@media (forced-colors: active) {
+  .astryx-thread-surface[data-filled='true'] {
+    outline-style: solid;
+    outline-width: calc(var(--astryx-border-width, 1px) * 2);
+    outline-color: Highlight;
+    outline-offset: calc(var(--astryx-border-width, 1px) * -2);
+  }
+}
+
+.astryx-thread-section-overlap:not(:first-child) {
+  margin-block-start: calc(-1 * var(--astryx-border-width, 1px));
+}
+
+.astryx-comment-header {
+  height: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  min-height: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+}
+
+.astryx-comment-metadata {
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-width: 0;
+}
+
+.astryx-comment-metadata--beside-actions {
+  max-width: calc(100% - var(--astryx-spacing-6, 24px) - var(--astryx-spacing-1, 4px));
+}
+
+.astryx-comment-author-name {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.astryx-comment-agent-badge {
+  flex-shrink: 0;
+}
+
+.astryx-comment-actions-reveal {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-width: 0;
+  transition: none;
+}
+
+.astryx-comment-actions-list {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-width: 0;
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  gap: var(--astryx-spacing-0-5, 2px);
+}
+
+.astryx-comment-control-row-bleed {
+  margin-inline-start: calc(-1 * var(--astryx-spacing-2, 8px));
+}
+
+.astryx-comment-reaction-toggle {
+  aspect-ratio: auto;
+  padding-inline: var(--astryx-spacing-2, 8px);
+}
+
+.astryx-comment-markdown-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-block: var(--astryx-spacing-2, 8px);
+  cursor: zoom-in;
+}
+
+.astryx-comment-markdown-image:focus-visible {
+  outline-style: var(--astryx-focus-outline-style, solid);
+  outline-width: var(--astryx-focus-outline-width, 2px);
+  outline-color: var(--astryx-focus-outline-color, Highlight);
+  outline-offset: var(--astryx-focus-outline-offset, 2px);
+}
+
+.astryx-comment-thread-rows {
+  position: relative;
+  isolation: isolate;
+}
+
+.astryx-comment-reply-disclosure {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--astryx-color-text-secondary);
+  font: inherit;
+  cursor: pointer;
+  text-align: start;
+}
+
+.astryx-comment-reply-disclosure:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.astryx-comment-reply-disclosure:focus-visible {
+  outline: 2px solid var(--astryx-color-border-focus, Highlight);
+  outline-offset: 2px;
+}

package/styles/comments.css

@@ -0,0 +1,53 @@
+/* Comments panel: a pane fills its container; an embedded list is content-height. */
+.astryx-comments {
+  min-width: 0;
+}
+
+.astryx-comments[data-layout='pane'] {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.astryx-comments[data-layout='pane'] > .astryx-chat-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.astryx-comments-timeline {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+}
+
+/* A card parent's Sections bleed through ChatMessageList padding to the panel edge. */
+.astryx-comments-timeline--bleed-compact {
+  width: calc(100% + (var(--astryx-spacing-3) * 2));
+  margin-inline: calc(-1 * var(--astryx-spacing-3));
+  margin-block-start: calc(-1 * var(--astryx-spacing-2));
+}
+
+.astryx-comments-timeline--bleed-balanced {
+  width: calc(100% + (var(--astryx-spacing-4) * 2));
+  margin-inline: calc(-1 * var(--astryx-spacing-4));
+  margin-block-start: calc(-1 * var(--astryx-spacing-4));
+}
+
+/* ChatLayout's dock pads one step less than the message list; restore the inset. */
+.astryx-comments-composer-dock {
+  padding-inline: var(--astryx-spacing-1);
+}
+
+.astryx-comments-event {
+  padding-inline-start: var(--astryx-spacing-3);
+}
+
+.astryx-comments-event-avatar {
+  width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+  min-width: calc(var(--astryx-spacing-6, 24px) + var(--astryx-spacing-1, 4px));
+}
+
+.astryx-comments-loading-composer {
+  border-radius: var(--astryx-radius-container);
+}

package/styles/emoji-picker.css

@@ -0,0 +1,90 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-emoji-picker {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  .astryx-emoji-picker__grids {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-3, 12px);
+    width: 100%;
+    min-width: 0;
+  }
+
+
+  /* 分组标题在列表顶部吸住，背景用弹出层表面色，避免表情滚过去时透出来。 */
+  .astryx-emoji-picker__category {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    background-color: var(--astryx-color-background-popover, light-dark(#ffffff, #1b1b1b));
+  }
+
+  .astryx-emoji-picker__row {
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    column-gap: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-emoji-picker__grid-cell {
+    display: flex;
+    min-width: 0;
+  }
+
+  .astryx-emoji-picker__cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    aspect-ratio: 1;
+    margin: 0;
+    padding: 0;
+    border-style: none;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background-color: transparent;
+    color: inherit;
+    font-family: var(--astryx-font-family-body, inherit);
+    font-size: var(--astryx-text-large-size, 1.125rem);
+    line-height: 1;
+    cursor: pointer;
+    /* 格子紧挨着，外扩的焦点环会压到旁边的格子，所以向内收 2px。 */
+    outline-offset: 0;
+    transition-property: background-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    .astryx-emoji-picker__cell:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-emoji-picker__cell:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  .astryx-emoji-picker__cell:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: -2px;
+  }
+
+  .astryx-emoji-picker__preview {
+    min-height: var(--astryx-spacing-8, 32px);
+  }
+
+  .astryx-emoji-picker__preview-emoji {
+    font-size: var(--astryx-text-large-size, 1.125rem);
+    line-height: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-emoji-picker__cell {
+      transition-duration: 0s;
+    }
+  }
+}