feat: include default styles with the package import

README.md

@@ -20,7 +20,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a karaoke caption.",
@@ -34,9 +33,17 @@ Call `pause()`, `resume()`, `cancel()`, `getDiagnostics()`, or `destroy()` on th
 
 ## CSS customization
 
-The library only sets `--kn-progress` inline. Override its appearance normally:
+The default stylesheet is included by the package import. The library only sets
+`--kn-progress` inline. To customize the appearance, import your own stylesheet
+after GlyphFlow and override its classes or variables:
+
+```ts
+import { createKaraokeNarrator } from "@enumura/glyphflow";
+import "./my-caption.css";
+```
 
 ```css
+/* my-caption.css — your application's filename is arbitrary */
 .kn-word {
   --kn-highlight-color: #fff3b0;
   --kn-unhighlight-color: #736a55;

docs-site/docs/api.md

@@ -28,4 +28,6 @@ Returns an object with `speak()`, `pause()`, `resume()`, `cancel()`, `getDiagnos
 
 ## Styling
 
-Import `@enumura/glyphflow/styles.css`. Override `--kn-highlight-color`, `--kn-unhighlight-color`, font, size, and spacing in application CSS.
+The package import includes the default CSS. Override `--kn-highlight-color`,
+`--kn-unhighlight-color`, font, size, and spacing in an application stylesheet
+that you import after GlyphFlow.

docs-site/docs/getting-started.md

@@ -9,11 +9,11 @@ title: Getting started
 npm install @enumura/glyphflow
 ```
 
-Import the API and stylesheet from your application entry point.
+Import the API from your application entry point. The package includes its
+default caption stylesheet automatically.
 
 ```ts
 import { createKaraokeNarrator, getSpeechSynthesisSupport } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 ```
 
 ## Create a caption target

docs-site/docs/intro.md

@@ -57,7 +57,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a caption.",
@@ -67,7 +66,8 @@ const narrator = createKaraokeNarrator({
 narrator.speak();
 ```
 
-The library renders its own spans inside `target`. Import the included CSS once, then override colors and typography in your application stylesheet.
+The library renders its own spans inside `target`, and the package import includes
+the default CSS. Override colors and typography in your application stylesheet.
 
 ```css
 .kn-word {

docs-site/docs/troubleshooting.md

@@ -13,7 +13,9 @@ The browser may support Web Speech but the selected voice may not emit usable `w
 
 ## I hear speech but the caption does not move
 
-Confirm that you imported `@enumura/glyphflow/styles.css` and that the selected voice emits word boundaries. The `unsupported` state after speech ends identifies a boundary-free voice.
+Confirm that application CSS does not override GlyphFlow's caption styles and
+that the selected voice emits word boundaries. The `unsupported` state after
+speech ends identifies a boundary-free voice.
 
 ## Speech does not start
 
@@ -27,7 +29,10 @@ The browser exposes one shared speech queue. GlyphFlow uses `speechSynthesis.can
 
 ## The wipe is not visually correct
 
-Start with the bundled stylesheet, then check application CSS for rules that override `background-clip`, `-webkit-text-fill-color`, or the `--kn-progress` property. Use the [Customization](./customization) guide as a known-good base.
+The default stylesheet is included automatically. Check application CSS for rules
+that override `background-clip`, `-webkit-text-fill-color`, or the
+`--kn-progress` property. Use the [Customization](./customization) guide as a
+known-good base.
 
 ## I found a bug
 

docs-site/i18n/ja/docusaurus-plugin-content-docs/current/api.md

@@ -28,4 +28,4 @@ title: API
 
 ## スタイル
 
-`@enumura/glyphflow/styles.css`をimportしてください。`--kn-highlight-color`、`--kn-unhighlight-color`、フォント、サイズ、余白はアプリケーション側で上書きできます。
+標準CSSはpackage importに含まれます。`--kn-highlight-color`、`--kn-unhighlight-color`、フォント、サイズ、余白は、GlyphFlowの後からアプリケーション側のCSSを読み込んで上書きできます。

docs-site/i18n/ja/docusaurus-plugin-content-docs/current/getting-started.md

@@ -9,11 +9,10 @@ title: 使い始める
 npm install @enumura/glyphflow
 ```
 
-アプリケーションのエントリーポイントからAPIとstylesheetをimportします。
+アプリケーションのエントリーポイントからAPIをimportします。標準の字幕CSSは、このpackage importに含まれます。
 
 ```ts
 import { createKaraokeNarrator, getSpeechSynthesisSupport } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 ```
 
 ## 字幕の描画先を用意する

docs-site/i18n/ja/docusaurus-plugin-content-docs/current/intro.md

@@ -57,7 +57,6 @@ npm install @enumura/glyphflow
 
 ```ts
 import { createKaraokeNarrator } from "@enumura/glyphflow";
-import "@enumura/glyphflow/styles.css";
 
 const narrator = createKaraokeNarrator({
   text: "This is a caption.",
@@ -67,7 +66,7 @@ const narrator = createKaraokeNarrator({
 narrator.speak();
 ```
 
-ライブラリが`target`の中に字幕用のspanを描画します。CSSを一度importし、色や書体はアプリケーション側で上書きしてください。
+ライブラリが`target`の中に字幕用のspanを描画します。標準CSSはpackage importに含まれます。色や書体は、アプリケーション側のCSSを後から読み込んで上書きしてください。
 
 ## 向いている用途
 

docs-site/i18n/ja/docusaurus-plugin-content-docs/current/troubleshooting.md

@@ -13,7 +13,7 @@ Web Speech APIに対応していても、選択したvoiceが利用可能な単
 
 ## 音声は聞こえるが字幕が動かない
 
-`@enumura/glyphflow/styles.css`をimportしたか、選択したvoiceが単語境界を返すかを確認してください。音声終了後に`unsupported`になる場合は境界がないvoiceです。
+アプリケーション側のCSSがGlyphFlowの字幕スタイルを上書きしていないか、選択したvoiceが単語境界を返すかを確認してください。音声終了後に`unsupported`になる場合は境界がないvoiceです。
 
 ## 音声が開始されない
 
@@ -27,7 +27,7 @@ Web Speech APIに対応していても、選択したvoiceが利用可能な単
 
 ## ワイプの見た目が正しくない
 
-まず付属stylesheetを使い、アプリケーションのCSSが`background-clip`、`-webkit-text-fill-color`、`--kn-progress`を上書きしていないか確認してください。[カスタマイズ](./customization)を正常系の基準にできます。
+標準stylesheetは自動で読み込まれます。アプリケーションのCSSが`background-clip`、`-webkit-text-fill-color`、`--kn-progress`を上書きしていないか確認してください。[カスタマイズ](./customization)を正常系の基準にできます。
 
 ## バグを見つけた
 

docs-site/src/components/HeroSpeech.tsx

@@ -6,8 +6,7 @@ import {
   getSpeechSynthesisSupport,
   type KaraokeNarrator,
   type NarratorState,
-} from "../../../src/index";
-import "../../../src/styles.css";
+} from "../../../src/index.browser";
 
 import { claimSpeech, releaseSpeech } from "./speech-session";
 import styles from "./HeroSpeech.module.css";

docs-site/src/components/LiveDemo.tsx

@@ -8,8 +8,7 @@ import {
   type NarratorState,
   type SpeechSynthesisSupport,
   type WordTimingSample,
-} from "../../../src/index";
-import "../../../src/styles.css";
+} from "../../../src/index.browser";
 import { tokenize } from "../../../src/core/tokenizer";
 
 import { claimSpeech, releaseSpeech } from "./speech-session";

examples/basic/main.ts

@@ -4,8 +4,7 @@ import {
   getVoices,
   type KaraokeNarrator,
   type WordTimingSample,
-} from "../../src/index";
-import "../../src/styles.css";
+} from "@enumura/glyphflow";
 import "./style.css";
 
 const byId = <T extends HTMLElement>(id: string) =>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enumura/glyphflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Browser Web Speech narration with smoothly wiping inside-glyph captions.",
   "keywords": [
     "speech-synthesis",
@@ -29,7 +29,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "browser": "./dist/index.browser.js",
+      "node": "./dist/index.js",
+      "import": "./dist/index.browser.js"
     },
     "./styles.css": "./dist/styles.css"
   },
@@ -42,10 +44,10 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css",
+    "build": "tsup && node scripts/verify-package-entry.mjs",
     "prepack": "npm run build",
     "lint": "oxlint --deny-warnings",
-    "format:check": "prettier --check \"src/**/*.{ts,css}\" \"tests/**/*.ts\" \"examples/basic/**/*.{ts,css,html}\" tsup.config.ts .oxlintrc.json",
+    "format:check": "prettier --check \"src/**/*.{ts,css}\" \"tests/**/*.ts\" \"examples/basic/**/*.{ts,css,html}\" \"scripts/**/*.mjs\" tsup.config.ts .oxlintrc.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "demo": "vite --config examples/basic/vite.config.ts",

scripts/verify-package-entry.mjs

@@ -0,0 +1,11 @@
+import { readFile } from "node:fs/promises";
+
+const browserEntryUrl = new URL("../dist/index.browser.js", import.meta.url);
+const browserEntry = await readFile(browserEntryUrl, "utf8");
+
+if (!browserEntry.includes('import "./styles.css";')) {
+  throw new Error("The browser package entry must import the bundled stylesheet.");
+}
+
+await import(new URL("../dist/index.js", import.meta.url));
+await import("@enumura/glyphflow");

src/index.browser.ts

@@ -0,0 +1,3 @@
+import "./styles.css";
+
+export * from "./index";

tsup.config.ts

@@ -1,12 +1,18 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
+  entry: {
+    index: "src/index.ts",
+    "index.browser": "src/index.browser.ts",
+  },
   format: ["esm"],
   dts: true,
   sourcemap: false,
   clean: true,
   splitting: false,
   external: [],
   loader: { ".css": "copy" },
+  esbuildOptions(options) {
+    options.assetNames = "[name]";
+  },
 });