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

package/lib/markdown/CodeBlock.module.css

@@ -0,0 +1,130 @@
+/* Visual baseline: deepsuite `@deepseek/md` code-block.css. Highlight colors
+   stay on the existing shiki `--shiki-*` sheet (not Prism highlight.css). */
+
+.block {
+  --dsl-code-block-banner-background-color: var(--qilin-alias-markdown-code-block-banner);
+  --dsl-code-block-border-radius: 12px;
+  /* Local 11/18 instead of the shared --qilin-font-xs-13: the banner scales
+     with the markdown 0.875 ladder without shrinking every other xs-13 use. */
+  --dsl-code-block-banner-font: 11px/18px var(--qilin-font-family);
+  --dsl-code-block-content-font: var(--qilin-font-markdown-code-block);
+  --dsl-code-block-background: var(--qilin-alias-markdown-code-block);
+
+  position: relative;
+  margin: 16px 0;
+  color: var(--qilin-alias-label-primary);
+  background: var(--dsl-code-block-background);
+  border-radius: var(--dsl-code-block-border-radius);
+}
+
+.block:not(:last-child) {
+  margin-bottom: 11px;
+}
+
+.bannerWrap {
+  position: sticky;
+  top: 0;
+  z-index: 6;
+  background-color: var(--qilin-alias-bg-base);
+  border-top-left-radius: var(--dsl-code-block-border-radius);
+  border-top-right-radius: var(--dsl-code-block-border-radius);
+}
+
+.banner {
+  background: var(--dsl-code-block-banner-background-color);
+  padding: 9px 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  font: var(--dsl-code-block-banner-font);
+  border-top-left-radius: var(--dsl-code-block-border-radius);
+  border-top-right-radius: var(--dsl-code-block-border-radius);
+}
+
+.infostring {
+  color: var(--qilin-alias-label-primary);
+  font-family: var(--ds-font-family-code);
+  font-size: 11px;
+  line-height: 18px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.copyButton {
+  background-color: rgb(255 255 255 / 0);
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+/* Consumers may turn the stable content node into a viewport without changing
+   the default CodeBlock layout. */
+.content {
+  display: contents;
+}
+
+.block :where(pre) {
+  font: var(--dsl-code-block-content-font);
+  padding: 16px;
+  margin: 0 !important;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--dsl-code-block-background);
+  /* Bottom radii live on <pre>: overflow:hidden on .block would kill the
+     sticky banner, and this opaque fill otherwise squares off the wrapper. */
+  border-bottom-left-radius: var(--dsl-code-block-border-radius);
+  border-bottom-right-radius: var(--dsl-code-block-border-radius);
+}
+
+/* Shiki inlines its theme background var; route it to the repo token. */
+.block :where(pre.shiki) {
+  background: var(--dsl-code-block-background) !important;
+}
+
+.block :where(pre) code {
+  font: inherit;
+  background: none;
+  padding: 0;
+}
+
+.plain {
+  color: var(--qilin-alias-label-primary);
+}
+
+.numbered :where(pre) code {
+  display: block;
+  counter-reset: source-line;
+  white-space: normal;
+}
+
+.numbered :where(pre) code > :global(.line) {
+  position: relative;
+  display: block;
+  min-height: 1lh;
+  padding-inline-start: calc(var(--dsl-code-block-line-number-width) + 12px);
+  counter-increment: source-line;
+  white-space: var(--dsl-code-block-line-white-space, pre-wrap);
+}
+
+.numbered :where(pre) code > :global(.line)::before {
+  position: absolute;
+  inset-inline-start: 0;
+  width: var(--dsl-code-block-line-number-width);
+  color: var(--qilin-alias-label-tertiary);
+  text-align: end;
+  content: counter(source-line);
+  user-select: none;
+}

package/lib/markdown/JsonBlock.module.css

@@ -0,0 +1,32 @@
+.root {
+  margin: 4px 0;
+}
+
+.toggle {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--qilin-alias-label-secondary);
+  padding: 2px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.toggle:hover {
+  background: var(--qilin-alias-interactive-bg-hover);
+}
+
+.body {
+  margin: 4px 0 0;
+  padding: 8px;
+  max-height: 200px;
+  overflow: auto;
+  background: var(--qilin-alias-markdown-code-block);
+  border: 0.5px solid var(--qilin-alias-border-l1);
+  border-radius: 6px;
+  font-family: var(--ds-font-family-code);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--qilin-alias-label-primary);
+}

package/lib/markdown/MarkdownText.module.css

@@ -0,0 +1,485 @@
+/* Visual baseline: deepsuite `@deepseek/md` markdown.css, adapted to CSS
+   Modules. Cite pills and header anchors are absent (no matching DOM).
+   Token names match that sheet. */
+
+.markdown {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font: var(--qilin-font-markdown-base);
+  color: var(--qilin-alias-label-primary);
+}
+
+.markdown strong {
+  font-weight: 600;
+}
+
+.markdown h1 {
+  font: var(--qilin-font-markdown-h1);
+  margin: 32px 0 16px;
+}
+
+.markdown h2 {
+  font: var(--qilin-font-markdown-h2);
+  margin: 32px 0 16px;
+}
+
+.markdown h3 {
+  font: var(--qilin-font-markdown-h3);
+  margin: 32px 0 16px;
+}
+
+.markdown h4 {
+  font: var(--qilin-font-markdown-h4);
+  margin: 16px 0;
+}
+
+.markdown :where(h5, h6) {
+  font: var(--qilin-font-markdown-base-strong);
+  margin: 16px 0;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6) strong {
+  font-weight: inherit;
+}
+
+.markdown p {
+  margin: 16px 0;
+}
+
+/* Tighten h4–h6 against a following list (design: 8px gap). */
+.markdown :where(h4, h5, h6) + :where(ul, ol) {
+  margin-top: 8px;
+}
+
+.markdown :where(h4, h5, h6):has(+ :where(ul, ol)) {
+  margin-bottom: 8px;
+}
+
+.markdown a,
+.markdown .fileLink {
+  /* deepsuite markdown.css uses brand-text (blue in newDesign); this sheet
+     keeps design-platform brand-text as near-black, so links use the
+     dedicated link alias instead. */
+  color: var(--qilin-alias-link);
+  font-weight: 500;
+  transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
+  position: relative;
+  text-decoration: none;
+  /* Transparent hit-area padding; literal zero-alpha only (no painted color). */
+  border-left: 3px solid rgb(255 255 255 / 0);
+  border-right: 3px solid rgb(255 255 255 / 0);
+  border-top: 2px solid rgb(255 255 255 / 0);
+  border-bottom: 2px solid rgb(255 255 255 / 0);
+  margin-left: -3px;
+  margin-right: -3px;
+}
+
+.markdown a:hover,
+.markdown a:focus {
+  outline: none;
+  text-decoration: underline dotted var(--qilin-alias-link);
+  text-underline-offset: 3px;
+}
+
+.markdown a:focus-visible,
+.fileMention:focus-visible {
+  box-shadow: 0 0 0 2px var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary));
+}
+
+/* Leading link-category glyph inside anchors, file mentions, and
+   URL-promoted inline code: outline glyphs ride the link's currentColor.
+   1.1em keeps the glyph proportional to the surrounding text's size (it
+   shrinks with the code chip's 0.875em); the small negative offset seats
+   its optical center on the cap height. */
+.linkIcon {
+  flex: none;
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: -0.25em;
+  margin-right: 5px;
+}
+
+.markdown :where(ul, ol) {
+  margin: 16px 0;
+  padding-left: 18px;
+}
+
+.markdown li:not(:first-child) {
+  margin-top: 6px;
+}
+
+.markdown li > :where(ul, ol) {
+  margin-top: 4px;
+}
+
+.markdown li::marker {
+  line-height: 24px;
+  color: var(--qilin-alias-label-secondary);
+}
+
+/* Nested ol under ul/ol: markers inside (models sometimes emit this shape). */
+.markdown :where(ul, ol) ol {
+  list-style-position: inside;
+  padding-left: 0;
+}
+
+.markdown :where(ul, ol) ol li p {
+  display: inline;
+}
+
+.markdown li > p {
+  margin: 8px 0;
+}
+
+.markdown li > *:first-child {
+  margin-top: 0;
+}
+
+/* Keep list-nested code-block vertical margins (design: +4px vs other last children). */
+.markdown li > *:last-child:not(:global(.md-code-block)) {
+  margin-bottom: 0;
+}
+
+.markdown hr {
+  display: block;
+  border: none;
+  height: 0.5px;
+  margin: 32px 0;
+  background: var(--qilin-alias-border-l2);
+}
+
+.markdown blockquote {
+  border-left: 2px solid var(--qilin-alias-label-caption);
+  margin: 16px 0 0;
+  padding-left: 14px;
+}
+
+.markdown pre {
+  margin: 16px 0;
+  font-family: var(--ds-font-family-code);
+  overflow: auto;
+}
+
+.markdown :not(pre) > code {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  font: var(--qilin-font-markdown-code);
+  font-family: var(--ds-font-family-code);
+  font-size: 0.875em !important;
+  background-color: var(--qilin-alias-markdown-inline-code);
+  border: 0.5px solid var(--qilin-alias-border-l1);
+  border-radius: 6px;
+  padding: 0 5px;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6) code {
+  font: inherit;
+  font-family: var(--ds-font-family-code);
+}
+
+.markdown :global(.katex-display) {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown input[type='checkbox'] {
+  margin: 0 8px 0 0;
+  accent-color: var(--qilin-alias-label-secondary);
+}
+
+.tableScroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+/* Wide tables reveal their horizontal bar on hover (or keyboard focus)
+   instead of keeping it painted. Chromium never repaints state-conditioned
+   scrollbar STYLES (neither hover-conditioned `::-webkit-scrollbar*` rules
+   nor a :hover `scrollbar-color` change reaches the painted bar), so the
+   toggle is `overflow-x` itself — a layout change repaints reliably. The
+   resting padding matches the themed bar's height on the WebKit scrollbar
+   path. There, `scroll` reserves that height even when the table fits.
+   Other engines and overlay scrollbars may reserve a different height.
+   Wheel and trackpad scrolling need the pointer over the table, which is
+   already the hover that re-enables scrolling. */
+.tableScroll:global(.md-table-wide) {
+  overflow-x: hidden;
+  padding-bottom: var(--qilin-scrollbar-width, 8px);
+}
+
+.tableScroll:global(.md-table-wide):hover,
+.tableScroll:global(.md-table-wide):focus-visible {
+  overflow-x: scroll;
+  padding-bottom: 0;
+}
+
+/* Chromium keyboard-focuses scrollable containers by default; the ring uses
+   the sheet's link focus color. */
+.tableScroll:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary));
+}
+
+/* Many-column tables (the renderer's `md-table-wide` hook) keep their
+   natural width and scroll inside the wrapper; a hosting layout may widen
+   the wrapper through the hook (deepsuite chat TableWrapper parity). */
+.tableScroll table {
+  border-collapse: collapse;
+  width: max-content;
+  max-width: max-content;
+}
+
+/* Tables under four columns, and any table inside a blockquote, fill the
+   column instead: cells wrap down to their minimum readable width, and the
+   wrapper's scroll only remains for the below-floor case (deepsuite chat
+   parity: `.wrapper:not(:has(th:nth-child(4), td:nth-child(4)))`). */
+.tableFill table {
+  width: 100%;
+  max-width: none;
+}
+
+.tableScroll th {
+  text-align: start;
+  padding: 10px 16px;
+  border-bottom: 0.5px solid var(--qilin-alias-border-l3);
+  border-top: none;
+  font: var(--qilin-font-markdown-table-head);
+  max-width: 320px;
+  max-width: min(30vw, 320px);
+  min-width: 100px;
+}
+
+.tableScroll td {
+  padding: 10px 16px;
+  border-bottom: 0.5px solid var(--qilin-alias-border-l2);
+  font: var(--qilin-font-markdown-table);
+  max-width: 320px;
+  max-width: min(30vw, 320px);
+  min-width: 100px;
+}
+
+.tableScroll th:first-child,
+.tableScroll td:first-child {
+  padding-left: 0;
+}
+
+.tableScroll td:last-child {
+  padding-right: 0;
+}
+
+.tableScroll table code {
+  font-size: 11px;
+}
+
+.markdown > *:first-child,
+.markdown p:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown > *:last-child,
+.markdown p:last-child {
+  margin-bottom: 0 !important;
+}
+
+.imageAlt {
+  color: var(--qilin-alias-label-tertiary);
+  font-style: italic;
+}
+
+.image {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+  border-radius: 8px;
+  background: var(--qilin-alias-bg-base);
+  object-fit: contain;
+}
+
+/* Inline file mention: the same link language this sheet gives anchors (and
+   thereby URL-promoted inline code) — link-blue at rest, dotted underline only
+   on hover/focus. An underline at rest reads badly inside the code chip, where
+   it collides with monospace descenders and the pill background. */
+.fileMention {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: 500;
+  color: var(--qilin-alias-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.fileLink {
+  max-width: 100%;
+  text-align: inherit;
+}
+
+.fileMention:hover,
+.fileMention:focus {
+  outline: none;
+  text-decoration: underline dotted var(--qilin-alias-link);
+  text-underline-offset: 3px;
+}
+
+.compact {
+  max-width: 100%;
+  font-size: var(--qilin-content-font-size-secondary, 13px);
+  line-height: calc(20px + var(--qilin-content-font-delta-secondary, 0px));
+  color: var(--qilin-alias-label-tertiary);
+}
+
+.compact :is(h1, h2, h3, h4, h5, h6) {
+  margin: 8px 0 4px;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+}
+
+.compact :is(p, ul, ol, blockquote) {
+  margin: 4px 0;
+}
+
+.compact li:not(:first-child) {
+  margin-top: 2px;
+}
+
+.compact li > p {
+  margin: 4px 0;
+}
+
+.compact li::marker {
+  line-height: inherit;
+  color: inherit;
+}
+
+.compact blockquote {
+  padding-left: 8px;
+}
+
+.compact hr {
+  margin: 8px 0;
+}
+
+.compact a,
+.compact .fileMention {
+  font-weight: inherit;
+  color: inherit;
+  text-decoration: underline dotted;
+}
+
+.compact a:hover,
+.compact a:focus,
+.compact .fileMention:hover,
+.compact .fileMention:focus {
+  text-decoration-color: currentColor;
+}
+
+.compact :not(pre) > code {
+  display: inline;
+  font: inherit;
+  font-family: var(--ds-font-family-code);
+  font-size: 1em !important;
+  border-radius: 4px;
+  padding: 0 3px;
+  box-decoration-break: clone;
+}
+
+.markdown.compact :global(.md-code-block) {
+  margin: 4px 0;
+  color: inherit;
+}
+
+.compact :global(.md-code-block) > :has(> [data-code-block-banner]) {
+  position: static;
+  z-index: auto;
+}
+
+.compact [data-code-block-banner] {
+  padding: 4px 8px;
+  font: inherit;
+}
+
+.compact [data-code-block-banner] > :first-child {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.compact pre {
+  margin: 4px 0;
+  padding: 8px;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Shiki writes token colors inline; compact code uses the surrounding text color. */
+.compact pre,
+.compact pre :is(code, span) {
+  color: inherit !important;
+}
+
+.markdown.compact .tableScroll {
+  width: 100%;
+  max-width: 100%;
+  margin: 4px 0;
+  padding-left: 0;
+}
+
+.markdown.compact .tableScroll > table {
+  z-index: auto;
+}
+
+.compact :is(th, td) {
+  padding: 4px 8px;
+  font: inherit;
+}
+
+.compact th {
+  font-weight: 600;
+}
+
+.compact :global(.katex) {
+  font-size: 1em;
+}
+
+/* Keep KaTeX's inline baseline and scroll the containing block only when needed. */
+.compact :is(p, h1, h2, h3, h4, h5, h6, ul, ol):has(:global(.katex)) {
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* KaTeX descenders can paint one pixel below a fractional line-box edge. */
+  padding-bottom: 1px;
+}
+
+.compact :global(.katex-display) {
+  margin: 4px 0;
+}
+
+.imageButton {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  vertical-align: middle;
+  cursor: zoom-in;
+}
+.imageButton .image { max-width: min(100%, 640px); max-height: 360px; }
+.imageButton:focus-visible { outline: var(--qilin-focus-ring-width) solid var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary)); outline-offset: 3px; }
+.previewName {
+  display: block;
+  margin-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--qilin-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}

package/lib/markdown/mermaid.module.css

@@ -0,0 +1,49 @@
+/* Mermaid diagram stage: centered, theme-neutral, click-to-zoom. */
+.stage {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0;
+  padding: 12px;
+  border-radius: var(--qilin-radius-md, 8px);
+  background: var(--qilin-alias-markdown-code-block, transparent);
+  cursor: zoom-in;
+  overflow-x: auto;
+}
+.stage:focus-visible {
+  outline: 2px solid var(--qilin-focus-ring-color, var(--qilin-alias-state-business-primary));
+  outline-offset: 2px;
+}
+.stage[data-mermaid-loading] {
+  min-height: 48px;
+  cursor: default;
+}
+.error {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.errorLine {
+  color: var(--qilin-alias-state-error-primary, inherit);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+.zoomOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: var(--qilin-alias-scrim, rgba(0, 0, 0, 0.5));
+  cursor: zoom-out;
+}
+.zoomStage {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  background: var(--qilin-alias-surface-raised, white);
+  border-radius: var(--qilin-radius-lg, 10px);
+  padding: 16px;
+  cursor: default;
+}

package/lib/types/Button.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+/** Visual variant, each backed by its --qilin-alias-button-* token family. */
+export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'toolbar';
+/**
+ * Render a button.
+ * @param props.variant - visual family (default 'ghost').
+ * @param props.size - 'md' 36px capsule (figma Button) or 'sm' 28px compact.
+ * @param props.icon - optional leading 16px icon node.
+ * @returns the button element; native button attributes pass through.
+ */
+export declare function Button({ variant, size, icon, className, children, ...rest }: {
+    variant?: ButtonVariant;
+    size?: 'md' | 'sm';
+    icon?: ReactNode;
+    className?: string | undefined;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map