sdocs 0.0.35 → 0.0.37

package/dist/explorer/views/DataTable.svelte

@@ -1,15 +1,26 @@
 <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 }: Props = $props();
+	let { columns, rows, control }: Props = $props();
+
+
 </script>
 
 {#if rows.length > 0}
@@ -19,6 +30,9 @@
 				{#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>
@@ -26,13 +40,31 @@
 				<tr>
 					{#each columns as col (col.key)}
 						<td>
-							{#if row[col.key] != null}
-								<code>{row[col.key]}</code>
-							{:else}
+							{#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>
@@ -67,6 +99,16 @@
 		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);
 	}

package/dist/explorer/views/PreviewFrame.svelte

@@ -7,9 +7,16 @@
 		cssVars?: Record<string, string>;
 		activeStylesheet?: string;
 		fullHeight?: boolean;
+		/** Called with the preview component's exported state values whenever they change */
+		onStateValues?: (values: Record<string, unknown>) => void;
 	}
 
-	let { src, props = {}, cssVars = {}, activeStylesheet, fullHeight = false }: Props = $props();
+	let { src, props = {}, cssVars = {}, activeStylesheet, fullHeight = false, onStateValues }: Props = $props();
+
+	/** Invoke a zero-argument method on the preview's root component */
+	export function callMethod(name: string): void {
+		iframe?.contentWindow?.postMessage({ type: 'sdocs:call-method', name }, '*');
+	}
 
 	// Preview URLs are root-absolute; hosts serving under a sub-path pass the
 	// prefix via the Explorer's previewBase prop (see Explorer.svelte).
@@ -30,6 +37,9 @@
 			if (e.data?.type === 'sdocs:resize' && e.source === iframe?.contentWindow) {
 				contentHeight = e.data.height;
 			}
+			if (e.data?.type === 'sdocs:state-values' && e.source === iframe?.contentWindow) {
+				onStateValues?.(e.data.values);
+			}
 		}
 		window.addEventListener('message', onMessage);
 		return () => window.removeEventListener('message', onMessage);

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

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        callMethod?: (name: string) => void;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -10,5 +12,6 @@ export type PreviewFrameProps = typeof __propDef.props;
 export type PreviewFrameEvents = typeof __propDef.events;
 export type PreviewFrameSlots = typeof __propDef.slots;
 export default class PreviewFrame extends SvelteComponentTyped<PreviewFrameProps, PreviewFrameEvents, PreviewFrameSlots> {
+    get callMethod(): (name: string) => void;
 }
 export {};

package/dist/explorer/views/PropControl.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { ParsedProp } from '../../types.js';
+	import { Text as TextControl, Number as NumberControl, Checkbox as CheckboxControl, Select as SelectControl } from '../../ui/Control/index.js';
+
+	interface Props {
+		prop: ParsedProp;
+		value: unknown;
+		onchange: (value: unknown) => void;
+	}
+
+	let { prop, value, onchange }: Props = $props();
+
+	/** Parse union type strings like "'sm' | 'md' | 'lg'" or "1 | 2 | 3" into option arrays */
+	function parseUnionOptions(type: string | null): string[] | null {
+		if (!type || !type.includes('|')) return null;
+		const parts = type.split('|').map((s) => s.trim());
+		const values: string[] = [];
+		let allStrings = true;
+		let allNumbers = true;
+		for (const part of parts) {
+			// Quoted string: 'value' or "value"
+			const strMatch = part.match(/^['"](.+)['"]$/);
+			if (strMatch) {
+				values.push(strMatch[1]);
+				allNumbers = false;
+				continue;
+			}
+			// Bare number: 1, 2, 3
+			if (/^\d+(\.\d+)?$/.test(part)) {
+				values.push(part);
+				allStrings = false;
+				continue;
+			}
+			// Mixed or unsupported (e.g. 'medium' | number) → null
+			return null;
+		}
+		if (values.length > 0 && (allStrings || allNumbers)) return values;
+		return null;
+	}
+
+	const controlType = $derived.by(() => {
+		const t = prop.type?.toLowerCase() ?? '';
+		if (t === 'string') return 'text';
+		if (t === 'number') return 'number';
+		if (t === 'boolean') return 'boolean';
+		if (parseUnionOptions(prop.type)) return 'select';
+		return 'readonly';
+	});
+
+	const options = $derived(parseUnionOptions(prop.type) ?? []);
+</script>
+
+{#if controlType === 'text'}
+	<TextControl value={String(value ?? prop.default ?? '')} {onchange} />
+{:else if controlType === 'number'}
+	<NumberControl value={Number(value ?? prop.default ?? 0)} {onchange} />
+{:else if controlType === 'boolean'}
+	<CheckboxControl value={Boolean(value ?? (prop.default === 'true'))} {onchange} />
+{:else if controlType === 'select'}
+	<SelectControl value={String(value ?? prop.default ?? options[0] ?? '')} {options} {onchange} />
+{:else}
+	<span class="sdocs-control-unsupported">—</span>
+{/if}
+
+<style>
+	.sdocs-control-unsupported {
+		color: var(--color-base-300);
+	}
+</style>

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

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

package/dist/explorer/views/format.d.ts

@@ -0,0 +1,6 @@
+/** Classify a type string for color coding (conventions, not a formal standard) */
+export declare function typeClass(value: unknown): string;
+/** Classify a literal value for color coding (defaults, current state) */
+export declare function valueClass(value: unknown): string;
+/** Split a clean union type into its members; everything else stays whole */
+export declare function typeParts(value: unknown): string[];

package/dist/explorer/views/format.js

@@ -0,0 +1,44 @@
+/** Classify a type string for color coding (conventions, not a formal standard) */
+export function typeClass(value) {
+    const v = String(value).trim();
+    if (v === 'string' || /^'[^']*'(\s*\|\s*'[^']*')*$/.test(v))
+        return 'string';
+    if (v === 'number' || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)*$/.test(v))
+        return 'number';
+    if (v === 'boolean')
+        return 'boolean';
+    if (v.includes('=>'))
+        return 'function';
+    if (v.startsWith('Snippet'))
+        return 'snippet';
+    if (v === 'color')
+        return 'color';
+    if (v === 'dimension')
+        return 'dimension';
+    if (v === 'void' || v === 'undefined' || v === 'null')
+        return 'void';
+    return 'other';
+}
+/** Classify a literal value for color coding (defaults, current state) */
+export function valueClass(value) {
+    const v = String(value).trim();
+    if (v === 'true' || v === 'false')
+        return 'boolean';
+    if (/^-?\d+(\.\d+)?$/.test(v))
+        return 'number';
+    if (/^-?\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|pt)$/.test(v))
+        return 'dimension';
+    if (/^(#[0-9a-fA-F]{3,8}$|hsla?\(|rgba?\(|oklch\(|oklab\()/.test(v))
+        return 'color';
+    if (v.startsWith('{') || v.startsWith('['))
+        return 'other';
+    return 'string';
+}
+/** Split a clean union type into its members; everything else stays whole */
+export function typeParts(value) {
+    const v = String(value).trim();
+    if (/^'[^']*'(\s*\|\s*'[^']*')+$/.test(v) || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)+$/.test(v)) {
+        return v.split('|').map((part) => part.trim());
+    }
+    return [v];
+}

package/dist/server/snippet-compiler.d.ts

@@ -9,8 +9,9 @@ export declare function encodeDocPath(filePath: string): string;
 /** Resolve relative imports to absolute paths for use in virtual components */
 export declare function resolveImportsToAbsolute(imports: string[], docFilePath: string): string[];
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
- * Includes $state for reactive prop updates via postMessage. */
-export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string): string;
+ * Includes $state for reactive prop updates via postMessage, invokes
+ * component methods on request, and broadcasts exported state values. */
+export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string, stateNames?: string[]): string;
 /** The JS that boots a preview page: mount the wrapper + parent-frame messaging. */
 export declare function generateMountScript(iframeComponentId: string): string;
 /** Generate the HTML page served inside the iframe (dev / CLI-build inputs) */

package/dist/server/snippet-compiler.js

@@ -35,23 +35,55 @@ export function resolveImportsToAbsolute(imports, docFilePath) {
         return imp;
     });
 }
+/** Add bind:this to the snippet's root component so the wrapper can reach
+ * its exported methods and state. Skipped when the author already binds. */
+function injectRootRef(snippetBody) {
+    if (snippetBody.includes('bind:this'))
+        return snippetBody;
+    const match = snippetBody.match(/<([A-Z][A-Za-z0-9_]*)/);
+    if (!match || match.index === undefined)
+        return snippetBody;
+    const insertAt = match.index + match[0].length;
+    return snippetBody.slice(0, insertAt) + ' bind:this={__sdocsRef}' + snippetBody.slice(insertAt);
+}
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
- * Includes $state for reactive prop updates via postMessage. */
-export function generateIframeComponent(absoluteImports, snippetBody) {
+ * Includes $state for reactive prop updates via postMessage, invokes
+ * component methods on request, and broadcasts exported state values. */
+export function generateIframeComponent(absoluteImports, snippetBody, stateNames = []) {
     const importBlock = absoluteImports.length > 0
         ? absoluteImports.join('\n') + '\n'
         : '';
+    const stateBroadcast = stateNames.length > 0
+        ? `
+	$effect(() => {
+		const values: Record<string, unknown> = {};
+		for (const name of ${JSON.stringify(stateNames)}) {
+			try {
+				const v = (__sdocsRef as Record<string, unknown> | undefined)?.[name];
+				values[name] = v === undefined ? undefined : JSON.parse(JSON.stringify($state.snapshot(v)));
+			} catch {
+				values[name] = undefined;
+			}
+		}
+		window.parent.postMessage({ type: 'sdocs:state-values', values }, '*');
+	});
+`
+        : '';
     // lang="ts" so lifted imports may carry type-only syntax (Svelte 5 erases it natively)
     return `<script lang="ts">
 	${importBlock}import { onMount } from 'svelte';
 
 	let args = $state({});
-
+	let __sdocsRef = $state();
+${stateBroadcast}
 	onMount(() => {
 		window.addEventListener('message', (e) => {
 			if (e.data?.type === 'sdocs:update-props') {
 				args = { ...e.data.props };
 			}
+			if (e.data?.type === 'sdocs:call-method') {
+				(__sdocsRef as Record<string, () => void> | undefined)?.[e.data.name]?.();
+			}
 			if (e.data?.type === 'sdocs:update-css') {
 				const el = document.getElementById('sdocs-preview');
 				if (el) {
@@ -86,7 +118,7 @@ export function generateIframeComponent(absoluteImports, snippetBody) {
 
 <div id="sdocs-preview">
 	{#snippet SdocsPreview(args)}
-		${snippetBody}
+		${injectRootRef(snippetBody)}
 	{/snippet}
 	{@render SdocsPreview(args)}
 </div>`;

package/dist/ui/Control/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: boolean;
 		onchange: (value: boolean) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="checkbox"
 		checked={value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-checkbox {
 		width: 16px;

package/dist/ui/Control/Color.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="color"
 		{value}
@@ -29,7 +32,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-color {
 		width: 32px;

package/dist/ui/Control/Dimension.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -10,7 +11,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<div class="sdocs-control-dimension">
 		<input
 			type="number"
@@ -32,7 +35,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-dimension {
 		display: flex;
@@ -40,7 +43,8 @@
 		gap: 4px;
 	}
 	.sdocs-control-input {
-		width: 80px;
+		flex: 1;
+		min-width: 0;
 		padding: 4px 8px;
 		border: 1px solid var(--color-base-200);
 		border-radius: 4px;

package/dist/ui/Control/Number.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: number;
 		onchange: (value: number) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="number"
 		{value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-input {
 		flex: 1;
@@ -39,6 +42,5 @@
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;
-		max-width: 120px;
 	}
 </style>

package/dist/ui/Control/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		options: string[];
 		onchange: (value: string) => void;
@@ -10,7 +11,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<select
 		class="sdocs-control-select"
 		{value}
@@ -32,7 +35,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-select {
 		flex: 1;
@@ -43,6 +46,5 @@
 		font-size: 13px;
 		background: var(--color-base-0);
 		color: var(--color-base-600);
-		max-width: 200px;
 	}
 </style>

package/dist/ui/Control/Text.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="text"
 		{value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-input {
 		flex: 1;

package/dist/ui/Icon/Icon.svelte

@@ -7,13 +7,18 @@
 	import codeSvg from './icons/code.svg?raw';
 	import componentSvg from './icons/component.svg?raw';
 	import copySvg from './icons/copy.svg?raw';
+	import databaseSvg from './icons/database.svg?raw';
 	import diamondSvg from './icons/diamond.svg?raw';
 	import fileCodeSvg from './icons/file-code.svg?raw';
 	import fileTextSvg from './icons/file-text.svg?raw';
 	import folderOpenSvg from './icons/folder-open.svg?raw';
 	import folderSvg from './icons/folder.svg?raw';
+	import paletteSvg from './icons/palette.svg?raw';
 	import panelsTopLeftSvg from './icons/panels-top-left.svg?raw';
 	import sdocsSvg from './icons/sdocs.svg?raw';
+	import slidersHorizontalSvg from './icons/sliders-horizontal.svg?raw';
+	import squareFunctionSvg from './icons/square-function.svg?raw';
+	import zapSvg from './icons/zap.svg?raw';
 
 	const icons: Record<string, string> = {
 		'bookmark': bookmarkSvg,
@@ -24,13 +29,18 @@
 		'code': codeSvg,
 		'component': componentSvg,
 		'copy': copySvg,
+		'database': databaseSvg,
 		'diamond': diamondSvg,
 		'file-code': fileCodeSvg,
 		'file-text': fileTextSvg,
 		'folder-open': folderOpenSvg,
 		'folder': folderSvg,
+		'palette': paletteSvg,
 		'panels-top-left': panelsTopLeftSvg,
 		'sdocs': sdocsSvg,
+		'sliders-horizontal': slidersHorizontalSvg,
+		'square-function': squareFunctionSvg,
+		'zap': zapSvg,
 	};
 
 	/**

package/dist/ui/Icon/icons/database.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<ellipse cx="12" cy="5" rx="9" ry="3"/>
+	<path d="M3 5V19A9 3 0 0 0 21 19V5"/>
+	<path d="M3 12A9 3 0 0 0 21 12"/>
+</svg>

package/dist/ui/Icon/icons/palette.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
+	<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
+	<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
+	<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
+	<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
+</svg>

package/dist/ui/Icon/icons/sliders-horizontal.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="21" x2="14" y1="4" y2="4"/>
+	<line x1="10" x2="3" y1="4" y2="4"/>
+	<line x1="21" x2="12" y1="12" y2="12"/>
+	<line x1="8" x2="3" y1="12" y2="12"/>
+	<line x1="21" x2="16" y1="20" y2="20"/>
+	<line x1="12" x2="3" y1="20" y2="20"/>
+	<line x1="14" x2="14" y1="2" y2="6"/>
+	<line x1="8" x2="8" y1="10" y2="14"/>
+	<line x1="16" x2="16" y1="18" y2="22"/>
+</svg>

package/dist/ui/Icon/icons/square-function.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<rect width="18" height="18" x="3" y="3" rx="2"/>
+	<path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/>
+	<path d="M9 11.2h5.7"/>
+</svg>

package/dist/ui/Icon/icons/zap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
+</svg>