@qilin-agent/client-ui-primitives 0.0.0-stage → 3.1.3

package/lib/ConnectionIndicator.module.css

@@ -0,0 +1,123 @@
+.indicator {
+  flex: none;
+  display: inline-grid;
+  grid-template-columns: 14px max-content;
+  align-items: center;
+  column-gap: 4px;
+  height: 28px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 13px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  transition:
+    background-color 160ms ease-out,
+    color 160ms ease-out,
+    border-color 160ms ease-out,
+    opacity 150ms ease-out;
+  animation: indicator-enter 150ms ease-out;
+}
+
+.leaving {
+  opacity: 0;
+}
+
+@keyframes indicator-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+.warning {
+  background: var(--qilin-alias-state-warn-tertiary);
+  color: var(--qilin-alias-state-warn-label);
+  border-color: color-mix(in srgb, var(--qilin-alias-state-warn-label) 20%, transparent);
+  cursor: pointer;
+}
+
+.warning:hover {
+  background: color-mix(
+    in srgb,
+    var(--qilin-alias-state-warn-tertiary),
+    var(--qilin-alias-state-warn-primary) 6%
+  );
+}
+
+.warning:active {
+  background: color-mix(
+    in srgb,
+    var(--qilin-alias-state-warn-tertiary),
+    var(--qilin-alias-state-warn-primary) 10%
+  );
+}
+
+.warning:focus-visible {
+  outline: var(--qilin-focus-ring-width) solid var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.success {
+  background: var(--qilin-alias-state-success-tertiary);
+  color: var(--qilin-alias-state-success-primary);
+  border-color: color-mix(in srgb, var(--qilin-alias-state-success-primary) 20%, transparent);
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+}
+
+.label {
+  text-align: left;
+}
+
+.spinner {
+  animation: spinner-rotate 0.9s linear infinite;
+}
+
+@keyframes spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.dots {
+  display: inline-block;
+  width: 1em;
+  text-align: left;
+}
+
+.secondDot {
+  animation: reveal-second-dot 1.5s step-end infinite;
+}
+
+.thirdDot {
+  animation: reveal-third-dot 1.5s step-end infinite;
+}
+
+@keyframes reveal-second-dot {
+  0%, 33.32% { opacity: 0; }
+  33.33%, 100% { opacity: 1; }
+}
+
+@keyframes reveal-third-dot {
+  0%, 66.65% { opacity: 0; }
+  66.66%, 100% { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator,
+  .secondDot,
+  .thirdDot,
+  .spinner {
+    animation: none;
+  }
+
+  .indicator {
+    transition: none;
+  }
+}

package/lib/DiffBlock.module.css

@@ -0,0 +1,109 @@
+.block {
+  --dsl-diff-radius: 12px;
+  --dsl-diff-line-height: 22px;
+
+  position: relative;
+  margin: 16px 0;
+  color: var(--qilin-alias-label-primary);
+  background: var(--qilin-alias-markdown-code-block);
+  border-radius: var(--dsl-diff-radius);
+}
+
+/* The copy control floats in the top-right corner over the body, so the card
+   has no empty banner row above its first diff line (the TUI diff card has no
+   banner either — only the footer). The block is position: relative, so this
+   anchors to the card. */
+.copyButton {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 1;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: var(--qilin-alias-label-secondary);
+  cursor: pointer;
+  font: var(--qilin-font-xs-13);
+}
+
+.body {
+  padding: 12px 14px;
+  font: var(--qilin-font-markdown-code-block);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* No wrapping, no word-break: a diff is read by its indentation. */
+.line {
+  min-height: var(--dsl-diff-line-height);
+  white-space: pre;
+}
+
+/* A file header: the path in the primary tone, set apart by weight. The copy
+   button floats over this first row's top-right corner, so reserve space at the
+   line's end for it — a long path scrolls under the button otherwise, and the
+   button's hit area would eat clicks on the path's tail. */
+.path {
+  color: var(--qilin-alias-label-primary);
+  font-weight: 600;
+  padding-right: 56px;
+}
+
+/* A same-file second hunk's separator (a scattered edit), in the dim tone. */
+.gap {
+  color: var(--qilin-alias-label-tertiary);
+}
+
+/* The diff's own meaning-carrying colors: removed on the error token, added on
+   the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
+   shown line agree, and so the sign reads without relying on color alone. */
+.del::before {
+  content: '- ';
+  color: var(--qilin-alias-state-error-primary);
+}
+
+.del {
+  color: var(--qilin-alias-state-error-primary);
+}
+
+.add::before {
+  content: '+ ';
+  color: var(--qilin-alias-state-success-primary);
+}
+
+.add {
+  color: var(--qilin-alias-state-success-primary);
+}
+
+.context {
+  color: var(--qilin-alias-label-secondary);
+}
+
+.context::before {
+  content: '  ';
+}
+
+.expand {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: var(--qilin-alias-label-tertiary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.expand:hover {
+  color: var(--qilin-alias-label-secondary);
+}
+
+/* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
+   footer the TUI transcript's diff card draws. */
+.footer {
+  padding: 0 14px 12px;
+  font: var(--qilin-font-markdown-code-block);
+  color: var(--qilin-alias-label-tertiary);
+}

package/lib/DisclosureRow.module.css

@@ -0,0 +1,84 @@
+/* Shared disclosure header: [16px leading] gap 6 [title 13/24] at the default
+   size. The Settings font-size preference moves the row through the
+   body-published axis: title size follows the secondary tier
+   (--qilin-content-font-size-secondary: one step under the body — setting −1 at
+   ≤14, setting −2 above), and the row height, leading box, and glyph edge
+   shift by the body px delta so the icon keeps its optical share of the
+   line. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.row {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: calc(24px + var(--qilin-content-font-delta, 0px));
+  min-width: 0;
+}
+
+.row[data-expandable] {
+  cursor: pointer;
+}
+
+.leading {
+  position: relative;
+  flex: none;
+  width: calc(16px + var(--qilin-content-font-delta, 0px));
+  height: calc(16px + var(--qilin-content-font-delta, 0px));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--qilin-alias-label-tertiary);
+}
+
+/* Flow-row glyphs render at 14px inside the 16px box; the CSS edge overrides
+   each svg's own width/height attributes so every registered icon scales
+   without a per-callsite size prop. StateDot (its svg carries data-state)
+   stays at its fixed figma size — it is a status mark, not text furniture. */
+.leading svg:not([data-state]) {
+  width: calc(14px + var(--qilin-content-font-delta, 0px));
+  height: calc(14px + var(--qilin-content-font-delta, 0px));
+}
+
+button.leading {
+  cursor: pointer;
+}
+
+.iconIdle {
+  display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+.chevronHover {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.row:hover .iconIdle {
+  opacity: 0;
+}
+
+.row:hover .chevronHover {
+  opacity: 1;
+}
+
+.title {
+  flex: none;
+  font-size: var(--qilin-content-font-size-secondary, 13px);
+  line-height: calc(24px + var(--qilin-content-font-delta, 0px));
+  color: var(--qilin-alias-label-secondary);
+}

package/lib/FileTypeIcon.module.css

@@ -0,0 +1,50 @@
+.icon {
+  /* The design platform has no violet token matching the supplied image/video artwork. */
+  --qilin-file-type-violet: rgb(139, 118, 246);
+
+  color: var(--qilin-file-type-icon-color, var(--qilin-file-type-default-color));
+}
+
+.code {
+  --qilin-file-type-default-color: var(--qilin-static-deepseek-500);
+}
+
+.excel {
+  --qilin-file-type-default-color: var(--qilin-static-green-500);
+}
+
+.folder {
+  --qilin-file-type-default-color: var(--qilin-static-amber-400);
+}
+
+.html {
+  --qilin-file-type-default-color: var(--qilin-static-deepseek-500);
+}
+
+.image {
+  --qilin-file-type-default-color: var(--qilin-file-type-violet);
+}
+
+.markdown {
+  --qilin-file-type-default-color: var(--qilin-static-deepseek-500);
+}
+
+.other {
+  --qilin-file-type-default-color: var(--qilin-static-neutral-bluish-300);
+}
+
+.pdf {
+  --qilin-file-type-default-color: var(--qilin-static-red-600);
+}
+
+.ppt {
+  --qilin-file-type-default-color: var(--qilin-static-amber-500);
+}
+
+.video {
+  --qilin-file-type-default-color: var(--qilin-file-type-violet);
+}
+
+.word {
+  --qilin-file-type-default-color: var(--qilin-static-deepseek-450);
+}

package/lib/HoverCard.module.css

@@ -0,0 +1,70 @@
+/* Block, not inline-flex: consumers wrap full-width list rows and an
+ * inline wrapper would shrink them; the card still measures this rect. */
+.root {
+  position: relative;
+  display: block;
+}
+
+/* Preview card (figma session hover card): 244 wide, r12, pad 12/16, the
+ * menu card's elevation. Surface is #2C2C2E in both themes (figma value,
+ * light/dark identical), so a component-level variable, not a theme token.
+ * Hit-testable on purpose: resting the pointer on the card holds it open
+ * (HoverCard's grace close), which a `pointer-events: none` card cannot do. */
+.card {
+  --qilin-hovercard-bg: #2C2C2E;
+  position: fixed;
+  z-index: 100;
+  box-sizing: border-box;
+  width: 244px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: var(--qilin-hovercard-bg);
+  box-shadow: var(--qilin-shadow-lv3);
+}
+
+.copyable {
+  cursor: pointer;
+}
+
+.copyable:focus-visible {
+  outline: var(--qilin-focus-ring-width) solid var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.feedback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copied {
+  color: #FFFFFF;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+}
+
+.status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* An inline media anchor stays in the prose flow; the card it opens is a
+ * contained panel rather than the fixed-width session card above. */
+.inline { display: inline; }
+
+.media {
+  --qilin-scrollbar-thumb: var(--qilin-alias-scrollbar-bg-l2);
+  --qilin-scrollbar-thumb-hover: var(--qilin-alias-scrollbar-hover-l2);
+  overflow: auto;
+  padding: 8px;
+  border: 0;
+  color: var(--qilin-alias-label-primary);
+  background: var(--qilin-specific-menu);
+  backdrop-filter: var(--qilin-menu-backdrop-filter);
+  box-shadow: var(--qilin-elevation-panel);
+}

package/lib/ImageLightbox.module.css

@@ -0,0 +1,48 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 40px;
+}
+
+/* Same mask recipe as the Modal primitive and the settings dialog. A separate
+   layer, not a background on .backdrop: backdrop-filter there would blur the
+   previewed image and the close control along with the page. */
+.mask {
+  position: absolute;
+  inset: 0;
+  background: var(--qilin-alias-bg-mask-1);
+  backdrop-filter: var(--qilin-mask-blur);
+}
+
+.image {
+  position: relative;
+  max-width: min(100%, 1600px);
+  max-height: calc(100vh - 80px);
+  object-fit: contain;
+  border-radius: 12px;
+  background: var(--qilin-specific-input-major);
+  border: 0;
+  box-shadow: var(--qilin-elevation-prominent);
+}
+
+.close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 0.5px solid var(--qilin-alias-border-l2-darkmode-thin);
+  border-radius: 999px;
+  corner-shape: round;
+  background: var(--qilin-specific-input-major);
+  color: var(--qilin-alias-label-primary);
+  cursor: pointer;
+}
+
+.close:focus-visible { outline: var(--qilin-focus-ring-width) solid var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary)); outline-offset: 3px; }

package/lib/ImagePreview.module.css

@@ -0,0 +1,24 @@
+.frame {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--qilin-alias-bg-base);
+}
+.image { width: 100%; height: 100%; min-height: 0; object-fit: contain; opacity: 0; }
+.image[data-ready] { opacity: 1; }
+.status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  color: var(--qilin-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}

package/lib/Input.module.css

@@ -0,0 +1,38 @@
+.wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0.5px solid var(--qilin-alias-border-l4);
+  border-radius: 8px;
+  background: var(--qilin-alias-bg-layer-1);
+}
+
+.wrap:focus-within {
+  border-color: var(--qilin-alias-state-business-primary);
+}
+
+.icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--qilin-alias-label-tertiary);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--qilin-alias-label-primary);
+}
+
+.input::placeholder {
+  color: var(--qilin-alias-label-dimmed);
+}