feat(diffs-highlight): Add a Figma plugin that highlights code with Pierre variables

packages/diffs-highlight/LICENSE.md

@@ -0,0 +1,189 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction, and
+    distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by the
+    copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all other
+    entities that control, are controlled by, or are under common control with
+    that entity. For the purposes of this definition, "control" means (i) the
+    power, direct or indirect, to cause the direction or management of such
+    entity, whether by contract or otherwise, or (ii) ownership of fifty percent
+    (50%) or more of the outstanding shares, or (iii) beneficial ownership of
+    such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity exercising
+    permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation source, and
+    configuration files.
+
+    "Object" form shall mean any form resulting from mechanical transformation
+    or translation of a Source form, including but not limited to compiled
+    object code, generated documentation, and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or Object form,
+    made available under the License, as indicated by a copyright notice that is
+    included in or attached to the work (an example is provided in the Appendix
+    below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object form,
+    that is based on (or derived from) the Work and for which the editorial
+    revisions, annotations, elaborations, or other modifications represent, as a
+    whole, an original work of authorship. For the purposes of this License,
+    Derivative Works shall not include works that remain separable from, or
+    merely link (or bind by name) to the interfaces of, the Work and Derivative
+    Works thereof.
+
+    "Contribution" shall mean any work of authorship, including the original
+    version of the Work and any modifications or additions to that Work or
+    Derivative Works thereof, that is intentionally submitted to Licensor for
+    inclusion in the Work by the copyright owner or by an individual or Legal
+    Entity authorized to submit on behalf of the copyright owner. For the
+    purposes of this definition, "submitted" means any form of electronic,
+    verbal, or written communication sent to the Licensor or its
+    representatives, including but not limited to communication on electronic
+    mailing lists, source code control systems, and issue tracking systems that
+    are managed by, or on behalf of, the Licensor for the purpose of discussing
+    and improving the Work, but excluding communication that is conspicuously
+    marked or otherwise designated in writing by the copyright owner as "Not a
+    Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity on
+    behalf of whom a Contribution has been received by Licensor and subsequently
+    incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of this
+    License, each Contributor hereby grants to You a perpetual, worldwide,
+    non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+    reproduce, prepare Derivative Works of, publicly display, publicly perform,
+    sublicense, and distribute the Work and such Derivative Works in Source or
+    Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of this
+    License, each Contributor hereby grants to You a perpetual, worldwide,
+    non-exclusive, no-charge, royalty-free, irrevocable (except as stated in
+    this section) patent license to make, have made, use, offer to sell, sell,
+    import, and otherwise transfer the Work, where such license applies only to
+    those patent claims licensable by such Contributor that are necessarily
+    infringed by their Contribution(s) alone or by combination of their
+    Contribution(s) with the Work to which such Contribution(s) was submitted.
+    If You institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work or a
+    Contribution incorporated within the Work constitutes direct or contributory
+    patent infringement, then any patent licenses granted to You under this
+    License for that Work shall terminate as of the date such litigation is
+    filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the Work or
+    Derivative Works thereof in any medium, with or without modifications, and
+    in Source or Object form, provided that You meet the following conditions:
+
+    (a) You must give any other recipients of the Work or Derivative Works a
+    copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices stating
+    that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works that You
+    distribute, all copyright, patent, trademark, and attribution notices from
+    the Source form of the Work, excluding those notices that do not pertain to
+    any part of the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its distribution,
+    then any Derivative Works that You distribute must include a readable copy
+    of the attribution notices contained within such NOTICE file, excluding
+    those notices that do not pertain to any part of the Derivative Works, in at
+    least one of the following places: within a NOTICE text file distributed as
+    part of the Derivative Works; within the Source form or documentation, if
+    provided along with the Derivative Works; or, within a display generated by
+    the Derivative Works, if and wherever such third-party notices normally
+    appear. The contents of the NOTICE file are for informational purposes only
+    and do not modify the License. You may add Your own attribution notices
+    within Derivative Works that You distribute, alongside or as an addendum to
+    the NOTICE text from the Work, provided that such additional attribution
+    notices cannot be construed as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and may
+    provide additional or different license terms and conditions for use,
+    reproduction, or distribution of Your modifications, or for any such
+    Derivative Works as a whole, provided Your use, reproduction, and
+    distribution of the Work otherwise complies with the conditions stated in
+    this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise, any
+    Contribution intentionally submitted for inclusion in the Work by You to the
+    Licensor shall be under the terms and conditions of this License, without
+    any additional terms or conditions. Notwithstanding the above, nothing
+    herein shall supersede or modify the terms of any separate license agreement
+    you may have executed with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade names,
+    trademarks, service marks, or product names of the Licensor, except as
+    required for reasonable and customary use in describing the origin of the
+    Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or agreed to in
+    writing, Licensor provides the Work (and each Contributor provides its
+    Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied, including, without limitation, any
+    warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or
+    FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining
+    the appropriateness of using or redistributing the Work and assume any risks
+    associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory, whether in
+    tort (including negligence), contract, or otherwise, unless required by
+    applicable law (such as deliberate and grossly negligent acts) or agreed to
+    in writing, shall any Contributor be liable to You for damages, including
+    any direct, indirect, special, incidental, or consequential damages of any
+    character arising as a result of this License or out of the use or inability
+    to use the Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all other
+    commercial damages or losses), even if such Contributor has been advised of
+    the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing the Work or
+    Derivative Works thereof, You may choose to offer, and charge a fee for,
+    acceptance of support, warranty, indemnity, or other liability obligations
+    and/or rights consistent with this License. However, in accepting such
+    obligations, You may act only on Your own behalf and on Your sole
+    responsibility, not on behalf of any other Contributor, and only if You
+    agree to indemnify, defend, and hold each Contributor harmless for any
+    liability incurred by, or claims asserted against, such Contributor by
+    reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright 2025 Pierre Computer Company
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.

packages/diffs-highlight/README.md

@@ -0,0 +1,100 @@
+PIERRE COMPUTER COMPANY █ PROJECT: DIFFS HIGHLIGHT
+
+```
+
+CONTACT: SUPPORT@PIERRE.CO
+LOCATION: USA
+STATUS: ONLINE
+OPEN POSITIONS: [Systems Engineer](https://pierre.computer/careers/systems-engineer)
+
+```
+
+Overview:
+
+- A Figma plugin that syntax highlights code in a text layer by binding the
+  Pierre `syntax/*` variables to each token's characters.
+- Because the colors come from variables rather than hex values, switching the
+  collection's mode re-colors the code: light, dark, soft, and both CVD variants
+  from one sample.
+- Local development only. This is not published to the Figma Community.
+
+## Setup
+
+The plugin is loaded from disk, so it has to be built first:
+
+```bash
+moonx diffs-highlight:build
+```
+
+Then in Figma desktop: **Plugins > Development > Import plugin from manifest**,
+and select `packages/diffs-highlight/manifest.json`.
+
+The variables have to exist in the file you run it on. Import them from
+[`@pierre/theme`](../theme/README.md) first — the primitives collection, then
+the semantic collection with one mode per variant.
+
+## Usage
+
+1. Select one or more text layers containing code. Non-text layers and empty
+   text layers in the selection are ignored rather than rejected.
+2. Run **Plugins > Development > Diffs Highlight**.
+3. Pick the language, confirm the variable collection, and press **Highlight**.
+   Every selected layer is tokenized as that one language, so group a
+   multi-layer run by language.
+4. Switch that collection's mode on the layer (or its parent frame) to move the
+   sample between Light, Dark, Soft, and the CVD variants.
+
+Every language Shiki bundles is offered — 235 of them, listed alphabetically by
+display name, so the select relies on type-ahead. The picker opens on
+TypeScript.
+
+The status line reports what happened: how many ranges were bound and across how
+many layers, any colors that matched no Pierre role, and any variable names
+missing from the collection you picked (usually the sign of a partial import, or
+the wrong collection). A layer edited between tokenizing and binding is skipped
+and named, rather than costing you the rest of the selection.
+
+## How a color becomes a variable
+
+Shiki returns a resolved color per token, but binding a variable needs a role
+name like `syntax/keyword`. All eight Pierre variants share one scope table and
+differ only in resolved color, so the plugin always tokenizes with `pierre-dark`
+as a probe — its 18 `syntax/*` colors are all distinct, where the tritanopia
+variants collapse five of them into one — looks the role up by that color, and
+binds by name. Figma then resolves the color for whichever mode is active, which
+is why there is no theme picker in the UI.
+
+The lookup table is built from `@pierre/theme`'s committed
+`figma/semantic/dark.json`, so it regenerates with the variables it describes.
+See [`src/shared/roleIndex.ts`](src/shared/roleIndex.ts) for the resolution
+order and the collisions it has to break.
+
+## Development
+
+```bash
+moonx diffs-highlight:dev --ignore-ci-checks  # rebuild both realms on change
+moonx diffs-highlight:test
+moonx diffs-highlight:typecheck
+```
+
+Figma reloads the plugin from disk each run, so a rebuild takes effect the next
+time you run it — no re-import needed.
+
+The two realms build separately because Figma requires different shapes:
+`dist/code.js` is a single IIFE for the sandbox that owns the `figma` API, and
+`dist/ui.html` is one document with its script and styles inlined, since the
+iframe loads no external resources. Shiki lives in the UI realm; the sandbox
+only applies bindings.
+
+Carrying all 235 grammars makes `dist/ui.html` about 8 MB. That is inherent —
+nothing can be fetched at runtime, so every grammar has to be in the file — and
+it costs little in practice, since a grammar is only parsed into a registry when
+a language is picked: the panel loads in roughly 200 ms and a first highlight
+takes about 350 ms, later ones well under 100 ms. Minifying was measured at a
+10% saving, not worth the unreadable output, because the bulk is grammar data
+rather than code.
+
+`test/highlight.test.ts` runs every one of those grammars through the JavaScript
+regex engine, which is the check that matters here: the sandbox cannot load
+WebAssembly, so a grammar that needs Oniguruma would fail in Figma with no other
+warning. All 235 pass today, and the sweep is most of the suite's ~12s runtime.

packages/diffs-highlight/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "Diffs Highlight",
+  "api": "1.0.0",
+  "main": "dist/code.js",
+  "ui": "dist/ui.html",
+  "editorType": ["figma"],
+  "documentAccess": "dynamic-page",
+  "networkAccess": {
+    "allowedDomains": ["none"]
+  }
+}

packages/diffs-highlight/moon.yml

@@ -0,0 +1,37 @@
+$schema: 'https://moonrepo.dev/schemas/project.json'
+
+# A Figma plugin, not an npm package, so there is no `publishable` tag and no
+# tsdown build: the two Vite passes emit exactly the two files manifest.json
+# points at (dist/code.js for the sandbox, dist/ui.html for the iframe).
+language: 'typescript'
+layer: 'application'
+
+tasks:
+  # Two passes because the realms need different output shapes: the sandbox is a
+  # bare IIFE with no DOM, the UI is one HTML file with its JS and CSS inlined.
+  build:
+    script:
+      'vite build --config vite.config.code.ts && vite build --config
+      vite.config.ui.ts'
+    deps:
+      - '^:build'
+    inputs:
+      - 'src/**/*'
+      - 'ui.html'
+      - 'vite.config.*.ts'
+      - 'tsconfig.json'
+    outputs:
+      - 'dist'
+
+  # Both realms watched in parallel; `wait` keeps the task alive until both
+  # exit. Figma still needs the plugin re-run to pick up a rebuild.
+  dev:
+    script:
+      'vite build --config vite.config.code.ts --watch & vite build --config
+      vite.config.ui.ts --watch & wait'
+    deps:
+      - '^:build'
+    options:
+      cache: false
+      persistent: true
+      runInCI: 'skip'

packages/diffs-highlight/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@pierre/diffs-highlight",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Diffs Highlight, a Figma plugin that binds Pierre syntax variables to code in text layers",
+  "license": "apache-2.0",
+  "author": "Pierre Computer <support@pierre.co>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pierrecomputer/pierre.git",
+    "directory": "packages/diffs-highlight"
+  },
+  "type": "module",
+  "dependencies": {
+    "@pierre/theme": "workspace:*",
+    "@shikijs/core": "catalog:",
+    "@shikijs/engine-javascript": "catalog:",
+    "@shikijs/langs": "catalog:",
+    "shiki": "catalog:"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "catalog:",
+    "@types/bun": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-singlefile": "catalog:"
+  }
+}