@nukipa/post-content 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nukipa/post-content",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Framework-agnostic processor for Nukipa CMS post bodies — markdown + component markers + citations → HTML + interactive island descriptors.",
   "license": "MIT",
   "author": "Nukipa Labs",

package/styles.css

@@ -1,3 +1,15 @@
+/*
+ * Material Icons — pulled at the top so the @font-face rule wins the
+ * cascade before any of our `.material-icons` selectors below. The
+ * renderer emits glyph names verbatim (`help_outline`, `expand_more`,
+ * `arrow_forward`, `chevron_left`, `chevron_right`, plus whatever
+ * stage icons the post author picked); without this font those names
+ * render as literal text. To self-host (offline, privacy, or perf
+ * reasons): drop this @import, host the same font + matching CSS at
+ * the host, and the rest of this stylesheet keeps working unchanged.
+ */
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
 /*
  * Nukipa post-content default stylesheet.
  *
@@ -255,11 +267,25 @@
   font-style: italic;
 }
 
-/* ───── Process — horizontal stages with connectors ───────────────── */
-.bp-process { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; justify-content: center; }
+/* ───── Process — auto-fit grid of stages ─────────────────────────────
+   The renderer interleaves <div class="bp-process__stage"> and
+   <div class="bp-process__connector"> in document order. Laying that
+   out as wrapping flex put orphan connector arrows at the start of
+   wrapped rows (the connector that "belongs" between stage 4 and
+   stage 5 ended up alone on row 2). The grid below tracks columns
+   by stage width — connectors are hidden because they only encode
+   left-to-right adjacency, which is meaningless once the grid wraps
+   into multiple rows. */
+.bp-process {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  align-items: start;
+  justify-items: center;
+  gap: 1rem 0.5rem;
+}
 .bp-process__stage {
   display: flex; flex-direction: column; align-items: center; text-align: center;
-  flex: 1; min-width: 0; padding: 1rem 0.75rem;
+  min-width: 0; padding: 1rem 0.75rem;
 }
 .bp-process__icon {
   width: 3rem; height: 3rem; border-radius: 50%;
@@ -273,11 +299,7 @@
 .bp-process__num   { font-weight: 700; font-size: 1rem; }
 .bp-process__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
 .bp-process__desc  { font-size: 0.875rem; color: var(--color-text-muted, #51646A); line-height: 1.5; }
-.bp-process__connector {
-  display: flex; align-items: center; padding-top: 1.25rem;
-  color: var(--color-text-muted, #51646A);
-}
-.bp-process__connector .material-icons { font-size: 1.5rem; }
+.bp-process__connector { display: none; }
 
 /* ───── Comparison ─────────────────────────────────────────────────── */
 .bp-comparison {
@@ -286,8 +308,23 @@
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
-.bp-comparison table { margin: 0; width: max-content; min-width: 100%; }
-.bp-comparison th, .bp-comparison td { min-width: 100px; }
+.bp-comparison table {
+  margin: 0; width: max-content; min-width: 100%;
+  border-collapse: collapse;
+}
+.bp-comparison th, .bp-comparison td {
+  min-width: 100px;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--color-border, #E5DFDC);
+}
+.bp-comparison thead th {
+  background: var(--color-surface, #F0EBEB);
+  font-weight: 600;
+  text-align: left;
+  border-bottom-width: 2px;
+}
+.bp-comparison tbody tr:last-child th, .bp-comparison tbody tr:last-child td { border-bottom: none; }
+.bp-comparison tbody tr:hover td, .bp-comparison tbody tr:hover th { background: color-mix(in srgb, var(--color-surface, #F0EBEB) 60%, transparent); }
 .bp-comparison__cell { text-align: center; }
 
 /* ───── Cite chip — superscript footnote link ──────────────────────── */