sdocs 0.0.30 → 0.0.32

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.32] - 2026-07-03
+
+### Changed
+
+- **Breaking: the embedded component is the Explorer now.** Import
+  `Explorer` from `sdocs/explorer` instead of `App` from `sdocs/client` —
+  same component and props, named for what it is. The CLI help and
+  generated app use the same naming.
+
+## [0.0.31] - 2026-07-03
+
+### Added
+
+- **`icon` config option** — the sidebar header icon is now configurable:
+  `'sdocs'` shows the built-in mascot (the default), any other string is
+  used as an image URL, and `false` hides it.
+
 ## [0.0.30] - 2026-07-03
 
 ### Fixed

package/README.md

@@ -65,11 +65,11 @@ The plugin discovers `.sdoc` files and exposes them via a `virtual:sdocs` module
 ```svelte
 <!-- src/routes/docs/+page.svelte -->
 <script>
-  import App from 'sdocs/client';
+  import Explorer from 'sdocs/explorer';
   import { docs, cssNames } from 'virtual:sdocs';
 </script>
 
-<App
+<Explorer
   {docs}
   {cssNames}
   logo="My Design System"
@@ -273,7 +273,7 @@ sidebar: {
 |--------|-------------|
 | `sdocs` | Main entry — `sdocsPlugin` + types |
 | `sdocs/vite` | Vite plugin function |
-| `sdocs/client` | App.svelte UI component |
+| `sdocs/explorer` | Explorer.svelte UI component |
 | `sdocs/ui` | Reusable UI components (Button, Frame, Icon, Control, NavTree, Stack) |
 
 ## License

package/dist/commands/dev.js

@@ -44,7 +44,7 @@ export async function devCommand() {
             // Rolldown-based Vite (8+) can't scan .svelte entry graphs and floods
             // the console with unresolved-import errors. Skip the initial scan —
             // runtime discovery still optimizes dependencies on demand — and
-            // pre-bundle the one dependency the client app always needs.
+            // pre-bundle the one dependency the Explorer app always needs.
             entries: [],
             include: ['svelte'],
         },

package/dist/commands/init.js

@@ -21,6 +21,9 @@ export default {
 	// Sidebar logo text (default: 'sdocs')
 	// logo: 'sdocs',
 
+	// Sidebar logo icon: 'sdocs' for the mascot, an image URL, or false to hide (default: 'sdocs')
+	// icon: 'sdocs',
+
 	// Sidebar configuration
 	// sidebar: {
 	// 	order: { root: ['Components', '*', 'Documentation'] },

package/dist/{client/App.svelte → explorer/Explorer.svelte}

@@ -15,6 +15,7 @@
 	interface Props {
 		docs: DocEntry[];
 		logo?: string;
+		icon?: string | false;
 		cssNames?: string[];
 		sidebarConfig?: {
 			order?: Record<string, string[]>;
@@ -22,7 +23,7 @@
 		};
 	}
 
-	let { docs, logo = 'sdocs', cssNames = [], sidebarConfig }: Props = $props();
+	let { docs, logo = 'sdocs', icon = 'sdocs', cssNames = [], sidebarConfig }: Props = $props();
 
 	let sidebarHidden = $state(false);
 	let activeStylesheet = $state<string | undefined>(undefined);
@@ -62,6 +63,7 @@
 			{tree}
 			{currentPath}
 			{logo}
+			{icon}
 			{cssNames}
 			{activeStylesheet}
 			{theme}

package/dist/explorer/Explorer.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import '../ui/styles/sdocs.css';
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExplorerProps = typeof __propDef.props;
+export type ExplorerEvents = typeof __propDef.events;
+export type ExplorerSlots = typeof __propDef.slots;
+export default class Explorer extends SvelteComponentTyped<ExplorerProps, ExplorerEvents, ExplorerSlots> {
+}
+export {};

package/dist/{client → explorer}/views/Sidebar.svelte

@@ -11,6 +11,7 @@
 		tree: TreeNode[];
 		currentPath: string[];
 		logo: string;
+		icon?: string | false;
 		cssNames?: string[];
 		activeStylesheet?: string;
 		theme?: ThemeMode;
@@ -19,7 +20,7 @@
 		onThemeChange?: (theme: ThemeMode) => void;
 	}
 
-	let { tree, currentPath, logo, cssNames = [], activeStylesheet, theme = 'light', onToggleFullscreen, onStylesheetChange, onThemeChange }: Props = $props();
+	let { tree, currentPath, logo, icon = 'sdocs', cssNames = [], activeStylesheet, theme = 'light', onToggleFullscreen, onStylesheetChange, onThemeChange }: Props = $props();
 
 	const themeIcons: Record<ThemeMode, string> = { light: '\u2600', dark: '\u263D' };
 	const themeLabels: Record<ThemeMode, string> = { light: 'Light', dark: 'Dark' };
@@ -185,7 +186,11 @@
 <aside class="sdocs-sidebar">
 	<div class="sdocs-sidebar-header">
 		<a href="#/" class="sdocs-logo">
-			<Icon name="sdocs" --w="22px" --h="22px" --fill="#FC1D29" />
+			{#if icon === 'sdocs'}
+				<Icon name="sdocs" --w="22px" --h="22px" --fill="#FC1D29" />
+			{:else if icon}
+				<img class="sdocs-logo-img" src={icon} alt="" />
+			{/if}
 			{logo}
 		</a>
 		<div class="sdocs-header-actions">
@@ -304,6 +309,11 @@
 		color: var(--color-base-900);
 		text-decoration: none;
 	}
+	.sdocs-logo-img {
+		width: 22px;
+		height: 22px;
+		object-fit: contain;
+	}
 	.sdocs-header-actions {
 		display: flex;
 		align-items: center;

package/dist/server/app-gen.js

@@ -7,13 +7,13 @@ import { discoverDocFiles, getSdocKind } from './discovery.js';
 import { extractSnippets, hasDefaultSnippet } from './snippet-extractor.js';
 import { base64urlEncode } from './snippet-compiler.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
-/** Source client directory in the installed package (dist/client, next to dist/server) */
-function getClientSourceDir() {
-    return resolve(__dirname, '../client');
+/** Source Explorer directory in the installed package (dist/explorer, next to dist/server) */
+function getExplorerSourceDir() {
+    return resolve(__dirname, '../explorer');
 }
-/** Copy the client app plus the ui/ tree it imports (styles, fonts, components) */
-async function copyClientApp(sdocsDir) {
-    await copyDir(getClientSourceDir(), resolve(sdocsDir, 'client'));
+/** Copy the Explorer app plus the ui/ tree it imports (styles, fonts, components) */
+async function copyExplorerApp(sdocsDir) {
+    await copyDir(getExplorerSourceDir(), resolve(sdocsDir, 'explorer'));
     await copyDir(resolve(__dirname, '../ui'), resolve(sdocsDir, 'ui'));
 }
 /** Nearest node_modules walking up from dir (mirrors Node's resolution) */
@@ -68,7 +68,7 @@ function generateIndexHtml(title) {
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="icon" type="image/png" href="./client/favicon.png">
+	<link rel="icon" type="image/png" href="./explorer/favicon.png">
 	<title>${title}</title>
 	<style>body { margin: 0; }</style>
 </head>
@@ -78,18 +78,19 @@ function generateIndexHtml(title) {
 </body>
 </html>`;
 }
-/** Generate the entry.js that mounts the App */
+/** Generate the entry.js that mounts the Explorer */
 function generateEntryJs(config) {
     return `import { mount } from 'svelte';
 import { docs, cssNames } from 'virtual:sdocs';
-import App from './client/App.svelte';
+import Explorer from './explorer/Explorer.svelte';
 
-mount(App, {
+mount(Explorer, {
 	target: document.getElementById('app'),
 	props: {
 		docs,
 		cssNames,
 		logo: ${JSON.stringify(config.logo)},
+		icon: ${JSON.stringify(config.icon)},
 		sidebarConfig: ${JSON.stringify(config.sidebar)},
 	}
 });`;
@@ -121,8 +122,8 @@ function generatePreviewHtml(iframeVirtualId, css) {
 	<div id="app"></div>
 	<script type="module">
 		import { mount } from 'svelte';
-		import App from '${iframeVirtualId}';
-		mount(App, { target: document.getElementById('app') });
+		import Preview from '${iframeVirtualId}';
+		mount(Preview, { target: document.getElementById('app') });
 
 		window.addEventListener('message', (e) => {
 			if (e.data?.type === 'sdocs:update-stylesheet') {
@@ -164,8 +165,8 @@ async function discoverSnippets(config, cwd) {
 /** Generate the staging directory with entry files for dev mode */
 export async function generateDevFiles(config, cwd) {
     const sdocsDir = await createStagingDir(cwd);
-    // Copy client components into the staging dir so they're compiled outside node_modules
-    await copyClientApp(sdocsDir);
+    // Copy Explorer components into the staging dir so they're compiled outside node_modules
+    await copyExplorerApp(sdocsDir);
     await writeFile(resolve(sdocsDir, 'index.html'), generateIndexHtml(config.logo));
     await writeFile(resolve(sdocsDir, 'entry.js'), generateEntryJs(config));
     return sdocsDir;
@@ -173,8 +174,8 @@ export async function generateDevFiles(config, cwd) {
 /** Generate the staging directory with entry + preview HTML files for build mode */
 export async function generateBuildFiles(config, cwd) {
     const sdocsDir = await createStagingDir(cwd);
-    // Copy client components into the staging dir
-    await copyClientApp(sdocsDir);
+    // Copy Explorer components into the staging dir
+    await copyExplorerApp(sdocsDir);
     await writeFile(resolve(sdocsDir, 'index.html'), generateIndexHtml(config.logo));
     await writeFile(resolve(sdocsDir, 'entry.js'), generateEntryJs(config));
     const inputs = {

package/dist/server/cli.js

@@ -18,9 +18,9 @@ Usage:
   sdocs <command>
 
 Commands:
-  dev       Start development server with live reload
+  dev       Start the Explorer dev server with live reload
   run       Same as dev — works with npx and no local install
-  build     Build static documentation site
+  build     Build the Explorer as a static site
   preview   Serve built site locally
   init      Scaffold sdocs.config.js
 

package/dist/server/config.js

@@ -8,6 +8,7 @@ const DEFAULTS = {
     open: false,
     css: null,
     logo: 'sdocs',
+    icon: 'sdocs',
     sidebar: {
         order: {},
         open: [],
@@ -77,6 +78,7 @@ export function resolveConfig(userConfig) {
         open: userConfig.open ?? DEFAULTS.open,
         css: userConfig.css ?? DEFAULTS.css,
         logo: userConfig.logo ?? DEFAULTS.logo,
+        icon: userConfig.icon ?? DEFAULTS.icon,
         sidebar: {
             order: userConfig.sidebar?.order ?? DEFAULTS.sidebar.order,
             open: userConfig.sidebar?.open ?? DEFAULTS.sidebar.open,

package/dist/types.d.ts

@@ -10,6 +10,8 @@ export interface SdocsConfig {
     css?: string | Record<string, string>;
     /** Sidebar logo text. Default: 'sdocs' */
     logo?: string;
+    /** Sidebar logo icon: 'sdocs' for the built-in mascot, an image URL, or false to hide. Default: 'sdocs' */
+    icon?: string | false;
     /** Sidebar configuration */
     sidebar?: {
         /** Per-folder sort overrides. Keys are folder paths, 'root' for top level. '*' = unlisted items. */
@@ -25,6 +27,7 @@ export interface ResolvedSdocsConfig {
     open: boolean;
     css: string | Record<string, string> | null;
     logo: string;
+    icon: string | false;
     sidebar: {
         order: Record<string, string[]>;
         open: string[];

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "sdocs",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gabilungu/sdocs.git",
+    "directory": "packages/sdocs"
+  },
   "bin": {
     "sdocs": "./bin/sdocs.js"
   },
@@ -16,8 +21,8 @@
       "types": "./dist/vite.d.ts",
       "default": "./dist/vite.js"
     },
-    "./client": {
-      "svelte": "./dist/client/App.svelte"
+    "./explorer": {
+      "svelte": "./dist/explorer/Explorer.svelte"
     },
     "./ui": {
       "types": "./dist/ui/index.d.ts",

package/dist/client/App.svelte.d.ts

@@ -1,15 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import '../ui/styles/sdocs.css';
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppProps = typeof __propDef.props;
-export type AppEvents = typeof __propDef.events;
-export type AppSlots = typeof __propDef.slots;
-export default class App extends SvelteComponentTyped<AppProps, AppEvents, AppSlots> {
-}
-export {};