@astryx-vue/lab 0.0.0-stage → 0.1.0

package/styles/log-stream.css

@@ -0,0 +1,271 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 终端变体故意始终是深色（终端是品牌面，和真终端一样），所以它用固定的
+   * 近黑灰色，而不是会跟着明暗切换的 light-dark() 主题变量。
+   */
+
+  .astryx-log-stream {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    border-width: var(--astryx-border-width, 1px);
+    border-style: solid;
+    border-color: var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+    background-color: var(--astryx-color-background-surface, light-dark(#ffffff, #262626));
+    overflow: hidden;
+    font-family: var(--astryx-font-family-code, ui-monospace, monospace);
+    font-size: var(--astryx-font-size-sm, 0.75rem);
+  }
+
+  .astryx-log-stream[data-variant='terminal'] {
+    border-color: #26262a;
+    background-color: #0a0a0a;
+  }
+
+  .astryx-log-stream__scroller {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    overscroll-behavior: contain;
+  }
+
+  /* 一行：时间 / 级别 / 来源 / 消息四列，列数按有没有来源、时间变。 */
+  .astryx-log-stream__row {
+    display: grid;
+    align-items: baseline;
+    column-gap: var(--astryx-spacing-3, 12px);
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    line-height: 1.7;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    border-bottom-width: var(--astryx-border-width, 1px);
+    border-bottom-style: solid;
+    border-bottom-color: var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+    /* 屏幕外的行跳过布局和绘制；intrinsic size 保证滚动条长度稳定。
+       这里没有虚拟化，几千行以上的日志由使用方自己窗口化。 */
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto 28px;
+    /* 追加到尾部的新行淡入；只动透明度，减少动效时立刻出现。 */
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: var(--astryx-duration-fast-min, 95ms);
+    transition-timing-function: ease-out;
+  }
+
+  .astryx-log-stream__row[data-cols='full'] {
+    grid-template-columns: 96px 52px 128px minmax(0, 1fr);
+  }
+
+  .astryx-log-stream__row[data-cols='no-source'] {
+    grid-template-columns: 96px 52px minmax(0, 1fr);
+  }
+
+  .astryx-log-stream__row[data-cols='no-timestamp'] {
+    grid-template-columns: 52px 128px minmax(0, 1fr);
+  }
+
+  .astryx-log-stream__row[data-cols='message-only'] {
+    grid-template-columns: 52px minmax(0, 1fr);
+  }
+
+  @starting-style {
+    .astryx-log-stream__row {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-log-stream__row {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  .astryx-log-stream__row:last-child {
+    border-bottom-width: 0;
+  }
+
+  /* 终端变体：去掉行分隔线，行距压到 1px，贴合真终端的密度。 */
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row {
+    color: #b9b9c0;
+    border-bottom-width: 0;
+    padding-block: 1px;
+  }
+
+  /* 带详情的行本身是个按钮：整行可点，键盘也能开关。 */
+  .astryx-log-stream__row--button {
+    width: 100%;
+    text-align: left;
+    border-top-width: 0;
+    border-inline-width: 0;
+    font-family: var(--astryx-font-family-code, ui-monospace, monospace);
+    font-size: var(--astryx-font-size-sm, 0.75rem);
+    cursor: pointer;
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-log-stream__row--button:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+
+    .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row--button:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: #141417;
+    }
+  }
+
+  .astryx-log-stream__row--button:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /* error / warn 整行淡染一层，颜色由主题变量混出来，不另开一套色板。 */
+  .astryx-log-stream:not([data-variant='terminal']) .astryx-log-stream__row[data-level='error'] {
+    background-color: color-mix(in srgb, var(--astryx-color-error, light-dark(#76000c, #ffc4be)) 6%, transparent);
+  }
+
+  .astryx-log-stream:not([data-variant='terminal']) .astryx-log-stream__row[data-level='warn'] {
+    background-color: color-mix(in srgb, var(--astryx-color-warning, light-dark(#4b3900, #f8d36a)) 5%, transparent);
+  }
+
+  .astryx-log-stream__time {
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__time {
+    color: #8b8b94;
+  }
+
+  .astryx-log-stream__level {
+    font-size: var(--astryx-font-size-xs, 0.625rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  .astryx-log-stream__row[data-level='debug'] .astryx-log-stream__level {
+    color: var(--astryx-color-text-disabled, light-dark(#919191, #525252));
+  }
+
+  /*
+   * 主题的黄和红是为填充块调的，当小字用达不到 4.5:1。
+   * light-dark() 在浅色下把黄压深、在深色下把红提亮，都从主题变量算出来。
+   */
+  .astryx-log-stream__row[data-level='warn'] .astryx-log-stream__level {
+    color: light-dark(color-mix(in srgb, var(--astryx-color-warning, #4b3900) 58%, black), var(--astryx-color-warning, #f8d36a));
+  }
+
+  .astryx-log-stream__row[data-level='error'] .astryx-log-stream__level {
+    color: light-dark(var(--astryx-color-error, #76000c), color-mix(in srgb, var(--astryx-color-error, #ffc4be) 82%, white));
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='info'] .astryx-log-stream__level {
+    color: #b9b9c0;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='debug'] .astryx-log-stream__level {
+    color: #8b8b94;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='warn'] .astryx-log-stream__level {
+    color: #f2c00b;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='error'] .astryx-log-stream__level {
+    color: #ff6166;
+  }
+
+  .astryx-log-stream__source {
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__source {
+    color: #8b8b94;
+  }
+
+  .astryx-log-stream__message {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__message {
+    color: #b9b9c0;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='error'] .astryx-log-stream__message {
+    color: #ff6166;
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__row[data-level='warn'] .astryx-log-stream__message {
+    color: #f2c00b;
+  }
+
+  /* 展开的详情面板：比行底色深一层，和上下行之间留分隔线。 */
+  .astryx-log-stream__detail {
+    padding-block: var(--astryx-spacing-3, 12px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+    border-bottom-width: var(--astryx-border-width, 1px);
+    border-bottom-style: solid;
+    border-bottom-color: var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
+  }
+
+  .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__detail {
+    background-color: #0e0e10;
+    border-bottom-color: #26262a;
+    color: #b9b9c0;
+  }
+
+  /* 「跳到最新」固定在滚动区右下角。 */
+  .astryx-log-stream__jump {
+    position: absolute;
+    bottom: var(--astryx-spacing-3, 12px);
+    inset-inline-end: var(--astryx-spacing-3, 12px);
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    border-radius: var(--astryx-radius-full, 9999px);
+    border-width: var(--astryx-border-width, 1px);
+    border-style: solid;
+    border-color: var(--astryx-color-border-emphasized, light-dark(#d4d4d4, #525252));
+    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-code, ui-monospace, monospace);
+    font-size: var(--astryx-font-size-sm, 0.75rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    cursor: pointer;
+    box-shadow: var(--astryx-shadow-med, 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)));
+  }
+
+  @media (hover: hover) {
+    .astryx-log-stream__jump:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+    }
+
+    .astryx-log-stream[data-variant='terminal'] .astryx-log-stream__jump:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: #1d1d21;
+    }
+  }
+
+  .astryx-log-stream__jump:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  .astryx-log-stream__jump: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-log-stream[data-variant='terminal'] .astryx-log-stream__jump {
+    border-color: #26262a;
+    background-color: #141417;
+    color: #e8e8ea;
+  }
+}

package/styles/mobile-tokenizer.css

@@ -0,0 +1,146 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 触发器：一个能容纳多个标签的方框，最小 44px 保证手指点得到。 */
+  .astryx-mobile-tokenizer__trigger {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    width: 100%;
+    min-height: 44px;
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+    border: 1px solid var(--astryx-color-border, #00000014);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background-color: transparent;
+    color: var(--astryx-color-text-primary, light-dark(#0a0a0a, #fafafa));
+    text-align: start;
+    cursor: pointer;
+  }
+
+  /* 禁用时指针样式和普通文字一致，不做「不可点」的暗示。 */
+  .astryx-mobile-tokenizer__trigger:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /* 键盘聚焦时的焦点环。 */
+  .astryx-mobile-tokenizer__trigger: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, 2px);
+  }
+
+  .astryx-mobile-tokenizer__trigger-placeholder {
+    color: var(--astryx-color-text-secondary, light-dark(#6a6a6a, #9e9e9e));
+  }
+
+  /*
+   * 面板内容自己撑满高度并自己管滚动，所以底栏能贴着底部。
+   * 顶部留出抓手的位置，左右和底部留一点边。
+   */
+  .astryx-mobile-tokenizer__sheet-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    padding-inline: var(--astryx-spacing-3, 12px);
+    padding-block-start: var(--astryx-spacing-8, 32px);
+    padding-block-end: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-mobile-tokenizer__filter-row {
+    display: flex;
+    align-items: flex-end;
+    padding-block-end: var(--astryx-spacing-2, 8px);
+  }
+
+  /* core 的 TextInput 会让字段框收缩到内容宽，这里必须撑满整行。 */
+  .astryx-mobile-tokenizer__filter-input {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+    height: var(--astryx-size-element-lg, 36px);
+    min-height: var(--astryx-size-element-lg, 36px);
+  }
+
+  .astryx-mobile-tokenizer__list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  /* 一行既是一个复选框，也是整块可点的区域。 */
+  .astryx-mobile-tokenizer__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    min-height: 44px;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-1, 4px);
+    border-width: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background-color: transparent;
+    color: var(--astryx-color-text-primary, light-dark(#0a0a0a, #fafafa));
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-mobile-tokenizer__row:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  @media (hover: hover) {
+    .astryx-mobile-tokenizer__row:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000a, #ffffff12));
+    }
+  }
+
+  .astryx-mobile-tokenizer__row:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: calc(-1 * var(--astryx-focus-outline-width, 2px));
+  }
+
+  .astryx-mobile-tokenizer__row-label {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .astryx-mobile-tokenizer__create-row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    min-height: 44px;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-mobile-tokenizer__create-label {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  /* 底栏两个按钮等宽，贴着面板底部。 */
+  .astryx-mobile-tokenizer__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    padding-block-start: var(--astryx-spacing-3, 12px);
+    margin-top: auto;
+  }
+
+  .astryx-mobile-tokenizer__footer-action {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+
+  /* 没有条目时空白区撑满，让提示居中。 */
+  .astryx-mobile-tokenizer__empty {
+    flex-grow: 1;
+  }
+}

package/styles/stat.css

@@ -0,0 +1,101 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 纵向堆叠：标题、数值行、说明、趋势插槽。 */
+  .astryx-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-stat__label {
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  /* 数值和涨跌幅按基线对齐，字号不同也不会错位。 */
+  .astryx-stat__value-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  /* 等宽数字：数字变化时宽度不跳。 */
+  .astryx-stat__value {
+    font-family: var(--astryx-font-family-heading, inherit);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: var(--astryx-text-heading-2-leading, 1.4);
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-variant-numeric: tabular-nums;
+  }
+
+  .astryx-stat[data-size='sm'] .astryx-stat__value {
+    font-size: var(--astryx-font-size-xl, 1.25rem);
+  }
+
+  .astryx-stat[data-size='md'] .astryx-stat__value {
+    font-size: var(--astryx-font-size-2xl, 1.5rem);
+  }
+
+  .astryx-stat[data-size='lg'] .astryx-stat__value {
+    font-size: var(--astryx-font-size-3xl, 1.8125rem);
+  }
+
+  .astryx-stat__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .astryx-stat__delta-glyph {
+    flex-shrink: 0;
+  }
+
+  .astryx-stat__delta[data-sentiment='positive'] {
+    color: var(--astryx-color-success, light-dark(#00490b, #a4d6a3));
+  }
+
+  .astryx-stat__delta[data-sentiment='negative'] {
+    color: var(--astryx-color-error, light-dark(#76000c, #ffc4be));
+  }
+
+  .astryx-stat__delta[data-sentiment='neutral'] {
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  .astryx-stat__description {
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  /* 趋势插槽铺满父容器宽度，图能跟着 Stat 的宽度走。 */
+  .astryx-stat__media {
+    margin-block-start: var(--astryx-spacing-1, 4px);
+    align-self: stretch;
+    min-width: 0;
+  }
+
+  /* 只给读屏软件念的方向说明。 */
+  .astryx-stat__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}