sdocs 0.0.37 → 0.0.39

package/CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.39] - 2026-07-04
+
+### Changed
+
+- **Methods and States join the unified section layout.** Methods render a
+  single signature chip (`(params) => returns`, colored like events) with
+  the Run button in the control rail; States show their live value in a
+  "Current value" rail. The value rail widens to align section right edges
+  when it's the last column. All six sections now share one table
+  implementation.
+- **JSDoc types display like TypeScript types.** `import('module').`
+  qualifiers are stripped for display and classification, so
+  `import('svelte').Snippet<[…]>` renders as the same pink `Snippet<[…]>`
+  chip as in TS components.
+
+## [0.0.38] - 2026-07-04
+
+### Changed
+
+- Names in the API tables are slightly larger (14px), giving each row a
+  clearer anchor.
+
 ## [0.0.37] - 2026-07-03
 
 ### Changed

package/dist/explorer/views/ApiTable.svelte

@@ -16,12 +16,16 @@
 		control?: Snippet<[Row]>;
 		/** Show the Default column (rows without defaults, e.g. events, turn it off) */
 		showDefault?: boolean;
+		/** Header label of the Default column (e.g. "Current value" for states) */
+		defaultLabel?: string;
 	}
 
-	let { rows, control, showDefault = true }: Props = $props();
+	let { rows, control, showDefault = true, defaultLabel = 'Default' }: Props = $props();
 
+	// The default/value column widens to the control-rail width when it is the
+	// last column, so section right edges align.
 	const gridColumns = $derived(
-		['200px', 'minmax(0, 1fr)', ...(showDefault ? ['120px'] : []), ...(control ? ['200px'] : [])].join(' '),
+		['200px', 'minmax(0, 1fr)', ...(showDefault ? [control ? '120px' : '200px'] : []), ...(control ? ['200px'] : [])].join(' '),
 	);
 </script>
 
@@ -30,7 +34,7 @@
 		<div class="sdocs-api-header" style:grid-template-columns={gridColumns}>
 			<div>Name</div>
 			<div>Details</div>
-			{#if showDefault}<div>Default</div>{/if}
+			{#if showDefault}<div>{defaultLabel}</div>{/if}
 			{#if control}<div>Control</div>{/if}
 		</div>
 		{#each rows as row (row.name)}
@@ -97,6 +101,7 @@
 		font-size: 13px;
 	}
 	.sdocs-api-name {
+		font-size: 14px;
 		font-weight: 600;
 		color: var(--color-base-900);
 		overflow-wrap: break-word;

package/dist/explorer/views/ComponentView.svelte

@@ -4,7 +4,6 @@
 	import { highlightSvelte } from '../highlighter.js';
 	import CollapsiblePanel from './CollapsiblePanel.svelte';
 	import PreviewFrame from './PreviewFrame.svelte';
-	import DataTable from './DataTable.svelte';
 	import ApiTable from './ApiTable.svelte';
 	import PropControl from './PropControl.svelte';
 	import CssPropControl from './CssPropControl.svelte';
@@ -249,15 +248,15 @@
 	const methodsRows = $derived(
 		(cd?.methods ?? []).map((m) => ({
 			name: m.name,
+			type: `(${m.params ?? ''}) => ${m.returnType || 'void'}`,
 			params: m.params,
-			returns: m.returnType,
 			description: m.description,
 		})),
 	);
 
 	const stateRows = $derived(
 		(cd?.state ?? []).map((s) => ({
-			value: s.name in liveStateValues ? JSON.stringify(liveStateValues[s.name]) : undefined,
+			default: s.name in liveStateValues ? JSON.stringify(liveStateValues[s.name]) : undefined,
 			name: s.name,
 			type: s.type,
 			description: s.description,
@@ -380,16 +379,7 @@
 				<Icon name="square-function" --w="15px" --h="15px" --fill="var(--color-base-500)" />
 				Methods
 			</h2>
-			<DataTable
-				columns={[
-					{ key: 'name', label: 'Name', kind: 'name' },
-					{ key: 'params', label: 'Parameters' },
-					{ key: 'returns', label: 'Returns', kind: 'type' },
-					{ key: 'description', label: 'Description', kind: 'text' },
-				]}
-				rows={methodsRows}
-				control={methodsRows.length > 0 ? methodControl : undefined}
-			/>
+			<ApiTable rows={methodsRows} showDefault={false} control={methodControl} />
 		</section>
 
 		<section class="sdocs-doc-section">
@@ -397,15 +387,7 @@
 				<Icon name="database" --w="15px" --h="15px" --fill="var(--color-base-500)" />
 				States
 			</h2>
-			<DataTable
-				columns={[
-					{ key: 'name', label: 'Name', kind: 'name' },
-					{ key: 'type', label: 'Type', kind: 'type' },
-					{ key: 'value', label: 'Current value', kind: 'value' },
-					{ key: 'description', label: 'Description', kind: 'text' },
-				]}
-				rows={stateRows}
-			/>
+			<ApiTable rows={stateRows} defaultLabel="Current value" />
 		</section>
 
 		{#if exampleSnippets.length > 0}

package/dist/explorer/views/format.js

@@ -1,6 +1,12 @@
+/** Drop `import('module').` qualifiers — JSDoc types carry them, TS ones don't */
+function normalizeType(value) {
+    return String(value)
+        .trim()
+        .replace(/import\((['"])[^'"]*\1\)\./g, '');
+}
 /** Classify a type string for color coding (conventions, not a formal standard) */
 export function typeClass(value) {
-    const v = String(value).trim();
+    const v = normalizeType(value);
     if (v === 'string' || /^'[^']*'(\s*\|\s*'[^']*')*$/.test(v))
         return 'string';
     if (v === 'number' || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)*$/.test(v))
@@ -36,7 +42,7 @@ export function valueClass(value) {
 }
 /** Split a clean union type into its members; everything else stays whole */
 export function typeParts(value) {
-    const v = String(value).trim();
+    const v = normalizeType(value);
     if (/^'[^']*'(\s*\|\s*'[^']*')+$/.test(v) || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)+$/.test(v)) {
         return v.split('|').map((part) => part.trim());
     }

package/package.json

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

package/dist/explorer/views/DataTable.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { typeClass, typeParts, valueClass } from './format.js';
-
-	interface Column {
-		key: string;
-		label: string;
-		/** 'name' renders as bold plain text, 'text' as plain text,
-		 * 'type' as a code chip color-coded by the type,
-		 * 'value' as mono text color-coded by the literal; default is a code chip */
-		kind?: 'name' | 'text' | 'type' | 'value';
-	}
-
-	interface Props {
-		columns: Column[];
-		rows: Record<string, unknown>[];
-		/** When set, adds a Control column rendering this snippet per row */
-		control?: Snippet<[Record<string, unknown>]>;
-	}
-
-	let { columns, rows, control }: Props = $props();
-
-
-</script>
-
-{#if rows.length > 0}
-	<table class="sdocs-table">
-		<thead>
-			<tr>
-				{#each columns as col (col.key)}
-					<th>{col.label}</th>
-				{/each}
-				{#if control}
-					<th class="sdocs-table-control-col">Control</th>
-				{/if}
-			</tr>
-		</thead>
-		<tbody>
-			{#each rows as row, i (i)}
-				<tr>
-					{#each columns as col (col.key)}
-						<td>
-							{#if row[col.key] == null}
-								<span class="sdocs-table-empty">—</span>
-							{:else if col.kind === 'name'}
-								<span class="sdocs-table-name">
-									{row[col.key]}{#if row.required === true}<span class="sdocs-table-required" title="Required">*</span>{/if}
-								</span>
-							{:else if col.kind === 'text'}
-								{row[col.key]}
-							{:else if col.kind === 'type'}
-								{#each typeParts(row[col.key]) as part, i (i)}
-									{#if i > 0}<span class="sdocs-typesep">|</span>{/if}
-									<code class="sdocs-type-{typeClass(row[col.key])}">{part}</code>
-								{/each}
-							{:else if col.kind === 'value'}
-								<span class="sdocs-value sdocs-value-{valueClass(row[col.key])}">{row[col.key]}</span>
-							{:else}
-								<code>{row[col.key]}</code>
-							{/if}
-						</td>
-					{/each}
-					{#if control}
-						<td class="sdocs-table-control-col">
-							{@render control(row)}
-						</td>
-					{/if}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-{:else}
-	<p class="sdocs-table-none">None</p>
-{/if}
-
-<style>
-	.sdocs-table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 13px;
-	}
-	.sdocs-table th {
-		text-align: left;
-		padding: 6px 12px;
-		border-bottom: 2px solid var(--color-base-200);
-		font-weight: 600;
-		color: var(--color-base-600);
-		font-size: 12px;
-	}
-	.sdocs-table td {
-		padding: 6px 12px;
-		border-bottom: 1px solid var(--color-base-100);
-		color: var(--color-base-800);
-	}
-	.sdocs-table code {
-		font-family: var(--mono);
-		font-size: 12px;
-		background: var(--color-base-100);
-		padding: 1px 4px;
-		border-radius: 3px;
-	}
-	.sdocs-table-name {
-		font-weight: 600;
-	}
-	.sdocs-table-required {
-		color: var(--color-red-500);
-	}
-	.sdocs-table-control-col {
-		width: 220px;
-		min-width: 180px;
-	}
-	.sdocs-table-empty {
-		color: var(--color-base-300);
-	}
-	.sdocs-table-none {
-		color: var(--color-base-400);
-		font-size: 13px;
-		font-style: italic;
-		margin: 0;
-	}
-</style>

package/dist/explorer/views/DataTable.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
-export default class DataTable extends SvelteComponentTyped<DataTableProps, DataTableEvents, DataTableSlots> {
-}
-export {};