@nukipa/post-content 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nukipa/post-content",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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,46 @@
+/*
+ * Material Icons — declared inline so it works regardless of where
+ * this stylesheet lands in the bundle.
+ *
+ * We used to `@import url("https://fonts.googleapis.com/icon?family=Material+Icons")`,
+ * but the CSS spec requires every `@import` rule to appear BEFORE
+ * any other rule in the document; modern bundlers (Next.js/webpack,
+ * Vite) concatenate consumer styles (Tailwind, next/font, globals.css)
+ * ahead of package CSS, pushing the @import past other rules where
+ * browsers silently ignore it.
+ *
+ * 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 the
+ * font those names render as literal text. The src URL is Google's
+ * gstatic CDN — old versions stay accessible indefinitely, so the
+ * pinned `v143` is durable. To self-host: replace the @font-face
+ * src with your own woff2 URL and keep the `.material-icons` rules
+ * below as-is.
+ */
+@font-face {
+  font-family: "Material Icons";
+  font-style:  normal;
+  font-weight: 400;
+  src:         url("https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.woff2") format("woff2");
+  font-display: swap;
+}
+.material-icons {
+  font-family:   "Material Icons";
+  font-weight:   normal;
+  font-style:    normal;
+  font-size:     24px;
+  line-height:   1;
+  letter-spacing: normal;
+  text-transform: none;
+  display:       inline-block;
+  white-space:   nowrap;
+  word-wrap:     normal;
+  direction:     ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing:        antialiased;
+}
+
 /*
  * Nukipa post-content default stylesheet.
  *
@@ -255,11 +298,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 +330,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 +339,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 ──────────────────────── */