@refrakt-md/svelte 0.6.0 → 0.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@refrakt-md/svelte",
 	"description": "Svelte renderer for refrakt.md content",
-	"version": "0.6.0",
+	"version": "0.7.1",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -27,9 +27,9 @@
 	],
 	"dependencies": {
 		"@markdoc/markdoc": "0.4.0",
-		"@refrakt-md/behaviors": "0.6.0",
-		"@refrakt-md/transform": "0.6.0",
-		"@refrakt-md/types": "0.6.0"
+		"@refrakt-md/behaviors": "0.7.1",
+		"@refrakt-md/transform": "0.7.1",
+		"@refrakt-md/types": "0.7.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/ThemeShell.svelte

@@ -36,6 +36,8 @@
 			author?: string;
 			tags?: string[];
 			image?: string;
+			version?: string;
+			versionGroup?: string;
 		}>;
 		url: string;
 		seo?: PageSeo;
@@ -65,15 +67,20 @@
 	const layoutName = $derived(matchRouteRule(page.url, theme.manifest.routeRules ?? []));
 	const layoutEntry = $derived(theme.layouts[layoutName] ?? theme.layouts['default']);
 
+	// Keep RfContext in sync for web components BEFORE DOM updates.
+	// $effect.pre runs before {#key page.url} recreates the DOM, so
+	// RfNav.connectedCallback sees the new URL when it fires.
+	$effect.pre(() => {
+		RfContext.pages = page.pages;
+		RfContext.currentUrl = page.url;
+	});
+
 	// Initialize rune + layout behaviors after render, re-run on navigation.
 	// The {#key page.url} block in the template ensures full DOM recreation on
 	// navigation, so behaviors always run on fresh DOM and old behavior-modified
 	// elements are simply discarded (no cleanup/restore conflicts with Svelte).
 	$effect(() => {
 		void page.url; // re-run when page changes
-		// Keep RfContext in sync for web components on client-side navigation
-		RfContext.pages = page.pages;
-		RfContext.currentUrl = page.url;
 		let cleanupRunes: (() => void) | undefined;
 		let cleanupLayout: (() => void) | undefined;
 		let active = true;

package/src/behaviors.ts

@@ -0,0 +1,15 @@
+import { initRuneBehaviors } from '@refrakt-md/behaviors';
+
+/** Svelte action that initializes rune behaviors on mounted content. */
+export function behaviors(node: HTMLElement) {
+	let cleanup = initRuneBehaviors(node);
+	return {
+		update() {
+			cleanup();
+			cleanup = initRuneBehaviors(node);
+		},
+		destroy() {
+			cleanup();
+		},
+	};
+}

package/src/elements/Pre.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { SerializedTag } from '../types.js';
+	import type { Snippet } from 'svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const isCodeBlock = 'data-language' in (tag.attributes || {});
+
+	let preEl: HTMLPreElement;
+	let copied = $state(false);
+	let timer: ReturnType<typeof setTimeout>;
+
+	function copy() {
+		const text = preEl.textContent ?? '';
+		navigator.clipboard.writeText(text);
+		copied = true;
+		clearTimeout(timer);
+		timer = setTimeout(() => copied = false, 2000);
+	}
+</script>
+
+{#if isCodeBlock}
+	<div class="rf-codeblock">
+		<pre bind:this={preEl} {...tag.attributes}>{@render children()}</pre>
+		<button class="rf-codeblock__copy" class:rf-codeblock__copy--copied={copied} onclick={copy} aria-label="Copy code">
+			{#if copied}
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<polyline points="20 6 9 17 4 12" />
+				</svg>
+			{:else}
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+					<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+				</svg>
+			{/if}
+		</button>
+	</div>
+{:else}
+	<pre {...tag.attributes}>{@render children()}</pre>
+{/if}
+
+<style>
+	.rf-codeblock {
+		position: relative;
+	}
+	.rf-codeblock :global(pre) {
+		margin: 0;
+	}
+	.rf-codeblock__copy {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: var(--rf-radius-sm);
+		background: transparent;
+		color: var(--rf-color-code-text, #e2e8f0);
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 150ms ease, background-color 150ms ease;
+	}
+	.rf-codeblock:hover .rf-codeblock__copy {
+		opacity: 0.6;
+	}
+	.rf-codeblock__copy:hover {
+		opacity: 1 !important;
+		background: rgba(255, 255, 255, 0.1);
+	}
+	.rf-codeblock__copy--copied {
+		opacity: 1 !important;
+		color: var(--rf-color-success, #4ade80);
+	}
+</style>

package/src/elements/Table.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { SerializedTag } from '../types.js';
+	import type { Snippet } from 'svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+</script>
+
+<div class="table-wrapper">
+	<table {...tag.attributes}>
+		{@render children()}
+	</table>
+</div>
+
+<style>
+	.table-wrapper {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		margin: 1.5rem 0;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(table) {
+		margin: 0;
+		border-collapse: collapse;
+		width: 100%;
+		min-width: 100%;
+	}
+	.table-wrapper :global(th) {
+		background: var(--rf-color-surface);
+	}
+	.table-wrapper :global(th:first-child) {
+		border-top-left-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(th:last-child) {
+		border-top-right-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(tr:last-child td) {
+		border-bottom: none;
+	}
+</style>

package/src/elements.ts

@@ -0,0 +1,9 @@
+import type { ElementOverrides } from './context.js';
+import Table from './elements/Table.svelte';
+import Pre from './elements/Pre.svelte';
+
+/** Base element overrides — functional enhancements for HTML elements */
+export const elements: ElementOverrides = {
+	'table': Table,
+	'pre': Pre,
+};

package/src/index.ts

@@ -7,3 +7,6 @@ export type { ComponentRegistry, ElementOverrides } from './context.js';
 export type { SvelteTheme } from './theme.js';
 export { isLayoutConfig } from './theme.js';
 export { matchRouteRule } from './route-rules.js';
+export { registry } from './registry.js';
+export { elements } from './elements.js';
+export { behaviors } from './behaviors.js';

package/src/registry.ts

@@ -0,0 +1,22 @@
+import type { ComponentRegistry } from './context.js';
+
+/** Maps typeof attribute values to base theme Svelte components.
+ *
+ *  All runes are now rendered purely through the identity transform engine:
+ *
+ *  - Interactive runes requiring client-side lifecycle (Diagram, Map, Nav, Sandbox)
+ *    are framework-neutral web components in @refrakt-md/behaviors, initialized
+ *    via custom elements. Their postTransform hooks produce custom element tags.
+ *
+ *  - Data rendering runes (Chart, Comparison, Embed, Testimonial, DesignContext)
+ *    use postTransform hooks to generate their complete HTML structure.
+ *
+ *  - Behavior-driven runes (tabs, accordion, datatable, form, reveal, preview, details)
+ *    use BEM classes from the identity transform + @refrakt-md/behaviors.
+ *
+ *  - Layout runes (grid, bento, storyboard, pricing) are fully handled by
+ *    identity transform + CSS attribute selectors / custom properties.
+ *
+ *  The registry is empty but preserved for user-defined component overrides.
+ */
+export const registry: ComponentRegistry = {};