@tita-agent/dsh-data-table 0.0.0-stage → 0.2.0

package/src/client/SheetPanel.module.css

@@ -0,0 +1,1578 @@
+/* The panel's own names for the shared palette: ~200 rules below read
+ * `var(--sheet-*)`. The legacy `--color-tita-*` aliases cover the neutral, ink,
+ * accent and status names only, so the tone/scrim/`-line` families read `--tita-*`. */
+.panel {
+  --sheet-bg: var(--tita-canvas);
+  --sheet-surface: var(--tita-surface);
+  --sheet-surface-muted: var(--tita-surface-muted);
+  --sheet-line: var(--tita-line);
+  --sheet-line-strong: var(--tita-line-strong);
+  --sheet-ink: var(--tita-ink);
+  --sheet-ink-muted: var(--tita-ink-muted);
+  --sheet-ink-faint: var(--tita-ink-faint);
+  --sheet-accent: var(--tita-primary);
+  --sheet-accent-soft: var(--tita-primary-soft);
+  --sheet-danger: var(--tita-danger);
+  /* `tita-danger` has no tint/line pair; these use the `tita-tone-*` recipe. */
+  --sheet-danger-soft: color-mix(in srgb, var(--tita-danger) 10%, var(--tita-surface));
+  --sheet-danger-line: color-mix(in srgb, var(--tita-danger) 32%, var(--tita-surface));
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  color: var(--sheet-ink);
+  background: var(--sheet-bg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
+  font-size: 13px;
+}
+
+/* In `@layer base` **on purpose**: `packages/ui` ships its utilities unlayered,
+ * and an unlayered `(0,1,1)` element rule beats a `(0,1,0)` utility. Out here
+ * `font: inherit` outranked every `text-*` / `font-*` utility on every button,
+ * input and select in the panel, and the ring below replaced the shared one on
+ * `Button`, `Input` and every Radix primitive (measured before: `Button` at the
+ * inherited 13px/400 instead of its own 12px/semibold, the pickers at 13px
+ * instead of 11px). It cannot be a `:not(.tita-uiButton)` list — CSS Modules
+ * rewrites class names inside `:not()` too, so the selector matched nothing (0023 §7).
+ */
+@layer base {
+  .panel button, .panel input, .panel select { box-sizing: border-box; font: inherit; }
+  .panel button:focus-visible, .panel input:focus-visible, .panel select:focus-visible { outline: 2px solid var(--sheet-accent); outline-offset: 1px; }
+}
+
+.sidebarTab {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.header {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 42px;
+  padding: 4px 9px;
+  border-bottom: 1px solid var(--sheet-line);
+  background: var(--sheet-surface);
+  flex-shrink: 0;
+}
+
+.workbookPickerAnchor,
+.toolbarMenuAnchor {
+  position: relative;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.workbookPickerAnchor {
+  flex: 1 1 auto;
+}
+
+.workbookPickerButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  width: min(320px, 100%);
+  min-width: 0;
+  height: 32px;
+  padding: 3px 8px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  color: var(--sheet-ink);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbookPickerButton:hover:not(:disabled),
+.workbookPickerButton[aria-expanded='true'] {
+  border-color: var(--sheet-line);
+  background: var(--sheet-surface-muted);
+}
+
+.workbookPickerButton:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.workbookPickerLabel {
+  flex: 0 0 auto;
+  color: var(--sheet-ink-faint);
+  font-size: 11px;
+}
+
+.workbookPickerButton strong {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron,
+.menuChevron {
+  flex: 0 0 auto;
+  color: var(--sheet-ink-faint);
+  font-size: 13px;
+  line-height: 1;
+}
+
+.workbookPickerMenu,
+.toolbarMenu {
+  position: absolute;
+  z-index: 50;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 8px;
+  background: var(--sheet-surface);
+  box-shadow: 0 10px 28px rgb(17 24 39 / 0.14);
+}
+
+.workbookPickerMenu {
+  top: calc(100% + 3px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(360px, calc(100vw - 20px));
+  overflow: hidden;
+}
+
+.pickerMenuHeader,
+.pickerMenuFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.pickerMenuHeader {
+  border-bottom: 1px solid var(--sheet-line);
+}
+
+.pickerMenuHeader > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pickerMenuHeader strong {
+  color: var(--sheet-ink);
+  font-size: 13px;
+}
+
+.pickerMenuHeader small,
+.pickerMenuHeader > span,
+.pickerMenuFooter small {
+  color: var(--sheet-ink-faint);
+  font-size: 11px;
+}
+
+.workbookOptionList {
+  max-height: min(310px, 45vh);
+  padding: 5px;
+  overflow: auto;
+}
+
+.emptyPicker {
+  padding: 18px 10px;
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+  text-align: center;
+}
+
+.workbookOptionRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 2px;
+  border-radius: 6px;
+}
+
+.workbookOptionRow:hover,
+.workbookOptionActive {
+  background: var(--sheet-accent-soft);
+}
+
+.workbookOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  padding: 6px 7px;
+  border: 0;
+  color: var(--sheet-ink);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbookOption:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.workbookOptionMain {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.workbookOptionMain strong,
+.workbookOptionMain small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbookOptionMain strong {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.workbookOptionMain small {
+  color: var(--sheet-ink-faint);
+  font-size: 11px;
+}
+
+.currentMark {
+  flex: 0 0 auto;
+  color: var(--sheet-accent);
+  font-size: 11px;
+}
+
+.workbookOptionActions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 2px;
+}
+
+.itemActionButton {
+  padding: 4px 5px;
+  border: 0;
+  border-radius: 4px;
+  color: var(--sheet-ink-faint);
+  background: transparent;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.itemActionButton:hover:not(:disabled) {
+  color: var(--sheet-accent);
+  background: var(--sheet-surface);
+}
+
+.itemActionButton:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pickerMenuFooter {
+  align-items: flex-start;
+  flex-direction: column;
+  border-top: 1px solid var(--sheet-line);
+  background: var(--sheet-surface-muted);
+}
+
+.createWorkbookButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: 0;
+  color: var(--sheet-accent);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.createWorkbookButton:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.toolbarMenu {
+  top: calc(100% + 3px);
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 142px;
+  padding: 4px;
+}
+
+.toolbarMenu button {
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 4px;
+  color: var(--sheet-ink-muted);
+  background: transparent;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toolbarMenu button:hover {
+  color: var(--sheet-ink);
+  background: var(--sheet-surface-muted);
+}
+
+.headerStatusGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.standalone {
+  height: 100%;
+  min-height: 100%;
+  background: var(--sheet-bg);
+}
+
+.headerIdentity {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 126px;
+  flex: 0 1 auto;
+}
+
+.appMark {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--sheet-accent);
+}
+
+.appMark svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.headerTitle {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.headerTitle strong {
+  overflow: hidden;
+  color: var(--sheet-ink);
+  font-size: 13px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.headerTitle small {
+  overflow: hidden;
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbookPicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.pickerLabel {
+  flex: 0 0 auto;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.workbookSelect {
+  width: min(260px, 100%);
+  min-width: 130px;
+  height: 32px;
+  padding: 3px 24px 3px 8px;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 5px;
+  outline: 0;
+  color: var(--sheet-ink);
+  background: var(--sheet-surface);
+  cursor: pointer;
+}
+
+.workbookSelect:hover:not(:disabled) {
+  /* One step past the resting `line-strong`; no grey sits between them. */
+  border-color: var(--tita-ink-faint);
+}
+
+.workbookSelect:focus-visible {
+  border-color: var(--sheet-accent);
+}
+
+.actionButton,
+.iconButton,
+.dangerButton {
+  flex: 0 0 auto;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 5px;
+  color: var(--sheet-ink-muted);
+  background: var(--sheet-surface);
+  cursor: pointer;
+  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
+}
+
+.actionButton {
+  height: 28px;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.actionButton:hover:not(:disabled),
+.iconButton:hover:not(:disabled) {
+  border-color: var(--tita-primary-line);
+  color: var(--sheet-accent);
+  background: var(--sheet-accent-soft);
+}
+
+.actionButton:disabled,
+.iconButton:disabled,
+.dangerButton:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.status i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--tita-success);
+}
+
+.status[data-status='loading'] i,
+.status[data-status='saving'] i {
+  background: var(--tita-warning);
+}
+
+.status[data-status='error'] i,
+.status[data-status='conflict'] i {
+  background: var(--sheet-danger);
+}
+
+.status[data-status='error'],
+.status[data-status='conflict'] {
+  color: var(--sheet-danger);
+}
+
+.switchingLabel {
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  padding: 12px;
+  background: var(--sheet-bg);
+}
+
+.body > .hint {
+  max-width: 380px;
+  margin: auto;
+  padding: 38px 24px;
+  border: 1px dashed var(--sheet-line-strong);
+  border-radius: 6px;
+  color: var(--sheet-ink-muted);
+  background: var(--sheet-surface);
+  text-align: center;
+}
+
+.body > .hint p {
+  margin: 0;
+}
+
+.hintSub {
+  margin-top: 6px;
+  color: var(--sheet-ink-faint);
+}
+
+/* Transient success toast: floats so it never reflows the canvas, and takes no
+   pointer events so it can never swallow a click. */
+.toast {
+  position: absolute;
+  z-index: 30;
+  top: 12px;
+  right: 12px;
+  max-width: min(440px, calc(100% - 24px));
+  padding: 8px 11px;
+  border: 1px solid var(--tita-primary-line);
+  border-radius: 5px;
+  box-shadow: 0 6px 18px rgb(17 24 39 / 0.1);
+  pointer-events: none;
+  color: var(--sheet-accent);
+  background: var(--tita-primary-soft);
+}
+
+/* Persistent notice: an in-flow banner. It used to be an absolutely positioned
+   overlay with `pointer-events: none`, so it covered the Univer toolbar and
+   could not be dismissed (GUI feedback 2026-09-19). A banner pushes the canvas
+   down instead of hiding it, and carries its own close button. */
+.notice {
+  flex: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--tita-tone-amber-line);
+  border-radius: 6px;
+  color: var(--sheet-ink-muted);
+  background: var(--tita-tone-amber-tint);
+}
+
+.noticeMessage {
+  flex: 1;
+  min-width: 0;
+}
+
+.noticeClose {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: var(--sheet-ink-faint);
+  background: transparent;
+  cursor: pointer;
+}
+
+.noticeClose:hover {
+  color: var(--sheet-ink);
+  background: var(--tita-surface-muted);
+}
+
+.conflictPanel,
+.proposal,
+.worktreeDiffPanel,
+.historyPanel {
+  flex-shrink: 0;
+  border: 1px solid var(--sheet-line);
+  border-radius: 6px;
+  background: var(--sheet-surface);
+}
+
+.conflictPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--tita-tone-amber-line); border-radius: 6px;
+  background: var(--tita-tone-amber-tint);
+}
+
+.conflictText,
+.proposalText {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.conflictText strong {
+  color: var(--tita-warning);
+}
+
+.conflictText span,
+.conflictText small,
+.proposalText span,
+.proposalText small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conflictText small,
+.proposalText small,
+.worktreeDiffPanel small,
+.historyCompressed {
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+}
+
+.conflictActions,
+.proposalActions {
+  display: inline-flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.proposals {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.proposal {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 11px;
+  border: 1px solid var(--sheet-line-strong); border-radius: 6px;
+}
+
+.proposalText strong {
+  color: var(--sheet-accent);
+}
+
+.worktreeDiffPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 10px;
+  padding: 9px 11px;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.worktreeDiffPanel {
+  border: 1px solid var(--sheet-line); border-radius: 6px;
+}
+
+.historyDiffSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  color: var(--sheet-accent);
+}
+
+.historyPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 280px;
+  margin-bottom: 10px;
+  padding: 10px 12px;
+}
+
+.historyHeader,
+.historyPreview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.historyHeader strong {
+  color: var(--sheet-ink);
+}
+
+.historyList {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.historyEntry {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 6px 7px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--sheet-ink-muted);
+  background: transparent;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.historyEntry:hover:not(:disabled),
+.historyEntrySelected {
+  border-color: var(--tita-primary-line);
+  color: var(--sheet-ink);
+  background: var(--sheet-accent-soft);
+}
+
+.historyEntry:disabled {
+  color: var(--sheet-ink-faint);
+  cursor: not-allowed;
+}
+
+.historyEntry span:first-child {
+  color: var(--sheet-ink);
+}
+
+.historyEntry small,
+.historyPreview span {
+  color: var(--sheet-ink-faint);
+}
+
+.historyHint {
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+}
+
+.historyPreview {
+  padding-top: 7px;
+  border-top: 1px solid var(--sheet-line);
+}
+
+.historyPreview > div,
+.historyDetailHeader,
+.drawerHeader > div {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.historyTimeline,
+.workbookManagerList {
+  min-height: 0;
+  overflow: auto;
+}
+
+.historyTimeline {
+  flex: 1;
+  padding: 14px 3px 8px 4px;
+}
+
+.historyTimelineItem {
+  position: relative;
+  display: flex;
+  gap: 9px;
+  min-height: 68px;
+  padding-bottom: 12px;
+}
+
+.historyTimelineItem::before {
+  position: absolute;
+  top: 8px;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  background: var(--sheet-line);
+  content: '';
+}
+
+.historyTimelineItem:last-child::before {
+  display: none;
+}
+
+.timelineAgentDot,
+.timelineUserDot {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--tita-tone-violet);
+}
+
+.timelineUserDot {
+  background: var(--tita-tone-green);
+}
+
+.activityAgent {
+  color: var(--tita-tone-violet);
+}
+
+.activityUser {
+  color: var(--tita-tone-green);
+}
+
+.historyTimelineContent {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.historyTimelineTop {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.historyTimelineTop b {
+  color: var(--sheet-ink);
+  font-weight: 650;
+}
+
+.historyTimelineTop small {
+  color: var(--sheet-ink-faint);
+}
+
+.historyBranch,
+.historyTemporary {
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-style: normal;
+}
+
+.historyBranch {
+  color: var(--sheet-ink-faint);
+  background: var(--sheet-surface-muted);
+}
+
+.historyTemporary {
+  color: var(--tita-tone-amber);
+  background: var(--tita-tone-amber-tint);
+}
+
+.historyVersionActions {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.historyStepList {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-top: 2px;
+  padding-left: 8px;
+  border-left: 1px solid var(--sheet-line);
+}
+
+.historyStepButton,
+.historyPreviewButton {
+  border: 0;
+  color: var(--sheet-accent);
+  background: transparent;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.historyStepButton {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 3px 5px;
+  color: var(--sheet-ink-muted);
+}
+
+.historyStepButton:hover:not(:disabled),
+.historyPreviewButton:hover {
+  text-decoration: underline;
+}
+
+.historyStepButton span {
+  flex: 0 0 auto;
+  color: var(--sheet-ink);
+  font-weight: 650;
+}
+
+.historyStepButton small {
+  overflow: hidden;
+  color: var(--sheet-ink-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.historyPreviewButton {
+  align-self: flex-start;
+  padding: 2px 0;
+}
+
+/* Compare panel at the end of the drawer: head, baseline picker, diff. */
+.historyDetail {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  flex-shrink: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--sheet-line);
+  font-size: 12px;
+}
+
+/* Preview bar above the canvas (docs/issue/0002 PRD v3.2 §7.2). */
+.previewBar {
+  flex: none;
+  margin-bottom: 8px;
+}
+
+/* Change summary + diff legend inside the preview bar (v3.3 §7.2). */
+.previewChanges {
+  color: var(--tita-tone-amber);
+  font-size: 11px;
+}
+
+.previewLegend {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--sheet-ink-muted);
+  font-size: 10px;
+}
+
+.previewLegend > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.previewLegend i {
+  width: 9px;
+  height: 9px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+
+/* Swatch hues. `DECORATION_TINT` keeps its hex: Univer paints the cells on a canvas. */
+.legendAdd { border-color: var(--tita-tone-green-line) !important; background: var(--tita-tone-green-tint); }
+.legendModify { border-color: var(--tita-tone-amber-line) !important; background: var(--tita-tone-amber-tint); }
+.legendRemove { border-color: var(--sheet-danger-line) !important; background: var(--sheet-danger-soft); }
+
+.historyDetailHeader span {
+  color: var(--sheet-ink-faint);
+}
+
+.historyReplayActions {
+  display: flex;
+  gap: 5px;
+  flex: 0 0 auto;
+}
+
+.drawerLayer {
+  position: absolute;
+  z-index: 40;
+  inset: 0;
+  pointer-events: none;
+}
+
+.drawerBackdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  border: 0;
+  background: var(--tita-scrim);
+  cursor: default;
+  pointer-events: auto;
+}
+
+.historyDrawer,
+.workbookManager {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(400px, 92%);
+  padding: 16px;
+  border-left: 1px solid var(--sheet-line);
+  background: var(--sheet-surface);
+  box-shadow: -10px 0 24px rgb(17 24 39 / 0.12);
+  pointer-events: auto;
+}
+
+.drawerHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+  padding-bottom: 11px;
+  border-bottom: 1px solid var(--sheet-line);
+}
+
+.drawerHeader > div {
+  color: var(--sheet-ink);
+}
+
+.drawerHeader small,
+.workbookManagerHint {
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+}
+
+.iconButton {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  font-size: 17px;
+  line-height: 1;
+}
+
+.workbookManagerHint {
+  flex-shrink: 0;
+  padding: 11px 1px;
+  line-height: 1.55;
+}
+
+.workbookManagerList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.workbookManagerItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 9px;
+  border: 1px solid var(--sheet-line);
+  border-radius: 5px;
+  background: var(--sheet-surface);
+}
+
+.workbookManagerItem:hover {
+  border-color: var(--sheet-line-strong);
+  background: var(--sheet-surface-muted);
+}
+
+.workbookManagerMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.workbookManagerMeta strong,
+.workbookManagerMeta small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbookManagerMeta strong {
+  color: var(--sheet-ink);
+  font-size: 13px;
+}
+
+.workbookManagerMeta small {
+  color: var(--sheet-ink-faint);
+  font-size: 12px;
+}
+
+.dangerButton {
+  height: 29px;
+  padding: 3px 8px;
+  border-color: var(--sheet-danger-line);
+  color: var(--sheet-danger);
+  background: var(--sheet-danger-soft);
+  font-size: 12px;
+}
+
+.dangerButton:hover:not(:disabled) {
+  border-color: var(--sheet-danger);
+  background: color-mix(in srgb, var(--sheet-danger) 16%, var(--tita-surface));
+}
+
+@media (max-width: 760px) {
+  .header {
+    flex-wrap: wrap;
+    padding: 4px 8px;
+  }
+
+  .workbookPickerAnchor {
+    flex: 1 1 100%;
+  }
+
+  .workbookPickerButton {
+    width: 100%;
+  }
+
+  .headerStatusGroup,
+  .status {
+    margin-left: 0;
+  }
+
+  .body {
+    padding: 8px;
+  }
+
+  .conflictPanel,
+  .proposal {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .conflictActions,
+  .proposalActions {
+    width: 100%;
+  }
+
+  .historyDrawer,
+  .workbookManager {
+    width: min(390px, 94%);
+  }
+}
+
+/* Workbook actions are application dialogs rather than browser prompt/confirm
+ * surfaces, so they stay inside the same compact command surface. */
+.panel {
+  position: relative;
+}
+
+.workbookPickerButton {
+  width: min(420px, 100%);
+  max-width: 100%;
+}
+
+.workbookPickerMenu {
+  width: min(clamp(280px, 32vw, 420px), calc(100vw - 24px));
+}
+
+.workbookOptionMain {
+  max-width: 100%;
+}
+
+.workbookOptionMain strong {
+  max-width: 100%;
+}
+
+.buttonIcon,
+.menuIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.buttonIcon {
+  margin-right: 2px;
+}
+
+.menuIcon {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--sheet-line);
+  border-radius: 6px;
+  color: var(--sheet-accent);
+  background: var(--sheet-accent-soft);
+}
+
+.menuItemText {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 1px;
+  text-align: left;
+}
+
+.menuItemText strong {
+  color: var(--sheet-ink);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.menuItemText small {
+  overflow: hidden;
+  color: var(--sheet-ink-faint);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toolbarMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+}
+
+.dialogLayer {
+  position: absolute;
+  z-index: 500;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.dialogBackdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: var(--tita-scrim);
+  cursor: default;
+}
+
+.dialog {
+  position: relative;
+  z-index: 1;
+  width: min(360px, 100%);
+  padding: 16px;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 10px;
+  background: var(--sheet-surface);
+  box-shadow: 0 20px 50px rgb(15 23 42 / 0.2), 0 4px 12px rgb(15 23 42 / 0.08);
+}
+
+.dialogHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.dialogHeader > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dialogHeader strong {
+  color: var(--sheet-ink);
+  font-size: 14px;
+}
+
+.dialogHeader span,
+.dialogMessage {
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.dialogClose {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: var(--sheet-ink-faint);
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.dialogClose:hover:not(:disabled) {
+  color: var(--sheet-ink);
+  background: var(--sheet-surface-muted);
+}
+
+.dialogField {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--sheet-ink-muted);
+  font-size: 12px;
+}
+
+.dialogField input {
+  width: 100%;
+  height: 34px;
+  padding: 5px 9px;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 6px;
+  color: var(--sheet-ink);
+  background: var(--sheet-surface);
+}
+
+.dialogMessage {
+  margin: 0 0 16px;
+}
+
+.dialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 7px;
+  margin-top: 16px;
+}
+
+.dialogCancel,
+.dialogConfirm,
+.dialogDanger {
+  min-width: 70px;
+  height: 30px;
+  padding: 4px 11px;
+  border: 1px solid var(--sheet-line-strong);
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.dialogCancel {
+  color: var(--sheet-ink-muted);
+  background: var(--sheet-surface);
+}
+
+.dialogConfirm {
+  border-color: var(--sheet-accent);
+  color: var(--tita-primary-foreground);
+  background: var(--sheet-accent);
+}
+
+/* Text on a filled danger plate; `--tita-danger-foreground` inverts with the theme. */
+.dialogDanger {
+  border-color: var(--sheet-danger);
+  color: var(--tita-danger-foreground);
+  background: var(--sheet-danger);
+}
+
+.dialogCancel:hover:not(:disabled) {
+  background: var(--sheet-surface-muted);
+}
+
+.dialogConfirm:hover:not(:disabled) {
+  background: var(--tita-primary-hover);
+}
+
+.dialogDanger:hover:not(:disabled) {
+  /* `--tita-danger-hover`: the host's red-500 in light, red-400 in dark. */
+  background: var(--tita-danger-hover);
+}
+
+.dialogCancel:disabled,
+.dialogConfirm:disabled,
+.dialogDanger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Unified DSH command surface. These final rules intentionally keep the
+ * sheet header visually aligned with the host's tab
+ * strip: compact, neutral, and shadcn-like without adding a runtime UI
+ * dependency to the plugin. */
+.panel {
+  /* The palette restated here is gone: a second answer for the same tokens. */
+  letter-spacing: 0.005em;
+}
+
+.header {
+  z-index: 40;
+  isolation: isolate;
+  min-height: 40px;
+  height: 40px;
+  padding: 4px 12px;
+  gap: 5px;
+  overflow: visible;
+}
+
+.workbookPickerAnchor {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.workbookPickerButton {
+  width: min(360px, 100%);
+  height: 30px;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+
+.workbookPickerButton strong {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.workbookPickerLabel {
+  color: var(--sheet-ink-muted);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.headerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.headerActions::before {
+  width: 1px;
+  height: 20px;
+  margin: 0 3px 0 1px;
+  background: var(--sheet-line);
+  content: '';
+}
+
+.headerActions .toolbarMenuAnchor {
+  display: inline-flex;
+}
+
+.actionButton,
+.iconButton {
+  height: 30px;
+  padding: 3px 9px;
+  border-color: var(--sheet-line-strong);
+  border-radius: 6px;
+  color: var(--sheet-ink-muted);
+  background: var(--sheet-surface);
+  font-size: 12px;
+}
+
+.actionButton:hover:not(:disabled),
+.iconButton:hover:not(:disabled),
+.workbookPickerButton:hover:not(:disabled),
+.workbookPickerButton[aria-expanded='true'] {
+  border-color: var(--tita-primary-line);
+  color: var(--sheet-accent);
+  background: var(--sheet-accent-soft);
+}
+
+.headerStatusGroup {
+  gap: 6px;
+  margin-left: 3px;
+  padding-left: 8px;
+  border-left: 1px solid var(--sheet-line);
+}
+
+.status {
+  gap: 5px;
+  margin-left: 0;
+  color: var(--sheet-ink-muted);
+  font-size: 11px;
+}
+
+.status i {
+  width: 6px;
+  height: 6px;
+}
+
+.switchingLabel {
+  font-size: 11px;
+}
+
+.workbookPickerMenu,
+.toolbarMenu {
+  z-index: 200;
+  border-color: var(--sheet-line-strong);
+  border-radius: 8px;
+  box-shadow: 0 16px 36px rgb(15 23 42 / 0.16), 0 2px 7px rgb(15 23 42 / 0.06);
+}
+
+.workbookPickerMenu {
+  width: min(360px, calc(100vw - 24px));
+  max-height: min(500px, calc(100vh - 58px));
+}
+
+.toolbarMenu {
+  min-width: 156px;
+  padding: 5px;
+}
+
+.toolbarMenu button {
+  min-height: 30px;
+  padding: 5px 8px;
+  border-radius: 5px;
+  font-size: 12px;
+}
+
+.toolbarMenu button:hover {
+  color: var(--sheet-accent);
+  background: var(--sheet-accent-soft);
+}
+
+.body {
+  z-index: 0;
+  padding: 0;
+}
+
+.body > .hint {
+  margin: auto;
+}
+
+/* Standalone page: the toast still floats; the notice stays an in-flow banner. */
+.toast {
+  z-index: 120;
+  top: 8px;
+  right: 12px;
+}
+
+.notice {
+  margin-inline: 12px;
+  margin-top: 8px;
+}
+
+.conflictPanel,
+.proposals,
+.worktreeDiffPanel,
+.historyPanel {
+  margin-inline: 10px;
+}
+
+.conflictPanel {
+  margin-top: 8px;
+}
+
+.drawerLayer {
+  z-index: 300;
+}
+
+@media (max-width: 760px) {
+  .header {
+    height: auto;
+    min-height: 40px;
+  }
+
+  .workbookPickerAnchor {
+    flex: 1 1 100%;
+  }
+
+  .headerActions {
+    margin-left: 0;
+  }
+
+  .headerActions::before {
+    display: none;
+  }
+
+  .headerStatusGroup {
+    margin-left: 0;
+    padding-left: 0;
+    border-left: 0;
+  }
+}