@dsbasko/cookbook-engine 0.1.0

package/src/components/ProgramDrawer/ProgramDrawer.module.css

@@ -0,0 +1,563 @@
+/* Program drawer — slide-in accordion of modules and lessons. Sits to the
+   right of the 64px sidebar so the navigation rail stays visible while the
+   drawer is open. */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 16, 8, 0.32);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  z-index: var(--z-overlay);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+[data-theme='dark'] .overlay {
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.overlay[data-open='true'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  left: var(--layout-sidebar-width);
+  bottom: 0;
+  width: 480px;
+  max-width: calc(100vw - var(--layout-sidebar-width));
+  z-index: var(--z-drawer);
+  background-color: var(--bg-default);
+  border-right: 1px solid var(--bg-stroke-strong);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateX(-12px);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease;
+}
+
+.drawer[data-open='true'] {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---------- Header ---------- */
+
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: var(--space-6) var(--space-6) var(--space-5);
+  border-bottom: 1px solid var(--bg-stroke);
+  flex: 0 0 auto;
+}
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--content-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-2);
+}
+
+.title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.015em;
+  color: var(--content-primary);
+}
+
+.close {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--content-secondary);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+.close:hover {
+  background-color: var(--bg-subtle);
+  color: var(--content-primary);
+}
+
+.close:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: 2px;
+}
+
+/* ---------- Body ---------- */
+
+.body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--space-3) 0 var(--space-8);
+}
+
+.modules {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.module {
+  list-style: none;
+  border-bottom: 1px solid var(--bg-stroke);
+}
+
+.module:last-child {
+  border-bottom: 0;
+}
+
+.moduleHead {
+  display: grid;
+  grid-template-columns: 40px 1fr auto 24px;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-4) var(--space-6);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  color: var(--content-primary);
+  font: inherit;
+  font-size: 15px;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.moduleHead:hover {
+  background-color: var(--bg-subtle);
+}
+
+.moduleHead:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: -2px;
+}
+
+.moduleNum {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--content-tertiary);
+  letter-spacing: 0.04em;
+}
+
+.moduleTitle {
+  font-weight: var(--font-weight-semibold);
+  font-size: 15px;
+  color: var(--content-primary);
+}
+
+/* Done/total pill — flips green once the whole module is completed. */
+.moduleBadge {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--content-secondary);
+  padding: 2px 6px;
+  background: var(--bg-subtle);
+  border-radius: 2px;
+}
+
+.moduleBadge[data-complete='true'] {
+  color: var(--content-inverse);
+  background: var(--accent-success);
+}
+
+.moduleChevron {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--content-tertiary);
+  text-align: center;
+  line-height: 1;
+}
+
+/* ---------- Lessons ---------- */
+
+.lessons {
+  list-style: none;
+  margin: 0;
+  padding: 0 var(--space-6) var(--space-4);
+  border-top: 1px solid var(--bg-stroke);
+  background: var(--bg-subtle);
+  display: flex;
+  flex-direction: column;
+}
+
+.lesson {
+  list-style: none;
+}
+
+.lessonLink {
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  color: var(--content-secondary);
+  text-decoration: none;
+  position: relative;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+.lessonLink:hover {
+  background-color: var(--bg-surface);
+  color: var(--content-primary);
+}
+
+.lessonLink:focus-visible {
+  outline: 2px solid var(--accent-main);
+  outline-offset: -2px;
+}
+
+.lessonNum {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--content-tertiary);
+}
+
+.lessonTitle {
+  line-height: 1.4;
+}
+
+.lessonMeta {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--content-tertiary);
+}
+
+.lessonCheck {
+  color: var(--accent-success);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Completed: dim the link, strike-through the title — same treatment as
+   the reference, signals "you've been here" without hiding the entry. */
+.lessonLink[data-completed='true'] {
+  color: var(--content-tertiary);
+}
+
+.lessonLink[data-completed='true'] .lessonTitle {
+  text-decoration: line-through;
+  text-decoration-color: var(--content-tertiary);
+}
+
+/* Active lesson — surface up with bg-surface, accent vertical strip on the
+   left edge via inset shadow (avoids re-flowing the grid). */
+.lessonLink[data-current='true'] {
+  background-color: var(--bg-surface);
+  color: var(--content-primary);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--accent-main);
+}
+
+.lessonLink[data-current='true']:hover {
+  background-color: var(--bg-surface);
+}
+
+/* Gate-managed lock state. JSX always renders the open shape; the inline
+   gate-mark script flips data-locked on this link before first paint, and
+   CSS swaps the meta cell (duration/✓ → lock icon) and dims the row.
+   Avoids the React-driven re-render that previously caused a flash. */
+.lessonLink[data-locked='true'] {
+  cursor: not-allowed;
+  color: var(--content-tertiary);
+}
+
+.lessonLink[data-locked='true']:hover {
+  background-color: transparent;
+  color: var(--content-tertiary);
+}
+
+.lessonLink[data-locked='true'] .lessonTitle,
+.lessonLink[data-locked='true'] .lessonNum,
+.lessonLink[data-locked='true'] .lessonMeta {
+  color: var(--content-tertiary);
+}
+
+.lessonMeta .metaLocked {
+  display: none;
+  align-items: center;
+}
+
+.lessonLink[data-locked='true'] .metaOpen {
+  display: none;
+}
+
+.lessonLink[data-locked='true'] .metaLocked {
+  display: inline-flex;
+}
+
+/* ---------- Mobile context strip (progress + prev/next + home/github) ---- */
+
+/* Default = desktop: the breadcrumb header carries progress and prev/next,
+   the bottom sidebar carries home and github, so suppress these inside the
+   drawer to avoid duplication. The mobile breakpoint below re-enables them. */
+.contextProgress,
+.contextNav,
+.contextFooter {
+  display: none;
+}
+
+@media (max-width: 720px) {
+  .drawer {
+    width: 100vw;
+    left: var(--layout-sidebar-width);
+  }
+}
+
+@media (max-width: 1023px) {
+  /* Drawer covers the entire viewport on mobile — the user explicitly asked
+     for a fullscreen overlay (no peeking content behind, no slide-in width
+     guess). The drawer is the only command surface on this breakpoint. */
+  .drawer {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100vw;
+    width: 100dvw;
+    max-width: 100vw;
+    border: 0;
+    box-shadow: none;
+  }
+
+  /* Sticky frosted header so the eyebrow + title persist under the iOS
+     status bar as the user scrolls the module list. Matches the design's
+     drawer-head treatment (color-mix(bg 94%) + 16px backdrop blur). */
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    padding: max(env(safe-area-inset-top), var(--space-4)) var(--space-5)
+      var(--space-4);
+    background-color: color-mix(in srgb, var(--bg-default) 94%, transparent);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  .contextProgress {
+    display: flex;
+    align-items: center;
+    padding: var(--space-3) var(--space-5);
+    border-bottom: 1px solid var(--bg-stroke);
+    flex: 0 0 auto;
+  }
+
+  /* The ProgressBar uses min-width:14ch on its label and a fixed-width track;
+     on a mobile sheet we want it to span the full width — left-align label,
+     stretch track to fill remaining space. */
+  .contextProgress > :global(*) {
+    width: 100%;
+  }
+
+  /* Lesson-nav context block: current card on top, prev/next 2-up below. */
+  .contextNav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--bg-stroke);
+    flex: 0 0 auto;
+  }
+
+  .currentCard {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--bg-stroke);
+    border-radius: var(--radius-md);
+    background-color: var(--bg-surface);
+  }
+
+  .currentEyebrow {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--content-tertiary);
+    letter-spacing: 0.05em;
+    text-transform: lowercase;
+  }
+
+  .currentTitle {
+    margin-top: 4px;
+    font-size: 17px;
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.25;
+    color: var(--content-primary);
+  }
+
+  .currentMeta {
+    margin-top: 6px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--content-tertiary);
+  }
+
+  .navRow {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2);
+  }
+
+  .navCard {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--bg-stroke);
+    border-radius: var(--radius-md);
+    background-color: var(--bg-default);
+    text-decoration: none;
+    color: inherit;
+    min-height: 56px;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .navCard:hover,
+  .navCard:focus-visible {
+    border-color: var(--bg-stroke-strong);
+    background-color: var(--bg-subtle);
+  }
+
+  .navCard:focus-visible {
+    outline: 2px solid var(--accent-main);
+    outline-offset: 2px;
+  }
+
+  .navNext {
+    flex-direction: row;
+    text-align: right;
+  }
+
+  .navNext .navMeta {
+    align-items: flex-end;
+  }
+
+  .navPrev {
+    text-align: left;
+  }
+
+  .navDisabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .navChevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 28px;
+    border-radius: 50%;
+    background-color: var(--bg-surface);
+    border: 1px solid var(--bg-stroke);
+    color: var(--content-secondary);
+    transition:
+      background-color 120ms ease,
+      color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .navCard:hover .navChevron,
+  .navCard:focus-visible .navChevron {
+    background-color: var(--content-primary);
+    color: var(--bg-default);
+    border-color: var(--content-primary);
+  }
+
+  .navMeta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .navLabel {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--content-tertiary);
+    text-transform: lowercase;
+    letter-spacing: 0.02em;
+  }
+
+  .navTitle {
+    font-size: 13px;
+    font-weight: var(--font-weight-medium);
+    color: var(--content-primary);
+    line-height: 1.25;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .contextFooter {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5)
+      calc(var(--space-4) + env(safe-area-inset-bottom));
+    border-top: 1px solid var(--bg-stroke);
+    flex: 0 0 auto;
+    background-color: var(--bg-default);
+  }
+
+  .footerLink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--bg-stroke);
+    border-radius: var(--radius-md);
+    background-color: var(--bg-surface);
+    color: var(--content-primary);
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .footerLink:hover,
+  .footerLink:focus-visible {
+    border-color: var(--accent-main);
+    background-color: var(--bg-subtle);
+  }
+
+  .footerLink:focus-visible {
+    outline: 2px solid var(--accent-main);
+    outline-offset: 2px;
+  }
+
+  .footerLink svg {
+    width: 18px;
+    height: 18px;
+    color: var(--content-secondary);
+  }
+}