@inkdropapp/theme-dev-helpers 0.2.1 → 0.3.0

package/Session.vim

@@ -0,0 +1,249 @@
+let SessionLoad = 1
+let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1
+let v:this_session=expand("<sfile>:p")
+silent only
+silent tabonly
+cd ~/Developments/inkdrop/theme-dev-helpers
+if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
+  let s:wipebuf = bufnr('%')
+endif
+let s:shortmess_save = &shortmess
+if &shortmess =~ 'A'
+  set shortmess=aoOA
+else
+  set shortmess=aoO
+endif
+badd +24 package.json
+badd +2 src/dev-server.tsx
+badd +18 tsconfig.json
+badd +31 src/dev-server.css
+badd +9 ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/index.tsx
+badd +9 ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/color-tokens.tsx
+badd +63 src/generate-palette.ts
+badd +3 src/dev-server/css-variables.ts
+argglobal
+%argdel
+$argadd package.json
+edit package.json
+let s:save_splitbelow = &splitbelow
+let s:save_splitright = &splitright
+set splitbelow splitright
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+wincmd _ | wincmd |
+vsplit
+5wincmd h
+wincmd w
+wincmd w
+wincmd w
+wincmd _ | wincmd |
+split
+1wincmd k
+wincmd w
+wincmd w
+wincmd w
+let &splitbelow = s:save_splitbelow
+let &splitright = s:save_splitright
+wincmd t
+let s:save_winminheight = &winminheight
+let s:save_winminwidth = &winminwidth
+set winminheight=0
+set winheight=1
+set winminwidth=0
+set winwidth=1
+wincmd =
+argglobal
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+let s:l = 2 - ((1 * winheight(0) + 36) / 73)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 2
+normal! 03|
+wincmd w
+argglobal
+if bufexists(fnamemodify("tsconfig.json", ":p")) | buffer tsconfig.json | else | edit tsconfig.json | endif
+if &buftype ==# 'terminal'
+  silent file tsconfig.json
+endif
+balt package.json
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+1
+normal! zo
+2
+normal! zo
+let s:l = 14 - ((13 * winheight(0) + 36) / 73)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 14
+normal! 06|
+wincmd w
+argglobal
+if bufexists(fnamemodify("src/dev-server.tsx", ":p")) | buffer src/dev-server.tsx | else | edit src/dev-server.tsx | endif
+if &buftype ==# 'terminal'
+  silent file src/dev-server.tsx
+endif
+balt package.json
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+23
+normal! zo
+31
+normal! zo
+let s:l = 28 - ((27 * winheight(0) + 36) / 73)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 28
+normal! 049|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/Developments/inkdrop/theme-dev-helpers/src/dev-server/index.tsx", ":p")) | buffer ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/index.tsx | else | edit ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/index.tsx | endif
+if &buftype ==# 'terminal'
+  silent file ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/index.tsx
+endif
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+4
+normal! zo
+6
+normal! zo
+8
+normal! zo
+9
+normal! zo
+let s:l = 13 - ((12 * winheight(0) + 18) / 36)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 13
+normal! 027|
+wincmd w
+argglobal
+if bufexists(fnamemodify("~/Developments/inkdrop/theme-dev-helpers/src/dev-server/color-tokens.tsx", ":p")) | buffer ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/color-tokens.tsx | else | edit ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/color-tokens.tsx | endif
+if &buftype ==# 'terminal'
+  silent file ~/Developments/inkdrop/theme-dev-helpers/src/dev-server/color-tokens.tsx
+endif
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+let s:l = 9 - ((8 * winheight(0) + 18) / 36)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 9
+normal! 0
+wincmd w
+argglobal
+if bufexists(fnamemodify("src/dev-server.css", ":p")) | buffer src/dev-server.css | else | edit src/dev-server.css | endif
+if &buftype ==# 'terminal'
+  silent file src/dev-server.css
+endif
+balt src/dev-server.tsx
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+14
+normal! zo
+20
+normal! zo
+let s:l = 31 - ((30 * winheight(0) + 36) / 73)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 31
+normal! 0
+wincmd w
+argglobal
+if bufexists(fnamemodify("src/generate-palette.ts", ":p")) | buffer src/generate-palette.ts | else | edit src/generate-palette.ts | endif
+if &buftype ==# 'terminal'
+  silent file src/generate-palette.ts
+endif
+balt package.json
+setlocal fdm=expr
+setlocal fde=v:lua.require'lazyvim.util'.ui.foldexpr()
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=99
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+25
+normal! zo
+33
+normal! zo
+62
+normal! zo
+65
+normal! zo
+let s:l = 63 - ((48 * winheight(0) + 36) / 73)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 63
+normal! 0
+wincmd w
+5wincmd w
+wincmd =
+tabnext 1
+if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0 && getbufvar(s:wipebuf, '&buftype') isnot# 'terminal'
+  silent exe 'bwipe ' . s:wipebuf
+endif
+unlet! s:wipebuf
+set winheight=1 winwidth=20
+let &shortmess = s:shortmess_save
+let &winminheight = s:save_winminheight
+let &winminwidth = s:save_winminwidth
+let s:sx = expand("<sfile>:p:r")."x.vim"
+if filereadable(s:sx)
+  exe "source " . fnameescape(s:sx)
+endif
+let &g:so = s:so_save | let &g:siso = s:siso_save
+set hlsearch
+nohlsearch
+doautoall SessionLoadPost
+unlet SessionLoad
+" vim: set ft=vim :

package/index.html

@@ -0,0 +1,16 @@
+<!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>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/dev-server.tsx"></script>
+</body>
+
+</html>

package/package.json

@@ -1,23 +1,41 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
-  "version": "0.2.1",
+  "version": "0.3.0",
+  "type": "module",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
     "inkdrop",
     "markdown"
   ],
   "scripts": {
+    "dev-server": "bunx --bun vite",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "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"
   },
   "dependencies": {
-    "@inkdropapp/base-ui-theme": "^0.3.0",
+    "@inkdropapp/base-ui-theme": "^0.3.1",
     "@inkdropapp/css": "^0.4.2",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "commander": "^12.1.0",
-    "puppeteer": "^23.5.3"
+    "puppeteer": "^23.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.3"
   }
 }

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

@@ -0,0 +1,31 @@
+import { getCSSVariables } from './get-css-variables'
+
+export const ColorTokensPage = () => {
+  const cssVariables = getCSSVariables()
+
+  return (
+    <>
+      <h2>Color Tokens</h2>
+      <div className='variable-list'>
+        {Object.keys(cssVariables)
+          .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>
+              </div>
+            )
+          })}
+      </div>
+    </>
+  )
+}
+

package/src/dev-server/components.css

@@ -0,0 +1,5 @@
+.component-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}

package/src/dev-server/components.tsx

@@ -0,0 +1,215 @@
+import './components.css'
+
+export const ComponentsPage = () => {
+  return (
+    <>
+      <h2>Components</h2>
+      <div className="component-list">
+
+        <div className="component-item">
+          <h3>Link</h3>
+          <div>
+            <a href="https://www.inkdrop.app/">https://www.inkdrop.app/</a>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Button</h3>
+          <div>
+            <div>
+              <button className="ui button">Button</button>
+              <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 ">
+                  <defs>
+                    <style>{`
+                      .bin-1_svg__a {
+                        fill: none;
+                        stroke: currentColor;
+                        stroke-linecap: round;
+                        stroke-linejoin: round;
+                        stroke-width: 1.5px
+                      }
+                      `}
+                    </style>
+                  </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>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <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.
+              </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>{`
+                      .expand-6_svg__a {
+                        fill: none;
+                        stroke: currentColor;
+                        stroke-linecap: round;
+                        stroke-linejoin: round;
+                        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>
+            </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>
+
+            <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>
+
+            <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.
+              </p>
+            </div>
+
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Segment</h3>
+          <div>
+            <div className="plugin-list-item-view ui segments">
+              <div className="ui segment ">
+                <div className="header">
+                  <span className="name">dev-tools</span>
+                  <span className="spacer"></span>
+                  <div className="additional-info">
+                    <span className="version">v0.1.0</span>
+                  </div>
+                </div>
+                <div className="description">Developer tools for Inkdrop</div>
+              </div>
+              <div className="ui secondary clearing segment">
+                <div className="repository">
+                  <a href="https://github.com/inkdropapp/inkdrop-dev-tools">
+                    inkdropapp/inkdrop-dev-tools
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Checkbox and Toggle</h3>
+          <div>
+            <div className="ui checkbox">
+              <input type="checkbox" name="dev-tools" defaultChecked={true} />
+              <label></label>
+            </div>
+            <div className="ui checkbox">
+              <input type="checkbox" name="dev-tools" defaultChecked={false} />
+              <label></label>
+            </div>
+            <div className="ui toggle checkbox">
+              <input type="checkbox" name="dev-tools" defaultChecked={true} />
+              <label></label>
+            </div>
+            <div className="ui toggle checkbox">
+              <input type="checkbox" name="dev-tools" defaultChecked={false} />
+              <label></label>
+            </div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Input</h3>
+          <div>
+            <div className='ui form'>
+              <div className='field'>
+                <input type="text" placeholder="Search keybindings" defaultValue="" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Tabular Menu</h3>
+          <div>
+            <div className="ui tabular menu">
+              <a className="item active">Popular</a>
+              <a className="item ">New</a>
+              <a className="item ">Themes</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <h3>Divider</h3>
+          <div>
+            <div className="ui divider"></div>
+          </div>
+        </div>
+
+        <div className="component-item">
+          <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>
+              <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>
+                <div className="item " data-value="book:MiCiVxN8">
+                  <span style={{ paddingLeft: 24 }}>Ideas</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    </>
+  );
+};

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

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

package/src/dev-server/index.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom'
+import { Nav } from './nav'
+
+export const Index = () => {
+  return (
+    <div className={`ui container`}>
+      <Nav />
+      <Outlet />
+    </div>
+  )
+}
+

package/src/dev-server/nav.tsx

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom";
+
+export const Nav = () => {
+  return (
+    <div className="nav">
+      <Link to="/">Variables</Link>
+      <Link to="/tokens">Color Tokens</Link>
+      <Link to="/components">Components</Link>
+    </div>
+  );
+};

package/src/dev-server/variables.tsx

@@ -0,0 +1,29 @@
+import themeVariableNames from '@inkdropapp/base-ui-theme/lib/variable-names.json'
+import { getCSSVariables } from './get-css-variables'
+
+export const VariablesPage = () => {
+  const cssVariables = getCSSVariables()
+  return (
+    <>
+      <h2>Variables</h2>
+      <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>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+

package/src/dev-server.css

@@ -0,0 +1,49 @@
+body {
+  background: var(--page-background);
+  color: var(--text-color);
+}
+
+#root {
+  padding: 2rem 0;
+}
+
+h2 {
+  text-align: center;
+}
+
+.variable-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  justify-content: center;
+  gap: 0.6rem;
+
+  &>.variable-item {
+    display: flex;
+    flex-direction: row;
+    gap: 0.6em;
+    align-items: center;
+
+    .color-box {
+      flex: 0 0 30px;
+      height: 30px;
+    }
+
+    .data {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .variable-name {
+        font-weight: bold;
+      }
+    }
+  }
+
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}

package/src/dev-server.tsx

@@ -0,0 +1,41 @@
+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 "@/styles/tokens.css";
+import "@/styles/theme.css";
+
+import { ColorTokensPage } from "./dev-server/color-tokens";
+import { VariablesPage } from "./dev-server/variables";
+import { ComponentsPage } from "./dev-server/components";
+
+// const cssFiles = [
+//   "@/styles/tokens.css",
+//   "@/styles/theme.css",
+// ];
+//
+// cssFiles.forEach((file) => {
+//   import(/* @vite-ignore */ file);
+// });
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Index />,
+    children: [
+      { path: "", element: <VariablesPage /> },
+      { path: "tokens", element: <ColorTokensPage /> },
+      { path: "components", element: <ComponentsPage /> },
+    ],
+  },
+]);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

package/src/generate-palette.ts

@@ -24,7 +24,7 @@ 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 = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
+  const themeVariableNames: string[] = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
 
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
@@ -61,7 +61,7 @@ async function extractPalette(outputPath: string) {
   // Extract CSS variables
   const computedCSSVariables = await page.$eval('body', (body) => {
     const computedStyles = body.computedStyleMap();
-    const variables = {};
+    const variables: Record<string, string> = {};
     for (const [prop, val] of computedStyles) {
       if (prop.startsWith('--')) {
         variables[prop] = val.toString();
@@ -73,7 +73,7 @@ async function extractPalette(outputPath: string) {
   const themeCSSVariables = themeVariableNames.reduce((variables, name) => {
     variables[name] = computedCSSVariables[name];
     return variables;
-  }, {});
+  }, {} as Record<string, string>);
 
   // Write to the output file
   const outputFilePath = path.resolve(outputPath);

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from 'url'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+const baseProjectPath = process.env.BASE_PROJECT_PATH || fileURLToPath(new URL('../..', import.meta.url))
+console.log('Base project path:', baseProjectPath)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: baseProjectPath
+      }
+    ]
+  },
+  server: {
+    fs: {
+      allow: ['src', 'node_modules', baseProjectPath]
+    }
+  }
+})