sdocs 0.0.47 → 0.0.49

package/CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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
+
+- **Empty API sections are hidden on component pages.** Props, CSS Props,
+  Events, Snippets, Methods, and States sections now render only when the
+  component actually has entries for them, instead of every section always
+  showing with a "None" placeholder.
+
 ## [0.0.47] - 2026-07-05
 
 ### Fixed

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;
@@ -278,13 +279,20 @@
 			description: s.description,
 		})),
 	);
+
+	// The Reset button normally sits in the Props header; when a component has
+	// editable CSS vars but no regular props, that section is hidden, so show
+	// Reset in the CSS Props header instead.
+	const showResetInCss = $derived(
+		hasEditableControls && propsRows.length === 0 && cssPropsRows.length > 0,
+	);
 </script>
 
 <div class="sdocs-component-view">
 	{#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">
@@ -297,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}
@@ -373,56 +381,71 @@
 			{/if}
 		{/snippet}
 
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="sliders-horizontal" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				Props
-				{#if hasEditableControls}
-					<button class="sdocs-reset-btn" onclick={handleReset}>Reset</button>
-				{/if}
-			</h2>
-			<ApiTable rows={propsRows} control={propControl} />
-		</section>
-
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="palette" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				CSS Props
-			</h2>
-			<ApiTable rows={cssPropsRows} control={cssPropControl} />
-		</section>
-
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="zap" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				Events
-			</h2>
-			<ApiTable rows={eventsRows} showDefault={false} />
-		</section>
-
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="code" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				Snippets
-			</h2>
-			<ApiTable rows={snippetsRows} showDefault={false} />
-		</section>
-
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="square-function" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				Methods
-			</h2>
-			<ApiTable rows={methodsRows} showDefault={false} control={methodControl} />
-		</section>
-
-		<section class="sdocs-doc-section">
-			<h2 class="sdocs-doc-section-title">
-				<Icon name="database" --w="15px" --h="15px" --fill="var(--color-base-500)" />
-				States
-			</h2>
-			<ApiTable rows={stateRows} defaultLabel="Current value" />
-		</section>
+		{#if propsRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="sliders-horizontal" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					Props
+					{#if hasEditableControls}
+						<button class="sdocs-reset-btn" onclick={handleReset}>Reset</button>
+					{/if}
+				</h2>
+				<ApiTable rows={propsRows} control={propControl} />
+			</section>
+		{/if}
+
+		{#if cssPropsRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="palette" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					CSS Props
+					{#if showResetInCss}
+						<button class="sdocs-reset-btn" onclick={handleReset}>Reset</button>
+					{/if}
+				</h2>
+				<ApiTable rows={cssPropsRows} control={cssPropControl} />
+			</section>
+		{/if}
+
+		{#if eventsRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="zap" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					Events
+				</h2>
+				<ApiTable rows={eventsRows} showDefault={false} />
+			</section>
+		{/if}
+
+		{#if snippetsRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="code" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					Snippets
+				</h2>
+				<ApiTable rows={snippetsRows} showDefault={false} />
+			</section>
+		{/if}
+
+		{#if methodsRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="square-function" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					Methods
+				</h2>
+				<ApiTable rows={methodsRows} showDefault={false} control={methodControl} />
+			</section>
+		{/if}
+
+		{#if stateRows.length > 0}
+			<section class="sdocs-doc-section">
+				<h2 class="sdocs-doc-section-title">
+					<Icon name="database" --w="15px" --h="15px" --fill="var(--color-base-500)" />
+					States
+				</h2>
+				<ApiTable rows={stateRows} defaultLabel="Current value" />
+			</section>
+		{/if}
 
 		{#if exampleSnippets.length > 0}
 			<hr class="sdocs-divider" />

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/package.json

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