@brett_lamy/docstream 0.6.0 → 0.6.1

package/README.md

@@ -32,6 +32,10 @@ Import the package CSS once near your app entrypoint:
 import "@brett_lamy/docstream/styles.css"
 ```
 
+The stylesheet provides heading hierarchy and consistent spacing for the
+`DocsRenderer`, `MarkdownContent`, and streaming render paths. Host CSS can
+override those defaults through the normal cascade.
+
 If your TypeScript app checks CSS side-effect imports, include Vite's standard environment declaration or an equivalent CSS module declaration:
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"

package/src/docs/DocsRenderer.tsx

@@ -376,7 +376,11 @@ function isReactLanguage(language: string | null): boolean {
 
 function Blocks({ blocks, inline, liveRenderer, sourceRenderer }: { blocks: Block[]; inline?: boolean } & Renderers) {
   return (
-    <div className={inline ? "docs-blocks-inline" : undefined} style={inline ? { display: "inline" } : undefined}>
+    <div
+      data-docstream-blocks=""
+      className={inline ? "docs-blocks-inline" : undefined}
+      style={inline ? { display: "inline" } : undefined}
+    >
       {blocks.map((b, i) => (
         <BlockView key={i} block={b} liveRenderer={liveRenderer} sourceRenderer={sourceRenderer} />
       ))}

package/src/styles.css

@@ -68,44 +68,87 @@
   white-space: pre-wrap;
 }
 
+:is([data-docstream], .docs-article) {
+  color: var(--foreground, #18181b);
+  line-height: 1.65;
+  font-size: 15.5px;
+}
+
 .docs-article {
   max-width: 760px;
   margin: 0 auto;
   padding: 48px 32px 120px;
-  line-height: 1.65;
-  font-size: 15.5px;
 }
 
-.docs-article > div > * + * {
-  margin-top: 0.85em;
+:is([data-docstream], .docs-article) [data-docstream-blocks] > * {
+  margin-block: 0;
+}
+
+:is([data-docstream], .docs-article) [data-docstream-blocks] > * + * {
+  margin-block-start: 0.9em;
+}
+
+:is([data-docstream], .docs-article) :is(h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+  display: block;
+  font-family: inherit;
+  font-weight: 650;
+  line-height: 1.25;
+  margin-block: 1.6em 0.45em;
+  text-wrap: pretty;
+}
+
+:is([data-docstream], .docs-article) [data-docstream-blocks] > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 1.6em;
+}
+
+:is([data-docstream], .docs-article) [data-docstream-blocks] > :first-child:is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 0;
 }
 
-.docs-article h1 {
+:is([data-docstream], .docs-article) h1 {
   font-size: 2.2em;
   font-weight: 700;
-  margin-top: 0.6em;
 }
 
-.docs-article h2 {
+:is([data-docstream], .docs-article) h2 {
   font-size: 1.5em;
-  font-weight: 650;
-  margin-top: 1.4em;
+  font-weight: 675;
   padding-bottom: 0.2em;
   border-bottom: 1px solid var(--border, #e4e4e7);
 }
 
-.docs-article h3 {
+:is([data-docstream], .docs-article) h3 {
   font-size: 1.2em;
   font-weight: 600;
-  margin-top: 1.1em;
 }
 
-.docs-article a {
+:is([data-docstream], .docs-article) h4 {
+  font-size: 1.08em;
+  font-weight: 600;
+}
+
+:is([data-docstream], .docs-article) h5 {
+  font-size: 1em;
+  font-weight: 600;
+}
+
+:is([data-docstream], .docs-article) h6 {
+  font-size: 0.92em;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+:is([data-docstream], .docs-article) p {
+  margin-block: 0;
+}
+
+:is([data-docstream], .docs-article) a {
   color: var(--gb-primary);
   text-decoration: underline;
 }
 
-.docs-article code {
+:is([data-docstream], .docs-article) code {
   background: var(--gb-muted);
   border-radius: 4px;
   padding: 0.15em 0.35em;
@@ -113,12 +156,12 @@
   font-family: ui-monospace, Menlo, monospace;
 }
 
-.docs-article ul {
+:is([data-docstream], .docs-article) ul {
   list-style: disc;
   padding-left: 1.5em;
 }
 
-.docs-article ol {
+:is([data-docstream], .docs-article) ol {
   list-style: decimal;
   padding-left: 1.5em;
 }
@@ -148,24 +191,24 @@
   margin: 0;
 }
 
-.docs-article blockquote {
+:is([data-docstream], .docs-article) blockquote {
   border-left: 3px solid var(--gb-border);
   padding-left: 1em;
   color: var(--gb-muted-foreground);
 }
 
-.docs-article hr {
+:is([data-docstream], .docs-article) hr {
   border: none;
   border-top: 1px solid var(--gb-border);
   margin: 2em 0;
 }
 
-.docs-article figure img {
+:is([data-docstream], .docs-article) figure img {
   border-radius: 12px;
   max-width: 100%;
 }
 
-.docs-article figcaption {
+:is([data-docstream], .docs-article) figcaption {
   text-align: center;
   font-size: 13px;
   color: var(--gb-muted-foreground);