@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.3

package/src/client/conversation/git-graph/git-graph.module.css

@@ -0,0 +1,792 @@
+/* Branch selector chip for blank sessions. Tokens by default; the stock-light
+   fallback defines a small literal palette because the unskinned shell tokens
+   are too low-contrast. */
+
+.anchor {
+  position: relative;
+}
+
+/* Positioning wrapper for the chip and popover. */
+.chipWrap {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Hero phase: leave the dock row and join the official hero chip row. The
+   inline left/top offsets are measured against the composer stack; the row
+   gap and the seat metrics mirror the official WorkspaceChip /
+   AgentPresetSeat recipe. */
+.anchorHero {
+  position: absolute;
+  z-index: 10;
+  padding-left: 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: var(--dsw-alias-button-tool-bar-fill);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
+    gap 120ms ease, padding 120ms ease;
+}
+
+.chip:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chip:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.chip:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.chip:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.chip:disabled:hover {
+  background: var(--dsw-alias-button-tool-bar-fill);
+}
+
+.chipOpen {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary);
+}
+
+.chipLabel {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chipChevron {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* Hero seat: the official hero-row chips are transparent 28px pills with
+   label-primary text and interactive-bg hover/open states (the same recipe
+   as WorkspaceChip and AgentPresetSeat in the official UI packages: 8px
+   radius, 16px glyph, 13px/500 label). */
+.chipHero {
+  height: auto;
+  min-height: 28px;
+  max-width: min(100%, 240px);
+  padding: 0 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.chipHero:hover,
+.chipHero:active,
+.chipHero.chipOpen {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chipHero .chipLabel {
+  max-width: 180px;
+}
+
+.chipHero .chipChevron {
+  color: var(--dsw-alias-label-caption);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+}
+
+.popover {
+  position: absolute;
+  /* The selector row sits above the input card: the popover opens UPWARD,
+     capped at the same 360px as the workspace picker menu beside it. */
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  max-height: 360px;
+  border: 1px solid var(--dsw-alias-border-inverted);
+  border-radius: 12px;
+  /* Menu surface: specific-menu keeps the panel one step above the app
+     background in both themes and follows third-party skins. */
+  background: var(--dsw-specific-menu);
+  box-shadow: var(--dsw-shadow-lv3);
+  padding: 4px;
+  overflow: hidden;
+}
+
+/* In the hero row the menu opens downward (top: calc(100% + 4px)), matching
+   the official workspace picker anchored under the same chip row. */
+.popoverHero {
+  bottom: auto;
+  top: calc(100% + 4px);
+}
+
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 8px;
+  padding: 6px 10px;
+  /* Background-based distinction (no border): on light the muted grey
+     separates the field from the white panel; dark overrides below. */
+  /* 2px transparent slot: focus paints the brand color without shift. */
+  border: 2px solid transparent;
+  border-radius: 8px;
+  /* Classic input-field grey on light (interactive-bg-hover-solid is the
+     standard #f1f3f5 input tone), overridden below in dark. */
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: var(--dsw-alias-label-primary);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.searchBox:focus-within {
+  /* Focused state = brand-colored 2px border (theme token, visible in
+     both themes), no extra ring. */
+  border-color: var(--dsw-alias-brand-primary);
+  box-shadow: none;
+}
+body[data-ds-dark-theme] .searchBox {
+  background: var(--dsw-alias-bg-base);
+}
+
+.searchInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  transition: box-shadow 120ms ease;
+}
+
+.searchInput::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.list {
+  flex: 1;
+  min-height: 64px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 2px 6px 6px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-scrollbar-bg-l2) transparent;
+}
+.list::-webkit-scrollbar {
+  width: 6px;
+}
+.list::-webkit-scrollbar-thumb {
+  background: var(--dsw-alias-scrollbar-bg-l2);
+  border-radius: 3px;
+}
+.list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border: none;
+  /* UA buttons paint a surface color (buttonface); pin transparent so
+     only hover/active tints show.  Full-width so long names ellipsize
+     in place and the trailing check stays visible. */
+  background: transparent;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  position: relative;
+  transition: background-color 120ms ease;
+}
+
+.item:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.item:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.item:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.item:disabled:hover {
+  background: none;
+}
+
+
+
+.itemText {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemName {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+}
+
+.itemPath {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  margin-top: 1px;
+}
+
+.check {
+  color: var(--dsw-alias-brand-primary);
+  flex: none;
+}
+
+.empty {
+  padding: 14px 10px;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+}
+
+.dirty {
+  margin: 0 10px 4px;
+  color: var(--dsw-alias-state-warn-primary);
+  font-size: 11px;
+}
+
+.notice {
+  margin: 0 8px 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  /* Never pair a solid state-secondary fill with state-primary text: dark
+     themes alias both onto the same static color (the official dark theme
+     maps both error tokens to red-400), which renders the message invisible.
+     Tint the banner from the primary token instead (the aionui-panel scm
+     banner idiom). */
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 14%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+}
+
+.noticeOk {
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+  padding: 6px;
+}
+
+.footerItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  text-align: left;
+  transition: background-color 120ms ease;
+}
+
+.footerItem:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.footerItem:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.footerItem:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.footerItem:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.footerItem:disabled:hover {
+  background: none;
+}
+
+.footerItemDisabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.footerItemDisabled:hover {
+  background: none;
+}
+
+.footerHint {
+  margin-left: auto;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+}
+
+.dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  width: min(760px, calc(100vw - 48px));
+  max-height: min(76vh, 720px);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-overlay);
+  box-shadow: 0 12px 32px var(--dsw-alias-bg-mask-2);
+  padding: 16px 16px 12px;
+}
+
+.dialogHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 4px;
+}
+
+.dialogHeading {
+  min-width: 0;
+}
+
+.dialogClose {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin: -2px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.dialogClose:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.dialogClose:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.dialogClose:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.dialogTitle {
+  margin: 0 0 2px;
+  color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.dialogDescription {
+  margin: 0 0 12px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.dialogField {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dialogLabel {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+
+.dialogInput {
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.dialogInput:focus {
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.dialogInput:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.dialogError {
+  margin-top: 8px;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+}
+
+/* The create result: where the new branch's worktree is, and whether this
+   conversation moved onto it. Informational, not an error. */
+.dialogNotice {
+  margin-top: 4px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-overlay, rgb(0 0 0 / 5%));
+  color: var(--dsw-alias-label-primary, #111827);
+  font-size: 12px;
+  line-height: 17px;
+}
+
+.dialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.dialogButton {
+  padding: 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-button-tool-bar-fill);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  font-size: 13px;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.dialogButton:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.dialogButton:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.dialogButton:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+.dialogButton:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.dialogButton:disabled:hover {
+  background: var(--dsw-alias-button-tool-bar-fill);
+}
+
+.dialogButtonPrimary {
+  border-color: var(--dsw-alias-button-primary-fill);
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+  transition: background-color 120ms ease, border-color 120ms ease, filter 120ms ease;
+}
+
+.dialogButtonPrimary:hover {
+  background: var(--dsw-alias-button-primary-hover);
+}
+
+.dialogButtonPrimary:active {
+  filter: brightness(0.92);
+}
+
+.dialogButtonPrimary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-button-contrast-fill), 0 0 0 4px var(--dsw-alias-brand-primary);
+}
+
+.dialogButtonPrimary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.dialogButtonPrimary:disabled:hover {
+  background: var(--dsw-alias-button-primary-fill);
+}
+
+.graphBody {
+  flex: 1;
+  min-height: 240px;
+  overflow-y: auto;
+  margin-top: 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  padding: 4px;
+}
+
+.graphSubtitle {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+.graphRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 8px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.graphRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.graphLanes {
+  display: flex;
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.graphLaneCell {
+  display: inline-block;
+  width: 15px;
+  text-align: center;
+  flex: none;
+}
+
+.graphLaneNode {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 700;
+}
+
+.graphLaneMerge {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 700;
+}
+
+.graphLanePass {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.graphOid {
+  flex: none;
+  min-width: 58px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.graphMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.graphSubject {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.graphMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+}
+
+.graphMetaSep {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.graphRef {
+  flex: none;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 10px;
+}
+
+.graphRefCurrent {
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-button-contrast-fill);
+}
+
+/* Stock light fallback: BranchChip marks the unskinned light page at
+   runtime. */
+[data-gitgraph-chip-anchor][data-gitgraph-stock-light] {
+  --gitgraph-stock-ink-rgb: 15, 17, 21;
+  --gitgraph-stock-ink: #0f1115;
+  --gitgraph-stock-on-success: #ffffff;
+  --gitgraph-stock-success-fill: #137333;
+  --gitgraph-stock-success-border: #0f5f2b;
+  --dsw-alias-button-tool-bar-fill: rgba(var(--gitgraph-stock-ink-rgb), 0.04);
+  --dsw-alias-button-tool-bar-hover: rgba(var(--gitgraph-stock-ink-rgb), 0.08);
+  --dsw-alias-border-l2: rgba(var(--gitgraph-stock-ink-rgb), 0.16);
+  --dsw-alias-interactive-bg-hover: rgba(var(--gitgraph-stock-ink-rgb), 0.06);
+  --dsw-alias-interactive-bg-active: rgba(var(--gitgraph-stock-ink-rgb), 0.1);
+  --dsw-alias-label-primary: var(--gitgraph-stock-ink);
+  --dsw-alias-label-secondary: var(--gitgraph-stock-ink);
+  --dsw-alias-label-tertiary: rgba(var(--gitgraph-stock-ink-rgb), 0.56);
+  --dsw-alias-button-contrast-fill: var(--gitgraph-stock-on-success);
+}
+
+[data-gitgraph-chip-anchor][data-gitgraph-stock-light] .noticeOk {
+  background: var(--gitgraph-stock-success-fill);
+  color: var(--gitgraph-stock-on-success);
+  box-shadow: inset 0 0 0 1px var(--gitgraph-stock-success-border);
+}
+
+.graphEmpty {
+  padding: 24px 10px;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+}
+
+.graphMore {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 6px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 120ms ease;
+}
+
+.graphMore:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.graphMore:active {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.graphMore:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-brand-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chip,
+  .searchBox,
+  .searchInput,
+  .item,
+  .footerItem,
+  .dialogClose,
+  .dialogInput,
+  .dialogButton,
+  .dialogButtonPrimary,
+  .graphMore {
+    transition: none;
+  }
+}
+
+/* Full branch name tooltip on hover (long names only).
+ * Shown above the item by default; the top two items flip below so the
+ * bubble stays inside the scroll list.  Colors invert between themes so
+ * the bubble reads as a distinct surface. */
+.item::after {
+  content: attr(data-tip);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 4px);
+  z-index: 80;
+  /* Inverted surface via theme tokens: label-primary is the ink color
+     (dark in light mode, white in dark mode) and bg-base is the paper
+     color, so the bubble reads as the opposite of the surrounding
+     surface in both themes and follows third-party skins. */
+  background: var(--dsw-alias-label-primary, #111);
+  color: var(--dsw-alias-bg-base, #fff);
+  border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.25));
+  border-radius: 8px;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: normal;
+  word-break: break-all;
+  box-shadow: var(--dsw-shadow-lv3);
+  display: none;
+  pointer-events: none;
+}
+.item[data-tip='']::after {
+  display: none !important;
+}
+.item[data-tip-dir='down']::after {
+  top: calc(100% + 4px);
+  bottom: auto;
+}
+.item[data-tip-ready='true']:hover::after {
+  display: block;
+}