@excom/nucleus-quark-highlighter 0.1.0

package/support/package-meta.json

@@ -0,0 +1,44 @@
+{
+  "shortName": "nucleus-quark-highlighter",
+  "package": {
+    "name": "@excom/nucleus-quark-highlighter",
+    "version": "0.1.0",
+    "description": "VS Code syntax highlighting for Quark sheets and Nucleus-style HTML",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "tool"
+    },
+    "exports": {
+      "./shiki": "./shiki.mjs",
+      "./syntaxes/*": "./syntaxes/*"
+    }
+  },
+  "demos": {},
+  "readme": "<h1 id=\"md-nucleus-quark-highlighter\">nucleus-quark-highlighter</h1>\n<p>Quark sheets and Nucleus-style HTML, highlighted and formatted in VS Code / Cursor — the same grammar that colors every code block on this site.</p>\n<p>The <strong>Nucleus &amp; Quark Syntax Highlighter</strong> extension adds a Quark language for <code>.quark</code> files, highlights Quark inside <code>&lt;quark-sheet&gt;</code> in HTML, and gives custom elements and dashed attributes their own color so Adapters and their state stand apart from native markup. Tags, custom tags, attributes and custom attributes share one palette in both grammars, so a sheet and the markup it orchestrates read the same way.</p>\n<include-content data-language=\"html\"><template>&lt;provider-fetch src-url=\"/api/todos\" should-fetch&gt;\n  &lt;ul&gt;&lt;/ul&gt;\n  &lt;quark-sheet&gt;\n    provider-fetch[is-success] {\n      $todos: prop(\"provision\").body;\n      ul { content: iterate($todos); }\n    }\n  &lt;/quark-sheet&gt;\n&lt;/provider-fetch&gt;</template></include-content>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Quark language</strong> <code>.quark</code> files with CSS-familiar highlighting, folding, bracket matching and <code>/* */</code> comments; Quark&#39;s at-rules — <code>@use</code>, <code>@scope</code>, <code>@on</code> with its event list, <code>@dispatch</code> / <code>@command</code>, <code>@view-transition</code>, <code>@delay</code>, <code>@warn</code> / <code>@debug</code> / <code>@error</code> — color their names, options groups, durations, messages and blocks</li>\n<li><strong>Quark&#39;s language, nothing else</strong> Quark is not SCSS and not a CSS superset: every other at-rule (<code>@media</code>, <code>@mixin</code>, <code>@if</code>, <code>@keyframes</code>, …) and <code>%placeholder</code> selectors are colored as errors, because Quark&#39;s parser rejects them</li>\n<li><strong>Inline sheets</strong> Quark inside <code>&lt;quark-sheet&gt;</code> in HTML is highlighted as Quark</li>\n<li><strong>Custom elements stand out</strong> Dashed tags / dashed attributes get their own color in HTML and in Quark selectors; a dashed tag keeps that color wherever it appears in a selector — attribute-qualified, inside <code>:is()</code> / <code>:not()</code> / <code>:has()</code>, or before a pseudo-class or pseudo-element</li>\n<li><strong>Format Document</strong> <code>.quark</code> files format with <code>@excom/quark-formatter</code> (<code>Shift+Alt+F</code>)</li>\n<li><strong>Format inline sheets</strong> <code>Quark: Format &lt;quark-sheet&gt; blocks</code> formats every sheet in the open HTML file</li>\n<li><strong>File icon</strong> <code>.quark</code> files carry the Quark icon in the explorer and tabs</li>\n<li><strong>Shiki grammar</strong> <code>@excom/nucleus-quark-highlighter/shiki</code> highlights Quark / Nucleus HTML in docs and static sites</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p>Install <strong>Nucleus &amp; Quark Syntax Highlighter</strong> from the editor&#39;s Extensions view, or from the registries directly:</p>\n<ul>\n<li><strong>VS Code</strong> — <a href=\"https://marketplace.visualstudio.com/items?itemName=excom-dev.nucleus-quark-highlighter\">Visual Studio Marketplace</a>, or <code>ext install excom-dev.nucleus-quark-highlighter</code> in Quick Open</li>\n<li><strong>Cursor / VSCodium / Windsurf</strong> — <a href=\"https://open-vsx.org/extension/excom-dev/nucleus-quark-highlighter\">Open VSX</a></li>\n</ul>\n<p>To install a build by hand, download <code>nucleus-quark-highlighter-&lt;version&gt;.vsix</code> from the <a href=\"https://github.com/excom-dev/nucleus/releases\">GitHub releases</a> and run <code>code --install-extension &lt;file&gt;</code> (<code>cursor --install-extension</code> in Cursor).</p>\n<p>For docs sites and build tooling the grammar is also on npm:</p>\n<include-content data-language=\"bash\"><template>npm install @excom/nucleus-quark-highlighter</template></include-content>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Open a <code>.quark</code> file and the language mode is <strong>Quark</strong>. Open any HTML file and <code>&lt;quark-sheet&gt;</code> bodies, custom elements and dashed attributes are colored without further setup.</p>\n<h3 id=\"md-formatting\">Formatting</h3>\n<ul>\n<li><strong><code>.quark</code> files</strong> — Format Document (<code>Shift+Alt+F</code>, or format-on-save) reformats the whole file</li>\n<li><strong>Inline sheets in HTML</strong> — run <strong>Quark: Format <code>&lt;quark-sheet&gt;</code> blocks</strong> from the Command Palette; every sheet body in the active file is formatted and re-indented one level past its tag</li>\n</ul>\n<p>Inline sheets need the command because VS Code&#39;s HTML formatter only formats the <code>&lt;style&gt;</code> / <code>&lt;script&gt;</code> bodies it knows about and offers no hook for custom tags. A sheet that does not parse is left untouched and the reason appears in the status bar.</p>\n<h3 id=\"md-shortcuts\">Shortcuts</h3>\n<p><code>Cmd+/</code> (<code>Ctrl+/</code>) and <code>Shift+Alt+A</code> both toggle <code>/* */</code> comments — Quark has no <code>//</code> line comments, so a sheet stays tokenizable by a CSS engine.</p>\n<h3 id=\"md-highlighting-with-shiki\">Highlighting with Shiki</h3>\n<p>The extension&#39;s TextMate grammars are exported for <a href=\"https://shiki.style\">Shiki</a>:</p>\n<include-content data-language=\"js\"><template>import { createHighlighter } from \"shiki\";\nimport { shikiLangs } from \"@excom/nucleus-quark-highlighter/shiki\";\n\nconst highlighter = await createHighlighter({\n  themes: [\"github-light\", \"github-dark\"],\n  langs: [\"html\", \"css\", ...shikiLangs],\n});\n\nhighlighter.codeToHtml(source, { lang: \"quark\", theme: \"github-dark\" });</template></include-content>\n<p><code>quark</code> highlights standalone sheets. <code>html-custom-elements</code> is an injection: once registered, every <code>html</code> block gets custom-element / dashed-attribute coloring and Quark highlighting inside <code>&lt;quark-sheet&gt;</code>. Load <code>css</code> alongside them; the Quark grammar embeds it.</p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-nucleus-quark-highlighter\">nucleus-quark-highlighter</h1>\n<p>Quark sheets and Nucleus-style HTML, highlighted and formatted in VS Code / Cursor — the same grammar that colors every code block on this site.</p>\n<p>The <strong>Nucleus &amp; Quark Syntax Highlighter</strong> extension adds a Quark language for <code>.quark</code> files, highlights Quark inside <code>&lt;quark-sheet&gt;</code> in HTML, and gives custom elements and dashed attributes their own color so Adapters and their state stand apart from native markup. Tags, custom tags, attributes and custom attributes share one palette in both grammars, so a sheet and the markup it orchestrates read the same way.</p>\n<include-content data-language=\"html\"><template>&lt;provider-fetch src-url=\"/api/todos\" should-fetch&gt;\n  &lt;ul&gt;&lt;/ul&gt;\n  &lt;quark-sheet&gt;\n    provider-fetch[is-success] {\n      $todos: prop(\"provision\").body;\n      ul { content: iterate($todos); }\n    }\n  &lt;/quark-sheet&gt;\n&lt;/provider-fetch&gt;</template></include-content>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Quark language</strong> <code>.quark</code> files with CSS-familiar highlighting, folding, bracket matching and <code>/* */</code> comments; Quark&#39;s at-rules — <code>@use</code>, <code>@scope</code>, <code>@on</code> with its event list, <code>@dispatch</code> / <code>@command</code>, <code>@view-transition</code>, <code>@delay</code>, <code>@warn</code> / <code>@debug</code> / <code>@error</code> — color their names, options groups, durations, messages and blocks</li>\n<li><strong>Quark&#39;s language, nothing else</strong> Quark is not SCSS and not a CSS superset: every other at-rule (<code>@media</code>, <code>@mixin</code>, <code>@if</code>, <code>@keyframes</code>, …) and <code>%placeholder</code> selectors are colored as errors, because Quark&#39;s parser rejects them</li>\n<li><strong>Inline sheets</strong> Quark inside <code>&lt;quark-sheet&gt;</code> in HTML is highlighted as Quark</li>\n<li><strong>Custom elements stand out</strong> Dashed tags / dashed attributes get their own color in HTML and in Quark selectors; a dashed tag keeps that color wherever it appears in a selector — attribute-qualified, inside <code>:is()</code> / <code>:not()</code> / <code>:has()</code>, or before a pseudo-class or pseudo-element</li>\n<li><strong>Format Document</strong> <code>.quark</code> files format with <code>@excom/quark-formatter</code> (<code>Shift+Alt+F</code>)</li>\n<li><strong>Format inline sheets</strong> <code>Quark: Format &lt;quark-sheet&gt; blocks</code> formats every sheet in the open HTML file</li>\n<li><strong>File icon</strong> <code>.quark</code> files carry the Quark icon in the explorer and tabs</li>\n<li><strong>Shiki grammar</strong> <code>@excom/nucleus-quark-highlighter/shiki</code> highlights Quark / Nucleus HTML in docs and static sites</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p>Install <strong>Nucleus &amp; Quark Syntax Highlighter</strong> from the editor&#39;s Extensions view, or from the registries directly:</p>\n<ul>\n<li><strong>VS Code</strong> — <a href=\"https://marketplace.visualstudio.com/items?itemName=excom-dev.nucleus-quark-highlighter\">Visual Studio Marketplace</a>, or <code>ext install excom-dev.nucleus-quark-highlighter</code> in Quick Open</li>\n<li><strong>Cursor / VSCodium / Windsurf</strong> — <a href=\"https://open-vsx.org/extension/excom-dev/nucleus-quark-highlighter\">Open VSX</a></li>\n</ul>\n<p>To install a build by hand, download <code>nucleus-quark-highlighter-&lt;version&gt;.vsix</code> from the <a href=\"https://github.com/excom-dev/nucleus/releases\">GitHub releases</a> and run <code>code --install-extension &lt;file&gt;</code> (<code>cursor --install-extension</code> in Cursor).</p>\n<p>For docs sites and build tooling the grammar is also on npm:</p>\n<include-content data-language=\"bash\"><template>npm install @excom/nucleus-quark-highlighter</template></include-content>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Open a <code>.quark</code> file and the language mode is <strong>Quark</strong>. Open any HTML file and <code>&lt;quark-sheet&gt;</code> bodies, custom elements and dashed attributes are colored without further setup.</p>\n<h3 id=\"md-formatting\">Formatting</h3>\n<ul>\n<li><strong><code>.quark</code> files</strong> — Format Document (<code>Shift+Alt+F</code>, or format-on-save) reformats the whole file</li>\n<li><strong>Inline sheets in HTML</strong> — run <strong>Quark: Format <code>&lt;quark-sheet&gt;</code> blocks</strong> from the Command Palette; every sheet body in the active file is formatted and re-indented one level past its tag</li>\n</ul>\n<p>Inline sheets need the command because VS Code&#39;s HTML formatter only formats the <code>&lt;style&gt;</code> / <code>&lt;script&gt;</code> bodies it knows about and offers no hook for custom tags. A sheet that does not parse is left untouched and the reason appears in the status bar.</p>\n<h3 id=\"md-shortcuts\">Shortcuts</h3>\n<p><code>Cmd+/</code> (<code>Ctrl+/</code>) and <code>Shift+Alt+A</code> both toggle <code>/* */</code> comments — Quark has no <code>//</code> line comments, so a sheet stays tokenizable by a CSS engine.</p>\n<h3 id=\"md-highlighting-with-shiki\">Highlighting with Shiki</h3>\n<p>The extension&#39;s TextMate grammars are exported for <a href=\"https://shiki.style\">Shiki</a>:</p>\n<include-content data-language=\"js\"><template>import { createHighlighter } from \"shiki\";\nimport { shikiLangs } from \"@excom/nucleus-quark-highlighter/shiki\";\n\nconst highlighter = await createHighlighter({\n  themes: [\"github-light\", \"github-dark\"],\n  langs: [\"html\", \"css\", ...shikiLangs],\n});\n\nhighlighter.codeToHtml(source, { lang: \"quark\", theme: \"github-dark\" });</template></include-content>\n<p><code>quark</code> highlights standalone sheets. <code>html-custom-elements</code> is an injection: once registered, every <code>html</code> block gets custom-element / dashed-attribute coloring and Quark highlighting inside <code>&lt;quark-sheet&gt;</code>. Load <code>css</code> alongside them; the Quark grammar embeds it.</p>\n"
+  },
+  "installation": {
+    "name": "@excom/nucleus-quark-highlighter",
+    "shortName": "nucleus-quark-highlighter",
+    "version": "0.1.0",
+    "description": "VS Code syntax highlighting for Quark sheets and Nucleus-style HTML",
+    "packageType": "tool",
+    "install": {
+      "npm": "npm install @excom/nucleus-quark-highlighter"
+    },
+    "imports": {
+      "js": "import { /* … */ } from \"@excom/nucleus-quark-highlighter\";"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [],
+  "exportedFiles": {
+    "./shiki": {
+      "default": "./shiki.mjs"
+    },
+    "./syntaxes/*": {
+      "default": "./syntaxes/*"
+    }
+  }
+}

package/syntaxes/html-custom-elements.tmLanguage.json

@@ -0,0 +1,82 @@
+{
+  "scopeName": "injection.html.custom-elements",
+  "injectionSelector": "L:text.html.derivative -comment, L:text.html.basic -comment",
+  "patterns": [
+    {
+      "name": "meta.embedded.block.quark",
+      "begin": "(<)(quark-sheet)\\b([^>]*)(>)",
+      "beginCaptures": {
+        "1": { "name": "punctuation.definition.tag.begin.html" },
+        "2": { "name": "entity.name.class.custom-element.html" },
+        "3": {
+          "patterns": [
+            { "include": "meta.tag.inline.custom-element.start.html" },
+            { "include": "#custom-attribute-k-v" },
+            { "include": "#custom-attribute-k" },
+            { "include": "text.html.basic#attribute" }
+          ]
+        },
+        "4": { "name": "punctuation.definition.tag.end.html" }
+      },
+      "end": "(</)(quark-sheet)(>)",
+      "endCaptures": {
+        "1": { "name": "punctuation.definition.tag.begin.html" },
+        "2": { "name": "entity.name.class.custom-element.html" },
+        "3": { "name": "punctuation.definition.tag.end.html" }
+      },
+      "contentName": "source.quark",
+      "patterns": [{ "include": "source.quark" }]
+    },
+    {
+      "name": "meta.tag.inline.custom-element",
+      "begin": "(?i)(<)(?!quark-sheet)([a-z0-9]+-[a-z0-9-]+)\\s*",
+      "beginCaptures": {
+        "1": { "name": "punctuation.definition.tag.begin.html" },
+        "2": { "name": "entity.name.class.custom-element.html" }
+      },
+      "end": "(>)",
+      "endCaptures": {
+        "1": { "name": "punctuation.definition.tag.end.html" }
+      },
+      "patterns": [
+        { "include": "meta.tag.inline.custom-element.start.html" },
+        { "include": "#custom-attribute-k-v" },
+        { "include": "#custom-attribute-k" },
+        { "include": "text.html.basic#attribute" }
+      ]
+    },
+    {
+      "match": "(?i)((</)(?!quark-sheet)([a-z0-9]+-[a-z0-9-]+)\\b(>))",
+      "captures": {
+        "1": { "name": "meta.tag.inline.custom-element.end.html" },
+        "2": { "name": "punctuation.definition.tag.begin.html" },
+        "3": { "name": "entity.name.class.custom-element.html" },
+        "4": { "name": "punctuation.definition.tag.end.html" }
+      }
+    }
+  ],
+  "repository": {
+    "custom-attribute-k-v": {
+      "name": "entity.other.attribute-name.custom-attribute-k-v.html",
+      "begin": "([a-zA-Z0-9]+-[a-zA-Z0-9-]*)(?==)",
+      "beginCaptures": {
+        "1": { "name": "variable.other.constant.attribute-name.custom-attribute.html" }
+      },
+      "end": "((=)(\"[^\"]*\"|'[^']*'))",
+      "endCaptures": {
+        "1": { "name": "meta.attribute.html" },
+        "2": { "name": "punctuation.separator.key-value.html" },
+        "3": { "name": "keyword.operator.quantifier.regexp.custom-attribute.html" }
+      }
+    },
+    "custom-attribute-k": {
+      "name": "entity.other.attribute-name.custom-attribute-k.html",
+      "begin": "([a-zA-Z0-9]+-[a-zA-Z0-9-]*)(?=\\s|>)",
+      "beginCaptures": {
+        "1": { "name": "variable.other.constant.attribute-name.custom-attribute.html" }
+      },
+      "end": "\\b"
+    }
+  },
+  "uuid": "custom-elements-highlighter"
+}