@xyd-js/components 0.1.0-build.168

package/src/coder/hooks/highlight.ts

@@ -0,0 +1,182 @@
+// import { splitAnnotationsAndCode } from './extract-annotations.js';
+import {
+    type CodeAnnotation,
+    type RawCode,
+    type HighlightedCode,
+    type Token
+    // Whitespace,
+    // isWhitespace,
+} from 'codehike/code';
+import {
+    type Lines,
+    type Tokens,
+    highlightSync as lighter,
+    LANG_NAMES,
+    type Theme
+} from '@code-hike/lighter';
+
+type Whitespace = string
+
+type AnyToken = Token | Whitespace
+
+function isWhitespace(token: Token | Whitespace): token is Whitespace {
+    return typeof token === 'string';
+}
+
+export function highlight(
+    data: RawCode,
+    theme: Theme,
+    lang: string
+): HighlightedCode {
+    // let { value, lang = 'txt' } = data;
+
+    if (!LANG_NAMES.includes(lang)) {
+        console.warn(`Unknown language "${lang}"`);
+        lang = 'txt';
+    }
+
+    // const { code, annotations } = await splitAnnotationsAndCode(
+    //   value,
+    //   lang,
+    //   config.annotationPrefix || '!'
+    // );
+    //
+
+    const {
+        lines,
+        lang: lighterLang,
+        style
+    } = lighter(data.value, lang, theme as any, {
+        annotations: [],
+        scopes: false // true for better token transitions, but breaks css themes
+    });
+
+    const tokens = joinLines(lines);
+    // split surrounding whitespace for each token
+    const splitTokens = splitWhitespace(tokens);
+    // join consecutive whitespace tokens
+    const joinedTokens = joinWhitespace(splitTokens);
+
+    return {
+        ...data,
+        code: data.value,
+        tokens: joinedTokens,
+        lang: lighterLang,
+        annotations: [], // TODO: in the future
+        // annotations: compatAnnotations(annotations),
+        themeName: typeof theme === 'string' ? theme : theme?.name || 'unknown',
+        style
+    };
+}
+
+function compatAnnotations(annotations: any[]): CodeAnnotation[] {
+    const newAnnotations: CodeAnnotation[] = [];
+    for (const a of annotations) {
+        const { name, query, ranges } = a;
+        for (const r of ranges) {
+            if (r.lineNumber) {
+                const { lineNumber, fromColumn, toColumn } = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    lineNumber,
+                    fromColumn,
+                    toColumn
+                });
+            } else {
+                const { fromLineNumber, toLineNumber } = r;
+                newAnnotations.push({
+                    name,
+                    query,
+                    fromLineNumber,
+                    toLineNumber
+                });
+            }
+        }
+    }
+    return newAnnotations;
+}
+
+// group the Lines into one array
+function joinLines(lines: Lines): AnyToken[] {
+    const joinedTokens: AnyToken[] = [];
+    lines.forEach((lineOrGroup, i) => {
+        if ('lines' in lineOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const tokens = joinTokens(lineOrGroup.tokens);
+            joinedTokens.push(...tokens);
+            if (i < lines.length - 1) {
+                joinedTokens.push('\n');
+            }
+        }
+    });
+    return joinedTokens;
+}
+
+function joinTokens(tokens: Tokens): AnyToken[] {
+    return tokens.map((tokenOrGroup) => {
+        if ('tokens' in tokenOrGroup) {
+            throw new Error('Shouldnt be groups');
+        } else {
+            const t = [tokenOrGroup.content] as Token;
+            const { color, ...rest } = tokenOrGroup.style || {};
+            t.push(color);
+            if (Object.keys(rest).length) {
+                t.push(rest);
+            }
+            return t;
+        }
+    });
+}
+
+function splitWhitespace(tokens: AnyToken[]) {
+    const ejected: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            ejected.push(tokenOrGroup);
+        } else {
+            const [before, content, after] = splitSurroundingWhitespace(
+                tokenOrGroup[0]
+            );
+            if (before?.length) {
+                ejected.push(before);
+            }
+            if (content.length) {
+                const copy = [...tokenOrGroup] as Token;
+                copy[0] = content;
+                ejected.push(copy);
+            }
+            if (after?.length) {
+                ejected.push(after);
+            }
+        }
+    });
+    return ejected;
+}
+
+function joinWhitespace(tokens: AnyToken[]) {
+    const joinedTokens: AnyToken[] = [];
+    tokens.forEach((tokenOrGroup) => {
+        if (isWhitespace(tokenOrGroup)) {
+            let last = joinedTokens[joinedTokens.length - 1];
+            if (last && isWhitespace(last)) {
+                joinedTokens[joinedTokens.length - 1] += tokenOrGroup;
+            } else if (tokenOrGroup !== '') {
+                joinedTokens.push(tokenOrGroup);
+            }
+        } else if (tokenOrGroup[0].length > 0) {
+            joinedTokens.push(tokenOrGroup);
+        }
+    });
+    return joinedTokens;
+}
+
+// splits " \t foo bar \n" into [" \t ","foo bar"," \n"]
+// "foo bar" -> ["","foo bar",""]
+function splitSurroundingWhitespace(content: string) {
+    const trimmed = content.trim();
+    const before = content.slice(0, content.indexOf(trimmed));
+    const after = content.slice(content.indexOf(trimmed) + trimmed.length);
+    return [before, trimmed, after];
+}

package/src/coder/index.ts

@@ -0,0 +1,37 @@
+export {
+    annotations
+} from "./Code"
+export type {
+    CodeProps
+} from "./Code"
+export {
+    Code,
+    CodeLoader,
+
+    highlightAsync,
+    highlight
+} from "./Code"
+//
+
+export type { CodeSampleProps } from "./CodeSample";
+export { CodeSample } from "./CodeSample";
+//
+
+export type {
+    CodeTabsProps
+} from "./CodeTabs";
+export {
+    withCodeTabs
+} from "./CodeTabs";
+//
+
+export type { CodeThemeProps, CodeThemeBlockProps } from "./CodeTheme";
+export {
+    CodeTheme,
+
+    useCodeTheme
+} from "./CodeTheme";
+
+export {
+    CoderProvider
+} from "./CoderProvider";

package/src/coder/themes/classic.css

@@ -0,0 +1,57 @@
+:root {
+    --syntax-primary: #1971a8;
+    --syntax-secondary: #008c6a;
+
+    --syntax1: #FFFFFF;
+    --syntax2: #ffffff00;
+    --syntax3: #D9D7D5;
+    --syntax4: #ECECEC;
+    --syntax5: #F5F5F5;
+    --syntax6: #282828;
+    --syntax7: #565456;
+    --syntax8: #C7C6C5;
+    --syntax9: #A6A6A6;
+    --syntax10: #242424;
+    --syntax11: #EEF5FE;
+    --syntax12: #82ADF3;
+    --syntax13: #3C93FD;
+    --syntax14: #CECECE;
+    --syntax15: #353740;
+    --syntax16: #e62c7a;
+    --syntax17: #007400;
+    --syntax18: #643820;
+    --syntax19: #272AD8;
+    --syntax20: #AA0D91;
+    --syntax21: #3F6E74;
+    --syntax23: #536579;
+    --syntax24: var(--syntax-primary);
+    --syntax26: #816927;
+    --syntax27: var(--syntax-secondary);
+}
+
+[data-color-scheme="dark"] {
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+    }
+}
+
+[data-color-scheme="dark"] {
+    --syntax1: #353740;
+    --syntax2: #353740;
+    --syntax15: #fff;
+    --syntax19: var(--syntax-primary);
+    --syntax27: var(--syntax-secondary);
+}
+
+/* System Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --syntax1: #353740;
+        --syntax2: #353740;
+        --syntax15: #fff;
+        --syntax19: var(--syntax-primary);
+        --syntax27: var(--syntax-secondary);
+    }
+}
+

package/src/coder/themes/classic.ts

@@ -0,0 +1,270 @@
+export default {
+    name: "classic",
+    "type": "from-css",
+    colors: {
+        "list.focusForeground": "var(--syntax1)",
+        "scrollbar.shadow": "var(--syntax2)",
+        "tab.activeBorder": "var(--syntax1)",
+        "widget.shadow": "var(--syntax2)",
+        "activityBar.border": "var(--syntax3)",
+        "editorGroup.border": "var(--syntax3)",
+        "editorGroupHeader.tabsBorder": "var(--syntax3)",
+        "editorWidget.border": "var(--syntax3)",
+        "editorWidget.resizeBorder": "var(--syntax3)",
+        "input.border": "var(--syntax3)",
+        "notificationCenter.border": "var(--syntax3)",
+        "notifications.border": "var(--syntax3)",
+        "panel.border": "var(--syntax3)",
+        "sideBar.border": "var(--syntax3)",
+        "statusBar.border": "var(--syntax3)",
+        "tab.border": "var(--syntax3)",
+        "activityBar.background": "var(--syntax4)",
+        "statusBar.background": "var(--syntax4)",
+        "statusBar.noFolderBackground": "var(--syntax4)",
+        "statusBar.debuggingBackground": "var(--syntax4)",
+        "editorGroupHeader.tabsBackground": "var(--syntax5)",
+        "editorWidget.background": "var(--syntax5)",
+        "sideBar.background": "var(--syntax5)",
+        "sideBarSectionHeader.background": "var(--syntax5)",
+        "tab.inactiveBackground": "var(--syntax5)",
+        "activityBarBadge.background": "var(--syntax6)",
+        "activityBar.foreground": "var(--syntax6)",
+        "statusBar.foreground": "var(--syntax7)",
+        "input.placeholderForeground": "var(--syntax8)",
+        "editorLineNumber.foreground": "var(--syntax9)",
+        "editorLineNumber.activeForeground": "var(--syntax6)",
+        foreground: "var(--syntax6)",
+        "panelTitle.activeForeground": "var(--syntax6)",
+        "sideBarTitle.foreground": "var(--syntax6)",
+        "sideBarSectionHeader.foreground": "var(--syntax6)",
+        "panelTitle.inactiveForeground": "var(--syntax10)",
+        "tab.inactiveForeground": "var(--syntax10)",
+        "list.highlightForeground": "var(--syntax10)",
+        "editor.lineHighlightBackground": "var(--syntax11)",
+        focusBorder: "var(--syntax12)",
+        "button.background": "var(--syntax13)",
+        "list.activeSelectionBackground": "var(--syntax13)",
+        "list.focusBackground": "var(--syntax13)",
+        "selection.background": "#B3D7FF",
+        "list.inactiveSelectionBackground": "var(--syntax14)",
+        "terminal.ansiBlack": "var(--syntax15)",
+        "terminal.ansiBrightBlack": "var(--syntax15)",
+        "terminal.ansiRed": "var(--syntax16)",
+        "terminal.ansiBrightRed": "var(--syntax16)",
+        "terminal.ansiGreen": "var(--syntax17)",
+        "terminal.ansiBrightGreen": "var(--syntax17)",
+        "terminal.ansiYellow": "var(--syntax18)",
+        "terminal.ansiBrightYellow": "var(--syntax18)",
+        "terminal.ansiBlue": "var(--syntax19)",
+        "terminal.ansiBrightBlue": "var(--syntax19)",
+        "terminal.ansiMagenta": "var(--syntax20)",
+        "terminal.ansiBrightMagenta": "var(--syntax20)",
+        "terminal.ansiCyan": "var(--syntax21)",
+        "terminal.ansiBrightCyan": "var(--syntax21)",
+    },
+    tokenColors: [
+        {
+            scope: "new.expr entity.name",
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            name: "Comments",
+            scope: ["comment", "comment storage.type"],
+            settings: {
+                foreground: "var(--syntax23)",
+                fontStyle: "italic",
+            },
+        },
+        {
+            name: "CSS",
+            scope: [
+                "entity.other.attribute-name.pseudo-class.css",
+                "entity.other.attribute-name.pseudo-class.scss",
+                "entity.other.attribute-name.pseudo-element.css",
+                "entity.other.attribute-name.pseudo-element.scss",
+                "support.function.calc.css",
+                "support.function.calc.scss",
+                "support.type.property-name.css",
+                "support.type.property-name.scss",
+                "support.type.vendored.property-name.css",
+                "support.type.vendored.property-name.scss",
+                "meta.property-value.css support.constant",
+                "meta.property-value.scss support.constant",
+                "meta.property-value.css support.constant.property-value",
+                "meta.property-value.scss support.constant.property-value",
+                "support.function.transform.css",
+                "support.function.transform.scss",
+            ],
+            settings: {
+                foreground: "var(--syntax20)",
+            },
+        },
+        {
+            name: "Decorator",
+            scope: [
+                "meta.decorator",
+                "meta.decorator punctuation.decorator",
+                "meta.decorator variable.other.readwrite",
+                "meta.decorator meta.function-call entity.name.function",
+            ],
+            settings: {
+                foreground: "var(--syntax18)",
+            },
+        },
+        {
+            name: "Doctype",
+            scope: ["meta.tag.sgml.html"],
+            settings: {
+                foreground: "var(--syntax9)",
+            },
+        },
+        {
+            name: "Functions",
+            scope: ["entity.name.function", "support.function"],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            name: "Keys (general)",
+            scope: [
+                "meta.property-list meta.property-name",
+                "support.type.property-name",
+                "support.type.map.key",
+                "entity.name.tag.yaml",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        // NEW: Explicit rule for object literal & JSON keys – will render red (syntax16)
+        {
+            name: "Object Keys",
+            scope: [
+                "meta.object-literal.key",
+                "meta.object-literal.key string.quoted.double",
+                "meta.object-literal.key string.quoted.single",
+                "meta.object-literal.key punctuation.definition.string.begin",
+                "meta.object-literal.key punctuation.definition.string.end",
+                "support.type.property-name.json",
+            ],
+            settings: {
+                foreground: "var(--syntax16)",
+            },
+        },
+        {
+            name: "Keywords",
+            scope: [
+                "keyword.control",
+                "keyword.declaration",
+                "keyword.expressions-and-types",
+                "keyword.operator.new",
+                "keyword.reserved",
+                "keyword.statement",
+                "storage.type",
+                "storage.modifier",
+                "constant.language",
+                "variable.language.super",
+                "variable.language.this",
+                "text.html entity.name.tag",
+                "meta.tag entity.name.tag",
+                "meta.tag support.class",
+                "string.regexp keyword.other",
+            ],
+            settings: {
+                foreground: "var(--syntax24)",
+                fontStyle: "bold",
+            },
+        },
+        {
+            name: "Operators",
+            scope: [
+                "storage.type.function.arrow",
+                "meta.template.expression punctuation",
+                "punctuation.separator.key-value",
+                "meta.object-literal.key meta.brace.square",
+                "meta.template.expression keyword.operator",
+                "keyword.operator.or.regexp",
+                "keyword.operator.quantifier",
+                "punctuation.definition.group.regexp",
+                "punctuation.definition.character-class",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            scope: [
+                "meta.tag entity.other.attribute-name",
+                "constant.character.escape.backslash",
+            ],
+            settings: {
+                foreground: "var(--syntax26)",
+            },
+        },
+        {
+            name: "Numbers",
+            scope: ["constant.numeric", "keyword.other.unit", "constant.other.color"],
+            settings: {
+                foreground: "var(--syntax19)",
+            },
+        },
+        {
+            name: "Strings",
+            scope: [
+                "string",
+                "variable.parameter.url.scss",
+                "markup.heading.markdown",
+                "beginning.punctuation.definition.list.markdown",
+                "meta.template.expression meta.embedded punctuation.definition.string.begin",
+                "meta.template.expression meta.embedded punctuation.definition.string.end",
+            ],
+            settings: {
+                foreground: "var(--syntax27)",
+            },
+        },
+        {
+            name: "Types",
+            scope: [
+                "meta.type",
+                "meta.return.type",
+                "entity.name.type",
+                "support.type.primitive",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        },
+        {
+            name: "Variables",
+            scope: [
+                "meta.objectliteral variable.other.object",
+                "entity.name.type.module",
+                "entity.other.inherited-class",
+                "variable.scss",
+                "variable.other.bracket.shell",
+                "entity.name.function.scss",
+            ],
+            settings: {
+                foreground: "var(--syntax21)",
+            },
+        },
+        {
+            name: "Keywords",
+            scope: [
+                "keyword.control.at-rule",
+                "meta.import variable.other.readwrite",
+                "meta.definition.variable variable.other.readwrite",
+                "meta.definition.variable variable.other.constant",
+                "meta.template.expression variable.other.readwrite",
+                "meta.template.expression variable.other.constant",
+                "support.constant.property-value",
+            ],
+            settings: {
+                foreground: "var(--syntax15)",
+            },
+        }
+    ],
+};

package/src/coder/themes/cosmo.css

@@ -0,0 +1,64 @@
+:root {
+    --syntax-primary: #7051d4;
+    --syntax-secondary: #D12F1B;
+    --syntax-tertiary: #713DA9;
+    
+    --syntax1: #FFFFFF;
+    --syntax2: #ffffff00;
+    --syntax3: #D9D7D5;
+    --syntax4: #ECECEC;
+    --syntax5: #F5F5F5;
+    --syntax6: #282828;
+    --syntax7: #565456;
+    --syntax8: #C7C6C5;
+    --syntax9: #A6A6A6;
+    --syntax10: #242424;
+    --syntax11: #EEF5FE;
+    --syntax12: #82ADF3;
+    --syntax13: #3C93FD;
+    --syntax14: #CECECE;
+    --syntax15: #000000;
+    --syntax16: #C41A16;
+    --syntax17: #007400;
+    --syntax18: #643820;
+    --syntax19: #272AD8;
+    --syntax20: #AA0D91;
+    --syntax21: #3F6E74;
+    --syntax22: var(--syntax-tertiary);
+    --syntax23: #536579;
+    --syntax24: var(--syntax-primary);
+    --syntax25: #AD3DA4;
+    --syntax26: #816927;
+    --syntax27: var(--syntax-secondary);
+}
+
+[data-color-scheme="dark"] {
+    --syntax-secondary: #df3079;
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --syntax-secondary: #df3079;
+    }
+}
+
+[data-color-scheme="dark"] {
+    --syntax1: #000;
+    --syntax2: #000;
+    --syntax15: #fff;
+    --syntax16: #0e0e10;
+    --syntax19: #2e95d3;
+    --syntax27: var(--syntax-secondary);
+}
+
+/* System Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --syntax1: #000;
+        --syntax2: #000;
+        --syntax15: #fff;
+        --syntax16: #0e0e10;
+        --syntax19: #2e95d3;
+        --syntax27: var(--syntax-secondary);
+    }
+}
+