@ruckc/truss-code 0.0.0-stage → 1.11.0

package/dist/theme.js

@@ -0,0 +1,217 @@
+export const MIN_CONTRAST = 4.5;
+const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+/** Parses `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` and `rgba()` (comma or space syntax). Anything else is `null`. */
+export function parseColor(input) {
+    const s = (input ?? '').trim().toLowerCase();
+    let m = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(s);
+    if (m) {
+        let h = m[1];
+        if (h.length <= 4)
+            h = [...h].map((c) => c + c).join('');
+        const n = (i) => parseInt(h.slice(i, i + 2), 16);
+        return [n(0), n(2), n(4), h.length === 8 ? n(6) / 255 : 1];
+    }
+    m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+)(%?))?\s*\)$/.exec(s);
+    if (m)
+        return [clamp(+m[1]), clamp(+m[2]), clamp(+m[3]), m[4] == null ? 1 : Math.min(1, m[5] ? +m[4] / 100 : +m[4])];
+    return null;
+}
+const h2 = (n) => clamp(n).toString(16).padStart(2, '0');
+/** `#rrggbb`, or `#rrggbbaa` when the colour is translucent. */
+export const toHex = ([r, g, b, a]) => `#${h2(r)}${h2(g)}${h2(b)}${a < 1 ? h2(a * 255) : ''}`;
+/** Blends `a` toward `b` by `t` (0 = a, 1 = b); the result is opaque. */
+export const mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, 1];
+/** Paints a translucent colour over an opaque one. */
+export const over = (fg, bg) => mix(bg, fg, fg[3]);
+export function luminance([r, g, b]) {
+    const f = (c) => ((c /= 255) <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+export function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+const BLACK = [0, 0, 0, 1];
+const WHITE = [255, 255, 255, 1];
+/** The colour closest to `fg` (blended toward black or white) that reaches `min`:1 on every background. */
+export function ensureContrast(fg, bgs, min = MIN_CONTRAST) {
+    const worst = (c) => Math.min(...bgs.map((b) => contrast(c, b)));
+    if (worst(fg) >= min)
+        return [clamp(fg[0]), clamp(fg[1]), clamp(fg[2]), 1];
+    // push away from the backgrounds: toward white on dark ones, toward black on light ones
+    const target = bgs.reduce((s, b) => s + luminance(b), 0) / bgs.length < 0.18 ? WHITE : BLACK;
+    for (let t = 0.04; t < 1; t += 0.04) {
+        const c = mix(fg, target, t).map(clamp);
+        if (worst(c) >= min)
+            return c;
+    }
+    return target;
+}
+// ───── tokens
+export const TOKEN_VARS = [
+    '--tr-surface', '--tr-surface-container-low', '--tr-surface-container', '--tr-surface-container-high', '--tr-on-surface', '--tr-on-surface-variant',
+    '--tr-outline', '--tr-outline-variant', '--tr-primary', '--tr-danger', '--tr-warning', '--tr-success',
+    '--trc-s1', '--trc-s2', '--trc-s3', '--trc-s4', '--trc-s5', '--trc-s6', '--trc-s7', '--trc-s8',
+    '--tr-syntax-keyword', '--tr-syntax-string', '--tr-syntax-number', '--tr-syntax-comment', '--tr-syntax-function', '--tr-syntax-type', '--tr-syntax-variable',
+    '--tr-syntax-constant', '--tr-syntax-operator', '--tr-syntax-punctuation', '--tr-syntax-tag', '--tr-syntax-attr', '--tr-syntax-regexp'
+];
+/** Built-in values, used for any token that is not defined (the charts stylesheet is optional). They match tokens.css and charts.css. */
+export const FALLBACK = {
+    light: {
+        '--tr-surface': '#fbfbfe', '--tr-surface-container-low': '#f4f5fa', '--tr-surface-container': '#eef0f6', '--tr-surface-container-high': '#e7e9f1',
+        '--tr-on-surface': '#1a1c22', '--tr-on-surface-variant': '#454955', '--tr-outline': '#7a7f8e', '--tr-outline-variant': '#c3c7d3',
+        '--tr-primary': '#1f5fbf', '--tr-danger': '#b3261e', '--tr-warning': '#8a5300', '--tr-success': '#1b7a4b',
+        '--trc-s1': '#2a78d6', '--trc-s2': '#eb6834', '--trc-s3': '#1baf7a', '--trc-s4': '#eda100', '--trc-s5': '#e87ba4', '--trc-s6': '#008300', '--trc-s7': '#6250d6', '--trc-s8': '#e34948'
+    },
+    dark: {
+        '--tr-surface': '#111318', '--tr-surface-container-low': '#181a20', '--tr-surface-container': '#1d2026', '--tr-surface-container-high': '#272a31',
+        '--tr-on-surface': '#e2e2e9', '--tr-on-surface-variant': '#c3c6d1', '--tr-outline': '#8d919d', '--tr-outline-variant': '#434752',
+        '--tr-primary': '#a8c7ff', '--tr-danger': '#ffb4ab', '--tr-warning': '#ffb958', '--tr-success': '#7fd7a3',
+        '--trc-s1': '#3987e5', '--trc-s2': '#d95926', '--trc-s3': '#199e70', '--trc-s4': '#c98500', '--trc-s5': '#d55181', '--trc-s6': '#008300', '--trc-s7': '#9085e9', '--trc-s8': '#e66767'
+    }
+};
+const SERIES = {
+    keyword: '--trc-s7', string: '--trc-s3', number: '--trc-s4', type: '--trc-s1', function: '--trc-s2', constant: '--trc-s6', tag: '--trc-s8', attribute: '--trc-s5', regexp: '--trc-s6',
+    variable: '--tr-on-surface', operator: '--tr-on-surface', comment: '--tr-on-surface-variant', invalid: '--tr-danger', delimiter: '--tr-on-surface-variant', meta: '--trc-s1'
+};
+/** The shared syntax tokens (`--tr-syntax-*`) per role. When one is not defined the chart-palette colour above is used. `invalid` and `meta` have no token. */
+const SYNTAX = {
+    keyword: '--tr-syntax-keyword', string: '--tr-syntax-string', number: '--tr-syntax-number', type: '--tr-syntax-type', function: '--tr-syntax-function',
+    variable: '--tr-syntax-variable', constant: '--tr-syntax-constant', operator: '--tr-syntax-operator', tag: '--tr-syntax-tag', attribute: '--tr-syntax-attr',
+    regexp: '--tr-syntax-regexp', comment: '--tr-syntax-comment', delimiter: '--tr-syntax-punctuation'
+};
+export const ROLES = Object.keys(SERIES);
+export function buildPalette(tokens, mode) {
+    const get = (name) => parseColor(tokens[name]) ?? parseColor(FALLBACK[mode][name]);
+    const bg = over(get('--tr-surface'), WHITE);
+    const fg = get('--tr-on-surface');
+    const lineHighlight = mix(bg, get('--tr-primary'), 0.07);
+    const selection = mix(bg, get('--tr-primary'), 0.24);
+    const added = mix(bg, get('--tr-success'), 0.15), removed = mix(bg, get('--tr-danger'), 0.14);
+    const addedStrong = mix(bg, get('--tr-success'), 0.36), removedStrong = mix(bg, get('--tr-danger'), 0.34);
+    const bgs = [bg, lineHighlight, selection, added, removed, addedStrong, removedStrong];
+    const roles = {};
+    let min = Infinity;
+    for (const role of ROLES) {
+        const c = ensureContrast((SYNTAX[role] && parseColor(tokens[SYNTAX[role]])) || get(SERIES[role]), bgs);
+        min = Math.min(min, ...bgs.map((b) => contrast(c, b)));
+        roles[role] = toHex(c);
+    }
+    return {
+        mode,
+        bg: toHex(bg),
+        fg: toHex(ensureContrast(fg, bgs)),
+        lineHighlight: toHex(lineHighlight),
+        selection: toHex(selection),
+        cursor: toHex(get('--tr-primary')),
+        muted: toHex(ensureContrast(get('--tr-on-surface-variant'), bgs)),
+        border: toHex(get('--tr-outline-variant')),
+        widget: toHex(get('--tr-surface-container-high')),
+        added: toHex(added),
+        removed: toHex(removed),
+        addedStrong: toHex(addedStrong),
+        removedStrong: toHex(removedStrong),
+        roles,
+        minContrast: min
+    };
+}
+// ───── syntax scopes
+/** Monaco token types (and their dotted prefixes) to a role. The longest matching prefix wins, so `string.key.json` beats `string`. */
+export const SCOPES = [
+    ['comment', 'comment', 'italic'], ['string', 'string'], ['string.key', 'attribute'], ['string.escape', 'regexp'], ['number', 'number'],
+    ['keyword', 'keyword'], ['type', 'type'], ['namespace', 'type'], ['class', 'type'], ['interface', 'type'], ['predefined', 'function'], ['function', 'function'],
+    ['tag', 'tag'], ['attribute.name', 'attribute'], ['attribute.value', 'string'], ['key', 'attribute'], ['regexp', 'regexp'], ['constant', 'constant'],
+    ['variable', 'variable'], ['operator', 'operator'], ['delimiter', 'delimiter'], ['invalid', 'invalid'], ['annotation', 'meta'], ['metatag', 'meta'],
+    ['emphasis', 'variable', 'italic'], ['strong', 'variable', 'bold']
+];
+/** The role of a Monaco token type such as `keyword.sql`, or `undefined` for plain text. */
+export function scopeRole(type) {
+    let best;
+    for (const [prefix, role] of SCOPES) {
+        if ((type === prefix || type.startsWith(prefix + '.')) && (!best || prefix.length > best[0]))
+            best = [prefix.length, role];
+    }
+    return best?.[1];
+}
+/** The Monaco theme for a palette. */
+export function monacoTheme(p) {
+    const no = (c) => c.replace('#', '');
+    return {
+        base: p.mode === 'dark' ? 'vs-dark' : 'vs',
+        inherit: false,
+        rules: [
+            { token: '', foreground: no(p.fg), background: no(p.bg) },
+            ...SCOPES.map(([token, role, fontStyle]) => ({ token, foreground: no(p.roles[role]), ...(fontStyle ? { fontStyle } : {}) }))
+        ],
+        colors: {
+            'editor.background': p.bg,
+            'editor.foreground': p.fg,
+            'editorLineNumber.foreground': p.muted,
+            'editorLineNumber.activeForeground': p.fg,
+            'editor.lineHighlightBackground': p.lineHighlight,
+            'editor.lineHighlightBorder': p.lineHighlight,
+            'editor.selectionBackground': p.selection,
+            'editor.inactiveSelectionBackground': p.lineHighlight,
+            'editorCursor.foreground': p.cursor,
+            'editorIndentGuide.background1': p.border,
+            'editorWhitespace.foreground': p.border,
+            'editorGutter.background': p.bg,
+            'editorWidget.background': p.widget,
+            'editorWidget.border': p.border,
+            'editorWidget.foreground': p.fg,
+            'editorHoverWidget.background': p.widget,
+            'editorHoverWidget.border': p.border,
+            'editorHoverWidget.foreground': p.fg,
+            'editorSuggestWidget.background': p.widget,
+            'editorSuggestWidget.border': p.border,
+            'editorSuggestWidget.foreground': p.fg,
+            'editorSuggestWidget.selectedBackground': p.selection,
+            'editorSuggestWidget.highlightForeground': p.roles.keyword,
+            'input.background': p.bg,
+            'input.foreground': p.fg,
+            'input.border': p.border,
+            focusBorder: p.cursor,
+            'scrollbarSlider.background': p.border + '99',
+            'scrollbarSlider.hoverBackground': p.muted + '66',
+            'scrollbarSlider.activeBackground': p.muted + '99',
+            'minimap.background': p.bg,
+            'editorError.foreground': p.roles.invalid,
+            'editorWarning.foreground': p.roles.number,
+            'editorInfo.foreground': p.roles.type,
+            'diffEditor.insertedTextBackground': p.added + 'aa',
+            'diffEditor.removedTextBackground': p.removed + 'aa',
+            'diffEditor.insertedLineBackground': p.added + '66',
+            'diffEditor.removedLineBackground': p.removed + '66'
+        }
+    };
+}
+/** Editor type metrics from the density-scaled tokens: `--tr-text-md` (px) and `--tr-leading-normal` (a ratio). */
+export function fontMetrics(textMd, leading, family) {
+    const size = parseFloat(textMd ?? '');
+    const ratio = parseFloat(leading ?? '');
+    const fontSize = size > 0 ? size : 14;
+    return { fontSize, lineHeight: Math.round(fontSize * (ratio > 0 ? ratio : 1.5)), fontFamily: family?.trim() || "ui-monospace, 'SF Mono', Menlo, monospace" };
+}
+/** The theme in effect at `el`: nearest `data-theme`, else the OS preference; tokens and density as computed there. */
+export function readTheme(el) {
+    const forced = el.closest('[data-theme]')?.getAttribute('data-theme');
+    const mode = forced === 'dark' || forced === 'light' ? forced : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const cs = getComputedStyle(el);
+    const tokens = {};
+    for (const name of TOKEN_VARS)
+        tokens[name] = cs.getPropertyValue(name).trim() || undefined;
+    return {
+        mode,
+        palette: buildPalette(tokens, mode),
+        metrics: fontMetrics(cs.getPropertyValue('--tr-text-md'), cs.getPropertyValue('--tr-leading-normal'), cs.getPropertyValue('--tr-font-mono'))
+    };
+}
+/** Calls `cb` whenever the theme or density can have changed (`data-theme`, `data-density`, class or style on any ancestor, or the OS scheme). Returns a stop function. */
+export function watchTheme(el, cb) {
+    const mo = new MutationObserver(cb);
+    for (let n = el; n; n = n.parentElement)
+        mo.observe(n, { attributes: true, attributeFilter: ['data-theme', 'data-density', 'class', 'style'] });
+    const mq = matchMedia('(prefers-color-scheme: dark)');
+    mq.addEventListener('change', cb);
+    return () => { mo.disconnect(); mq.removeEventListener('change', cb); };
+}

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+export type MarkerSeverity = 'error' | 'warning' | 'info' | 'hint';
+/** A diagnostic. Lines and columns are 1-based. `endLine`/`endCol` default to the end of the start word. */
+export interface CodeMarker {
+    line: number;
+    col: number;
+    endLine?: number;
+    endCol?: number;
+    severity: MarkerSeverity;
+    message: string;
+    /** Optional rule or source label, shown next to the message. */
+    source?: string;
+    code?: string;
+}
+/** A note anchored to a line of a diff. Add whatever else your `annotation` snippet needs (an id, a thread, a severity). */
+export interface DiffAnnotation {
+    /** 1-based line number on the chosen side. */
+    line: number;
+    /** Which file the number belongs to; defaults to `new`. */
+    side?: 'old' | 'new';
+    [key: string]: unknown;
+}
+export type CompletionKind = 'text' | 'keyword' | 'function' | 'method' | 'variable' | 'field' | 'class' | 'interface' | 'module' | 'property' | 'constant' | 'snippet' | 'value' | 'table' | 'column';
+export interface CompletionItem {
+    label: string;
+    /** Text inserted; defaults to the label. */
+    insertText?: string;
+    kind?: CompletionKind;
+    detail?: string;
+    documentation?: string;
+    /** Sort key (lower first); defaults to the label. */
+    sortText?: string;
+    /** `insertText` is a snippet with `$1`/`${1:name}` tab stops. */
+    snippet?: boolean;
+}
+/** What a `completions` callback gets: the caret and the text before it. */
+export interface CompletionContext {
+    /** The whole document. */
+    value: string;
+    language: string;
+    path?: string;
+    line: number;
+    col: number;
+    /** The word being typed (may be empty). */
+    word: string;
+    /** The text of the current line before the caret. */
+    prefix: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/worker.d.ts

@@ -0,0 +1,5 @@
+// Vite's `?worker` imports (the consuming app's bundler resolves them).
+declare module '*?worker' {
+	const WorkerCtor: new () => Worker;
+	export default WorkerCtor;
+}

package/package.json

@@ -1,6 +1,47 @@
 {
-  "name": "@ruckc/truss-code",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-code",
+	"version": "1.11.0",
+	"description": "Monaco code editor, read-only code blocks and diff views styled with Truss UI",
+	"type": "module",
+	"license": "MIT",
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0",
+		"@ruckc/truss-ui": "^1.0.0",
+		"monaco-editor": "^0.57.0"
+	},
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git",
+		"directory": "packages/code"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"truss",
+		"code-editor",
+		"monaco",
+		"diff"
+	]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.