[0.1.0] - 2026-01-27 (minor)

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Publish to npm and GitHub Packages
+name: Publish to npm and Deploy
 
 on:
   pull_request:
@@ -16,23 +16,35 @@ jobs:
       actions: write
       id-token: write
       packages: write
+      pull-requests: write
+
     steps:
+      - name: Generate token from GitHub App
+        id: generate_token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.APP_PRIVATE_KEY }}
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.generate_token.outputs.token }}
           fetch-depth: 0
+          persist-credentials: true
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
+          cache: 'npm'
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Determine version bump
-        id: version
+        id: version_type
         run: |
           if [[ "${{ github.event.pull_request.title }}" == *"major"* ]]; then
             echo "BUMP_TYPE=major" >> $GITHUB_ENV
@@ -42,16 +54,24 @@ jobs:
             echo "BUMP_TYPE=patch" >> $GITHUB_ENV
           fi
 
-      - name: Bump version and push tag
+      - name: Configure Git
+        run: |
+          git config user.name "TODOvue-release-bot[bot]"
+          git config user.email "TODOvue-release-bot[bot]@users.noreply.github.com"
+          git config url."https://x-access-token:${{ steps.generate_token.outputs.token }}@github.com/".insteadOf "https://github.com/"
+
+      - name: Bump version and push
+        id: bump
         run: |
-          git config --global user.name "github-actions"
-          git config --global user.email "actions@github.com"
-          npm version $BUMP_TYPE --no-git-tag-version
-          git commit -am "chore(release): 🔥 v$(node -p "require('./package.json').version")"
-          git tag v$(node -p "require('./package.json').version")
-          git push origin main --tags
+          npm version $BUMP_TYPE -m "chore(release): 🔥 v%s [skip ci]"
+          NEW_VERSION=$(node -p "require('./package.json').version")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+          git push origin main --follow-tags
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GIT_AUTHOR_NAME: "TODOvue-release-bot[bot]"
+          GIT_AUTHOR_EMAIL: "TODOvue-release-bot[bot]@users.noreply.github.com"
+          GIT_COMMITTER_NAME: "TODOvue-release-bot[bot]"
+          GIT_COMMITTER_EMAIL: "TODOvue-release-bot[bot]@users.noreply.github.com"
 
       - name: Build package
         run: npm run build
@@ -61,22 +81,25 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name:  Setup Node.js for GitHub Packages
-        uses: actions/setup-node@v4
+      - name: Create GitHub Release
+        uses: actions/github-script@v7
         with:
-          node-version: 20
-          registry-url: https://npm.pkg.github.com
-          scope: '@todovue'
-
-      - name:  Publish to GitHub Packages
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          github-token: ${{ steps.generate_token.outputs.token }}
+          script: |
+            await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: `v${{ steps.bump.outputs.NEW_VERSION }}`,
+              name: `v${{ steps.bump.outputs.NEW_VERSION }}`,
+              body: 'For stable releases, please refer to [CHANGELOG.md](https://github.com/TODOvue/tv-demo/blob/main/CHANGELOG.md) for details.',
+              draft: false,
+              prerelease: false
+            });
 
       - name: Build Demo Website
         run: npm run build:demo
 
-      - name: Deploy Demo to FTP
+      - name: Deploy TODOvue UI
         uses: SamKirkland/FTP-Deploy-Action@v4.3.4
         with:
           server: ${{ secrets.FTP_SERVER }}

CHANGELOG.md

@@ -4,3 +4,8 @@ All notable changes to `@todovue/tv-ui` will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-01-27
+
+### Added
+- Initial release of `@todovue/tv-ui`.

README.md

@@ -1,6 +1,207 @@
 <p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
 </p>
 
-# TODOvue TvUi
-###### TvUi - A TODOvue based UI library.
+# TODOvue UI (TvUi)
+An **umbrella** package for Vue 3 that installs and re-exports the official `@todovue/*` components.
 
+> Important: **this is NOT a monorepo**. `@todovue/tv-ui` is a library that declares dependencies on each `@todovue/tv-*` component (by the version published on npm), and re-exports them for unified consumption.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+![License](https://img.shields.io/github/license/TODOvue/tv-ui)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-ui)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-ui)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-ui)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-ui)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-ui?style=social)
+
+> Demo / docs: https://ui.todovue.blog
+
+## Table of contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Using styles](#using-styles)
+- [Nuxt (SSR) / Nuxt Module](#nuxt-ssr--nuxt-module)
+- [Exported components](#exported-components)
+- [Registration options](#registration-options)
+- [SSR notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- **One-time install** to get TODOvue components available.
+- **Vue plugin**: `app.use(TvUi)` registers components globally.
+- **Re-exports**: you can import specific components from `@todovue/tv-ui`.
+- Compatible with **SPA** (Vite/Vue CLI) and **SSR** (Nuxt) as long as your app imports the styles.
+- **Does not bundle Vue nor the `@todovue/*` packages** into the build: they remain external dependencies (great for ecosystems and tree-shaking).
+
+## Installation
+With npm:
+```bash
+npm install @todovue/tv-ui
+```
+With yarn:
+```bash
+yarn add @todovue/tv-ui
+```
+With pnpm:
+```bash
+pnpm add @todovue/tv-ui
+```
+
+> Node requirement for this repo: `>= 20.19.0`.
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Styles (see “Using styles” section)
+import '@todovue/tv-ui/style.css'
+
+import TvUi from '@todovue/tv-ui'
+
+createApp(App)
+  .use(TvUi) // enables <TvButton />, <TvCard />, etc. globally
+  .mount('#app')
+```
+
+Usage in a component:
+```vue
+<template>
+  <TvButton variant="success" icon="check">Save</TvButton>
+</template>
+```
+
+Local import (named export) if you prefer granular control:
+```vue
+<script setup>
+import '@todovue/tv-ui/style.css'
+import { TvButton, TvCard } from '@todovue/tv-ui'
+</script>
+
+<template>
+  <TvCard>
+    <TvButton>Action</TvButton>
+  </TvCard>
+</template>
+```
+
+## Using styles
+`@todovue/tv-ui` exposes a styles entry:
+
+- Recommended import:
+```js
+import '@todovue/tv-ui/style.css'
+```
+
+This points to `./dist/tv-ui.css` (via `exports["./style.css"]`).
+
+### What about per-component styles?
+You can also import styles from each package:
+```js
+import '@todovue/tv-button/style.css'
+import '@todovue/tv-card/style.css'
+```
+
+This is useful if you:
+- only use 1–2 components,
+- want to control exactly what CSS gets into your bundle,
+- or are migrating gradually.
+
+## Nuxt (SSR) / Nuxt Module
+This package publishes a Nuxt module at `@todovue/tv-ui/nuxt` that **injects the CSS** of `@todovue/*` packages into `nuxt.options.css`.
+
+### Setup
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-ui/nuxt'
+  ]
+})
+```
+
+### Plugin registration (optional)
+You can register all components globally:
+```ts
+// plugins/tv-ui.ts
+import { defineNuxtPlugin } from '#app'
+import TvUi from '@todovue/tv-ui'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(TvUi)
+})
+```
+
+Or import them locally:
+```vue
+<script setup>
+import { TvButton } from '@todovue/tv-ui'
+</script>
+
+<template>
+  <TvButton>Hello</TvButton>
+</template>
+```
+
+## Exported components
+Currently `@todovue/tv-ui` re-exports:
+
+- `TvAlert`
+- `TvArticle`
+- `TvBreadcrumbs`
+- `TvButton`
+- `TvCard`
+- `TvDemo`
+- `TvFooter`
+- `TvHero`
+- `TvLabel`
+- `TvMenu`
+- `TvModal`
+- `TvPagination`
+- `TvProgressBar`
+- `TvRelativeTime`
+- `TvScrollTop`
+- `TvSearch`
+- `TvSettings`
+- `TvSidebar`
+- `TvThemeButton`
+- `TvToc`
+
+## Registration options
+| Approach            | Example                                     | When to use                                          |
+|---------------------|---------------------------------------------|------------------------------------------------------|
+| Global via plugin   | `app.use(TvUi)`                             | You use many components across the whole app         |
+| Local import        | `import { TvButton } from '@todovue/tv-ui'` | Isolated views, code-splitting, fine-grained control |
+| Individual packages | `import TvButton from '@todovue/tv-button'` | If you want to install/update components separately  |
+
+## SSR notes
+- This package does not assume a DOM during plugin installation.
+- Still, SSR compatibility depends on each `@todovue/*` component not accessing `window/document` at render time.
+- In Nuxt, the `@todovue/tv-ui/nuxt` module takes care of registering global CSS for you.
+
+## Development
+Available scripts:
+- `dev`: copies `README.md`/`CHANGELOG.md` from `node_modules/@todovue/*` into `public/demos/*` and starts Vite.
+- `build`: library build (ESM + CJS) + types.
+- `build:demo`: builds the demo (target `demo`) and copies `README.md`/`CHANGELOG.md` to `public/`.
+
+Commands:
+```bash
+npm run dev
+npm run build
+npm run build:demo
+```
+
+## Contributing
+PRs and issues are welcome. See:
+- `CONTRIBUTING.md`
+- `CODE_OF_CONDUCT.md`
+
+## License
+MIT © TODOvue

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TvUi</title>
   </head>
-  <body>
+  <body class="dark-mode">
     <div id="tv-ui"></div>
     <script type="module" src="/src/main.js"></script>
   </body>

nuxt.js

@@ -7,9 +7,52 @@ export default defineNuxtModule({
     configKey: 'tvUi'
   },
   setup(_options, nuxt) {
-    const cssPath = '@todovue/tv-ui/style.css';
-    if (!nuxt.options.css.includes(cssPath)) {
-      nuxt.options.css.push(cssPath);
-    }
+    const alertCss = '@todovue/tv-alert/style.css';
+    const articleCss = '@todovue/tv-article/style.css';
+    const breadcrumbsCss = '@todovue/tv-breadcrumbs/style.css';
+    const cardCss = '@todovue/tv-card/style.css';
+    const footerCss = '@todovue/tv-footer/style.css';
+    const labelCss = '@todovue/tv-label/style.css';
+    const modalCss = '@todovue/tv-modal/style.css';
+    const buttonCss = '@todovue/tv-button/style.css';
+    const demoCss = '@todovue/tv-demo/style.css';
+    const heroCss = '@todovue/tv-hero/style.css';
+    const menuCss = '@todovue/tv-menu/style.css';
+    const paginationCss = '@todovue/tv-pagination/style.css';
+    const progressBarCss = '@todovue/tv-progress-bar/style.css';
+    const scrollTopCss = '@todovue/tv-scroll-top/style.css';
+    const searchCss = '@todovue/tv-search/style.css';
+    const settingsCss = '@todovue/tv-settings/style.css';
+    const sidebarCss = '@todovue/tv-sidebar/style.css';
+    const themeButtonCss = '@todovue/tv-theme-button/style.css';
+    const tocCss = '@todovue/tv-toc/style.css';
+
+    const pushUnique = (path) => {
+      if (!nuxt.options.css.includes(path)) {
+        nuxt.options.css.push(path);
+      }
+    };
+
+    [
+      alertCss,
+      articleCss,
+      breadcrumbsCss,
+      cardCss,
+      footerCss,
+      labelCss,
+      modalCss,
+      buttonCss,
+      demoCss,
+      heroCss,
+      menuCss,
+      paginationCss,
+      progressBarCss,
+      scrollTopCss,
+      searchCss,
+      settingsCss,
+      sidebarCss,
+      themeButtonCss,
+      tocCss
+    ].forEach(pushUnique);
   }
 })