@bakapiano/ccsm 0.5.0 → 0.8.3

package/public/css/cards.css

@@ -0,0 +1,149 @@
+/* Card surfaces · head with fold toggle · body · title with icon */
+
+.card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.card-head {
+  padding: var(--s-4) var(--s-6) var(--s-3);
+  border-bottom: 1px solid var(--border-soft);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--s-3);
+}
+/* Whole header clickable to fold, only when card is foldable */
+.card[data-fold-key] .card-head {
+  cursor: pointer;
+  user-select: none;
+  transition: background .12s ease;
+}
+.card[data-fold-key] .card-head:hover {
+  background: var(--bg);
+}
+.card[data-collapsed] .card-head { border-bottom-color: transparent; }
+.card-titles { flex: 1; min-width: 0; }
+
+.card-fold {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 4px;
+  margin: 0;
+  cursor: pointer;
+  color: var(--ink-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color .12s ease, background .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
+  line-height: 0;
+  flex: 0 0 auto;
+}
+.card-fold:hover {
+  color: var(--ink);
+  background: var(--bg);
+}
+.card[data-collapsed] .card-fold { transform: rotate(-90deg); }
+.card[data-collapsed] .card-body { display: none; }
+
+.card-title {
+  font-size: 15.5px;
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  color: var(--ink);
+}
+.card-title .title-icon {
+  color: var(--ink-mid);
+  margin-right: 6px;
+  vertical-align: -2px;
+}
+.card-title .title-icon-after {
+  margin-right: 0;
+  margin-left: 6px;
+  vertical-align: -1px;
+}
+.card-meta {
+  margin-top: 2px;
+  font-size: 12.5px;
+  color: var(--ink-muted);
+  font-family: var(--body);
+}
+.card-meta code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid var(--border-soft);
+}
+
+.card-body { padding: var(--s-5) var(--s-6); }
+.card-body-flush { padding: 0; }
+
+/* ── About page ── */
+.about-block { display: flex; flex-direction: column; gap: var(--s-5); max-width: 640px; }
+.about-hero { display: flex; gap: var(--s-4); align-items: center; }
+.about-mark { display: inline-flex; }
+.about-mark svg { width: 48px; height: 48px; }
+.about-name {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+}
+.about-version {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-muted);
+  margin-left: 6px;
+  font-weight: 400;
+}
+.about-tagline {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ink-mid);
+}
+.about-tagline code {
+  font-size: 11px;
+  padding: 1px 4px;
+}
+.about-copy {
+  font-size: 13.5px;
+  color: var(--ink-mid);
+  line-height: 1.6;
+  max-width: 560px;
+}
+.about-links {
+  display: flex;
+  gap: var(--s-3);
+  flex-wrap: wrap;
+}
+.about-links .action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.about-meta {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 8px var(--s-4);
+  font-size: 12.5px;
+  padding-top: var(--s-3);
+  border-top: 1px solid var(--border-soft);
+}
+.about-meta dt {
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10.5px;
+  padding-top: 2px;
+}
+.about-meta dd { color: var(--ink); }

package/public/css/feedback.css

@@ -0,0 +1,219 @@
+/* Page-actions CTA banner · server-status pill · toast ·
+   dirty-banner + save-pulse for unsaved settings */
+
+/* CTA-style banner — neutral surface, ink left bar, distinct from .card
+   so it reads as "tip / shortcut" rather than another data section */
+.page-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-5);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  box-shadow: none;
+  position: relative;
+}
+.page-actions::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 8px; bottom: 8px;
+  width: 2px;
+  background: var(--ink);
+  border-radius: 0 2px 2px 0;
+}
+.page-actions-hint {
+  font-size: 13px;
+  color: var(--ink-mid);
+  font-weight: 500;
+  padding-left: var(--s-2);
+}
+.page-actions .action svg { stroke-width: 2; }
+
+/* "Refresh · 12s ago" timestamp inside the top-right Refresh button */
+.refresh-ago {
+  margin-left: 6px;
+  padding-left: 7px;
+  border-left: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Top-right page-head-meta · server-status pill + Refresh button share
+   the same height, padding, font-size and pill shape so they read as a
+   coherent control group. Explicit min-height keeps them aligned even
+   though they use different fonts and one carries an icon. */
+.page-head-meta { align-items: center; }
+.page-head-meta .action.small,
+.page-head-meta .server-status {
+  min-height: 28px;
+  border-radius: 999px;
+  box-sizing: border-box;
+  line-height: 1;
+}
+
+/* "● online v0.5.0" pill in top-right page-head-meta */
+.server-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--ink-mid);
+  transition: background .15s ease, border-color .15s ease, color .15s ease;
+  cursor: default;
+}
+.server-status .status-pulse {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+  flex: 0 0 7px;
+  position: relative;
+}
+.server-status[data-state="online"] {
+  border-color: rgba(74, 138, 74, 0.35);
+  background: rgba(74, 138, 74, 0.06);
+  color: var(--green);
+}
+.server-status[data-state="online"] .status-pulse {
+  background: var(--green);
+  animation: server-pulse 2.2s ease-in-out infinite;
+}
+.server-status[data-state="offline"] {
+  border-color: rgba(183, 63, 63, 0.4);
+  background: rgba(183, 63, 63, 0.06);
+  color: var(--red);
+}
+.server-status[data-state="offline"] .status-pulse { background: var(--red); }
+.server-status[data-state="connecting"] {
+  border-color: rgba(196, 137, 43, 0.4);
+  background: rgba(196, 137, 43, 0.06);
+  color: var(--yellow);
+}
+.server-status[data-state="connecting"] .status-pulse {
+  background: var(--yellow);
+  animation: server-pulse 1s ease-in-out infinite;
+}
+@keyframes server-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
+  50%      { box-shadow: 0 0 0 4px transparent; }
+}
+
+/* Offline banner · shown when /api/health is unreachable. Sticks to the
+   top of the main column above all cards. Contains a ccsm:// link that
+   asks Windows to spawn the backend. */
+.offline-banner {
+  background: #fff7e8;
+  border: 1px solid #d4b27a;
+  border-radius: var(--r-sm);
+  padding: var(--s-3) var(--s-5);
+  position: sticky;
+  top: var(--s-3);
+  z-index: 50;
+  box-shadow: 0 3px 10px -8px rgba(26, 24, 21, 0.15);
+}
+.offline-banner-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+.offline-banner-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--ink);
+}
+.offline-banner-text .muted-text {
+  font-size: 11.5px;
+  color: var(--ink-mid);
+}
+.offline-banner-actions { display: flex; gap: var(--s-2); }
+.offline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--red);
+  flex: 0 0 10px;
+  animation: dirty-pulse 2s ease-in-out infinite;
+}
+
+/* Toast bottom-right — auto-hides via JS */
+.toast {
+  position: fixed;
+  bottom: var(--s-6);
+  right: var(--s-6);
+  z-index: 100;
+  max-width: 420px;
+  padding: var(--s-3) var(--s-4);
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  border-left: 3px solid var(--ink);
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  color: var(--ink);
+  letter-spacing: -0.005em;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity .2s ease, transform .2s ease;
+  pointer-events: none;
+  box-shadow: var(--shadow-md);
+}
+.toast.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+.toast.error { border-left-color: var(--red); }
+.toast.ok    { border-left-color: var(--green); }
+
+/* Sticky "you have unsaved changes" banner above the Configure card */
+.dirty-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-5);
+  background: var(--bg);
+  border: 1px solid var(--ink);
+  border-radius: var(--r-sm);
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 500;
+  position: sticky;
+  top: var(--s-3);
+  z-index: 10;
+  box-shadow: 0 3px 10px -8px rgba(26, 24, 21, 0.15);
+  animation: banner-in .25s cubic-bezier(.4, 0, .2, 1);
+}
+@keyframes banner-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.dirty-banner .dirty-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ink);
+  flex: 0 0 8px;
+  box-shadow: 0 0 0 0 rgba(26, 24, 21, 0.35);
+  animation: dirty-pulse 2s ease-in-out infinite;
+}
+.dirty-banner .dirty-text { flex: 1; }
+
+/* Save button pulse — mirrors dirty banner */
+.action.primary.is-dirty {
+  animation: save-pulse 1.6s ease-in-out infinite;
+}
+@keyframes save-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 24, 21, 0.25); }
+  50%      { box-shadow: 0 0 0 4px rgba(26, 24, 21, 0); }
+}

package/public/css/forms.css

@@ -0,0 +1,282 @@
+/* Buttons (.action variants) · inputs · checkbox · chip pills ·
+   form-row layout · config grid · repos sub-table */
+
+.action {
+  appearance: none;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  color: var(--ink);
+  padding: 7px 14px;
+  font-family: var(--body);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
+  /* Buttons always lay out as icon-left + text-right, gap between them,
+     and the cluster is centered inside the button's box. Anchor links
+     using .action (e.g. About page) inherit the same layout. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.action:hover {
+  background: var(--bg);
+  border-color: var(--ink-faint);
+}
+.action:active { transform: translateY(0.5px); }
+.action:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.action.primary {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--bg-elev);
+}
+.action.primary:hover {
+  background: #000;
+  border-color: #000;
+}
+.action.small { font-size: 12px; padding: 4px 10px; }
+.action.tiny  { font-size: 11px; padding: 3px 8px; }
+.action.subtle {
+  background: transparent;
+  border-color: var(--border);
+  box-shadow: none;
+  color: var(--ink-mid);
+}
+.action.subtle:hover { background: var(--bg); color: var(--ink); }
+.action.danger {
+  background: var(--red);
+  border-color: var(--red);
+  color: var(--bg-elev);
+}
+.action.danger:hover {
+  background: #9a3636;
+  border-color: #9a3636;
+}
+
+.input, input[type="text"], input[type="number"], select, textarea {
+  appearance: none;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-strong);
+  color: var(--ink);
+  padding: 7px 12px;
+  font-family: var(--body);
+  font-size: 13px;
+  border-radius: var(--r-sm);
+  transition: border-color .12s ease, box-shadow .12s ease;
+  width: 100%;
+  max-width: 480px;
+}
+.input.narrow { min-width: 240px; max-width: 320px; }
+.input:focus, input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--ink);
+  box-shadow: 0 0 0 3px rgba(26, 24, 21, 0.08);
+}
+select {
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238a8475' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 10px;
+  padding-right: 28px;
+}
+textarea {
+  font-family: var(--mono);
+  font-size: 12px;
+  resize: vertical;
+  line-height: 1.55;
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  transition: background .12s, border-color .12s;
+}
+input[type="checkbox"]:checked {
+  background: var(--ink);
+  border-color: var(--ink);
+}
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 4px; top: 1px;
+  width: 5px; height: 9px;
+  border: solid var(--bg-elev);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  margin-bottom: var(--s-3);
+  flex-wrap: wrap;
+}
+.form-row:last-child { margin-bottom: 0; }
+.form-label {
+  font-family: var(--body);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ink-mid);
+  min-width: 96px;
+}
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  margin-top: var(--s-4);
+}
+
+/* Radio pills — same visual family as chip but exclusive (radio not checkbox) */
+.radio-row {
+  display: flex;
+  gap: var(--s-2);
+  flex-wrap: wrap;
+}
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--ink-mid);
+  font-family: var(--body);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  transition: all .12s ease;
+  border-radius: 999px;
+}
+.radio input { display: none; }
+.radio:hover { color: var(--ink); border-color: var(--ink-faint); }
+.radio::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border: 1px solid var(--ink-faint);
+  border-radius: 50%;
+  background: transparent;
+}
+.radio.is-checked {
+  background: var(--bg);
+  border-color: var(--ink);
+  color: var(--ink);
+}
+.radio.is-checked::before {
+  background: var(--ink);
+  border-color: var(--ink);
+  box-shadow: inset 0 0 0 2px var(--bg-elev);
+}
+
+/* Chip-style multi-select used for repo picker etc. */
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+  flex: 1;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--ink-mid);
+  font-family: var(--body);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  transition: all .12s ease;
+  border-radius: 999px;
+}
+.chip input { display: none; }
+.chip:hover {
+  color: var(--ink);
+  border-color: var(--ink-faint);
+}
+.chip::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border: 1px solid var(--ink-faint);
+  border-radius: 50%;
+  background: transparent;
+}
+.chip.checked {
+  background: var(--bg);
+  border-color: var(--ink);
+  color: var(--ink);
+}
+.chip.checked::before {
+  background: var(--ink);
+  border-color: var(--ink);
+  box-shadow: inset 0 0 0 2px var(--bg-elev);
+}
+
+/* Two-column field grid used inside the Configure card */
+.config-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--s-5) var(--s-6);
+  align-items: start;
+}
+.config-grid .field { display: flex; flex-direction: column; gap: 6px; }
+.config-grid .field.full { grid-column: 1 / -1; }
+.config-grid .field .label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ink-mid);
+}
+.config-grid .field .hint {
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  font-style: italic;
+}
+.config-grid .field .hint.inline {
+  display: inline;
+  margin-left: 4px;
+  font-style: italic;
+}
+.config-grid .field.toggle {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--s-3);
+  padding-top: var(--s-4);
+}
+.config-grid .field.toggle .toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.config-grid .field.toggle .label { font-weight: 500; }
+
+/* Inline editable repo list (Configure tab) */
+.repos-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--s-2);
+}
+.repos-table thead th, .repos-table tbody td { padding: 8px var(--s-2); }
+.repos-table thead th:first-child,
+.repos-table tbody td:first-child { padding-left: var(--s-2); }
+.repos-table thead th:last-child,
+.repos-table tbody td:last-child { padding-right: var(--s-2); }
+.repos-table tbody td input { font-size: 12px; max-width: none; }