jekyll-theme-zer0 1.28.0 → 1.30.0

data/_sass/components/_setup-wizard.scss

@@ -0,0 +1,764 @@
+// =============================================================================
+// Site Builder / setup wizard
+// (_includes/setup/wizard.html + setup/prereq-checklist.html +
+//  setup/claude-session.html · assets/js/setup-wizard.js + site-builder.js)
+// =============================================================================
+// Feature: ZER0-067, ZER0-085 · Redesign: T-040 / #408 · Site Builder: ZER0-085
+//
+// Three columns at lg+ (stepper / steps / side column), stacked below. The
+// side column holds the Claude session on top and the live file preview under
+// it, so both stay in view on every step. The two rules that matter most:
+//
+//   1. `.wizard-panes` is a GRID with every pane in the same cell, so the
+//      container is always exactly as tall as the tallest step; `.wizard-nav`
+//      is then pushed to the bottom of the card with `margin-top: auto`.
+//      Neither alone is enough: the grid stops the CONTAINER resizing, and the
+//      auto margin stops the BUTTONS floating up inside a short step.
+//      Together, Back/Next sit at the same y offset on every step.
+//   2. The side column is sticky and scrolls on its own, so a long transcript
+//      or a long generated file never grows the page.
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Vertical stepper
+// -----------------------------------------------------------------------------
+
+.wizard-stepper-wrap {
+  top: 1.5rem; // paired with .sticky-lg-top in the markup
+}
+
+.wizard-stepper {
+  gap: 0.25rem;
+}
+
+.wizard-step {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  min-height: 44px; // WCAG touch target
+  text-align: left;
+  color: var(--zer0-color-ink-muted);
+  background: none;
+  border: 0;
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
+
+  // Upcoming, and not reachable until every earlier step validates.
+  &.is-locked,
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &.is-active {
+    font-weight: 600;
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+
+    .wizard-step-marker {
+      color: #fff;
+      background: var(--bs-primary);
+      border-color: var(--bs-primary);
+    }
+  }
+
+  &.is-done .wizard-step-marker {
+    color: var(--bs-success, #198754);
+    border-color: var(--bs-success, #198754);
+  }
+}
+
+.wizard-step-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.9rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50%;
+}
+
+.wizard-step-text {
+  min-width: 0;
+}
+
+.wizard-step-label {
+  display: block;
+  overflow-wrap: anywhere; // "Integrations" must survive a ~100px stepper column
+  line-height: 1.2;
+}
+
+// "Draft saved" acknowledgement. Kept in the layout (no display toggling) so
+// its appearance never shifts the header.
+.wizard-draft-chip {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--bs-success, #198754);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &.is-visible {
+    opacity: 1;
+  }
+}
+
+.wizard-progress .progress-bar {
+  transition: width 0.3s ease;
+}
+
+// -----------------------------------------------------------------------------
+// Step panes — the stable-height half
+// -----------------------------------------------------------------------------
+
+.wizard-panes {
+  // Every pane is stacked in ONE grid cell, so the row's height is
+  // max(pane heights) — computed by the browser, continuously, exactly.
+  display: grid;
+  min-height: 26rem; // floor for the degenerate case of no panes
+
+  // The selector carries `.tab-content` purely for specificity: Bootstrap's
+  // `.tab-content > .tab-pane { display: none }` would otherwise take the
+  // cell's only occupant out of the grid on a tie.
+  // A grid item's default `min-width: auto` lets one unbreakable line (a
+  // command in .wizard-cmd) widen the whole column past its track and under
+  // the side column, where it intercepted clicks. Zero it so long content
+  // scrolls inside its own box instead.
+  min-width: 0;
+
+  &.tab-content > .tab-pane {
+    display: flex;
+    flex-direction: column;
+    grid-area: 1 / 1; // one cell, all panes
+    min-width: 0;
+
+    // Inactive panes stay in layout — that is the whole point — but must not
+    // be seen, focused, clicked, or read out. `visibility: hidden` does all
+    // four (it removes the subtree from the a11y tree and from the tab order).
+    visibility: hidden;
+    pointer-events: none;
+
+    &.active {
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  > .tab-pane > .card {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  > .tab-pane > .card > .card-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+}
+
+// Pinned to the bottom of the card, so a short step does not float its
+// Back/Next up the page relative to a tall one. Always a flex row (a block
+// box puts a lone button on a baseline, ~2px high) and labels never wrap
+// (a wrapped label makes the row taller and lifts the button's top).
+.wizard-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+
+  .btn {
+    white-space: nowrap;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Form furniture shared by several steps
+// -----------------------------------------------------------------------------
+
+.wizard-choice {
+  min-height: 3.5rem;
+  white-space: normal;
+}
+
+.wizard-check .form-check-label {
+  cursor: pointer;
+}
+
+// Inline command with a copy button on the right.
+.wizard-cmd {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.6rem;
+  font-size: 0.8rem;
+  background: var(--zer0-color-bg-muted, var(--bs-tertiary-bg));
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+
+  code {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    color: inherit;
+    background: none;
+  }
+
+  .btn {
+    flex-shrink: 0;
+    padding: 0 0.35rem;
+    line-height: 1;
+    color: var(--zer0-color-ink-muted);
+  }
+
+  &.d-inline-flex {
+    display: inline-flex;
+    vertical-align: middle;
+    max-width: 100%;
+    margin: 0 0.15rem;
+  }
+}
+
+// Every step card is a flex column inside the grid cell; the same min-width
+// rule applies down the chain so a long line can never widen the card.
+.wizard-panes .card,
+.wizard-panes .card-body,
+.sb-manual-steps li,
+.prereq-item .min-w-0 {
+  min-width: 0;
+}
+
+// The prerequisites list is the tallest step by far. Cap it so the shared grid
+// row (sized to the tallest pane) stays close to the other steps instead of
+// leaving them with a screen of blank space above their Back/Next row.
+.prereq-list {
+  max-height: 30rem;
+  overflow-y: auto;
+}
+
+// Numbered connect steps. The text column must be allowed to shrink
+// (min-width: 0) or a nowrap command line inside .wizard-cmd widens the
+// list past the card and — because inactive panes stay in layout — the
+// whole page, on every step, at phone widths.
+.sb-steps li {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.9rem;
+
+  > div {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+.sb-step-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.6rem;
+  height: 1.6rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--bs-primary);
+  border-radius: 50%;
+}
+
+.sb-connect-status {
+  .btn {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .sb-status-detail {
+    overflow-wrap: anywhere; // long scaffold paths
+  }
+
+  .sb-status-dot {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.65rem;
+    height: 0.65rem;
+    border-radius: 50%;
+    background: var(--bs-secondary);
+  }
+
+  &[data-state="online"] .sb-status-dot {
+    background: var(--bs-success);
+    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.2);
+  }
+
+  &[data-state="offline"] .sb-status-dot {
+    background: var(--bs-warning);
+  }
+
+  &[data-state="checking"] .sb-status-dot {
+    animation: sbPulse 1.2s ease-in-out infinite;
+  }
+}
+
+@keyframes sbPulse {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 1; }
+}
+
+// Navigation editor rows
+.nav-editor .nav-row {
+  .nav-title { flex: 1 1 32%; }
+  .nav-url { flex: 1 1 40%; }
+  .nav-icon { flex: 0 1 24%; }
+}
+
+// Skin picker
+.skin-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+  padding: 0.6rem;
+  cursor: pointer;
+  border: 2px solid var(--bs-border-color);
+  border-radius: var(--zer0-radius-md, 0.5rem);
+  transition: border-color 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  .skin-swatch {
+    display: block;
+    height: 2.5rem;
+    border-radius: var(--zer0-radius-sm, 0.375rem);
+    background: linear-gradient(135deg, var(--sw-a) 0%, var(--sw-a) 45%, var(--sw-b) 55%, var(--sw-b) 100%);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  .skin-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  .skin-mood {
+    font-size: 0.72rem;
+    color: var(--zer0-color-ink-muted);
+  }
+}
+
+.btn-check:checked + .skin-card {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
+}
+
+.btn-check:focus-visible + .skin-card {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+// Palette picker (layers over the skin)
+.palette-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  width: 5.25rem;
+  padding: 0.4rem;
+  cursor: pointer;
+  border: 2px solid var(--bs-border-color);
+  border-radius: var(--zer0-radius-md, 0.5rem);
+  font-size: 0.72rem;
+  text-align: center;
+
+  .palette-swatches {
+    display: flex;
+    width: 100%;
+    height: 1.4rem;
+    overflow: hidden;
+    border-radius: var(--zer0-radius-sm, 0.375rem);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+
+    > span { flex: 1 1 0; }
+
+    .palette-swatch-skin {
+      background: linear-gradient(90deg, var(--bs-primary) 0 34%, var(--bs-secondary) 34% 67%, var(--zer0-color-accent, var(--bs-info)) 67%);
+    }
+
+    &--custom {
+      align-items: center;
+      justify-content: center;
+      background: var(--zer0-color-bg-muted, var(--bs-tertiary-bg));
+    }
+  }
+}
+
+.btn-check:checked + .palette-card {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
+}
+
+.btn-check:focus-visible + .palette-card {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+.font-preview {
+  font-size: 1rem;
+  line-height: 1.3;
+  transition: font-family 0.15s ease;
+}
+
+// Example-page planner rows
+.pages-planner .page-row {
+  .page-collection { flex: 0 0 32%; }
+  .page-title { flex: 1 1 45%; }
+}
+
+.pages-planner .page-row + .page-row {
+  margin-top: 0.4rem;
+}
+
+// Integration list
+.wizard-integrations .form-switch .form-check-input {
+  width: 2.5em;
+}
+
+// Build terminal
+.wizard-terminal {
+  max-height: 18rem;
+  margin: 0;
+  padding: 0.75rem;
+  overflow: auto;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: #d8dee9;
+  background: #1b1f24;
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// -----------------------------------------------------------------------------
+// Prerequisites checklist
+// -----------------------------------------------------------------------------
+
+.prereq-item {
+  .prereq-state-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 50%;
+    color: var(--zer0-color-ink-muted);
+    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+  }
+
+  &[data-state="ok"] .prereq-state-icon,
+  &[data-state="manual"] .prereq-state-icon {
+    color: #fff;
+    background: var(--bs-success);
+    border-color: var(--bs-success);
+  }
+
+  &[data-state="fail"] .prereq-state-icon {
+    color: #fff;
+    background: var(--bs-danger);
+    border-color: var(--bs-danger);
+  }
+
+  .prereq-output {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .prereq-details summary {
+    cursor: pointer;
+    color: var(--bs-link-color);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Side column — Claude session + generated files
+// -----------------------------------------------------------------------------
+
+.wizard-side {
+  top: 1.5rem; // paired with .sticky-lg-top
+  max-height: calc(100vh - 3rem);
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.sb-panel {
+  .card-header {
+    background: var(--zer0-color-bg-muted, var(--bs-tertiary-bg));
+  }
+
+  &[data-state="online"] .card-header {
+    border-bottom: 2px solid var(--bs-success);
+  }
+}
+
+.sb-messages {
+  min-height: 9rem;
+  max-height: 22rem;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+.sb-message--user {
+  display: flex;
+  justify-content: flex-end;
+
+  .sb-bubble {
+    max-width: 88%;
+    color: #fff;
+    background: var(--bs-primary);
+    word-wrap: break-word;
+  }
+}
+
+.sb-message--assistant .sb-bubble {
+  max-width: 92%;
+  color: var(--bs-body-color);
+  background: var(--bs-tertiary-bg);
+  word-wrap: break-word;
+
+  .sb-li {
+    display: block;
+    padding-left: 0.25rem;
+  }
+
+  .sb-code {
+    margin: 0.35rem 0;
+    padding: 0.5rem;
+    font-size: 0.72rem;
+    color: #d8dee9;
+    background: #1b1f24;
+    border-radius: var(--zer0-radius-sm, 0.375rem);
+    overflow-x: auto;
+    white-space: pre;
+  }
+}
+
+.sb-card {
+  color: var(--bs-body-color);
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-left: 3px solid var(--bs-primary);
+
+  .sb-card-meta {
+    overflow-wrap: anywhere;
+  }
+
+  .sb-card-list {
+    max-height: 9rem;
+    padding-left: 1.1rem;
+    overflow-y: auto;
+    font-family: var(--bs-font-monospace);
+    font-size: 0.72rem;
+  }
+
+  &--resolved {
+    opacity: 0.75;
+  }
+
+  &--accepted {
+    border-left-color: var(--bs-success);
+  }
+
+  &--declined {
+    border-left-color: var(--bs-secondary);
+  }
+
+  &--result {
+    border-left-color: var(--bs-info);
+  }
+}
+
+.sb-chips .sb-chip {
+  font-size: 0.72rem;
+  text-align: left;
+  white-space: normal;
+}
+
+.sb-composer textarea {
+  resize: none;
+  min-height: 2.4rem;
+}
+
+.sb-typing span {
+  display: inline-block;
+  font-weight: bold;
+  font-size: 1.2em;
+  animation: sbTyping 1.4s infinite;
+
+  &:nth-child(2) { animation-delay: 0.2s; }
+  &:nth-child(3) { animation-delay: 0.4s; }
+}
+
+@keyframes sbTyping {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-4px); }
+}
+
+// File preview
+.wizard-file-tabs {
+  gap: 0.25rem;
+  scrollbar-width: thin;
+
+  .wizard-file-tab {
+    flex-shrink: 0;
+    padding: 0.2rem 0.6rem;
+    font-size: 0.72rem;
+    font-family: var(--bs-font-monospace);
+    white-space: nowrap;
+
+    &.is-overridden::after {
+      content: "•";
+      margin-left: 0.25rem;
+      color: var(--bs-warning);
+    }
+  }
+}
+
+.wizard-preview-code {
+  max-height: 38vh;
+  margin-bottom: 0;
+  overflow: auto;
+  font-size: 0.74rem;
+  line-height: 1.45;
+}
+
+.wizard-preview-live {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+// Below lg the three columns stack; the side column is no longer sticky and a
+// shorter scroll region reads better under the form.
+@media (max-width: 991.98px) {
+  .wizard-side {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .wizard-preview-code {
+    max-height: 20rem;
+  }
+
+  .sb-messages {
+    max-height: 16rem;
+  }
+
+  .wizard-stepper {
+    flex-direction: row !important;
+    flex-wrap: wrap;
+  }
+
+  .wizard-step {
+    width: auto;
+    flex: 1 1 auto;
+  }
+
+  .wizard-progress {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb-typing span,
+  .sb-connect-status .sb-status-dot,
+  .skin-card,
+  .wizard-progress .progress-bar {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Connect step — providers, bring-your-own token, session mode (ZER0-087)
+// -----------------------------------------------------------------------------
+
+.sb-provider-card {
+  &.is-pinned-out {
+    opacity: 0.45;
+  }
+
+  .sb-provider-state {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+  }
+}
+
+.sb-credential {
+  input[type="password"] {
+    font-family: var(--bs-font-monospace);
+    letter-spacing: 0.06em;
+  }
+
+  .input-group .btn {
+    white-space: nowrap;
+  }
+}
+
+// Proxy reachable, provider still without a key.
+.sb-connect-status[data-state="partial"] .sb-status-dot {
+  background: var(--bs-info);
+  box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.2);
+}
+
+.sb-mode-badge {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+#sb-stop {
+  white-space: nowrap;
+}
+
+// Before/after snippet on edit cards and the start of a file on write cards.
+.sb-card .sb-diff {
+  max-height: 8rem;
+  margin: 0;
+  padding: 0.4rem 0.5rem;
+  overflow: auto;
+  font-size: 0.68rem;
+  line-height: 1.4;
+  color: #d8dee9;
+  background: #1b1f24;
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// Thumbnail of a generated image, served by the dev proxy's /asset route.
+.sb-card .sb-image-thumb {
+  display: block;
+  max-width: 100%;
+  max-height: 12rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+}