npm - @inkdropapp/theme-dev-helpers - Versions diffs - 0.3.6 → 0.3.8 - Mend

@inkdropapp/theme-dev-helpers 0.3.6 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/.github/workflows/CI.yaml +1 -1
package/.oxfmtrc.json +8 -0
package/.oxlintrc.json +29 -0
package/README.md +11 -0
package/bin/dev-server +14 -4
package/index.html +10 -12
package/package.json +27 -23
package/pnpm-workspace.yaml +3 -0
package/src/dev-server/color-tokens.tsx +15 -13
package/src/dev-server/components.tsx +86 -54
package/src/dev-server/get-css-variables.ts +3 -4
package/src/dev-server/index.tsx +0 -1
package/src/dev-server/nav.tsx +3 -3
package/src/dev-server/variables.tsx +12 -12
package/src/dev-server.css +1 -2
package/src/dev-server.tsx +26 -26
package/src/generate-palette.ts +33 -48
package/src/palette.test.ts +73 -0
package/src/palette.ts +78 -0
package/tsconfig.json +7 -10
package/vite.config.ts +12 -6
package/bun.lockb +0 -0

package/.github/workflows/CI.yaml CHANGED Viewed

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Use Bun 🥟
         uses: oven-sh/setup-bun@v2

package/.oxfmtrc.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "sortImports": false,
+  "sortPackageJson": true
+}

package/.oxlintrc.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc", "react"],
+  "settings": {
+    "react": {
+      "version": "19.2.7"
+    }
+  },
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {
+    "typescript/no-explicit-any": "off",
+    "typescript/ban-ts-comment": "off",
+    "typescript/no-this-alias": "off",
+    "typescript/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "no-useless-escape": "off",
+    "prefer-const": "error",
+    "no-unused-vars": "off"
+  },
+  "ignorePatterns": ["node_modules/**"]
+}

package/README.md CHANGED Viewed

@@ -45,3 +45,14 @@ It provides a simple UI to preview your theme with hot-reloading.
 dev-server
 ```
+## Development
+Dependencies are managed with [pnpm](https://pnpm.io/), and [Bun](https://bun.sh/) is the runtime used to run the CLIs and tests.
+```sh
+pnpm install      # install dependencies
+pnpm format       # format with oxfmt
+pnpm lint         # lint with oxlint
+pnpm typecheck    # type-check with tsc
+pnpm test         # run unit tests (bun test)
+```

package/bin/dev-server CHANGED Viewed

@@ -1,6 +1,16 @@
-#!/usr/bin/env bash
+#!/usr/bin/env bun
-SCRIPT_PATH="$(readlink -f "${BASH_SOURCE[0]}")"
-SCRIPT_DIR="$(cd "$(dirname "${SCRIPT_PATH}")" && pwd)"
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { exec } from 'child_process';
+import { createServer } from 'vite'
-bunx --bun vite "$SCRIPT_DIR/.."
+const scriptPath = fileURLToPath(import.meta.url);
+const scriptDir = dirname(scriptPath);
+const server = await createServer({
+  root: join(scriptDir, "..")
+})
+await server.listen()
+server.printUrls()

package/index.html CHANGED Viewed

@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Inkdrop theme dev tool</title>
+  </head>
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Inkdrop theme dev tool</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/dev-server.tsx"></script>
-</body>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/dev-server.tsx"></script>
+  </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,41 +1,45 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
-  "version": "0.3.6",
-  "type": "module",
+  "version": "0.3.8",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
     "inkdrop",
     "markdown"
   ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "license": "MIT",
+  "author": "Takuya Matsuyama<t@inkdrop.app>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/inkdropapp/theme-dev-helpers.git"
   },
-  "author": "Takuya Matsuyama<t@inkdrop.app>",
-  "license": "MIT",
   "bin": {
-    "generate-palette": "./bin/generate-palette",
-    "dev-server": "./bin/dev-server"
+    "dev-server": "./bin/dev-server",
+    "generate-palette": "./bin/generate-palette"
+  },
+  "type": "module",
+  "scripts": {
+    "format": "oxfmt",
+    "lint": "oxlint",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
   },
   "dependencies": {
-    "@inkdropapp/base-ui-theme": "^0.3.1",
-    "@inkdropapp/css": "^0.4.2",
-    "@vitejs/plugin-react": "^4.3.2",
-    "commander": "^12.1.0",
-    "puppeteer": "^23.5.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.8"
+    "@inkdropapp/base-ui-theme": "^0.7.3",
+    "@inkdropapp/css": "^0.6.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "commander": "^15.0.0",
+    "puppeteer": "^25.1.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.17.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "devDependencies": {
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "typescript-eslint": "^8.7.0",
-    "prettier": "^3.3.3"
+    "@types/bun": "1.3.14",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "oxfmt": "0.55.0",
+    "oxlint": "1.70.0"
   }
 }

package/pnpm-workspace.yaml ADDED Viewed

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: set this to true or false
+  puppeteer: set this to true or false

package/src/dev-server/color-tokens.tsx CHANGED Viewed

@@ -6,20 +6,23 @@ export const ColorTokensPage = () => {
   return (
     <>
       <h2>Color Tokens</h2>
-      <div className='variable-list'>
+      <div className="variable-list">
         {Object.keys(cssVariables)
-          .filter(name => name.startsWith('--color') || name.startsWith('--hsl'))
-          .map(variableName => {
+          .filter((name) => name.startsWith('--color') || name.startsWith('--hsl'))
+          .map((variableName) => {
             return (
-              <div key={variableName} className='variable-item'>
-                <div className='color-box' style={{
-                  background: variableName.startsWith('--hsl') ? `hsl(var(${variableName}))` : `var(${variableName})`
-                }}></div>
-                <div className='data'>
-                  <div className='variable-name'>{variableName}</div>
-                  <div className='variable-value'>
-                    {cssVariables[variableName]}
-                  </div>
+              <div key={variableName} className="variable-item">
+                <div
+                  className="color-box"
+                  style={{
+                    background: variableName.startsWith('--hsl')
+                      ? `hsl(var(${variableName}))`
+                      : `var(${variableName})`
+                  }}
+                ></div>
+                <div className="data">
+                  <div className="variable-name">{variableName}</div>
+                  <div className="variable-value">{cssVariables[variableName]}</div>
                 </div>
               </div>
             )
@@ -28,4 +31,3 @@ export const ColorTokensPage = () => {
     </>
   )
 }

package/src/dev-server/components.tsx CHANGED Viewed

@@ -5,7 +5,6 @@ export const ComponentsPage = () => {
     <>
       <h2>Components</h2>
       <div className="component-list">
         <div className="component-item">
           <h3>Link</h3>
           <div>
@@ -21,12 +20,21 @@ export const ComponentsPage = () => {
               <button className="ui basic button">Basic Button</button>
               <button className="ui primary button">Primary Button</button>
               <button className="ui negative button">Negative Button</button>
-              <button className="ui tiny circular icon button plugin-uninstall-button "
-                title="Uninstall">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"
-                  name="bin-1" className="svg-icon streamline bin-1 ">
+              <button
+                className="ui tiny circular icon button plugin-uninstall-button "
+                title="Uninstall"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="14"
+                  height="14"
+                  name="bin-1"
+                  className="svg-icon streamline bin-1 "
+                >
                   <defs>
-                    <style>{`
+                    <style>
+                      {`
                       .bin-1_svg__a {
                         fill: none;
                         stroke: currentColor;
@@ -39,7 +47,8 @@ export const ComponentsPage = () => {
                   </defs>
                   <path
                     d="M1.5 4.5h21M14.25 1.5h-4.5A1.5 1.5 0 0 0 8.25 3v1.5h7.5V3a1.5 1.5 0 0 0-1.5-1.5M9.75 17.25v-7.5M14.25 17.25v-7.5M18.865 21.124A1.5 1.5 0 0 1 17.37 22.5H6.631a1.5 1.5 0 0 1-1.495-1.376L3.75 4.5h16.5Z"
-                    className="bin-1_svg__a"></path>
+                    className="bin-1_svg__a"
+                  ></path>
                 </svg>
               </button>
             </div>
@@ -47,27 +56,35 @@ export const ComponentsPage = () => {
         </div>
         <div className="component-item">
-          <h3 className='ui header'>Message</h3>
+          <h3 className="ui header">Message</h3>
           <div>
             <div className="ui message">
-              <div className="header">
-                Changes in Service
-              </div>
-              <p>We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
+              <div className="header">Changes in Service</div>
+              <p>
+                We just updated our privacy policy here to better service our customers. We
+                recommend reviewing the changes.
               </p>
             </div>
             <div className="ui info message">
-              <div className="header">
-                Info
-              </div>
-              <p>Plugins add new functionality or provide new look to Inkdrop. You can activate or deactivate them at any time.
-                Read&nbsp;<a href="https://docs.inkdrop.app/reference/extend-with-plugins">the manual&nbsp;<svg
-                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" name="expand-6"
-                  className="svg-icon streamline expand-6 inline">
-                  <defs>
-                    <style>{`
+              <div className="header">Info</div>
+              <p>
+                Plugins add new functionality or provide new look to Inkdrop. You can activate or
+                deactivate them at any time. Read&nbsp;
+                <a href="https://docs.inkdrop.app/reference/extend-with-plugins">
+                  the manual&nbsp;
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    height="1em"
+                    name="expand-6"
+                    className="svg-icon streamline expand-6 inline"
+                  >
+                    <defs>
+                      <style>
+                        {`
                       .expand-6_svg__a {
                         fill: none;
                         stroke: currentColor;
@@ -76,37 +93,37 @@ export const ComponentsPage = () => {
                         stroke-width: 1.5px
                       }
                     `}
-                    </style>
-                  </defs>
-                  <path
-                    d="M23.251 7.498V.748h-6.75M23.251.748l-15 15M11.251 5.248h-9a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5v-9"
-                    className="expand-6_svg__a"></path>
-                </svg></a> to learn more.</p>
+                      </style>
+                    </defs>
+                    <path
+                      d="M23.251 7.498V.748h-6.75M23.251.748l-15 15M11.251 5.248h-9a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5v-9"
+                      className="expand-6_svg__a"
+                    ></path>
+                  </svg>
+                </a>{' '}
+                to learn more.
+              </p>
             </div>
             <div className="ui positive message">
-              <div className="header">
-                You are eligible for a reward
-              </div>
-              <p>Go to your <b>special offers</b> page to see now.</p>
+              <div className="header">You are eligible for a reward</div>
+              <p>
+                Go to your <b>special offers</b> page to see now.
+              </p>
             </div>
             <div className="ui negative message">
-              <div className="header">
-                We're sorry we can't apply that discount
-              </div>
-              <p>That offer has expired
-              </p>
+              <div className="header">We're sorry we can't apply that discount</div>
+              <p>That offer has expired</p>
             </div>
             <div className="ui warning message">
-              <div className="header">
-                Changes in Service
-              </div>
-              <p>We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
+              <div className="header">Changes in Service</div>
+              <p>
+                We just updated our privacy policy here to better service our customers. We
+                recommend reviewing the changes.
               </p>
             </div>
           </div>
         </div>
@@ -160,8 +177,8 @@ export const ComponentsPage = () => {
         <div className="component-item">
           <h3>Input</h3>
           <div>
-            <div className='ui form'>
-              <div className='field'>
+            <div className="ui form">
+              <div className="field">
                 <input type="text" placeholder="Search keybindings" defaultValue="" />
               </div>
             </div>
@@ -190,13 +207,30 @@ export const ComponentsPage = () => {
           <h3>Dropdown</h3>
           <div>
             <div className="ui selection dropdown active focus-outline">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" name="dropdown-chevron" className="svg-icon streamline dropdown-chevron dropdown icon">
-                <path fill="currentColor" d="M11.96 19.318a2.09 2.09 0 0 1-1.663-.782L.617 7.682C.031 6.9.128 5.726.911 5.14c.782-.587 1.857-.587 2.444.195l8.41 9.583c.097.098.195.098.39 0l8.41-9.583c.684-.782 1.76-.88 2.542-.195s.88 1.76.195 2.542l-.098.098-9.582 10.854c-.391.39-1.076.684-1.662.684"></path>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="1em"
+                height="1em"
+                name="dropdown-chevron"
+                className="svg-icon streamline dropdown-chevron dropdown icon"
+              >
+                <path
+                  fill="currentColor"
+                  d="M11.96 19.318a2.09 2.09 0 0 1-1.663-.782L.617 7.682C.031 6.9.128 5.726.911 5.14c.782-.587 1.857-.587 2.444.195l8.41 9.583c.097.098.195.098.39 0l8.41-9.583c.684-.782 1.76-.88 2.542-.195s.88 1.76.195 2.542l-.098.098-9.582 10.854c-.391.39-1.076.684-1.662.684"
+                ></path>
               </svg>
-              <div className="text">
-                Inbox
-              </div>
-              <div className="menu visible" style={{ display: 'block', overflow: 'auto', opacity: 1, height: 'auto', willChange: 'transform' }}>
+              <div className="text">Inbox</div>
+              <div
+                className="menu visible"
+                style={{
+                  display: 'block',
+                  overflow: 'auto',
+                  opacity: 1,
+                  height: 'auto',
+                  willChange: 'transform'
+                }}
+              >
                 <div className="item " data-value="book:Bk5Ivk0T">
                   <span style={{ paddingLeft: 0 }}>App Development</span>
                 </div>
@@ -207,9 +241,7 @@ export const ComponentsPage = () => {
             </div>
           </div>
         </div>
       </div>
     </>
-  );
-};
+  )
+}

package/src/dev-server/get-css-variables.ts CHANGED Viewed

@@ -1,12 +1,11 @@
 export function getCSSVariables() {
-  const computedStyles = document.body.computedStyleMap();
-  const variables: Record<string, string> = {};
+  const computedStyles = document.body.computedStyleMap()
+  const variables: Record<string, string> = {}
   for (const [prop, val] of computedStyles) {
     if (prop.startsWith('--')) {
-      variables[prop] = val.toString();
+      variables[prop] = val.toString()
     }
   }
   return variables
 }

package/src/dev-server/index.tsx CHANGED Viewed

@@ -9,4 +9,3 @@ export const Index = () => {
     </div>
   )
 }

package/src/dev-server/nav.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom'
 export const Nav = () => {
   return (
@@ -7,5 +7,5 @@ export const Nav = () => {
       <Link to="/tokens">Color Tokens</Link>
       <Link to="/components">Components</Link>
     </div>
-  );
-};
+  )
+}

package/src/dev-server/variables.tsx CHANGED Viewed

@@ -6,18 +6,19 @@ export const VariablesPage = () => {
   return (
     <>
       <h2>Variables</h2>
-      <div className='variable-list'>
-        {themeVariableNames.map(variableName => {
+      <div className="variable-list">
+        {themeVariableNames.map((variableName) => {
           return (
-            <div key={variableName} className='variable-item'>
-              <div className='color-box' style={{
-                background: `var(${variableName})`
-              }}></div>
-              <div className='data'>
-                <div className='variable-name'>{variableName}</div>
-                <div className='variable-value'>
-                  {cssVariables[variableName]}
-                </div>
+            <div key={variableName} className="variable-item">
+              <div
+                className="color-box"
+                style={{
+                  background: `var(${variableName})`
+                }}
+              ></div>
+              <div className="data">
+                <div className="variable-name">{variableName}</div>
+                <div className="variable-value">{cssVariables[variableName]}</div>
               </div>
             </div>
           )
@@ -26,4 +27,3 @@ export const VariablesPage = () => {
     </>
   )
 }

package/src/dev-server.css CHANGED Viewed

@@ -17,7 +17,7 @@ h2 {
   justify-content: center;
   gap: 0.6rem;
-  &>.variable-item {
+  & > .variable-item {
     display: flex;
     flex-direction: row;
     gap: 0.6em;
@@ -38,7 +38,6 @@ h2 {
       }
     }
   }
 }
 .nav {

package/src/dev-server.tsx CHANGED Viewed

@@ -1,45 +1,45 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { Index } from "./dev-server/index";
-import "./dev-server.css";
-import "@inkdropapp/css/reset.css";
-import "@inkdropapp/css/tokens.css";
-import "@inkdropapp/base-ui-theme/styles/theme.css";
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { Index } from './dev-server/index'
+import './dev-server.css'
+import '@inkdropapp/css/reset.css'
+import '@inkdropapp/css/tokens.css'
+import '@inkdropapp/base-ui-theme/styles/theme.css'
-import { ColorTokensPage } from "./dev-server/color-tokens";
-import { VariablesPage } from "./dev-server/variables";
-import { ComponentsPage } from "./dev-server/components";
+import { ColorTokensPage } from './dev-server/color-tokens'
+import { VariablesPage } from './dev-server/variables'
+import { ComponentsPage } from './dev-server/components'
 const themePackageName = import.meta.env.THEME_NAME || ''
 const themeAppearance = import.meta.env.THEME_APPEARANCE
 const baseProjectPath = import.meta.env.BASE_PROJECT_PATH || ''
 const styleSheets: string[] = import.meta.env.STYLE_SHEETS || []
-const cssFiles = styleSheets.map(ss => `${baseProjectPath}/styles/${ss}`)
+const cssFiles = styleSheets.map((ss) => `${baseProjectPath}/styles/${ss}`)
 cssFiles.forEach((file) => {
-  import(file);
-});
+  import(/* @vite-ignore */ file)
+})
-document.body.classList.add(`theme-${themePackageName}`);
+document.body.classList.add(`theme-${themePackageName}`)
 if (themeAppearance) {
-  document.body.classList.add(`${themeAppearance}-mode`);
+  document.body.classList.add(`${themeAppearance}-mode`)
 }
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: '/',
     element: <Index />,
     children: [
-      { path: "", element: <VariablesPage /> },
-      { path: "tokens", element: <ColorTokensPage /> },
-      { path: "components", element: <ComponentsPage /> },
-    ],
-  },
-]);
+      { path: '', element: <VariablesPage /> },
+      { path: 'tokens', element: <ColorTokensPage /> },
+      { path: 'components', element: <ComponentsPage /> }
+    ]
+  }
+])
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <RouterProvider router={router} />
-  </StrictMode>,
-);
+  </StrictMode>
+)

package/src/generate-palette.ts CHANGED Viewed

@@ -1,11 +1,12 @@
-import puppeteer from 'puppeteer';
-import { writeFile } from 'fs/promises';
-import path from 'path';
+import puppeteer from 'puppeteer'
+import { writeFile } from 'fs/promises'
+import path from 'path'
 import { pathToFileURL } from 'url'
-import { Command } from 'commander';
-import packageJson from '../package.json';
+import { Command } from 'commander'
+import packageJson from '../package.json'
+import { buildPreviewHTML, mapThemeVariables } from './palette'
-const program = new Command();
+const program = new Command()
 // Define CLI options and help using commander
 program
@@ -14,74 +15,58 @@ program
   .version(packageJson.version)
   .option('-a, --appearance <light/dark>', 'Force the UI appearance ("light" or "dark")')
   .option('-o, --output <path>', 'Output file path (default: ./palette.json)', './palette.json')
-  .parse(process.argv);
+  .parse(process.argv)
 // Parse options
-const options = program.opts();
-const outputPath = options.output as string;
-const appearance = options.appearance as 'light' | 'dark' | undefined;
+const options = program.opts()
+const outputPath = options.output as string
+const appearance = options.appearance as 'light' | 'dark' | undefined
 // Function to extract theme CSS variables
 async function extractPalette(outputPath: string) {
-  const themePackageJson = (await import(path.join(process.cwd(), 'package.json')))
-  const themeVariableNames: string[] = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
+  const themePackageJson = await import(path.join(process.cwd(), 'package.json'))
+  const themeVariableNames: string[] = (
+    await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)
+  ).default
-  const browser = await puppeteer.launch();
-  const page = await browser.newPage();
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
   page
-    .on('console', message => {
+    .on('console', (message) => {
       if (message.type() === 'error') {
         console.error(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`)
       }
     })
-    .on('pageerror', ({ message }) => console.error(message));
+    .on('pageerror', (error) => console.error(error instanceof Error ? error.message : error))
-  const themeCSSFiles = (themePackageJson.styleSheets?.map((filePath: string) => (`<link rel="stylesheet" href="styles/${filePath}" />`)) || []).join('\n')
-  const baseUrl = pathToFileURL(process.cwd()).toString() + '/';
-  const content = `<!DOCTYPE html>
-  <html>
-    <head>
-      <base href="${baseUrl}" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/reset.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tokens.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tags.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/base-ui-theme/styles/theme.css" />
-      ${themeCSSFiles}
-    </head>
-    <body class="${themePackageJson.name} ${typeof appearance !== 'undefined' ? appearance + '-mode' : ''}">
-      <h1>Hello</h1>
-    </body>
-  </html>
-  `;
+  const baseUrl = pathToFileURL(process.cwd()).toString() + '/'
+  const content = buildPreviewHTML(themePackageJson, baseUrl, appearance)
-  await page.goto(baseUrl);
-  await page.setContent(content);
+  await page.goto(baseUrl)
+  await page.setContent(content)
   // Extract CSS variables
   const computedCSSVariables = await page.$eval('body', (body) => {
-    const computedStyles = body.computedStyleMap();
-    const variables: Record<string, string> = {};
+    const computedStyles = body.computedStyleMap()
+    const variables: Record<string, string> = {}
     for (const [prop, val] of computedStyles) {
       if (prop.startsWith('--')) {
-        variables[prop] = val.toString();
+        variables[prop] = val.toString()
       }
     }
-    return variables;
-  });
+    return variables
+  })
-  const themeCSSVariables = themeVariableNames.reduce((variables, name) => {
-    variables[name] = computedCSSVariables[name];
-    return variables;
-  }, {} as Record<string, string>);
+  const themeCSSVariables = mapThemeVariables(themeVariableNames, computedCSSVariables)
   // Write to the output file
-  const outputFilePath = path.resolve(outputPath);
-  await writeFile(outputFilePath, JSON.stringify(themeCSSVariables, null, 2));
+  const outputFilePath = path.resolve(outputPath)
+  await writeFile(outputFilePath, JSON.stringify(themeCSSVariables, null, 2))
-  await browser.close();
+  await browser.close()
 }
 extractPalette(outputPath)
   .then(() => console.log('Palette extraction complete!'))
-  .catch(err => console.error('Error extracting palette:', err));
+  .catch((err) => console.error('Error extracting palette:', err))

package/src/palette.test.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { describe, expect, test } from 'bun:test'
+import { buildPreviewHTML, mapThemeVariables } from './palette'
+describe('buildPreviewHTML', () => {
+  const baseUrl = 'file:///themes/acme/'
+  test('emits the base href so relative links resolve', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    expect(html).toContain(`<base href="${baseUrl}" />`)
+  })
+  test('always includes the Inkdrop base stylesheets', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    expect(html).toContain('node_modules/@inkdropapp/css/reset.css')
+    expect(html).toContain('node_modules/@inkdropapp/css/tokens.css')
+    expect(html).toContain('node_modules/@inkdropapp/css/tags.css')
+    expect(html).toContain('node_modules/@inkdropapp/base-ui-theme/styles/theme.css')
+  })
+  test('links each declared theme stylesheet under styles/', () => {
+    const html = buildPreviewHTML(
+      { name: 'acme', styleSheets: ['base.css', 'syntax.css'] },
+      baseUrl
+    )
+    expect(html).toContain('<link rel="stylesheet" href="styles/base.css" />')
+    expect(html).toContain('<link rel="stylesheet" href="styles/syntax.css" />')
+  })
+  test('omits theme stylesheet links when none are declared', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    expect(html).not.toContain('href="styles/')
+  })
+  test('sets the body class to the theme name', () => {
+    const html = buildPreviewHTML({ name: 'acme-dark' }, baseUrl)
+    expect(html).toContain('<body class="acme-dark">')
+  })
+  test('appends an appearance-mode class when an appearance is forced', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, 'dark')
+    expect(html).toContain('<body class="acme dark-mode">')
+  })
+  test('adds no appearance class when appearance is omitted', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    expect(html).not.toContain('-mode')
+  })
+})
+describe('mapThemeVariables', () => {
+  test('maps each declared name to its computed value, ignoring extras', () => {
+    const result = mapThemeVariables(['--accent', '--bg'], {
+      '--accent': '#f00',
+      '--bg': '#fff',
+      '--extra': '#000'
+    })
+    expect(result).toEqual({ '--accent': '#f00', '--bg': '#fff' })
+  })
+  test('preserves the declaration order of the variable names', () => {
+    const result = mapThemeVariables(['--b', '--a'], { '--a': '1', '--b': '2' })
+    expect(Object.keys(result)).toEqual(['--b', '--a'])
+  })
+  test('leaves variables absent from the computed set undefined', () => {
+    const result = mapThemeVariables(['--missing'], { '--accent': '#f00' })
+    expect(result['--missing']).toBeUndefined()
+  })
+  test('returns an empty object when no names are declared', () => {
+    expect(mapThemeVariables([], { '--accent': '#f00' })).toEqual({})
+  })
+})

package/src/palette.ts ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * Pure helpers for palette extraction, kept free of puppeteer / fs / process
+ * so they can be unit-tested directly. The orchestration that drives a headless
+ * browser lives in `generate-palette.ts`.
+ */
+/** Theme metadata read from a theme package's `package.json`. */
+export interface ThemePackage {
+  name?: string
+  styleSheets?: string[]
+}
+export type ThemeAppearance = 'light' | 'dark'
+/**
+ * Builds the standalone HTML document that is loaded into a headless browser to
+ * compute a theme's CSS custom properties.
+ *
+ * It pulls in Inkdrop's base CSS plus the theme's own stylesheets so that the
+ * computed style of `<body>` resolves every themed variable. A `<base href>` is
+ * emitted so the relative `node_modules/` and `styles/` links resolve against
+ * the theme project root.
+ *
+ * @param theme - The theme package's metadata (`name`, `styleSheets`).
+ * @param baseUrl - File URL used as the document `<base href>`.
+ * @param appearance - Optional forced appearance; adds a `<appearance>-mode`
+ *   body class when provided.
+ * @returns The full HTML document as a string.
+ */
+export function buildPreviewHTML(
+  theme: ThemePackage,
+  baseUrl: string,
+  appearance?: ThemeAppearance
+): string {
+  const themeCSSLinks = (theme.styleSheets ?? [])
+    .map((filePath) => `<link rel="stylesheet" href="styles/${filePath}" />`)
+    .join('\n')
+  const bodyClass = [theme.name, appearance && `${appearance}-mode`].filter(Boolean).join(' ')
+  return `<!DOCTYPE html>
+  <html>
+    <head>
+      <base href="${baseUrl}" />
+      <link rel="stylesheet" href="node_modules/@inkdropapp/css/reset.css" />
+      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tokens.css" />
+      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tags.css" />
+      <link rel="stylesheet" href="node_modules/@inkdropapp/base-ui-theme/styles/theme.css" />
+      ${themeCSSLinks}
+    </head>
+    <body class="${bodyClass}">
+      <h1>Hello</h1>
+    </body>
+  </html>
+  `
+}
+/**
+ * Projects the raw computed CSS variables onto the theme's declared variable
+ * names, preserving their declaration order. Names absent from `computed` map
+ * to `undefined` (and are therefore dropped by `JSON.stringify`).
+ *
+ * @param variableNames - The theme's declared CSS variable names.
+ * @param computed - All `--*` custom properties read from the rendered body.
+ * @returns A record of `variableName -> computed value`.
+ */
+export function mapThemeVariables(
+  variableNames: string[],
+  computed: Record<string, string>
+): Record<string, string> {
+  return variableNames.reduce(
+    (acc, name) => {
+      acc[name] = computed[name]
+      return acc
+    },
+    {} as Record<string, string>
+  )
+}

package/tsconfig.json CHANGED Viewed

@@ -2,27 +2,24 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "types": ["bun"],
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

package/vite.config.ts CHANGED Viewed

@@ -5,11 +5,8 @@ import { readFile } from 'fs/promises'
 const baseProjectPath = process.env.BASE_PROJECT_PATH || process.cwd()
 console.log('Base project path:', baseProjectPath)
 const packageJson = JSON.parse(
-  await readFile(
-    `${baseProjectPath}/package.json`,
-    { encoding: 'utf-8' }
-  )
-);
+  await readFile(`${baseProjectPath}/package.json`, { encoding: 'utf-8' })
+)
 const { styleSheets } = packageJson
 // https://vitejs.dev/config/
@@ -30,11 +27,20 @@ export default defineConfig({
     'import.meta.env.STYLE_SHEETS': JSON.stringify(styleSheets)
   },
   server: {
+    host: '127.0.0.1',
+    port: Number(process.env.PORT) || 5180,
+    strictPort: false,
     fs: {
       strict: false
     }
   },
   optimizeDeps: {
-    include: ['react', 'react-dom', 'react-dom/client', 'react/jsx-dev-runtime', 'react/jsx-runtime']
+    include: [
+      'react',
+      'react-dom',
+      'react-dom/client',
+      'react/jsx-dev-runtime',
+      'react/jsx-runtime'
+    ]
   }
 })

package/bun.lockb DELETED Viewed

Binary file