sdocs 0.0.48 → 0.0.50

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.50] - 2026-07-05
+
+### Fixed
+
+- **The last block of a page no longer gets clipped.** Preview iframes size
+  themselves to the preview root's `scrollHeight`, but the first and last
+  child's margins collapsed through that root and weren't counted — so the
+  final block of `[PAGE]` content (a closing paragraph, a raw HTML block)
+  was cut off. The preview root is now a block formatting context
+  (`display: flow-root`), so the reported height includes everything.
+
+## [0.0.49] - 2026-07-05
+
+### Fixed
+
+- **The `:` group marker no longer leaks into page headings.** A title like
+  `:Group / Name` groups an entry in the sidebar, but the leading colon was
+  rendered verbatim in the component/page `<h1>`. Headings now strip it, so the
+  title reads `Group / Name`.
+
 ## [0.0.48] - 2026-07-05
 
 ### Changed

package/dist/explorer/tree-builder.d.ts

@@ -20,6 +20,12 @@ interface SidebarConfig {
 }
 /** Build a tree from flat doc entries */
 export declare function buildTree(docs: DocEntry[], sidebar?: SidebarConfig): TreeNode[];
+/**
+ * The title shown to users. A leading ':' on the first segment is a sidebar
+ * grouping directive (see buildTree), not part of the displayed title, so it
+ * is stripped for headings.
+ */
+export declare function displayTitle(title: string | null | undefined): string;
 /** Check if a path matches a tree node (for active state) */
 export declare function pathMatchesNode(currentPath: string[], node: TreeNode): boolean;
 /** Find the doc entry for a given path */

package/dist/explorer/tree-builder.js

@@ -172,6 +172,14 @@ function sortByOrder(nodes, order) {
             nodes.push(node);
     }
 }
+/**
+ * The title shown to users. A leading ':' on the first segment is a sidebar
+ * grouping directive (see buildTree), not part of the displayed title, so it
+ * is stripped for headings.
+ */
+export function displayTitle(title) {
+    return (title ?? '').replace(/^:\s*/, '');
+}
 /** Check if a path matches a tree node (for active state) */
 export function pathMatchesNode(currentPath, node) {
     if (node.path.length !== currentPath.length)

package/dist/explorer/views/ComponentView.svelte

@@ -7,6 +7,7 @@
 	import ApiTable from './ApiTable.svelte';
 	import PropControl from './PropControl.svelte';
 	import CssPropControl from './CssPropControl.svelte';
+	import { displayTitle } from '../tree-builder.js';
 
 	interface Props {
 		doc: DocEntry;
@@ -291,7 +292,7 @@
 	{#if focusedSnippet}
 		<!-- Example full-page view -->
 		<div class="sdocs-view-header">
-			<h1 class="sdocs-view-title">{meta.title} / {snippetName}</h1>
+			<h1 class="sdocs-view-title">{displayTitle(meta.title)} / {snippetName}</h1>
 		</div>
 		<div class="sdocs-panels">
 			<CollapsiblePanel title="Preview">
@@ -304,7 +305,7 @@
 	{:else}
 		<!-- Full component view -->
 		<div class="sdocs-view-header">
-			<h1 class="sdocs-view-title">{meta.title}</h1>
+			<h1 class="sdocs-view-title">{displayTitle(meta.title)}</h1>
 			{#if meta.description}
 				<p class="sdocs-view-description">{meta.description}</p>
 			{/if}

package/dist/explorer/views/PageView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { DocEntry } from '../../types.js';
 	import PreviewFrame from './PreviewFrame.svelte';
+	import { displayTitle } from '../tree-builder.js';
 
 	interface Props {
 		doc: DocEntry;
@@ -25,7 +26,7 @@
 	<div class="sdocs-page-main">
 		<!-- Header -->
 		<div class="sdocs-view-header">
-			<h1 class="sdocs-view-title">{meta.title}</h1>
+			<h1 class="sdocs-view-title">{displayTitle(meta.title)}</h1>
 			{#if meta.description}
 				<p class="sdocs-view-description">{meta.description}</p>
 			{/if}

package/dist/server/snippet-compiler.js

@@ -138,7 +138,10 @@ ${stateBroadcast}
 
 		window.parent.postMessage({ type: 'sdocs:preview-ready' }, '*');
 
-		// Report content height to parent for auto-sizing
+		// Report content height to parent for auto-sizing. The preview div is
+		// display: flow-root so child margins are contained — otherwise the
+		// first/last child's margins collapse through it, scrollHeight comes up
+		// short, and the iframe clips the final block of content.
 		const ro = new ResizeObserver(() => {
 			const height = document.getElementById('sdocs-preview')?.scrollHeight ?? 0;
 			window.parent.postMessage({ type: 'sdocs:resize', height }, '*');
@@ -148,7 +151,7 @@ ${stateBroadcast}
 	});
 </script>
 
-<div id="sdocs-preview">
+<div id="sdocs-preview" style="display: flow-root">
 	{#snippet SdocsPreview(args)}
 		${injectRootRef(snippetBody, componentName)}
 	{/snippet}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdocs",
-	"version": "0.0.48",
+	"version": "0.0.50",
 	"description": "A lightweight documentation tool for Svelte 5 components",
 	"type": "module",
 	"license": "MIT",