@dfosco/storyboard 0.11.2 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dfosco/storyboard",
-    "version": "0.11.2",
+    "version": "0.11.3",
     "type": "module",
     "license": "MIT",
     "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/canvas/widgets/StickyNote.module.css

@@ -57,7 +57,7 @@
 .text > :last-child { margin-bottom: 0; }
 
 .text p {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.4em;
 }
 
 .text h1,
@@ -76,13 +76,31 @@
 
 .text ul,
 .text ol {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.4em;
   padding-left: 1.25em;
 }
 
 .text ul { list-style: disc; }
 .text ol { list-style: decimal; }
-.text li { margin: 0 0 0.15em; }
+.text li { margin: 0 0 0.1em; }
+
+/* CommonMark loose-list compatibility: blank lines between list items
+ * cause remark to wrap each item's content in <p>. Without these resets
+ * the `.text p` margin pushes the bullet's text down and away from its
+ * marker, and adds extra vertical gap between items. Mirror of the
+ * shared markdownContent.module.css fix — duplicated here because the
+ * sticky's `.text p` rule competes with the shared `.contentSmall p`
+ * rule at the same specificity, so we need a local override too. */
+.text li > p { margin: 0; }
+.text li > p + p { margin-top: 0.25em; }
+
+/* Em-relative <hr> margin so the rule scales with the sticky's
+ * autoScaleText (--sticky-text-scale). The shared
+ * markdownContent.module.css uses fixed `16px 0`, which produces
+ * visually huge gaps once the sticky scales its font-size up. */
+.text hr {
+  margin: 0.6em 0;
+}
 
 .text a {
   color: inherit;

package/src/internals/canvas/widgets/markdown/MarkdownView.test.jsx

@@ -29,4 +29,23 @@ describe('MarkdownView typography', () => {
     const cls = container.querySelector('div').className
     expect(cls).toMatch(/inert/)
   })
+
+  it('renders loose lists (blank lines between items) with <p>-wrapped items', () => {
+    // CommonMark turns a list with blank lines between items into a
+    // "loose list" — each <li> contains <p> rather than raw text. The
+    // shared markdownContent.module.css resets `li > p` margin so the
+    // bullet text stays aligned to its marker; without that the gap
+    // between items balloons. This test pins the HTML contract so the
+    // CSS reset has a stable shape to target.
+    const { container } = render(
+      <MarkdownView content={'- first\n\n- second\n\n- third'} />,
+    )
+    const items = container.querySelectorAll('li')
+    expect(items.length).toBe(3)
+    for (const li of items) {
+      const directParagraphs = Array.from(li.children).filter(c => c.tagName === 'P')
+      expect(directParagraphs.length).toBeGreaterThanOrEqual(1)
+    }
+  })
 })
+

package/src/internals/canvas/widgets/markdown/markdownContent.module.css

@@ -71,6 +71,13 @@
 .contentSmall ul { margin: 0 0 8px; padding-left: 20px; list-style-type: disc; }
 .contentSmall ol { margin: 0 0 8px; padding-left: 20px; list-style-type: decimal; }
 .contentSmall li { margin: 0 0 2px; display: list-item; }
+/* CommonMark loose-list compatibility: when items have blank lines between
+ * them, remark wraps each item's content in <p>. The global `.contentSmall p`
+ * margin (8px) would then blow up spacing inside the bullet and visually
+ * detach the text from its marker. Reset to zero inside <li>; restore a
+ * tighter rhythm only when an <li> contains multiple <p>s. */
+.contentSmall li > p { margin: 0; }
+.contentSmall li > p + p { margin-top: 4px; }
 .contentSmall input[type="checkbox"] {
   margin-right: 6px;
   accent-color: var(--sb--markdown-accent);
@@ -182,6 +189,9 @@
 .contentLarge ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
 .contentLarge ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
 .contentLarge li { margin: 0 0 4px; display: list-item; }
+/* CommonMark loose-list compatibility — see .contentSmall comment above. */
+.contentLarge li > p { margin: 0; }
+.contentLarge li > p + p { margin-top: 6px; }
 .contentLarge input[type="checkbox"] {
   margin-right: 6px;
   accent-color: var(--sb--markdown-accent);