npm - tux-review - Versions diffs - 0.1.0 - Mend

tux-review 0.1.0

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 (60) hide show

package/README.md +67 -0
package/bin/tux.js +17 -0
package/client/tux-review.css +155 -0
package/client/tux-review.js +586 -0
package/package.json +59 -0
package/skills/tux-design-create.md +50 -0
package/skills/tux-design-incorporate.md +61 -0
package/skills/tux-design-install.md +56 -0
package/skills/tux-design-start-review.md +51 -0
package/skills/tux-design-stop-review.md +44 -0
package/skills/tux-feedback-delete.md +45 -0
package/skills/tux-feedback-export.md +47 -0
package/skills/tux-feedback-show.md +55 -0
package/skills/tux-live-create.md +50 -0
package/skills/tux-live-incorporate.md +62 -0
package/skills/tux-live-install.md +63 -0
package/skills/tux-live-start-review.md +47 -0
package/skills/tux-live-stop-review.md +46 -0
package/src/canonical.js +28 -0
package/src/cli.js +229 -0
package/src/config.js +72 -0
package/src/design.js +140 -0
package/src/errors.js +28 -0
package/src/feedback.js +289 -0
package/src/ids.js +57 -0
package/src/index.js +17 -0
package/src/live.js +261 -0
package/src/schema.js +77 -0
package/src/serve-main.js +42 -0
package/src/server.js +347 -0
package/src/store.js +72 -0
package/src/templates.js +44 -0
package/templates/angular/README.md +19 -0
package/templates/angular/angular.json +49 -0
package/templates/angular/package.json +25 -0
package/templates/angular/src/app/app.component.html +40 -0
package/templates/angular/src/app/app.component.ts +30 -0
package/templates/angular/src/index.html +11 -0
package/templates/angular/src/main.ts +4 -0
package/templates/angular/src/styles.css +11 -0
package/templates/angular/tsconfig.app.json +8 -0
package/templates/angular/tsconfig.json +11 -0
package/templates/react/README.md +18 -0
package/templates/react/index.html +12 -0
package/templates/react/package.json +18 -0
package/templates/react/src/App.jsx +80 -0
package/templates/react/src/main.jsx +6 -0
package/templates/react/src/styles.css +11 -0
package/templates/vanilla/README.md +22 -0
package/templates/vanilla/index.html +18 -0
package/templates/vanilla/package.json +6 -0
package/templates/vanilla/src/app.js +79 -0
package/templates/vanilla/src/styles.css +11 -0
package/templates/vue/README.md +18 -0
package/templates/vue/index.html +12 -0
package/templates/vue/package.json +17 -0
package/templates/vue/src/App.vue +61 -0
package/templates/vue/src/main.js +5 -0
package/templates/vue/src/styles.css +11 -0
package/templates/vue/vite.config.js +6 -0

package/templates/angular/src/app/app.component.html ADDED Viewed

@@ -0,0 +1,40 @@
+<nav data-tux-component="MainNav">
+  <a href="/" (click)="navigate('/', $event)">Home</a>
+  <a href="/products" (click)="navigate('/products', $event)">Products</a>
+  <a href="/checkout" (click)="navigate('/checkout', $event)">Checkout</a>
+</nav>
+<main>
+  @if (route === '/products') {
+    <h1>Products</h1>
+    <div data-tux-component="ProductTabs" [attr.data-tux-state-tab]="tab">
+      <div role="tablist">
+        @for (t of tabs; track t) {
+          <button role="tab" [attr.aria-selected]="tab === t" [attr.data-tab]="t" (click)="tab = t">{{ t }}</button>
+        }
+      </div>
+      <ul data-tux-component="ProductList" [style.display]="tab === 'featured' ? 'none' : ''">
+        @for (p of products; track p.id) {
+          <li data-tux-component="ProductCard" [attr.data-tux-instance]="p.id">
+            <span [attr.data-tux-id]="'product-name-' + p.id">{{ p.name }}</span>
+            <span [attr.data-tux-id]="'product-price-' + p.id" data-tux-component="PriceLabel">{{ p.price }}</span>
+          </li>
+        }
+      </ul>
+    </div>
+  } @else if (route === '/checkout') {
+    <h1>Checkout</h1>
+    <div data-tux-component="CheckoutActions">
+      <button data-tux-id="coupon-open" (click)="modalOpen = true">Add coupon</button>
+      <button data-tux-id="checkout-submit" data-tux-component="SubmitButton">Complete purchase</button>
+    </div>
+    @if (modalOpen) {
+      <div role="dialog" aria-modal="true" aria-label="Coupon" data-tux-component="CouponModal">
+        <p>Add a coupon code.</p>
+        <input data-tux-id="coupon-input" placeholder="Code" />
+        <button data-tux-id="coupon-apply" (click)="modalOpen = false">Apply</button>
+      </div>
+    }
+  } @else {
+    <h1>Home</h1>
+  }
+</main>

package/templates/angular/src/app/app.component.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  readonly tabs = ['all', 'featured'];
+  readonly products = [
+    { id: 'p1', name: 'Trail Shoes', price: '119 €' },
+    { id: 'p2', name: 'Rain Jacket', price: '89 €' },
+  ];
+  route = window.location.pathname;
+  tab = 'all';
+  modalOpen = false;
+  constructor() {
+    window.onpopstate = () => {
+      this.route = window.location.pathname;
+    };
+  }
+  navigate(href: string, event: Event): void {
+    event.preventDefault();
+    window.history.pushState(null, '', href);
+    this.route = href;
+  }
+}

package/templates/angular/src/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Checkout Design</title>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/templates/angular/src/main.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

package/templates/angular/src/styles.css ADDED Viewed

@@ -0,0 +1,11 @@
+/* Clickable design styles (minimal). */
+:root { font-family: system-ui, sans-serif; }
+body { margin: 0; color: #1e1e1e; }
+nav { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,.12); }
+main { padding: 20px; }
+[role=tablist] { display: flex; gap: 8px; margin-bottom: 12px; }
+[role=tab] { padding: 6px 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 999px; cursor: pointer; }
+[role=tab][aria-selected=true] { background: #569cd6; color: #fff; border-color: #569cd6; }
+li { margin: 8px 0; display: flex; gap: 12px; }
+[role=dialog] { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 20px; }
+button { font: inherit; }

package/templates/angular/tsconfig.app.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app"
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

package/templates/angular/tsconfig.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"]
+  }
+}

package/templates/react/README.md ADDED Viewed

@@ -0,0 +1,18 @@
+# checkout (react design)
+This design itself uses npm. Choose one TUX CLI: Node users run
+`npm install --save-dev tux-review` then `npx tux …`; Python users install
+`tux-review` with `pipx` or `pip` then run `tux …`. The TUX commands below are
+otherwise identical.
+```bash
+npm install
+# Node.js/npm TUX variant — serves the design with TUX review
+npx tux design start-review --foreground --dir .
+# Python/PyPI TUX variant — same command after Python installation
+tux design start-review --foreground --dir .
+# Alternative for either variant: npm run dev + <tux command> live start-review --url http://localhost:5173
+```

package/templates/react/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Checkout Design</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/templates/react/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "name": "tux-design",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react/src/App.jsx ADDED Viewed

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+const PRODUCTS = [
+  { id: 'p1', name: 'Trail Shoes', price: '119 €' },
+  { id: 'p2', name: 'Rain Jacket', price: '89 €' },
+];
+function ProductCard({ product }) {
+  return (
+    <li data-tux-component="ProductCard" data-tux-instance={product.id}>
+      <span data-tux-id={`product-name-${product.id}`}>{product.name}</span>
+      <span data-tux-id={`product-price-${product.id}`} data-tux-component="PriceLabel">
+        {product.price}
+      </span>
+    </li>
+  );
+}
+function CouponModal({ open, onClose }) {
+  if (!open) return null;
+  return (
+    <div role="dialog" aria-modal="true" aria-label="Coupon" data-tux-component="CouponModal">
+      <p>Add a coupon code.</p>
+      <input data-tux-id="coupon-input" placeholder="Code" />
+      <button data-tux-id="coupon-apply" onClick={onClose}>Apply</button>
+    </div>
+  );
+}
+export default function App() {
+  const [route, setRoute] = useState(window.location.pathname);
+  const [tab, setTab] = useState('all');
+  const [modalOpen, setModalOpen] = useState(false);
+  window.onpopstate = () => setRoute(window.location.pathname);
+  const navigate = (href) => (e) => {
+    e.preventDefault();
+    window.history.pushState(null, '', href);
+    setRoute(href);
+  };
+  return (
+    <>
+      <nav data-tux-component="MainNav">
+        <a href="/" onClick={navigate('/')}>Home</a>
+        <a href="/products" onClick={navigate('/products')}>Products</a>
+        <a href="/checkout" onClick={navigate('/checkout')}>Checkout</a>
+      </nav>
+      <main>
+        {route === '/products' && (
+          <>
+            <h1>Products</h1>
+            <div data-tux-component="ProductTabs" data-tux-state-tab={tab}>
+              <div role="tablist">
+                {['all', 'featured'].map((t) => (
+                  <button key={t} role="tab" aria-selected={tab === t} data-tab={t}
+                    onClick={() => setTab(t)}>{t}</button>
+                ))}
+              </div>
+              <ul data-tux-component="ProductList" style={tab === 'featured' ? { display: 'none' } : {}}>
+                {PRODUCTS.map((p) => <ProductCard key={p.id} product={p} />)}
+              </ul>
+            </div>
+          </>
+        )}
+        {route === '/checkout' && (
+          <>
+            <h1>Checkout</h1>
+            <div data-tux-component="CheckoutActions">
+              <button data-tux-id="coupon-open" onClick={() => setModalOpen(true)}>Add coupon</button>
+              <button data-tux-id="checkout-submit" data-tux-component="SubmitButton">Complete purchase</button>
+            </div>
+            <CouponModal open={modalOpen} onClose={() => setModalOpen(false)} />
+          </>
+        )}
+        {route === '/' && <h1>Home</h1>}
+      </main>
+    </>
+  );
+}

package/templates/react/src/main.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+createRoot(document.getElementById('root')).render(<App />);

package/templates/react/src/styles.css ADDED Viewed

@@ -0,0 +1,11 @@
+/* Clickable design styles (minimal). */
+:root { font-family: system-ui, sans-serif; }
+body { margin: 0; color: #1e1e1e; }
+nav { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,.12); }
+main { padding: 20px; }
+[role=tablist] { display: flex; gap: 8px; margin-bottom: 12px; }
+[role=tab] { padding: 6px 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 999px; cursor: pointer; }
+[role=tab][aria-selected=true] { background: #569cd6; color: #fff; border-color: #569cd6; }
+li { margin: 8px 0; display: flex; gap: 12px; }
+[role=dialog] { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 20px; }
+button { font: inherit; }

package/templates/vanilla/README.md ADDED Viewed

@@ -0,0 +1,22 @@
+# checkout (vanilla design)
+## Choose the TUX CLI
+Choose one variant; the commands are identical. Node.js users install TUX in
+this project with `npm install --save-dev tux-review` and run
+`npx tux …`. Python users install `tux-review` with `pipx install tux-review`
+(or `python -m pip install tux-review`) and run `tux …`. You do not need both.
+## Start the review
+From the project root (or this directory):
+```bash
+# Node.js/npm variant
+npx tux design start-review --foreground --dir .
+# Python/PyPI variant
+tux design start-review --foreground --dir .
+```
+Routes: `/`, `/products` (tabs), `/checkout` (modal).

package/templates/vanilla/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Checkout Design</title>
+  <link rel="stylesheet" href="src/styles.css">
+</head>
+<body>
+  <nav data-tux-component="MainNav">
+    <a href="/" data-tux-id="nav-home">Home</a>
+    <a href="/products" data-tux-id="nav-products">Products</a>
+    <a href="/checkout" data-tux-id="nav-checkout">Checkout</a>
+  </nav>
+  <main id="view"></main>
+  <script type="module" src="src/app.js"></script>
+</body>
+</html>

package/templates/vanilla/package.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "name": "tux-design",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Clickable design (vanilla) — review with: tux design start-review"
+}

package/templates/vanilla/src/app.js ADDED Viewed

@@ -0,0 +1,79 @@
+// Clickable design (vanilla SPA with History-API routing).
+const view = document.getElementById('view');
+const PRODUCTS = [
+  { id: 'p1', name: 'Trail Shoes', price: '119 €' },
+  { id: 'p2', name: 'Rain Jacket', price: '89 €' },
+];
+function productsPage() {
+  return `
+    <h1>Products</h1>
+    <div data-tux-component="ProductTabs" data-tux-state-tab="all">
+      <div role="tablist">
+        <button role="tab" aria-selected="true" data-tab="all">All</button>
+        <button role="tab" aria-selected="false" data-tab="featured">Featured</button>
+      </div>
+      <ul id="product-list" data-tux-component="ProductList">
+        ${PRODUCTS.map((p) => `
+          <li data-tux-component="ProductCard" data-tux-instance="${p.id}">
+            <span data-tux-id="product-name-${p.id}">${p.name}</span>
+            <span data-tux-id="product-price-${p.id}" data-tux-component="PriceLabel">${p.price}</span>
+          </li>`).join('')}
+      </ul>
+    </div>`;
+}
+function checkoutPage() {
+  return `
+    <h1>Checkout</h1>
+    <div data-tux-component="CheckoutActions">
+      <button data-tux-id="coupon-open">Add coupon</button>
+      <button data-tux-id="checkout-submit" data-tux-component="SubmitButton">Complete purchase</button>
+    </div>
+    <dialog id="coupon-modal" data-tux-component="CouponModal">
+      <p>Add a coupon code.</p>
+      <input data-tux-id="coupon-input" placeholder="Code">
+      <button data-tux-id="coupon-apply">Apply</button>
+    </dialog>`;
+}
+function homePage() {
+  return '<h1>Home</h1><p>Clickable TUX design.</p>';
+}
+function render() {
+  const route = location.pathname;
+  if (route === '/products') view.innerHTML = productsPage();
+  else if (route === '/checkout') view.innerHTML = checkoutPage();
+  else view.innerHTML = homePage();
+  bind();
+}
+function bind() {
+  view.querySelectorAll('[data-tab]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      btn.closest('[role=tablist]').querySelectorAll('[role=tab]').forEach((t) => {
+        t.setAttribute('aria-selected', String(t === btn));
+      });
+      const wrap = btn.closest('[data-tux-component]');
+      wrap.dataset.tuxStateTab = btn.dataset.tab;
+      const list = document.getElementById('product-list');
+      list.style.display = btn.dataset.tab === 'featured' ? 'none' : '';
+    });
+  });
+  const open = document.querySelector('[data-tux-id=coupon-open]');
+  const modal = document.getElementById('coupon-modal');
+  if (open && modal) open.addEventListener('click', () => modal.showModal());
+}
+document.addEventListener('click', (e) => {
+  const a = e.target.closest('a[href^="/"]');
+  if (!a) return;
+  e.preventDefault();
+  history.pushState(null, '', a.getAttribute('href'));
+  render();
+});
+window.addEventListener('popstate', render);
+render();

package/templates/vanilla/src/styles.css ADDED Viewed

@@ -0,0 +1,11 @@
+/* Clickable design styles (minimal). */
+:root { font-family: system-ui, sans-serif; }
+body { margin: 0; color: #1e1e1e; }
+nav { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,.12); }
+main { padding: 20px; }
+[role=tablist] { display: flex; gap: 8px; margin-bottom: 12px; }
+[role=tab] { padding: 6px 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 999px; cursor: pointer; }
+[role=tab][aria-selected=true] { background: #569cd6; color: #fff; border-color: #569cd6; }
+li { margin: 8px 0; display: flex; gap: 12px; }
+dialog { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 20px; }
+button { font: inherit; }

package/templates/vue/README.md ADDED Viewed

@@ -0,0 +1,18 @@
+# checkout (vue design)
+This design itself uses npm. Choose one TUX CLI: Node users run
+`npm install --save-dev tux-review` then `npx tux …`; Python users install
+`tux-review` with `pipx` or `pip` then run `tux …`. The TUX commands below are
+otherwise identical.
+```bash
+npm install
+# Node.js/npm TUX variant — serves the design with TUX review
+npx tux design start-review --foreground --dir .
+# Python/PyPI TUX variant — same command after Python installation
+tux design start-review --foreground --dir .
+# Alternative for either variant: npm run dev + <tux command> live start-review --url http://localhost:5173
+```

package/templates/vue/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Checkout Design</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "tux-design",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.0"
+  }
+}

package/templates/vue/src/App.vue ADDED Viewed

@@ -0,0 +1,61 @@
+<script setup>
+import { ref } from 'vue';
+const PRODUCTS = [
+  { id: 'p1', name: 'Trail Shoes', price: '119 €' },
+  { id: 'p2', name: 'Rain Jacket', price: '89 €' },
+];
+const route = ref(window.location.pathname);
+const tab = ref('all');
+const modalOpen = ref(false);
+window.onpopstate = () => {
+  route.value = window.location.pathname;
+};
+const navigate = (href) => (event) => {
+  event.preventDefault();
+  window.history.pushState(null, '', href);
+  route.value = href;
+};
+</script>
+<template>
+  <nav data-tux-component="MainNav">
+    <a href="/" @click="navigate('/')">Home</a>
+    <a href="/products" @click="navigate('/products')">Products</a>
+    <a href="/checkout" @click="navigate('/checkout')">Checkout</a>
+  </nav>
+  <main>
+    <template v-if="route === '/products'">
+      <h1>Products</h1>
+      <div data-tux-component="ProductTabs" :data-tux-state-tab="tab">
+        <div role="tablist">
+          <button v-for="t in ['all', 'featured']" :key="t" role="tab"
+            :aria-selected="tab === t" :data-tab="t" @click="tab = t">{{ t }}</button>
+        </div>
+        <ul data-tux-component="ProductList" :style="tab === 'featured' ? { display: 'none' } : {}">
+          <li v-for="p in PRODUCTS" :key="p.id" data-tux-component="ProductCard" :data-tux-instance="p.id">
+            <span :data-tux-id="`product-name-${p.id}`">{{ p.name }}</span>
+            <span :data-tux-id="`product-price-${p.id}`" data-tux-component="PriceLabel">{{ p.price }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+    <template v-else-if="route === '/checkout'">
+      <h1>Checkout</h1>
+      <div data-tux-component="CheckoutActions">
+        <button data-tux-id="coupon-open" @click="modalOpen = true">Add coupon</button>
+        <button data-tux-id="checkout-submit" data-tux-component="SubmitButton">Complete purchase</button>
+      </div>
+      <div v-if="modalOpen" role="dialog" aria-modal="true" aria-label="Coupon" data-tux-component="CouponModal">
+        <p>Add a coupon code.</p>
+        <input data-tux-id="coupon-input" placeholder="Code" />
+        <button data-tux-id="coupon-apply" @click="modalOpen = false">Apply</button>
+      </div>
+    </template>
+    <template v-else>
+      <h1>Home</h1>
+    </template>
+  </main>
+</template>

package/templates/vue/src/main.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './styles.css';
+createApp(App).mount('#app');

package/templates/vue/src/styles.css ADDED Viewed

@@ -0,0 +1,11 @@
+/* Clickable design styles (minimal). */
+:root { font-family: system-ui, sans-serif; }
+body { margin: 0; color: #1e1e1e; }
+nav { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,.12); }
+main { padding: 20px; }
+[role=tablist] { display: flex; gap: 8px; margin-bottom: 12px; }
+[role=tab] { padding: 6px 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 999px; cursor: pointer; }
+[role=tab][aria-selected=true] { background: #569cd6; color: #fff; border-color: #569cd6; }
+li { margin: 8px 0; display: flex; gap: 12px; }
+[role=dialog] { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 20px; }
+button { font: inherit; }

package/templates/vue/vite.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue()],
+});