@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/data/CodeBlock.svelte

@@ -1,121 +1,119 @@
-<script lang="ts">
-	/**
-	 * Props for the CodeBlock component.
-	 * 
-	 * This is a presentational component that provides layout and styling for syntax-highlighted code.
-	 * Consumers are responsible for providing pre-highlighted HTML via the default slot and ensuring
-	 * the content is properly sanitized to prevent XSS attacks.
-	 */
-	interface Props {
-		/**
-		 * Optional filename to display in the header.
-		 */
-		filename?: string;
-		/**
-		 * Whether to show line numbers in the gutter.
-		 */
-		showLineNumbers?: boolean;
-		/**
-		 * Total number of lines in the code. Required when showLineNumbers is true.
-		 */
-		lineCount?: number;
-		/**
-		 * Array of line numbers (1-indexed) to highlight in the gutter.
-		 */
-		highlightLines?: number[];
-		/**
-		 * Slot for pre-highlighted code HTML.
-		 */
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		filename,
-		showLineNumbers = false,
-		lineCount = 0,
-		highlightLines = [],
-		children
-	}: Props = $props();
-
-	// Development-only validation
-</script>
-
-<div class="glass-panel rounded-lg overflow-hidden">
-	{#if filename}
-		<div
-			class="px-4 py-2 border-b border-border"
-			style="background: var(--color-base-2); color: var(--color-text-soft); font-family: var(--font-mono); font-size: 0.875rem;"
-		>
-			{filename}
-		</div>
-	{/if}
-
-	<div
-		class="p-4 overflow-x-auto"
-		style="background: var(--color-base-1); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6;"
-	>
-		{#if showLineNumbers}
-			<div class="flex">
-				<div
-					class="pr-4 border-r border-border select-none"
-					style="color: var(--color-text-muted);"
-				>
-					{#each Array.from({ length: lineCount }, (_, i) => i + 1) as lineNum}
-						<div
-							class:highlighted={highlightLines.includes(lineNum)}
-							style={highlightLines.includes(lineNum)
-								? 'background: rgba(127, 61, 255, 0.1);'
-								: ''}
-						>
-							{lineNum}
-						</div>
-					{/each}
-				</div>
-				<div class="pl-4 flex-1">
-					{@render children?.()}
-				</div>
-			</div>
-		{:else}
-			<div>
-				{@render children?.()}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	/* Custom scrollbar styling */
-	div::-webkit-scrollbar {
-		height: 8px;
-	}
-
-	div::-webkit-scrollbar-track {
-		background: var(--color-base-1);
-	}
-
-	div::-webkit-scrollbar-thumb {
-		background: var(--color-accent);
-		border-radius: var(--radius-sm);
-	}
-
-	div::-webkit-scrollbar-thumb:hover {
-		background: var(--color-accent-soft);
-	}
-
-	/* Highlight gutter numbers */
-	.highlighted {
-		background: rgba(127, 61, 255, 0.1);
-	}
-
-	/* 
-	 * Consumer-provided line highlighting:
-	 * Consumers should apply the `.line` class to each code line element
-	 * and the `.highlighted` class to lines that should be highlighted.
-	 * This ensures consistent styling with the component's luxury aesthetic.
-	 */
-	:global(.line.highlighted) {
-		background: rgba(127, 61, 255, 0.1);
-		display: inline-block;
-		width: 100%;
-	}
-</style>
+<script lang="ts">"use strict";
+let { filename, showLineNumbers = false, lineCount = 0, highlightLines = [], showCopy = true, code, children } = $props();
+let codeContainer;
+let copied = $state(false);
+async function copyCode() {
+    try {
+        const textToCopy = code || codeContainer?.textContent || '';
+        await navigator.clipboard.writeText(textToCopy);
+        copied = true;
+        setTimeout(() => {
+            copied = false;
+        }, 2000);
+    }
+    catch (err) {
+        console.error('Failed to copy code:', err);
+    }
+}
+</script>
+
+<div class="panel-raised rounded-[var(--radius-lg)] overflow-hidden relative">
+	{#if filename || showCopy}
+		<div
+			class="px-4 py-2 border-b border-border flex items-center justify-between"
+			style="background: var(--color-base-2); color: var(--color-text-soft); font-family: var(--font-mono); font-size: 0.875rem;"
+		>
+		<span>{filename || ''}</span>
+		{#if showCopy}
+			<button
+				onclick={copyCode}
+				class="copy-button px-3 py-1 rounded-sm transition-all text-xs"
+				aria-label="Copy code"
+			>
+				{copied ? 'Copied!' : 'Copy'}
+			</button>
+		{/if}
+	</div>
+{/if}	<div
+		bind:this={codeContainer}
+		class="p-4 overflow-x-auto"
+		style="background: var(--color-base-1); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6;"
+	>
+		{#if showLineNumbers}
+			<div class="flex">
+				<div
+					class="pr-4 border-r border-border select-none"
+					style="color: var(--color-text-muted);"
+				>
+					{#each Array.from({ length: lineCount }, (_, i) => i + 1) as lineNum}
+						<div
+						class:highlighted={highlightLines.includes(lineNum)}
+						style={highlightLines.includes(lineNum)
+							? 'background: var(--color-accent-overlay-10);'
+							: ''}
+						>
+							{lineNum}
+						</div>
+					{/each}
+				</div>
+				<div class="pl-4 flex-1">
+					{@render children?.()}
+				</div>
+			</div>
+		{:else}
+			<div>
+				{@render children?.()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Custom scrollbar styling */
+	div::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	div::-webkit-scrollbar-track {
+		background: var(--color-base-1);
+	}
+
+	div::-webkit-scrollbar-thumb {
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+	}
+
+	div::-webkit-scrollbar-thumb:hover {
+		background: var(--color-accent-soft);
+	}
+
+	/* Copy button styling */
+	.copy-button {
+		background: var(--color-base-3);
+		color: var(--color-text-soft);
+		border: 1px solid var(--color-border);
+		font-size: 0.75rem;
+	}
+
+	.copy-button:hover {
+		background: var(--color-accent);
+		color: var(--color-text);
+		border-color: var(--color-accent);
+	}
+
+	/* Highlight gutter numbers */
+	.highlighted {
+		background: var(--color-accent-overlay-10);
+	}
+
+	/*
+	 * Consumer-provided line highlighting:
+	 * Consumers should apply the `.line` class to each code line element
+	 * and the `.highlighted` class to lines that should be highlighted.
+	 * This ensures consistent styling with the component's luxury aesthetic.
+	 */
+	:global(.line.highlighted) {
+		background: var(--color-accent-overlay-10);
+		display: inline-block;
+		width: 100%;
+	}</style>

package/dist/components/data/CodeBlock.svelte.d.ts

@@ -22,6 +22,14 @@ interface Props {
      * Array of line numbers (1-indexed) to highlight in the gutter.
      */
     highlightLines?: number[];
+    /**
+     * Whether to show the copy button. Default: true.
+     */
+    showCopy?: boolean;
+    /**
+     * Raw code text for copying. If not provided, copy functionality attempts to extract text from the rendered content.
+     */
+    code?: string;
     /**
      * Slot for pre-highlighted code HTML.
      */

package/dist/components/data/List.svelte

@@ -1,64 +1,87 @@
-<script lang="ts">
-	interface Props {
-		variant?: 'plain' | 'bordered' | 'divided';
-		hoverable?: boolean;
-		children?: import('svelte').Snippet;
-	}
-
-	let { variant = 'plain', hoverable = false, children }: Props = $props();
-
-	const containerClasses = $derived(
-		variant === 'bordered'
-			? 'glass-panel rounded-[var(--radius-lg)] border border-[var(--color-border)]'
-			: ''
-	);
-
-	const listClasses = $derived(`list-none ${variant} ${hoverable ? 'hoverable' : ''}`);
-</script>
-
-{#if variant === 'bordered'}
-	<div class={containerClasses}>
-		<ul class={listClasses}>
-			{@render children?.()}
-		</ul>
-	</div>
-{:else}
-	<ul class={listClasses}>
-		{@render children?.()}
-	</ul>
-{/if}
-
-<style>
-	ul {
-		margin: 0;
-		padding: 0;
-		color: var(--color-text);
-		font-family: var(--font-body);
-	}
-
-	:global(ul.plain > li) {
-		padding: 0.5rem 0;
-	}
-
-	:global(ul.bordered > li) {
-		padding: 0.75rem 1rem;
-	}
-
-	:global(ul.divided > li) {
-		padding: 0.75rem 1rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	:global(ul.divided > li:last-child) {
-		border-bottom: none;
-	}
-
-	:global(ul.hoverable > li) {
-		transition: all var(--ease-luxe);
-		cursor: pointer;
-	}
-
-	:global(ul.hoverable > li:hover) {
-		background: rgba(127, 61, 255, 0.05);
-	}
-</style>
+<script lang="ts">let { variant = 'plain', hoverable = false, items, children } = $props();
+const containerClasses = $derived(variant === 'bordered'
+    ? 'panel-raised rounded-[var(--radius-lg)] border border-[var(--color-border)]'
+    : '');
+const listClasses = $derived(`list-none ${variant} ${hoverable ? 'hoverable' : ''}`);
+export {};
+</script>
+
+{#if variant === 'bordered'}
+	<div class={containerClasses}>
+		<ul class={listClasses}>
+			{#if items}
+				{#each items as item (item.id)}
+					<li class="flex items-center gap-2">
+						{#if item.icon}
+							<span class="inline-flex items-center justify-center">
+								{@render item.icon()}
+							</span>
+						{/if}
+						{#if typeof item.content === 'string'}
+							{item.content}
+						{:else}
+							{@render item.content()}
+						{/if}
+					</li>
+				{/each}
+			{:else}
+				{@render children?.()}
+			{/if}
+		</ul>
+	</div>
+{:else}
+	<ul class={listClasses}>
+		{#if items}
+			{#each items as item (item.id)}
+				<li class="flex items-center gap-2">
+					{#if item.icon}
+						<span class="inline-flex items-center justify-center">
+							{@render item.icon()}
+						</span>
+					{/if}
+					{#if typeof item.content === 'string'}
+						{item.content}
+					{:else}
+						{@render item.content()}
+					{/if}
+				</li>
+			{/each}
+		{:else}
+			{@render children?.()}
+		{/if}
+	</ul>
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		padding: 0;
+		color: var(--color-text);
+		font-family: var(--font-body);
+	}
+
+	:global(ul.plain > li) {
+		padding: 0.5rem 0;
+	}
+
+	:global(ul.bordered > li) {
+		padding: 0.75rem 1rem;
+	}
+
+	:global(ul.divided > li) {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	:global(ul.divided > li:last-child) {
+		border-bottom: none;
+	}
+
+	:global(ul.hoverable > li) {
+		transition: all var(--ease-luxe);
+		cursor: pointer;
+	}
+
+	:global(ul.hoverable > li:hover) {
+		background: var(--color-accent-overlay-5);
+	}</style>

package/dist/components/data/List.svelte.d.ts

@@ -1,6 +1,13 @@
+import type { Snippet } from 'svelte';
+interface ListItem {
+    id: string;
+    content: string | Snippet;
+    icon?: Snippet;
+}
 interface Props {
     variant?: 'plain' | 'bordered' | 'divided';
     hoverable?: boolean;
+    items?: ListItem[];
     children?: import('svelte').Snippet;
 }
 declare const List: import("svelte").Component<Props, {}, "">;