collabmd 0.1.21 → 0.1.23

package/src/client/styles/components/surfaces.css

@@ -0,0 +1,155 @@
+/* ===== COMPONENTS / SURFACES ===== */
+
+.ui-record-surface {
+  --ui-record-padding: var(--space-3);
+  --ui-record-gap: var(--space-2);
+  --ui-record-radius: var(--radius-md);
+  --ui-record-border: var(--color-border);
+  --ui-record-bg: var(--color-surface-2);
+  --ui-record-color: var(--color-text-muted);
+  --ui-record-border-hover: var(--ui-record-border);
+  --ui-record-bg-hover: var(--color-surface-offset);
+  --ui-record-shadow: none;
+  --ui-record-shadow-hover: var(--ui-record-shadow);
+  --ui-record-border-active: var(--ui-record-border-hover);
+  --ui-record-bg-active: var(--ui-record-bg-hover);
+  --ui-record-shadow-active: var(--ui-record-shadow-hover);
+  --ui-record-hover-transform: none;
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-record-gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--ui-record-padding);
+  border: 1px solid var(--ui-record-border);
+  border-radius: var(--ui-record-radius);
+  background: var(--ui-record-bg);
+  color: var(--ui-record-color);
+  text-align: left;
+  box-shadow: var(--ui-record-shadow);
+  transition:
+    transform 140ms ease,
+    border-color var(--transition-interactive),
+    background var(--transition-interactive),
+    box-shadow var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.ui-record-surface:hover {
+  transform: var(--ui-record-hover-transform);
+  border-color: var(--ui-record-border-hover);
+  background: var(--ui-record-bg-hover);
+  box-shadow: var(--ui-record-shadow-hover);
+  color: var(--color-text);
+}
+
+.ui-record-surface.active,
+.ui-record-surface.is-active,
+.ui-record-surface[aria-current='true'] {
+  border-color: var(--ui-record-border-active);
+  background: var(--ui-record-bg-active);
+  box-shadow: var(--ui-record-shadow-active);
+  color: var(--color-text);
+}
+
+.ui-record-header,
+.ui-record-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.ui-record-header {
+  justify-content: space-between;
+}
+
+.ui-record-meta {
+  flex-wrap: wrap;
+  color: var(--color-text-faint);
+}
+
+.ui-record-copy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ui-record-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-record-subtitle {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-record-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-wrap: wrap;
+}
+
+.ui-item-row {
+  --ui-item-row-bg-hover: var(--color-surface-offset);
+  --ui-item-row-bg-active: var(--color-primary-highlight);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 2px;
+  border-radius: var(--radius-md);
+  transition: background var(--transition-interactive), color var(--transition-interactive);
+}
+
+.ui-item-row:hover {
+  background: var(--ui-item-row-bg-hover);
+}
+
+.ui-item-row.active,
+.ui-item-row.is-active {
+  background: var(--ui-item-row-bg-active);
+}
+
+.ui-item-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+
+.ui-item-copy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ui-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-item-subtitle {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-item-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}

package/src/client/styles/features/backlinks.css

@@ -0,0 +1,213 @@
+/* ===== PREVIEW SIDEBARS / BACKLINKS ===== */
+
+.backlinks-panel.hidden,
+.backlinks-panel-layer.hidden {
+  display: none;
+}
+
+.backlinks-panel {
+  min-width: 0;
+}
+
+.backlinks-panel-layer {
+  position: absolute;
+  left: max(var(--space-4), calc((100% - min(var(--preview-content-max-width), 100%)) / 2));
+  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+  z-index: 14;
+  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
+  pointer-events: none;
+}
+
+.backlinks-panel-dock {
+  display: flex;
+  flex-direction: column-reverse;
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xl-plus);
+  background: var(--surface-overlay);
+  box-shadow: var(--shadow-floating-soft);
+  backdrop-filter: blur(16px);
+  pointer-events: auto;
+  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
+}
+
+.backlinks-panel-dock:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-floating-hover);
+}
+
+.backlinks-panel-inline {
+  margin-top: var(--space-6);
+  padding: 0 var(--space-4);
+  border-top: 1px solid var(--color-divider);
+}
+
+.backlinks-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
+  cursor: pointer;
+  user-select: none;
+  color: var(--color-text-muted);
+  transition: color var(--transition-interactive);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.backlinks-header:hover {
+  color: var(--color-text);
+}
+
+.backlinks-panel-dock .backlinks-header {
+  padding: 11px 14px;
+  background: var(--surface-overlay-header);
+}
+
+.backlinks-header-empty {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.backlinks-header-empty:hover {
+  color: var(--color-text-muted);
+}
+
+.backlinks-chevron {
+  flex-shrink: 0;
+  transition: transform var(--transition-interactive);
+}
+
+.backlinks-panel.expanded .backlinks-chevron {
+  transform: rotate(90deg);
+}
+
+.backlinks-toggle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.backlinks-count {
+  min-width: 22px;
+  padding: 1px 7px;
+  border-radius: var(--radius-full);
+  background: var(--interactive-surface);
+  color: var(--color-primary);
+  text-align: center;
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.backlinks-count:empty {
+  display: none;
+}
+
+.backlinks-body {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 200ms ease;
+}
+
+.backlinks-panel-inline.expanded .backlinks-body {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.backlinks-panel-dock .backlinks-body {
+  background: var(--surface-overlay-raised);
+}
+
+.backlinks-panel-dock.expanded .backlinks-body {
+  max-height: min(44vh, 400px);
+  overflow-y: auto;
+  border-bottom: 1px solid var(--border-accent-soft);
+}
+
+.backlinks-panel-dock.expanded {
+  border-color: var(--border-accent-muted);
+  background: var(--surface-overlay-strong);
+}
+
+.backlinks-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4);
+}
+
+.backlinks-panel-dock .backlinks-list {
+  padding: 10px;
+}
+
+.backlink-item {
+  display: block;
+  width: 100%;
+  padding: var(--space-3);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--transition-interactive), background var(--transition-interactive);
+}
+
+.backlinks-panel-dock .backlink-item {
+  border-radius: var(--radius-lg);
+  background: var(--surface-overlay-soft);
+}
+
+.backlink-item:hover {
+  border-color: var(--color-primary);
+  background: oklch(from var(--color-primary) l c h / 0.04);
+}
+
+.backlink-item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus-compact);
+}
+
+.backlink-file-name {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-1);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.backlink-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.backlink-dir {
+  margin-left: auto;
+  color: var(--color-text-faint);
+  font-size: var(--text-xs);
+  font-weight: 400;
+}
+
+.backlink-context {
+  overflow: hidden;
+  padding-left: 22px;
+  color: var(--color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+  line-height: 1.6;
+}
+
+.backlink-more {
+  color: var(--color-text-faint);
+  font-style: italic;
+}
+
+@media (min-width: 769px) {
+  .backlinks-panel-inline {
+    display: none !important;
+  }
+}

package/src/client/styles/features/collaboration-chat.css

@@ -0,0 +1,228 @@
+/* ===== COLLABORATION / CHAT ===== */
+
+.chat-container {
+  position: relative;
+}
+
+.chat-toggle-btn {
+  position: relative;
+}
+
+.chat-toggle-btn.is-active {
+  color: var(--color-text);
+  background: var(--color-surface-offset);
+}
+
+.chat-toggle-btn.is-unread:not(.is-active) {
+  color: var(--color-primary);
+  background: var(--interactive-surface);
+  box-shadow: var(--shadow-accent-inset);
+}
+
+.chat-toggle-btn.is-unread:not(.is-active):hover {
+  background: var(--surface-accent-soft);
+}
+
+.chat-toggle-badge {
+  min-width: 18px;
+  min-height: 18px;
+  padding: 0 5px;
+  line-height: 18px;
+}
+
+.chat-toggle-btn.is-unread:not(.is-active) .chat-toggle-badge {
+  box-shadow: var(--shadow-accent-halo);
+}
+
+.chat-panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: min(360px, calc(100vw - var(--space-6)));
+  max-height: min(70vh, 520px);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(14px);
+}
+
+.chat-container > .chat-toast-container {
+  position: fixed;
+  top: calc(var(--toolbar-h) + var(--space-2));
+  right: var(--space-3);
+  z-index: 60;
+  width: min(360px, calc(100vw - var(--space-6)));
+  align-items: flex-end;
+}
+
+.chat-toast-container .toast {
+  width: 100%;
+  max-width: 100%;
+  padding: 12px 14px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-warning-toast);
+  border-left-width: 4px;
+  background: var(--surface-warning-toast);
+  color: var(--text-warning-toast);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+  box-shadow: var(--shadow-warning-toast);
+}
+
+.chat-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.chat-panel-title {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.chat-panel-status {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+}
+
+.chat-notification-action {
+  flex-shrink: 0;
+}
+
+.chat-notification-action.is-enabled {
+  border-color: oklch(from var(--color-success) l c h / 0.45);
+  background: var(--surface-success-soft);
+  color: var(--color-success);
+}
+
+.chat-notification-action.is-blocked {
+  color: var(--color-warning);
+}
+
+.chat-empty-state {
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 140px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding-right: var(--space-1);
+}
+
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.chat-message.is-local {
+  flex-direction: row-reverse;
+}
+
+.chat-message-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  color: var(--color-text-on-dark);
+  font-size: var(--text-label);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.chat-message-body {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.chat-message.is-local .chat-message-body {
+  align-items: flex-end;
+}
+
+.chat-message-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.chat-message.is-local .chat-message-meta {
+  justify-content: flex-end;
+}
+
+.chat-message-author {
+  color: var(--color-text);
+  font-size: var(--text-label);
+  font-weight: 600;
+}
+
+.chat-message-time,
+.chat-message-file {
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+}
+
+.chat-message-file {
+  padding: 2px 6px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-offset);
+}
+
+.chat-message-text {
+  width: fit-content;
+  max-width: 78%;
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.chat-message.is-local .chat-message-text {
+  background: oklch(from var(--color-primary) l c h / 0.14);
+  border-color: oklch(from var(--color-primary) l c h / 0.25);
+}
+
+.chat-form {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.chat-input {
+  font-size: var(--text-ui-sm);
+}
+
+.chat-send-btn {
+  flex-shrink: 0;
+  padding-inline: var(--space-4);
+}