[chore] Build deployment pieces

.github/workflows/ci.yml

@@ -9,8 +9,8 @@ on:
       - main
 
 jobs:
-  lint-css:
-    name: Lint CSS
+  quality:
+    name: Lint, Build, Unit Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -25,5 +25,44 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run stylelint
-        run: npm run lint:css
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+  playwright:
+    name: Playwright E2E
+    needs: quality
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          if-no-files-found: ignore

.github/workflows/npm-publish.yml

@@ -1,33 +1,72 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
+name: Publish to npm
 
 on:
   release:
     types: [created]
 
+permissions:
+  contents: read
+
 jobs:
-  build:
+  verify:
+    name: Verify Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
         with:
           node-version: 20
-      - run: npm ci
-      - run: npm test
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
 
   publish-npm:
-    needs: build
+    name: Publish Package
+    needs: verify
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Ensure npm token exists
+        shell: bash
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          if [[ -z "${NPM_TOKEN}" ]]; then
+            echo "::error::Missing NPM_TOKEN secret."
+            exit 1
+          fi
+
+      - name: Publish package
+        run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-version-alignment.yml

@@ -25,6 +25,24 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
       - name: Restrict manual runs to main
         if: github.event_name == 'workflow_dispatch' && github.ref != 'refs/heads/main'
         shell: bash
@@ -75,11 +93,12 @@ jobs:
         if: steps.npm_check.outputs.already_published == 'false'
         shell: bash
         env:
-          PACKAGE_NAME: ${{ steps.version.outputs.package_name }}
-          PACKAGE_VERSION: ${{ steps.version.outputs.package_version }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          echo "::error::Missing NPM_TOKEN secret; cannot publish ${PACKAGE_NAME}@${PACKAGE_VERSION}."
-          exit 1
+          if [[ -z "${NPM_TOKEN}" ]]; then
+            echo "::error::Missing NPM_TOKEN secret."
+            exit 1
+          fi
 
       - name: Publish package to npm
         if: steps.npm_check.outputs.already_published == 'false'

.gitignore

@@ -24,6 +24,11 @@ coverage
 
 # nyc test coverage
 .nyc_output
+playwright-report/
+test-results/
+blob-report/
+.playwright-cache/
+.playwright-browsers/
 
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

CHANGELOG.md

@@ -2,13 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.4] - 2026-05-26
+
+### Changed
+
+- Bumped package version to `1.0.4` for a clean npm republish after failed `1.0.2` / `1.0.3` attempts.
+- Synced release metadata in `package.json` and `package-lock.json` to `1.0.4`.
+
 ## [1.0.3] - 2026-05-26
 
 ### Fixed
 
 - Standardized changelog formatting and version notation for the latest patch release entry.
+- Replaced legacy demo image references with branded assets (`logo.png`, `assets/seo/social-card.png`).
 
-## [1.0.2]-2026-05-25
+## [1.0.2] - 2026-05-25
 
 ### Added
 
@@ -41,8 +49,8 @@ All notable changes to this project will be documented in this file.
   - `site.webmanifest`
   - `browserconfig.xml`
   - `.nojekyll`
-  - `favicon.svg`
-  - `assets/seo/og-preview.svg`
+  - `logo.png`
+  - `assets/seo/social-card.png`
 - `llms.txt`
 - Professional repository scaffolding:
   - `CONTRIBUTING.md`

README.md

@@ -39,7 +39,16 @@ Extended documentation lives in [`wiki/`](wiki/):
 
 ```bash
 npm install
+npm run build
 npm run lint:css
+npm test
+```
+
+Run Playwright tests:
+
+```bash
+npm run test:e2e:install
+npm run test:e2e
 ```
 
 Auto-fix style issues:
@@ -48,6 +57,12 @@ Auto-fix style issues:
 npm run lint:css:fix
 ```
 
+Full release gate:
+
+```bash
+npm run verify
+```
+
 ## Demo SEO Files
 
 The demo page includes production SEO/social metadata plus supporting files for GitHub Pages:
@@ -58,8 +73,8 @@ The demo page includes production SEO/social metadata plus supporting files for
 - `site.webmanifest`
 - `browserconfig.xml`
 - `.nojekyll`
-- `favicon.svg`
-- `assets/seo/og-preview.svg`
+- `logo.png`
+- `assets/seo/social-card.png`
 
 ## Install
 
@@ -163,15 +178,15 @@ ui-style-kit-css/
   CODE_OF_CONDUCT.md
   LICENSE
   index.html
-  favicon.svg
+  logo.png
   llms.txt
   robots.txt
   sitemap.xml
   site.webmanifest
   browserconfig.xml
   assets/
     seo/
-      og-preview.svg
+      social-card.png
   .stylelintrc.json
   .stylelintignore
   .editorconfig

browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
   <msapplication>
     <tile>
-      <square150x150logo src="/ui-style-kit-css/favicon.svg" />
+      <square150x150logo src="/ui-style-kit-css/logo.png" />
       <TileColor>#0b0f19</TileColor>
     </tile>
   </msapplication>

index.html

@@ -59,8 +59,8 @@
   <link rel="stylesheet" href="styles/cyberpunk.css" />
   <link rel="stylesheet" href="styles/y2k.css" />
   <link rel="stylesheet" href="styles/retro-glass.css" />
-  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
-  <link rel="apple-touch-icon" href="favicon.svg" />
+  <link rel="icon" href="logo.png" type="image/png" sizes="1254x1254" />
+  <link rel="apple-touch-icon" href="logo.png" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="UI Style Kit CSS" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -78,17 +78,17 @@
     content="Try every UI Style Kit CSS visual system, switch shared themes and modes, and preview native element coverage."
   />
   <meta property="og:url" content="https://foscat.github.io/ui-style-kit-css/" />
-  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
-  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
-  <meta property="og:image:type" content="image/svg+xml" />
+  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
+  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
+  <meta property="og:image:type" content="image/png" />
   <meta property="og:image:alt" content="UI Style Kit CSS social preview image" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
   <meta
     name="twitter:description"
     content="CSS-only UI style library demo with multi-style switching, shared themes, and accessibility-focused native HTML coverage."
   />
-  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
+  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
   <meta name="twitter:image:alt" content="UI Style Kit CSS social preview image" />
   <script type="application/ld+json">
     {