@dryui/ui 0.0.1

package/dist/code-block/code-block.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { highlight } from './highlighter/index.js';
+	import type { Token } from './highlighter/types.js';
+
+	interface Segment {
+		text: string;
+		tokenType?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		code: string;
+		language?: string;
+		showLineNumbers?: boolean;
+		showCopyButton?: boolean;
+		linkResolver?: (text: string, type: string) => string | undefined;
+		children?: Snippet;
+	}
+
+	let {
+		code,
+		language,
+		showLineNumbers = false,
+		showCopyButton = true,
+		linkResolver,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let copied = $state(false);
+	let copyTimer: ReturnType<typeof setTimeout> | undefined;
+	const isSingleLine = $derived(!code.includes('\n'));
+	const lineBreak = '\n';
+
+	function handleCopy() {
+		navigator.clipboard.writeText(code).then(() => {
+			copied = true;
+			clearTimeout(copyTimer);
+			copyTimer = setTimeout(() => {
+				copied = false;
+			}, 2000);
+		});
+	}
+
+	function renderLine(
+		code: string,
+		tokens: Token[],
+		lineStart: number,
+		lineEnd: number
+	): Segment[] {
+		const segments: Segment[] = [];
+		let pos = lineStart;
+
+		const lineTokens = tokens.filter((t) => t.end > lineStart && t.start < lineEnd);
+
+		for (const token of lineTokens) {
+			const tokenStart = Math.max(token.start, lineStart);
+			const tokenEnd = Math.min(token.end, lineEnd);
+
+			if (tokenStart > pos) {
+				segments.push({ text: code.slice(pos, tokenStart) });
+			}
+
+			segments.push({
+				text: code.slice(tokenStart, tokenEnd),
+				tokenType: token.type
+			});
+
+			pos = tokenEnd;
+		}
+
+		if (pos < lineEnd) {
+			segments.push({ text: code.slice(pos, lineEnd) });
+		}
+
+		return segments;
+	}
+
+	const highlightedLines = $derived.by(() => {
+		const tokens = highlight(code, language);
+		const lines = code.split('\n');
+		let offset = 0;
+
+		return lines.map((line, i) => {
+			const lineStart = offset;
+			const lineEnd = offset + line.length;
+			offset = lineEnd + 1;
+
+			return {
+				number: i + 1,
+				segments: renderLine(code, tokens, lineStart, lineEnd)
+			};
+		});
+	});
+</script>
+
+<div
+	data-code-block
+	data-language={language || undefined}
+	data-single-line={isSingleLine || undefined}
+	data-copied={copied || undefined}
+	class={className}
+	{...rest}
+>
+	{#if language && language !== 'text'}
+		<div data-code-block-header>
+			<span data-code-block-language>{language}</span>
+		</div>
+	{/if}
+
+	{#if children}
+		<pre data-code-block-pre>{@render children()}</pre>
+	{:else}
+		<!-- prettier-ignore -->
+		<pre data-code-block-pre><code data-code-block-code data-language={language || undefined}>{#each highlightedLines as line, i (i)}{#if showLineNumbers}<span data-code-block-line-number>{line.number}</span>{/if}<span data-code-block-line-content>{#each line.segments as segment, segmentIndex (segmentIndex)}{@const href = linkResolver && segment.tokenType ? linkResolver(segment.text, segment.tokenType) : undefined}{#if href}<a {href} data-token-type={segment.tokenType} data-code-block-token-link>{segment.text}</a>{:else if segment.tokenType}<span data-token-type={segment.tokenType}>{segment.text}</span>{:else}{segment.text}{/if}{/each}</span>{#if i < highlightedLines.length - 1}{lineBreak}{/if}{/each}</code></pre>
+	{/if}
+
+	{#if showCopyButton}
+		<button
+			type="button"
+			data-code-block-copy
+			onclick={handleCopy}
+			aria-label={copied ? 'Copied' : '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"></polyline>
+				</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"></rect>
+					<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+				</svg>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+	[data-code-block] {
+		--dry-code-bg: #0d1117;
+		--dry-code-color: #e6edf3;
+		--dry-code-border: #30363d;
+		--dry-code-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-code-line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		--dry-code-padding: var(--dry-space-4);
+		--dry-code-radius: var(--dry-radius-lg);
+		--dry-code-header-bg: #161b22;
+		--dry-code-header-color: #8b949e;
+		--dry-code-copy-color: #8b949e;
+		--dry-code-copy-hover-color: #e6edf3;
+
+		position: relative;
+		background: var(--dry-code-bg);
+		border: 1px solid var(--dry-code-border);
+		border-radius: var(--dry-code-radius);
+		overflow: hidden;
+	}
+
+	[data-code-block-header] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		padding: var(--dry-space-2) var(--dry-code-padding);
+		background: var(--dry-code-header-bg);
+		border-bottom: 1px solid var(--dry-code-border);
+	}
+
+	[data-code-block-language] {
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-code-header-color);
+		text-transform: lowercase;
+		user-select: none;
+	}
+
+	[data-code-block-copy] {
+		--dry-code-copy-hover-bg: color-mix(in srgb, var(--dry-color-bg-overlay) 10%, transparent);
+
+		position: absolute;
+		top: var(--dry-space-2);
+		right: var(--dry-space-2);
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-space-12);
+		aspect-ratio: 1;
+		padding: 0;
+		color: var(--dry-code-copy-color);
+		background: transparent;
+		border: none;
+		border-radius: var(--dry-radius-md);
+		cursor: pointer;
+		transition:
+			color var(--dry-duration-fast, 100ms),
+			background var(--dry-duration-fast, 100ms);
+		z-index: 1;
+
+		&:hover {
+			color: var(--dry-code-copy-hover-color);
+			background: var(--dry-code-copy-hover-bg);
+		}
+	}
+
+	[data-code-block]:has([data-code-block-header]) [data-code-block-copy] {
+		top: calc(
+			var(--dry-space-2) + var(--dry-type-tiny-size, var(--dry-text-xs-size)) + var(--dry-space-2) *
+				2 + 1px
+		);
+	}
+
+	[data-code-block][data-single-line] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+	}
+
+	[data-code-block][data-single-line] [data-code-block-header] {
+		grid-column: 1 / -1;
+	}
+
+	[data-code-block][data-single-line] [data-code-block-copy] {
+		position: static;
+		align-self: center;
+		margin-right: var(--dry-space-2);
+	}
+
+	[data-code-block][data-single-line]:has([data-code-block-copy]) [data-code-block-pre] {
+		-webkit-mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
+		mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
+	}
+
+	[data-code-block]:not([data-single-line]):has([data-code-block-copy]) [data-code-block-pre] {
+		padding-right: calc(var(--dry-code-padding) + var(--dry-space-12));
+	}
+
+	[data-code-block-pre] {
+		margin: 0;
+		padding: var(--dry-code-padding);
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		text-align: left;
+	}
+
+	[data-code-block-code] {
+		display: block;
+		font-family: var(--dry-font-mono);
+		font-size: var(--dry-code-font-size);
+		line-height: var(--dry-code-line-height);
+		color: var(--dry-code-color);
+		background: transparent;
+		padding: 0;
+		border-radius: 0;
+		white-space: pre;
+		tab-size: 2;
+	}
+
+	[data-code-block-code]:has([data-code-block-line-number]) {
+		display: grid;
+		grid-template-columns: 3ch 1fr;
+	}
+
+	[data-code-block-line-number] {
+		margin-right: var(--dry-space-3);
+		color: #484f58;
+		text-align: right;
+		user-select: none;
+	}
+
+	[data-token-type='comment'] {
+		color: #6e7681;
+		font-style: italic;
+	}
+	[data-token-type='string'] {
+		color: #7ee787;
+	}
+	[data-token-type='keyword'] {
+		color: #c084fc;
+	}
+	[data-token-type='number'] {
+		color: #fb923c;
+	}
+	[data-token-type='tag'] {
+		color: #60a5fa;
+	}
+	[data-token-type='component'] {
+		color: #fde68a;
+	}
+	[data-token-type='attribute'] {
+		color: #93c5fd;
+	}
+	[data-token-type='svelte-keyword'] {
+		color: #d8b4fe;
+	}
+	[data-token-type='rune'] {
+		color: #f87171;
+	}
+	[data-token-type='function'] {
+		color: #facc15;
+	}
+	[data-token-type='type'] {
+		color: #86efac;
+	}
+	[data-token-type='operator'] {
+		color: #8b949e;
+	}
+	[data-token-type='punctuation'] {
+		color: #6e7681;
+	}
+
+	[data-code-block-token-link] {
+		text-decoration: none;
+		cursor: pointer;
+		border-radius: var(--dry-radius-sm);
+		transition: background var(--dry-duration-fast, 100ms);
+
+		&:hover {
+			background: color-mix(in srgb, currentColor 15%, transparent);
+		}
+	}
+</style>

package/dist/code-block/code-block.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+	code: string;
+	language?: string;
+	showLineNumbers?: boolean;
+	showCopyButton?: boolean;
+	linkResolver?: (text: string, type: string) => string | undefined;
+	children?: Snippet;
+}
+declare const CodeBlock: import('svelte').Component<Props, {}, ''>;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/code-block/highlighter/css.d.ts

@@ -0,0 +1,6 @@
+import type { Token, Highlighter } from './types.js';
+/**
+ * Highlights CSS code and returns tokens with positions offset by `base`.
+ */
+export declare function highlightCSS(code: string, base?: number): Token[];
+export declare const cssHighlighter: Highlighter;

package/dist/code-block/highlighter/css.js

@@ -0,0 +1,348 @@
+const AT_RULES = new Set([
+    '@media',
+    '@container',
+    '@keyframes',
+    '@font-face',
+    '@import',
+    '@charset',
+    '@supports',
+    '@layer',
+    '@property',
+    '@scope',
+    '@starting-style',
+    '@counter-style',
+    '@page',
+    '@namespace'
+]);
+const CSS_FUNCTIONS = new Set([
+    'var',
+    'calc',
+    'min',
+    'max',
+    'clamp',
+    'repeat',
+    'minmax',
+    'rgb',
+    'rgba',
+    'hsl',
+    'hsla',
+    'oklch',
+    'oklab',
+    'lch',
+    'lab',
+    'color',
+    'color-mix',
+    'linear-gradient',
+    'radial-gradient',
+    'conic-gradient',
+    'repeating-linear-gradient',
+    'repeating-radial-gradient',
+    'url',
+    'attr',
+    'env',
+    'fit-content',
+    'cubic-bezier',
+    'steps',
+    'counter',
+    'counters',
+    'image-set',
+    'cross-fade',
+    'translate',
+    'translateX',
+    'translateY',
+    'translateZ',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'rotateZ',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'matrix',
+    'matrix3d',
+    'perspective',
+    'skew',
+    'skewX',
+    'skewY'
+]);
+function isAlpha(ch) {
+    return !!ch && ((ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch === '_');
+}
+function isDigit(ch) {
+    return !!ch && ch >= '0' && ch <= '9';
+}
+function isAlphaNum(ch) {
+    return isAlpha(ch) || isDigit(ch);
+}
+/**
+ * Highlights CSS code and returns tokens with positions offset by `base`.
+ */
+export function highlightCSS(code, base = 0) {
+    const tokens = [];
+    const len = code.length;
+    let i = 0;
+    // Track context: are we inside a declaration block reading property names or values?
+    let inBlock = 0; // nesting depth inside { }
+    let afterColon = false; // true when we've seen `:` (reading a value)
+    function push(type, start, end) {
+        tokens.push({ type, start: base + start, end: base + end });
+    }
+    function peek(offset = 0) {
+        return code[i + offset] ?? '';
+    }
+    function readString(quote) {
+        const start = i;
+        i++; // skip opening quote
+        while (i < len && code[i] !== quote) {
+            if (code[i] === '\\' && i + 1 < len)
+                i++;
+            i++;
+        }
+        if (i < len)
+            i++; // skip closing quote
+        push('string', start, i);
+    }
+    function readIdent() {
+        const start = i;
+        while (i < len && (isAlphaNum(code[i]) || code[i] === '-' || code[i] === '_')) {
+            i++;
+        }
+        return code.slice(start, i);
+    }
+    function skipWhitespace() {
+        while (i < len &&
+            (code[i] === ' ' || code[i] === '\t' || code[i] === '\n' || code[i] === '\r')) {
+            i++;
+        }
+    }
+    function readNumber() {
+        const start = i;
+        // Optional leading sign already consumed or not present
+        while (i < len && (isDigit(code[i]) || code[i] === '.')) {
+            i++;
+        }
+        // Unit suffix (px, em, rem, %, fr, vw, vh, ms, s, deg, etc.)
+        const unitStart = i;
+        while (i < len && isAlpha(code[i])) {
+            i++;
+        }
+        // Also handle %
+        if (i < len && code[i] === '%') {
+            i++;
+        }
+        push('number', start, i);
+    }
+    while (i < len) {
+        const ch = code[i];
+        // Whitespace
+        if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+            i++;
+            continue;
+        }
+        // Block comment
+        if (ch === '/' && peek(1) === '*') {
+            const start = i;
+            i += 2;
+            while (i < len && !(code[i] === '*' && peek(1) === '/')) {
+                i++;
+            }
+            if (i < len)
+                i += 2;
+            push('comment', start, i);
+            continue;
+        }
+        // Line comment (SCSS / non-standard but common)
+        if (ch === '/' && peek(1) === '/') {
+            const start = i;
+            while (i < len && code[i] !== '\n') {
+                i++;
+            }
+            push('comment', start, i);
+            continue;
+        }
+        // Strings
+        if (ch === '"' || ch === "'") {
+            readString(ch);
+            continue;
+        }
+        // At-rules
+        if (ch === '@') {
+            const start = i;
+            i++; // skip @
+            const kwStart = i;
+            while (i < len && (isAlphaNum(code[i]) || code[i] === '-')) {
+                i++;
+            }
+            const rule = code.slice(start, i);
+            if (AT_RULES.has(rule)) {
+                push('keyword', start, i);
+            }
+            else {
+                push('keyword', start, i); // still highlight unknown at-rules
+            }
+            continue;
+        }
+        // Opening brace
+        if (ch === '{') {
+            push('punctuation', i, i + 1);
+            i++;
+            inBlock++;
+            afterColon = false;
+            continue;
+        }
+        // Closing brace
+        if (ch === '}') {
+            push('punctuation', i, i + 1);
+            i++;
+            if (inBlock > 0)
+                inBlock--;
+            afterColon = false;
+            continue;
+        }
+        // Semicolon — resets to property-name context
+        if (ch === ';') {
+            push('punctuation', i, i + 1);
+            i++;
+            afterColon = false;
+            continue;
+        }
+        // Colon — could be pseudo-selector or property/value separator
+        if (ch === ':') {
+            if (inBlock > 0) {
+                // Inside a block: this is a property:value separator
+                push('punctuation', i, i + 1);
+                i++;
+                afterColon = true;
+                continue;
+            }
+            // Outside block or could be pseudo-selector like :hover, ::before
+            // Check if followed by a known pseudo pattern
+            push('punctuation', i, i + 1);
+            i++;
+            continue;
+        }
+        // Comma
+        if (ch === ',') {
+            push('punctuation', i, i + 1);
+            i++;
+            continue;
+        }
+        // Parentheses
+        if (ch === '(' || ch === ')') {
+            push('punctuation', i, i + 1);
+            i++;
+            continue;
+        }
+        // Square brackets (attribute selectors)
+        if (ch === '[' || ch === ']') {
+            push('punctuation', i, i + 1);
+            i++;
+            continue;
+        }
+        // Numbers (including negative/dot-leading)
+        if (isDigit(ch) || (ch === '.' && isDigit(peek(1)))) {
+            readNumber();
+            continue;
+        }
+        // Negative number
+        if (ch === '-' && (isDigit(peek(1)) || (peek(1) === '.' && isDigit(peek(2))))) {
+            const start = i;
+            i++; // skip -
+            readNumber();
+            // Adjust the start of the last token to include the minus
+            const lastToken = tokens[tokens.length - 1];
+            if (lastToken) {
+                lastToken.start = base + start;
+            }
+            continue;
+        }
+        // Hash (ID selector or hex color)
+        if (ch === '#') {
+            const start = i;
+            i++; // skip #
+            while (i < len && (isAlphaNum(code[i]) || code[i] === '-' || code[i] === '_')) {
+                i++;
+            }
+            const value = code.slice(start + 1, i);
+            // Hex color: 3, 4, 6, or 8 hex digits
+            if (/^[0-9a-fA-F]{3,8}$/.test(value)) {
+                push('number', start, i);
+            }
+            else {
+                push('tag', start, i);
+            }
+            continue;
+        }
+        // Class selector
+        if (ch === '.' &&
+            !isDigit(peek(1)) &&
+            (isAlpha(peek(1)) || peek(1) === '-' || peek(1) === '_')) {
+            const start = i;
+            i++; // skip .
+            readIdent();
+            push('tag', start, i);
+            continue;
+        }
+        // & (parent selector in nesting)
+        if (ch === '&') {
+            const start = i;
+            i++;
+            push('tag', start, i);
+            continue;
+        }
+        // * (universal selector or multiplication)
+        if (ch === '*') {
+            push('punctuation', i, i + 1);
+            i++;
+            continue;
+        }
+        // > + ~ combinators
+        if (ch === '>' || ch === '+' || ch === '~') {
+            push('operator', i, i + 1);
+            i++;
+            continue;
+        }
+        // ! (for !important)
+        if (ch === '!' &&
+            code
+                .slice(i, i + 10)
+                .toLowerCase()
+                .startsWith('!important')) {
+            push('keyword', i, i + 10);
+            i += 10;
+            continue;
+        }
+        // Identifiers: property names, values, selectors, functions
+        if (isAlpha(ch) || ch === '-' || ch === '_') {
+            const start = i;
+            const ident = readIdent();
+            // Check if it's a function call
+            if (i < len && code[i] === '(') {
+                push('function', start, i);
+                continue;
+            }
+            // Inside a block
+            if (inBlock > 0) {
+                if (afterColon) {
+                    // Value context — leave plain identifiers unhighlighted
+                    // But highlight known CSS-wide values
+                }
+                else {
+                    // Property name
+                    push('attribute', start, i);
+                }
+            }
+            else {
+                // Selector context — element selectors
+                push('tag', start, i);
+            }
+            continue;
+        }
+        // Skip any other character
+        i++;
+    }
+    return tokens;
+}
+export const cssHighlighter = (code) => {
+    return highlightCSS(code, 0);
+};

package/dist/code-block/highlighter/generic.d.ts

@@ -0,0 +1,2 @@
+import type { Highlighter } from './types.js';
+export declare const genericHighlighter: Highlighter;