@poveste/plugin-tailwind 0.6.0 → 0.7.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Guillaume Chau (original "histoire" project)
+Copyright (c) 2026 Sorin Gitlan (poveste fork)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,17 +1,34 @@
 {
   "name": "@poveste/plugin-tailwind",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Poveste plugin that renders a Tailwind design system as a story",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-plugin-tailwind"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "histoire",
+    "storybook",
+    "component-playground",
+    "component-explorer",
+    "stories",
+    "styleguide",
+    "design-system",
+    "vite",
+    "tailwind",
+    "tailwindcss",
+    "design-tokens",
+    "plugin"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -22,24 +39,30 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "rimraf dist && tsc -d",
-    "watch": "tsc -d -w --sourceMap",
-    "test": "vitest run",
-    "test:dev": "vitest"
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "peerDependencies": {
-    "poveste": "workspace:^"
+    "poveste": "^0.7.0"
   },
   "dependencies": {
-    "@poveste/shared": "workspace:*",
-    "pathe": "^1.1.2"
+    "pathe": "^1.1.2",
+    "@poveste/shared": "0.7.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
-    "poveste": "workspace:*",
-    "typescript": "catalog:",
-    "vite": "catalog:",
-    "vitest": "catalog:"
+    "typescript": "5.6.3",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10",
+    "poveste": "0.7.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -d",
+    "watch": "tsc -d -w --sourceMap",
+    "test": "vitest run",
+    "test:dev": "vitest"
   }
-}
+}

package/src/index.spec.ts

@@ -1,41 +0,0 @@
-import { mkdtempSync, writeFileSync } from 'node:fs'
-import { tmpdir } from 'node:os'
-import { join } from 'node:path'
-import { describe, expect, it } from 'vitest'
-import { isTailwindEntry } from './index.js'
-
-function cssFile(contents: string) {
-  const dir = mkdtempSync(join(tmpdir(), 'poveste-tw-'))
-  const file = join(dir, 'entry.css')
-  writeFileSync(file, contents)
-  return file
-}
-
-describe('isTailwindEntry', () => {
-  it('accepts a Tailwind import', () => {
-    expect(isTailwindEntry(cssFile(`@import 'tailwindcss';`))).toBe(true)
-    expect(isTailwindEntry(cssFile(`@import "tailwindcss";`))).toBe(true)
-    expect(isTailwindEntry(cssFile(`@import 'tailwindcss/theme' layer(theme);`))).toBe(true)
-  })
-
-  it('accepts a theme block', () => {
-    expect(isTailwindEntry(cssFile('@theme {\n  --color-brand: red;\n}'))).toBe(true)
-  })
-
-  it('rejects a stylesheet that merely imports something', () => {
-    // The case this exists for. `examples/sveltekit` has no Tailwind at all, and
-    // its `src/app.css` opens with a font import — enough to satisfy any test
-    // looser than this one, and it was getting a Design System group and a
-    // Tailwind story rendering Tailwind's own defaults.
-    expect(isTailwindEntry(cssFile(`@import '@fontsource/fira-mono';\n\n:root { --pure-white: #fff }`))).toBe(false)
-  })
-
-  it('rejects a name that only looks like Tailwind', () => {
-    expect(isTailwindEntry(cssFile('.tailwindcss { color: red }'))).toBe(false)
-    expect(isTailwindEntry(cssFile('/* @import tailwindcss was here */'))).toBe(false)
-  })
-
-  it('rejects a file it cannot read', () => {
-    expect(isTailwindEntry(join(tmpdir(), 'poveste-tw-does-not-exist.css'))).toBe(false)
-  })
-})

package/src/index.ts

@@ -1,765 +0,0 @@
-import type { Plugin, PluginApiBase } from '@poveste/shared'
-import fs from 'node:fs'
-import path from 'pathe'
-import { getInjectedImport } from 'poveste'
-
-/**
- * The first of `fileNames` that exists and satisfies `accept`, searching `cwd`
- * and then upwards.
- *
- * `accept` is not a convenience: every name below is an ordinary one, so a
- * near-miss in the same directory would otherwise shadow the real entrypoint
- * sitting behind it in the list.
- */
-function findUp(cwd: string, fileNames: string[], accept: (filePath: string) => boolean): string | null {
-  let { root } = path.parse(cwd)
-  let dir = cwd
-
-  // On Windows this is `C:` and needs the trailing slash to terminate.
-  if (root[1] === ':' && root[2] === undefined) {
-    root += '/'
-  }
-
-  while (dir !== root) {
-    for (const fileName of fileNames) {
-      const searchPath = path.join(dir, fileName)
-
-      if (fs.existsSync(searchPath) && accept(searchPath)) {
-        return searchPath
-      }
-    }
-
-    dir = path.dirname(dir)
-  }
-
-  return null
-}
-
-export interface TailwindTokensOptions {
-  /**
-   * Path to the CSS entrypoint that imports Tailwind and declares `@theme`.
-   * Tailwind v4 is CSS-first, so the design tokens are read from CSS rather
-   * than from a JS config. Auto-detected when omitted.
-   */
-  cssFile?: string
-}
-
-const CSS_ENTRY_CANDIDATES = [
-  'src/style.css',
-  'src/styles.css',
-  'src/main.css',
-  'src/index.css',
-  'src/app.css',
-  'src/assets/main.css',
-  'src/assets/style.css',
-  'src/assets/css/main.css',
-  // Nuxt conventions
-  'app/assets/css/main.css',
-  'assets/css/main.css',
-  // Next.js conventions
-  'styles/globals.css',
-  'app/globals.css',
-  'style.css',
-  'styles.css',
-]
-
-/**
- * Whether a stylesheet is a Tailwind entrypoint, rather than merely a file with
- * one of the names Tailwind entrypoints tend to have.
- *
- * Every name in `CSS_ENTRY_CANDIDATES` is an ordinary one — `src/app.css`,
- * `styles.css` — so matching on the name alone hands the whole feature to
- * projects that have never used Tailwind: a `Design System` group inserted into
- * their tree, and a story rendering Tailwind's own defaults as if it were their
- * design system.
- *
- * Both markers are Tailwind v4, which is what this plugin reads: the theme comes
- * from CSS custom properties, so a v3 project using `@tailwind base` would be
- * accepted here and then produce nothing.
- */
-export function isTailwindEntry(filePath: string) {
-  let source: string
-
-  try {
-    source = fs.readFileSync(filePath, 'utf8')
-  }
-  catch {
-    return false
-  }
-
-  // `@import 'tailwindcss'`, `"tailwindcss/theme"`, and the `layer(…)` and
-  // `source(…)` forms that follow the specifier. Deliberately not a bare
-  // `@import` test — the file that prompted this imports a font.
-  return /@import\s+["']tailwindcss(?:\/[^"']*)?["']/.test(source)
-    || /@theme\b/.test(source)
-}
-
-export function HstTailwind(options: TailwindTokensOptions = {}): Plugin {
-  // An explicit `cssFile` is the caller saying so, and is taken at their word.
-  const tailwindCssFile = options.cssFile ?? findUp(process.cwd(), CSS_ENTRY_CANDIDATES, isTailwindEntry)
-
-  async function generate(api: PluginApiBase) {
-    try {
-      await api.fs.ensureDir(api.pluginTempDir)
-      await api.fs.emptyDir(api.pluginTempDir)
-      api.moduleLoader.clearCache()
-      await api.fs.writeFile(api.path.resolve(api.pluginTempDir, 'style.css'), css)
-      const theme = await loadTailwindTheme(api, tailwindCssFile)
-      const storyFile = api.path.resolve(api.pluginTempDir, 'Tailwind.story.js')
-      await api.fs.writeFile(storyFile, storyTemplate({ theme }))
-      api.addStoryFile(storyFile)
-    }
-    catch (e) {
-      api.error(e.stack ?? e.message)
-    }
-  }
-
-  return {
-    name: 'tailwind-tokens',
-
-    config(config) {
-      if (tailwindCssFile) {
-        // Add 'design-system' group
-        if (!config.tree) {
-          config.tree = {}
-        }
-        if (!config.tree.groups) {
-          config.tree.groups = []
-        }
-        if (!config.tree.groups.some(g => g.id === 'design-system')) {
-          let index = 0
-          // After 'top' group
-          const topIndex = config.tree.groups.findIndex(g => g.id === 'top')
-          if (topIndex > -1) {
-            index = topIndex + 1
-          }
-          // Insert group
-          config.tree.groups.splice(index, 0, {
-            id: 'design-system',
-            title: 'Design System',
-          })
-        }
-      }
-    },
-
-    async onDev(api, onCleanup) {
-      if (tailwindCssFile) {
-        await generate(api)
-
-        const watcher = api.watcher.watch(tailwindCssFile)
-          .on('change', () => generate(api))
-          .on('add', () => generate(api))
-        onCleanup(() => {
-          watcher.close()
-        })
-      }
-    },
-
-    async onBuild(api) {
-      if (tailwindCssFile) {
-        await generate(api)
-      }
-    },
-  }
-}
-
-/**
- * Tailwind v4 keeps its theme as flat CSS custom properties rather than a
- * resolved JS config (`resolveConfig` is gone). Load the design system from the
- * project's CSS entrypoint and reshape its variables into the grouped structure
- * the story template renders.
- */
-/**
- * Resolve a stylesheet referenced from CSS. A bare package specifier resolves
- * to the JS entry, so its `style` field is used instead — that is how
- * `@import 'tailwindcss'` reaches `tailwindcss/index.css`.
- */
-async function resolveStylesheet(api: PluginApiBase, id: string, importBase: string) {
-  const { createRequire } = await import('node:module')
-  const require = createRequire(`${importBase}/`)
-
-  if (id.startsWith('.')) {
-    return api.path.resolve(importBase, id)
-  }
-  if (id.endsWith('.css')) {
-    return require.resolve(id)
-  }
-  const packageJsonPath = require.resolve(`${id}/package.json`)
-  const packageJson = JSON.parse(await api.fs.readFile(packageJsonPath, 'utf8'))
-  return api.path.resolve(api.path.dirname(packageJsonPath), packageJson.style ?? 'index.css')
-}
-
-async function loadTailwindTheme(api: PluginApiBase, cssFile: string) {
-  const { __unstable__loadDesignSystem } = await import('tailwindcss')
-
-  const base = api.path.dirname(cssFile)
-  const designSystem = await __unstable__loadDesignSystem(
-    await api.fs.readFile(cssFile, 'utf8'),
-    {
-      base,
-      loadStylesheet: async (id: string, importBase: string) => {
-        const resolved = await resolveStylesheet(api, id, importBase)
-        return {
-          path: resolved,
-          base: api.path.dirname(resolved),
-          content: await api.fs.readFile(resolved, 'utf8'),
-        }
-      },
-    },
-  )
-
-  const vars = new Map<string, string>(
-    [...designSystem.theme.entries()].map(([key, entry]: [string, any]) => [key, entry.value]),
-  )
-
-  /** All values in a `--namespace-*` group, keyed by their remainder. */
-  function group(namespace: string, exclude?: RegExp) {
-    const out: Record<string, string> = {}
-    const prefix = `${namespace}-`
-    for (const [key, value] of vars) {
-      if (!key.startsWith(prefix)) continue
-      if (exclude?.test(key)) continue
-      out[key.slice(prefix.length)] = value
-    }
-    return out
-  }
-
-  /** Colours are rendered as shade sets: `red-500` -> `{ red: { 500: … } }`. */
-  function colors() {
-    const out: Record<string, any> = {}
-    for (const [key, value] of Object.entries(group('--color'))) {
-      const match = key.match(/^(.*)-(\d+)$/)
-      if (match) {
-        out[match[1]] ??= {}
-        out[match[1]][match[2]] = value
-      }
-      else {
-        out[key] = value
-      }
-    }
-    return out
-  }
-
-  // v4 generates the spacing scale on demand from a single `--spacing` base,
-  // so the conventional steps are reconstructed here for display.
-  const SPACING_STEPS = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
-  function spacing() {
-    const unit = vars.get('--spacing') ?? '0.25rem'
-    // Multiply out rather than emitting `calc(0.25rem * 4)`, so the story shows
-    // the resolved length the way the v3 resolved config did.
-    const [, rawAmount, cssUnit] = unit.trim().match(/^([\d.]+)([a-z%]*)$/i) ?? []
-    const amount = Number(rawAmount)
-    const out: Record<string, string> = {}
-    for (const step of SPACING_STEPS) {
-      if (step === 0) {
-        out['0'] = '0px'
-      }
-      else {
-        out[String(step)] = Number.isFinite(amount)
-          ? `${Number((amount * step).toFixed(4))}${cssUnit}`
-          : `calc(${unit} * ${step})`
-      }
-    }
-    return out
-  }
-
-  // Fractions and keywords have no theme variables in v4 — they are static
-  // utilities — but they belong in the sizing scales the story lists.
-  const SIZING_EXTRAS: Record<string, string> = {
-    'auto': 'auto',
-    'full': '100%',
-    'min': 'min-content',
-    'max': 'max-content',
-    'fit': 'fit-content',
-    'px': '1px',
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-  }
-
-  const palette = colors()
-  const scale = spacing()
-
-  return {
-    backgroundColor: palette,
-    textColor: palette,
-    borderColor: palette,
-    padding: scale,
-    margin: scale,
-    width: { ...scale, ...SIZING_EXTRAS, screen: '100vw' },
-    height: { ...scale, ...SIZING_EXTRAS, screen: '100vh' },
-    fontSize: group('--text', /--line-height$|--letter-spacing$|--font-weight$/),
-    fontWeight: group('--font-weight'),
-    fontFamily: group('--font', /^--font-weight-/),
-    letterSpacing: group('--tracking'),
-    lineHeight: group('--leading'),
-    dropShadow: group('--drop-shadow'),
-    borderRadius: group('--radius'),
-    // v4 has no border-width namespace; these are the built-in static utilities.
-    borderWidth: { DEFAULT: '1px', 0: '0px', 2: '2px', 4: '4px', 8: '8px' },
-  }
-}
-
-// No `import 'poveste-style'`: the story renders in a sandbox realm, where the
-// app stylesheet is @scope'd away from story markup anyway — it only added
-// ~100 KB of chrome CSS to every sandbox of every book using this plugin (#219).
-// The swatches style themselves from the local stylesheet below.
-function storyTemplate(tailwindConfig: any) {
-  return `
-import './style.css'
-import { createApp, h, markRaw, ref } from ${getInjectedImport('@poveste/vendors/vue')}
-import {
-  HstColorShades,
-  HstTokenList,
-  HstTokenGrid,
-  HstText,
-  HstTextarea,
-  HstNumber,
-} from ${getInjectedImport('@poveste/controls')}
-
-const config = markRaw(${JSON.stringify(tailwindConfig, null, 2)})
-const search = ref('')
-const sampleText = ref('Cat sit like bread eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap mrow cat cat moo moo lick ears lick paws')
-const fontSize = ref(16)
-
-function mountApp ({ el, state, onUnmount }, render) {
-  Object.assign(state, {
-    search,
-    sampleText,
-    fontSize,
-  })
-
-  const app = createApp({
-    render,
-  })
-  app.mount(el)
-
-  onUnmount(() => {
-    app.unmount()
-  })
-}
-
-export default {
-  id: 'tailwind',
-  title: 'Tailwind',
-  group: 'design-system',
-  icon: 'mdi:tailwind',
-  responsiveDisabled: true,
-  layout: { type: 'single', iframe: false },
-  variants: [
-    {
-      id: 'background-color',
-      title: 'Background Color',
-      icon: 'carbon:color-palette',
-      onMount: (api) => mountApp(api, () => Object.entries(config.theme.backgroundColor).map(([key, shades]) => h(HstColorShades, {
-        key,
-        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => '' + (shade === 'DEFAULT' ? \`bg-\${key}\` : \`bg-\${key}-\${shade}\`),
-        search: search.value,
-      }, ({ color}) => h('div', {
-        class: '__pvt-shade',
-        style: {
-          backgroundColor: color.replace('<alpha-value>', 1),
-        },
-      })))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstText, {
-          title: 'Filter...',
-          modelValue: search.value,
-          'onUpdate:modelValue': value => { search.value = value },
-        }),
-      ]),
-    },
-    {
-      id: 'text-color',
-      title: 'Text Color',
-      icon: 'carbon:text-color',
-      onMount: (api) => mountApp(api, () => Object.entries(config.theme.textColor).map(([key, shades]) => h(HstColorShades, {
-        key,
-        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => '' + (shade === 'DEFAULT' ? \`text-\${key}\` : \`text-\${key}-\${shade}\`),
-        search: search.value,
-      }, ({ color}) => h('div', {
-        class: '__pvt-shade __pvt-text',
-        style: {
-          color: color.replace('<alpha-value>', 1),
-        },
-      }, 'Aa')))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstText, {
-          title: 'Filter...',
-          modelValue: search.value,
-          'onUpdate:modelValue': value => { search.value = value },
-        }),
-      ]),
-    },
-    {
-      id: 'border-color',
-      title: 'Border Color',
-      icon: 'carbon:color-palette',
-      onMount: (api) => mountApp(api, () => Object.entries(config.theme.borderColor).map(([key, shades]) => h(HstColorShades, {
-        key,
-        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => '' + (shade === 'DEFAULT' ? \`border-\${key}\` : \`border-\${key}-\${shade}\`),
-        search: search.value,
-      }, ({ color}) => h('div', {
-        class: '__pvt-shade __pvt-border',
-        style: {
-          borderColor: color.replace('<alpha-value>', 1),
-        },
-      })))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstText, {
-          title: 'Filter...',
-          modelValue: search.value,
-          'onUpdate:modelValue': value => { search.value = value },
-        }),
-      ]),
-    },
-    {
-      id: 'padding',
-      title: 'Padding',
-      icon: 'carbon:area',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.padding,
-        getName: key => \`p-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-padding',
-        style: {
-          padding: token.value,
-        },
-      }, [
-        h('div', {
-          class: '__pvt-padding-box',
-        }),
-      ]))),
-    },
-    {
-      id: 'margin',
-      title: 'Margin',
-      icon: 'carbon:area',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.margin,
-        getName: key => \`m-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-margin',
-      }, [
-        h('div', {
-          class: '__pvt-margin-box',
-          style: {
-            margin: token.value,
-          },
-        }),
-      ]))),
-    },
-    {
-      id: 'font-size',
-      title: 'Font Size',
-      icon: 'carbon:text-font',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.fontSize,
-        getName: key => \`text-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-truncate',
-        style: {
-          fontSize: Array.isArray(token.value) ? token.value[0] : token.value,
-          ...(Array.isArray(token.value) && typeof token.value[1] === "object" ? token.value[1] : { lineHeight: token.value[1] })
-        },
-      }, sampleText.value))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstTextarea, {
-          title: 'Sample text',
-          modelValue: sampleText.value,
-          'onUpdate:modelValue': value => { sampleText.value = value },
-          rows: 5,
-        }),
-      ]),
-    },
-    {
-      id: 'font-weight',
-      title: 'Font Weight',
-      icon: 'carbon:text-font',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.fontWeight,
-        getName: key => \`font-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-truncate',
-        style: {
-          fontWeight: token.value,
-          fontSize: \`\${fontSize.value}px\`,
-        },
-      }, sampleText.value))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstTextarea, {
-          title: 'Sample text',
-          modelValue: sampleText.value,
-          'onUpdate:modelValue': value => { sampleText.value = value },
-          rows: 5,
-        }),
-        h(HstNumber, {
-          title: 'Font size',
-          modelValue: fontSize.value,
-          'onUpdate:modelValue': value => { fontSize.value = value },
-          min: 1,
-        }),
-      ]),
-    },
-    {
-      id: 'font-family',
-      title: 'Font Family',
-      icon: 'carbon:text-font',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.fontFamily,
-        getName: key => \`font-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-truncate',
-        style: {
-          fontFamily: token.value,
-          fontSize: \`\${fontSize.value}px\`,
-        },
-      }, sampleText.value))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstTextarea, {
-          title: 'Sample text',
-          modelValue: sampleText.value,
-          'onUpdate:modelValue': value => { sampleText.value = value },
-          rows: 5,
-        }),
-        h(HstNumber, {
-          title: 'Font size',
-          modelValue: fontSize.value,
-          'onUpdate:modelValue': value => { fontSize.value = value },
-          min: 1,
-        }),
-      ]),
-    },
-    {
-      id: 'letter-spacing',
-      title: 'Letter Spacing',
-      icon: 'carbon:text-font',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.letterSpacing,
-        getName: key => \`tracking-\${key}\`,
-      }, ({ token }) => h('div', {
-        class: '__pvt-truncate',
-        style: {
-          letterSpacing: token.value,
-          fontSize: \`\${fontSize.value}px\`,
-        },
-      }, sampleText.value))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstTextarea, {
-          title: 'Sample text',
-          modelValue: sampleText.value,
-          'onUpdate:modelValue': value => { sampleText.value = value },
-          rows: 5,
-        }),
-        h(HstNumber, {
-          title: 'Font size',
-          modelValue: fontSize.value,
-          'onUpdate:modelValue': value => { fontSize.value = value },
-          min: 1,
-        }),
-      ]),
-    },
-    {
-      id: 'line-height',
-      title: 'Line Height',
-      icon: 'carbon:text-font',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.lineHeight,
-        getName: key => \`leading-\${key}\`,
-      }, ({ token }) => h('div', {
-        style: {
-          lineHeight: token.value,
-        },
-      }, sampleText.value))),
-      onMountControls: (api) => mountApp(api, () => [
-        h(HstTextarea, {
-          title: 'Sample text',
-          modelValue: sampleText.value,
-          'onUpdate:modelValue': value => { sampleText.value = value },
-          rows: 5,
-        }),
-        // @TODO select font size
-      ]),
-    },
-    {
-      id: 'drop-shadow',
-      title: 'Drop Shadow',
-      icon: 'carbon:shape-except',
-      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
-        tokens: config.theme.dropShadow,
-        getName: key => '' + (key === 'DEFAULT' ? 'drop-shadow' : \`drop-shadow-\${key}\`),
-        colSize: 180,
-      }, ({ token }) => h('div', {
-        class: '__pvt-drop-shadow',
-        style: {
-          filter: \`\${(Array.isArray(token.value) ? token.value : [token.value]).map(v => \`drop-shadow(\${v})\`).join(' ')}\`,
-        },
-      }))),
-    },
-    {
-      id: 'border-radius',
-      title: 'Border Radius',
-      icon: 'carbon:condition-wait-point',
-      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
-        tokens: config.theme.borderRadius,
-        getName: key => '' + (key === 'DEFAULT' ? 'rounded' : \`rounded-\${key}\`),
-        colSize: 180,
-      }, ({ token }) => h('div', {
-        class: '__pvt-border-radius',
-        style: {
-          borderRadius: token.value,
-        },
-      }))),
-    },
-    {
-      id: 'border-width',
-      title: 'Border Width',
-      icon: 'carbon:checkbox',
-      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
-        tokens: config.theme.borderWidth,
-        getName: key => '' + (key === 'DEFAULT' ? 'border' : \`border-\${key}\`),
-        colSize: 180,
-      }, ({ token }) => h('div', {
-        class: '__pvt-border-width',
-        style: {
-          borderWidth: token.value,
-        },
-      }))),
-    },
-    {
-      id: 'width',
-      title: 'Width',
-      icon: 'carbon:pan-horizontal',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.width,
-        getName: key => '' + (key === 'DEFAULT' ? 'w' : \`w-\${key}\`),
-      }, ({ token }) => h('div', {
-        class: '__pvt-width',
-      }, [
-        h('div', {
-          class: '__pvt-width-box',
-          style: {
-            width: token.value,
-          },
-        }),
-      ]))),
-    },
-    {
-      id: 'height',
-      title: 'Height',
-      icon: 'carbon:pan-vertical',
-      onMount: (api) => mountApp(api, () => h(HstTokenList, {
-        tokens: config.theme.height,
-        getName: key => '' + (key === 'DEFAULT' ? 'h' : \`h-\${key}\`),
-      }, ({ token }) => h('div', {
-        class: '__pvt-height',
-        style: {
-          height: token.value,
-        },
-      }))),
-    },
-    {
-      id: 'full-config',
-      title: 'Full Config',
-      icon: 'carbon:code',
-      onMount: (api) => mountApp(api, () => h('pre', JSON.stringify(config, null, 2))),
-    },
-  ],
-}`
-}
-
-const css = `.__pvt-shade {
-  height: 80px;
-  border-radius: 4px;
-}
-
-.__pvt-text {
-  font-size: 4rem;
-  display: flex;
-  align-items: flex-end;
-}
-
-.__pvt-border {
-  border-style: solid;
-  border-width: 2px;
-}
-
-.__pvt-padding {
-  background-color: rgb(113 113 122 / 0.1);
-  width: min-content;
-}
-
-.__pvt-margin {
-  border: dashed 1px rgb(113 113 122 / 0.5);
-  width: min-content;
-}
-
-.__pvt-padding-box,
-.__pvt-margin-box {
-  width: 5rem;
-  height: 5rem;
-  background-color: rgb(113 113 122 / 0.5);
-}
-
-.__pvt-padding,
-.__pvt-padding-box,
-.__pvt-margin,
-.__pvt-margin-box,
-.__pvt-drop-shadow {
-  border-radius: 4px;
-}
-
-.__pvt-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.__pvt-drop-shadow {
-  width: 8rem;
-  height: 8rem;
-  background: white;
-  margin-bottom: 0.5rem;
-}
-
-.__pvt-drop-shadow {
-  background: #4e4e57;
-}
-
-.__pvt-border-radius {
-  width: 8rem;
-  height: 8rem;
-  background-color: rgb(113 113 122 / 0.5);
-}
-
-.__pvt-border-width {
-  width: 8rem;
-  height: 8rem;
-  border-color: rgb(113 113 122 / 0.5);
-  background-color: rgb(113 113 122 / 0.1);
-}
-
-.__pvt-width {
-  background-color: rgb(113 113 122 / 0.1);
-}
-
-.__pvt-width-box,
-.__pvt-height {
-  background-color: rgb(113 113 122 / 0.5);
-}
-
-.__pvt-width-box {
-  height: 5rem;
-}`
-
-/** @deprecated Use `HstTailwind`. Kept for books that named the old builtin. */
-export const tailwindTokens = HstTailwind

package/tsconfig.json

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    // Volar
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "rootDir": "src",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "alwaysStrict": true,
-    // Strict
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "outDir": "dist",
-    "removeComments": false,
-    "sourceMap": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "preserveWatchOutput": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "generated/**/*",
-    "dist/**/*",
-    "src/**/*.spec.ts"
-  ]
-}