@k8ordo/ui 2.0.0 → 2.1.0

package/docs/references/typography.md

@@ -4,61 +4,88 @@ Typography in `@k8ordo/ui` aims for readability and quiet at the same time.
 
 ## Font family
 
-A font stack tuned for Japanese.
+A font stack tuned for Japanese: Noto Sans JP and M PLUS 2.
+
+The library ships no font files and sets no font of its own: until your app
+sets one, text stays on the reset's system stack, `--font-family-sans`
+(Roboto included). Load the fonts yourself (fontsource, `next/font`, …), declare
+them as tokens, and set the body:
 
 ```css
-font-family: 'Noto Sans JP', 'M PLUS 2', sans-serif;
+:root {
+  --font-family-noto-sans-jp: 'Noto Sans JP', sans-serif;
+  --font-family-m-plus-2: 'M PLUS 2', sans-serif;
+}
+
+body {
+  font-family: var(--font-family-noto-sans-jp);
+}
 ```
 
+- `--font-family-sans` and `--font-family-mono` are the reset's stacks, which `body` and `code` / `kbd` / `pre` use until your app sets its own
+- With `tailwind.css`, `--font-family-noto-sans-jp` and `--font-family-m-plus-2` back the `font-noto-sans-jp` and `font-m-plus-2` utilities. They are the only font-family utilities; the theme removes `font-sans`, `font-serif`, and `font-mono`
 - **Do not use Inter / Roboto / Open Sans** — they read as AI-generated
 - Japanese text dominates, so Japanese faces come first
 
 ## Font size scale
 
-| Tailwind class   | Value    | Use                     |
-| ---------------- | -------- | ----------------------- |
-| `text-xs`        | 0.75rem  | Annotations, captions   |
-| `text-sm`        | 0.875rem | Supporting text, labels |
-| `text-md`        | 1rem     | Body text (default)     |
-| `text-lg`        | 1.125rem | Subheadings             |
-| `text-xl`        | 1.25rem  | Headings                |
-| `text-2xl`       | 1.5rem   | Large headings          |
-| `text-3xl`       | 1.875rem | Page titles             |
-| `text-emphasize` | 3rem     | Emphasis display        |
-| `text-highlight` | 6rem     | Highlight display       |
+Each size has a line height to go with it, `--line-height-<size>`
+(`--font-size-sm` with `--line-height-sm`). With `tailwind.css`, `text-<size>`
+sets both.
+
+| Token                   | Value    | Use                     |
+| ----------------------- | -------- | ----------------------- |
+| `--font-size-xs`        | 0.75rem  | Annotations, captions   |
+| `--font-size-sm`        | 0.875rem | Supporting text, labels |
+| `--font-size-md`        | 1rem     | Body text (default)     |
+| `--font-size-lg`        | 1.125rem | Subheadings             |
+| `--font-size-xl`        | 1.25rem  | Headings                |
+| `--font-size-2xl`       | 1.5rem   | Large headings          |
+| `--font-size-3xl`       | 1.875rem | Page titles             |
+| `--font-size-emphasize` | 3rem     | Emphasis display        |
+| `--font-size-highlight` | 6rem     | Highlight display       |
+
+Three sizes follow the text they sit in, in `em`: `--font-size-code` (0.875em,
+code in running text), `--font-size-kbd` (0.8125em) and `--font-size-callout`
+(0.9em, the notes of a `CodeBlock`). `--spacing-em` (0.25em) is the spacing step
+that goes with them.
 
 ## Font weight
 
 Use weight sparingly. Heavy type undermines the quiet.
 
-| Tailwind class | Value | Use                                   |
-| -------------- | ----- | ------------------------------------- |
-| `font-normal`  | 400   | Body text                             |
-| `font-medium`  | 450   | Emphasized text (restrained emphasis) |
-| `font-bold`    | 700   | Headings, button labels               |
+| Token                  | Value | Use                                   |
+| ---------------------- | ----- | ------------------------------------- |
+| (none)                 | 400   | Body text (the inherited default)     |
+| `--font-weight-medium` | 450   | Emphasized text (restrained emphasis) |
+| `--font-weight-bold`   | 700   | Headings, button labels               |
 
-- Do not use `font-semibold` (600) or `font-extrabold` (800)
-- Note that `font-medium` is 450 here — lighter than the usual 500
+- There are only these two weight tokens. With `tailwind.css`, `font-medium` and `font-bold` are the only weight utilities
+- Note that `--font-weight-medium` is 450 here — lighter than the usual 500
 
 ## Line height
 
 Japanese text needs more leading than Latin text.
 
-| Tailwind class    | Value | Use                             |
-| ----------------- | ----- | ------------------------------- |
-| `leading-none`    | 1     | Special cases (highlight, …)    |
-| `leading-tight`   | 1.25  | Headings                        |
-| `leading-snug`    | 1.375 | Subheadings                     |
-| `leading-normal`  | 1.5   | Inside lists; the default       |
-| `leading-relaxed` | 1.625 | Body text (recommended)         |
-| `leading-loose`   | 2     | When wide leading is called for |
+| Token                   | Value | Use                             |
+| ----------------------- | ----- | ------------------------------- |
+| `--line-height-none`    | 1     | Special cases (highlight, …)    |
+| `--line-height-tight`   | 1.25  | Headings                        |
+| `--line-height-snug`    | 1.375 | Subheadings                     |
+| `--line-height-normal`  | 1.5   | Inside lists; the default       |
+| `--line-height-relaxed` | 1.625 | Body text (recommended)         |
+| `--line-height-loose`   | 2     | When wide leading is called for |
+
+With `tailwind.css` these are `leading-none` … `leading-loose`.
 
 ## Letter spacing
 
-| Tailwind class    | Value   | Use                         |
-| ----------------- | ------- | --------------------------- |
-| `tracking-none`   | 0em     | Default                     |
-| `tracking-normal` | 0.025em | When a little air is wanted |
+| Token                     | Value   | Use                         |
+| ------------------------- | ------- | --------------------------- |
+| `--letter-spacing-none`   | 0em     | Default                     |
+| `--letter-spacing-normal` | 0.025em | When a little air is wanted |
+
+With `tailwind.css` these are `tracking-none` and `tracking-normal`.
 
 ## The Heading component
 
@@ -72,40 +99,121 @@ import { Heading } from '@k8ordo/ui';
 <Heading level="h3">Subsection</Heading>
 ```
 
+## Long-form text (Prose)
+
+The base styles reset headings, lists, margins, and emphasis, which is right for
+an interface and wrong for an article. `Prose` puts the typesetting of body text
+back inside it, for Markdown or MDX rendered to HTML:
+
+```tsx
+import { Prose } from '@k8ordo/ui';
+
+<article>
+  <Prose>{content}</Prose>
+</article>;
+```
+
+What it sets, tuned for Japanese:
+
+- Body text on `--line-height-loose` (2) with `--letter-spacing-normal`:
+  Japanese needs more leading than Latin text.
+- `1rem` between blocks, `3rem` above an `h2`, `2rem` above `h3`–`h6`, and
+  `0.75rem` between a heading and what follows it.
+- Headings in `--font-weight-bold`, `--line-height-snug`, with
+  `text-wrap: balance` and proportional kana (`font-feature-settings: 'palt'`).
+- `strong` in `--font-weight-bold`. `em` as emphasis dots (傍点, `text-emphasis: filled
+  sesame`) where the text is Japanese (`:lang(ja)`), and italic elsewhere.
+- Links, inline code, `kbd`, and `pre` drawn like `Anchor`, `Code`, `Kbd`, and a
+  code block; lists with their markers back; quotes, tables, rules, images,
+  and GFM footnotes and task lists (the footnotes' `sr-only` heading is
+  read but not shown).
+- Under `.writing-v`, each paragraph's first line is indented one character,
+  as a book is set.
+
+**Only bare elements are typeset.** The element rules stop at any element with a
+`class` — which is every `@k8ordo/ui` component — so a component placed in the
+text keeps its own look (an `Alert`'s list does not get bullets). The spacing
+between blocks still applies to it. The classes remark-gfm puts on footnotes
+and task lists (`footnotes`, `contains-task-list`, `task-list-item`,
+`data-footnote-backref`, `sr-only`) are the exception: they are treated as part
+of the text.
+Map an MDX element to a component when you want it to look like the component,
+and leave it bare when you want it to look like text.
+
 ## Vertical writing mode
 
-Dedicated utilities and a variant are provided for vertical writing.
+`styles.css` ships three classes for the writing mode. They are the public
+markers the components read, not utilities: put them on the element that
+should turn.
 
-### Utilities
+| Class                 | Use                                                                                                                                                                                    |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `writing-h`           | Return to horizontal (`writing-mode: horizontal-tb`). Use it for figures, code blocks, and replaced elements inside a vertical tree.                                                   |
+| `writing-v`           | Apply vertical writing (`writing-mode: vertical-rl`) together with the recommended defaults such as `text-orientation: mixed`.                                                         |
+| `writing-sideways-rl` | Turn a block sideways (`writing-mode: sideways-rl`): it lays out like horizontal text rotated 90° clockwise, Japanese glyphs included. `Table` turns itself this way in vertical text. |
 
-| Tailwind class | Use                                                                                                                                  |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `writing-h`    | Return to horizontal (`writing-mode: horizontal-tb`). Use it for figures, code blocks, and replaced elements inside a vertical tree. |
-| `writing-v`    | Apply vertical writing (`writing-mode: vertical-rl`) together with the recommended defaults such as `text-orientation: mixed`.       |
+### Styling for vertical text
 
-### The `vertical:` variant
+`writing-v` and `writing-h` also set the custom property `--writing`
+(`vertical` or `horizontal`; `:root` holds `horizontal`), and it inherits. Read
+it with a style query to change your own styles in vertical text:
 
-A Tailwind variant that activates inside a `.writing-v` subtree and is disabled
-inside `.writing-h`. It lets you override a horizontal default declaratively.
+```css
+.paragraph {
+  margin-block: calc(var(--spacing) * 4);
+
+  @container style(--writing: vertical) {
+    margin-block: 0;
+  }
+}
+```
+
+A style query asks the element's parent, so it does not see a `writing-v` on
+the element itself: style that element through a class of its own. Prefer
+logical properties (`margin-block`, `inline-size`) first; they often make the
+override unnecessary.
+
+With `tailwind.css`, the `vertical:` variant does the same for utilities: it
+applies inside a `.writing-v` subtree and not inside `.writing-h`
+(`className="my-4 vertical:my-0"`).
+
+### Switching at runtime
+
+There is no JavaScript API for the writing mode. Keep the mode in your own
+state, and put `writing-v` on the container that should turn vertical:
 
 ```tsx
-<div className="writing-v">
-  <p className="my-4 vertical:my-0">
-    {/* Vertical margin only in horizontal mode; dropped when vertical */}
-  </p>
-</div>
+const [mode, setMode] = useState<'horizontal' | 'vertical'>('horizontal');
+
+<article className={mode === 'vertical' ? 'writing-v' : undefined}>
+  <p className={styles.paragraph}>…</p>
+  <pre className="writing-h">…</pre>
+</article>;
 ```
 
+- Components follow a `.writing-v` ancestor on their own, with no props.
+  `Tabs` (arrow keys and `aria-orientation`) and `Autocomplete` (the width of
+  its list) also follow a class toggled while they are on screen. `Popover`,
+  `Tooltip`, `DropdownMenu`, and `ListBox` read the writing mode each time
+  they open, so a change made while one is open shows the next time it opens.
+- When your own JavaScript has to branch — hiding a side rail in vertical
+  mode, say — branch on the state you toggle, not on the DOM.
+- To read the mode of an element you do not control, call
+  `getComputedStyle(element).writingMode` at the moment you need it. There is
+  no event to subscribe to, and a `ResizeObserver` does not stand in for one:
+  an element that shrinks to fit its content keeps its logical size when the
+  writing mode flips, so the observer never fires.
+
 ### Caveats
 
-- Replaced elements such as images and iframes may not size as expected under `vertical-rl`. Return the element itself to horizontal, as in `<img className="vertical:writing-h" />`.
-- `-webkit-line-clamp` (`line-clamp-*`) conflicts with `writing-mode` in Safari. In vertical mode, replace it with a `block-size` cap plus `overflow: hidden`.
+- Replaced elements such as images and iframes may not size as expected under `vertical-rl`. Return the element itself to horizontal, as in `<img className="writing-h" />`.
+- `-webkit-line-clamp` conflicts with `writing-mode` in Safari. In vertical mode, replace it with a `block-size` cap plus `overflow: hidden`.
 - Libraries that assume horizontal layout internally, such as KaTeX, need `writing-h` applied only where required.
 
 ## What not to do
 
-- Use three or more font weights on one screen
-- Use anything larger than `text-3xl` for ordinary text (`text-emphasize` and `text-highlight` are for special cases)
-- Apply `uppercase` or `tracking-widest` to Japanese text
+- Reach past the three weights (400, `--font-weight-medium`, `--font-weight-bold`) with an arbitrary value (`font-weight: 600`, …)
+- Use anything larger than `--font-size-3xl` for ordinary text (`--font-size-emphasize` and `--font-size-highlight` are for special cases)
+- Apply `text-transform: uppercase` or wide letter spacing to Japanese text
 - Apply a gradient to text
 - Build hierarchy from font size alone — use spacing as well

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8ordo/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "k8o's React UI library with built-in generative UI adapters (json-render & OpenUI) for LLM-driven, on-brand interfaces",
   "keywords": [
     "ai",
@@ -67,6 +67,10 @@
       "types": "./dist/components/ai/response/index.d.mts",
       "default": "./dist/components/ai/response/index.mjs"
     },
+    "./code-block": {
+      "types": "./dist/components/data-display/code-block/index.d.mts",
+      "default": "./dist/components/data-display/code-block/index.mjs"
+    },
     "./ai-sdk": {
       "types": "./dist/integrations/ai-sdk/index.d.mts",
       "default": "./dist/integrations/ai-sdk/index.mjs"
@@ -84,60 +88,63 @@
   },
   "dependencies": {
     "clsx": "2.1.1",
-    "lucide-react": "1.31.0",
-    "tailwind-merge": "3.6.0"
+    "lucide-react": "1.52.0",
+    "server-only": "0.0.1",
+    "shiki": "4.5.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
-    "@chromatic-com/storybook": "5.3.0",
-    "@json-render/core": "0.19.0",
-    "@json-render/react": "0.19.0",
-    "@openuidev/lang-core": "0.2.12",
-    "@openuidev/react-lang": "0.2.11",
-    "@storybook/addon-a11y": "10.5.8",
-    "@storybook/addon-docs": "10.5.8",
-    "@storybook/addon-mcp": "0.7.0",
-    "@storybook/addon-vitest": "10.5.8",
-    "@storybook/react-vite": "10.5.8",
-    "@tailwindcss/postcss": "4.3.3",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "@vitejs/plugin-react": "6.0.5",
-    "@vitest/browser-playwright": "4.1.10",
-    "@vitest/coverage-v8": "4.1.10",
-    "@vitest/ui": "4.1.10",
-    "ai": "7.0.65",
-    "postcss": "8.5.26",
-    "publint": "0.3.23",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "storybook": "10.5.8",
-    "storybook-addon-determinism": "0.1.2",
-    "storybook-addon-mock-date": "3.1.1",
+    "@better-css-modules/cli": "0.4.0",
+    "@better-css-modules/core": "0.4.0",
+    "@better-css-modules/vite": "0.4.0",
+    "@chromatic-com/storybook": "5.4.0",
+    "@json-render/core": "0.21.0",
+    "@json-render/react": "0.21.0",
+    "@k8ordo/form": "^1.0.0",
+    "@k8ordo/i18n": "^1.0.0",
+    "@openuidev/lang-core": "0.3.1",
+    "@openuidev/react-lang": "0.3.1",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-mcp": "10.6.1",
+    "@storybook/addon-vitest": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "@vitest/browser-playwright": "5.0.3",
+    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/ui": "5.0.3",
+    "ai": "7.0.130",
+    "postcss": "8.5.29",
+    "publint": "0.3.25",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "storybook": "10.6.1",
+    "storybook-addon-determinism": "0.2.1",
+    "storybook-addon-mock-date": "3.2.1",
     "storybook-addon-vrt": "0.4.0",
-    "streamdown": "2.5.0",
-    "tailwind-token-extractor": "0.2.1",
-    "tailwindcss": "4.3.3",
+    "streamdown": "2.7.0",
     "typescript": "7.0.2",
-    "vite": "8.2.1",
-    "vite-plus": "0.2.9",
-    "vitest": "4.1.10",
-    "vitest-browser-react": "2.2.0",
-    "zod": "4.4.3"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.1.0",
+    "vite-plus": "1.1.0",
+    "vitest": "5.0.3",
+    "vitest-browser-react": "2.3.0",
+    "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@json-render/core": ">=0.19.0",
-    "@json-render/react": ">=0.19.0",
-    "@openuidev/lang-core": ">=0.2.10",
-    "@openuidev/react-lang": ">=0.2.9",
-    "@types/react": ">=19.2.18",
-    "@types/react-dom": ">=19.2.4",
+    "@json-render/core": ">=0.21.0 <0.22.0",
+    "@json-render/react": ">=0.21.0 <0.22.0",
+    "@k8ordo/i18n": "^1.0.0",
+    "@openuidev/lang-core": ">=0.3.0 <0.4.0",
+    "@openuidev/react-lang": ">=0.3.0 <0.4.0",
+    "@types/react": ">=19.3.0",
+    "@types/react-dom": ">=19.3.0",
     "ai": ">=7.0.51",
-    "react": ">=19.2.6",
-    "react-dom": ">=19.2.6",
+    "react": ">=19.3.0",
+    "react-dom": ">=19.3.0",
     "streamdown": ">=2.5.0",
-    "tailwindcss": ">=4.3.3",
-    "typescript": ">=7.0.2",
+    "typescript": ">=7.0.0",
     "zod": "^4.4.3"
   },
   "peerDependenciesMeta": {
@@ -165,9 +172,6 @@
     "streamdown": {
       "optional": true
     },
-    "tailwindcss": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },
@@ -176,21 +180,19 @@
     }
   },
   "scripts": {
-    "build": "vp pack && pnpm build:css",
-    "build:css": "node scripts/build-css.ts",
-    "generate:tokens": "tailwind-token-extractor src/styles/index.css -o src/styles/tokens.generated.ts",
-    "check:tokens": "tailwind-token-extractor check src/styles/index.css -o src/styles/tokens.generated.ts",
-    "generate:props": "node scripts/extract-props.ts && node scripts/generate-components-md.ts && node scripts/check-helpers-md.ts",
-    "check:props": "node scripts/extract-props.ts --check && node scripts/generate-components-md.ts --check && node scripts/check-helpers-md.ts",
-    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./tailwind.css",
+    "build": "vp pack && node scripts/build-tokens.ts",
+    "generate:props": "node scripts/extract-props.ts && node scripts/generate-component-docs.ts",
+    "check:props": "node scripts/extract-props.ts --check && node scripts/generate-component-docs.ts --check",
+    "check:dist": "node scripts/check-dist-tests.ts",
+    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./tailwind.css && pnpm check:dist",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
-    "test:vrt": "VRT=1 vitest run --project=components",
+    "test:vrt": "VRT=1 TEST_BROWSER=chromium vitest run --project=components",
     "test": "vitest run",
-    "test:ui": "vitest --ui --coverage",
-    "test:coverage": "vitest run --coverage",
-    "typecheck": "tsc --noEmit",
-    "check": "vp check",
-    "check:write": "vp check --fix"
+    "test:ui": "TEST_BROWSER=chromium vitest --ui --coverage",
+    "test:coverage": "TEST_BROWSER=chromium vitest run --coverage",
+    "typecheck": "better-css-modules generate && tsc --noEmit",
+    "check": "better-css-modules generate && vp check && better-css-modules check",
+    "check:write": "better-css-modules generate && vp check --fix"
   }
 }

package/dist/components/_internal/focus-ring.d.mts

@@ -1,8 +0,0 @@
-//#region src/components/_internal/focus-ring.d.ts
-declare const FOCUS_RING = "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
-declare const FOCUS_RING_NO_BORDER = "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
-declare const FOCUS_RING_WITHIN = "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info";
-declare const FOCUS_RING_PEER = "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
-declare const FOCUS_RING_PEER_NO_BORDER = "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
-//#endregion
-export { FOCUS_RING, FOCUS_RING_NO_BORDER, FOCUS_RING_PEER, FOCUS_RING_PEER_NO_BORDER, FOCUS_RING_WITHIN };

package/dist/components/_internal/focus-ring.mjs

@@ -1,8 +0,0 @@
-//#region src/components/_internal/focus-ring.ts
-const FOCUS_RING = "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
-const FOCUS_RING_NO_BORDER = "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
-const FOCUS_RING_WITHIN = "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info";
-const FOCUS_RING_PEER = "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
-const FOCUS_RING_PEER_NO_BORDER = "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
-//#endregion
-export { FOCUS_RING, FOCUS_RING_NO_BORDER, FOCUS_RING_PEER, FOCUS_RING_PEER_NO_BORDER, FOCUS_RING_WITHIN };

package/dist/components/layout/scroll-linked/index.d.mts

@@ -1,2 +0,0 @@
-import { ScrollLinked } from "./scroll-linked.mjs";
-export { ScrollLinked };

package/dist/components/layout/scroll-linked/index.mjs

@@ -1,2 +0,0 @@
-import { ScrollLinked } from "./scroll-linked.mjs";
-export { ScrollLinked };

package/dist/components/layout/scroll-linked/scroll-linked.d.mts

@@ -1,14 +0,0 @@
-import { FC, RefObject } from "react";
-//#region src/components/layout/scroll-linked/scroll-linked.d.ts
-/**
- * ページ（または container）のスクロール進捗バー。
- * CSS scroll-driven animations（animation-timeline: scroll()）で描画し、
- * 未対応ブラウザ（Firefox）と container 指定時は同じ見た目を
- * scroll リスナー + ResizeObserver で再現する（named timeline +
- * timeline-scope を任意の外部要素へ配線するより単純で確実なため）。
- */
-declare const ScrollLinked: FC<{
-  container?: RefObject<HTMLElement | null>;
-}>;
-//#endregion
-export { ScrollLinked };

package/dist/components/layout/scroll-linked/scroll-linked.mjs

@@ -1,59 +0,0 @@
-"use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/layout/scroll-linked/scroll-linked.tsx
-/**
-* ページ（または container）のスクロール進捗バー。
-* CSS scroll-driven animations（animation-timeline: scroll()）で描画し、
-* 未対応ブラウザ（Firefox）と container 指定時は同じ見た目を
-* scroll リスナー + ResizeObserver で再現する（named timeline +
-* timeline-scope を任意の外部要素へ配線するより単純で確実なため）。
-*/
-const ScrollLinked = ({ container }) => {
-	const barRef = useRef(null);
-	useEffect(() => {
-		const bar = barRef.current;
-		if (!bar) return;
-		if (container === void 0 && CSS.supports("animation-timeline", "scroll()")) return;
-		let cleanup;
-		let retryId;
-		const attach = () => {
-			if (container?.current === null) {
-				retryId = window.setTimeout(attach, 50);
-				return;
-			}
-			const target = container?.current ?? null;
-			const scroller = target ?? window;
-			const update = () => {
-				const scrollTop = target ? target.scrollTop : window.scrollY;
-				const scrollable = target ? target.scrollHeight - target.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
-				const progress = scrollable > 0 ? scrollTop / scrollable : 0;
-				bar.style.scale = `${Math.min(1, Math.max(0, progress)).toString()} 1`;
-			};
-			update();
-			scroller.addEventListener("scroll", update, { passive: true });
-			const observer = new ResizeObserver(update);
-			observer.observe(target ?? document.documentElement);
-			if (target) for (const child of target.children) observer.observe(child);
-			window.addEventListener("resize", update);
-			cleanup = () => {
-				scroller.removeEventListener("scroll", update);
-				observer.disconnect();
-				window.removeEventListener("resize", update);
-			};
-		};
-		attach();
-		return () => {
-			if (retryId !== void 0) window.clearTimeout(retryId);
-			cleanup?.();
-		};
-	}, [container]);
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: cn("bg-primary-bg fixed top-0 h-2 origin-left scale-[0_1] inset-x-0", container === void 0 && "ao-scroll-progress"),
-		ref: barRef
-	});
-};
-//#endregion
-export { ScrollLinked };

package/dist/helpers/cn.d.mts

@@ -1,5 +0,0 @@
-import { ClassValue } from "clsx";
-//#region src/helpers/cn.d.ts
-declare const cn: (...inputs: ClassValue[]) => string;
-//#endregion
-export { cn };

package/dist/helpers/cn.mjs

@@ -1,27 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-//#region src/helpers/cn.ts
-const cn = (...inputs) => twMerge(clsx(inputs));
-if (import.meta.vitest) describe("cn", () => {
-	it("複数のクラス名を空白区切りで結合する", () => {
-		expect(cn("flex", "items-center")).toBe("flex items-center");
-	});
-	it("falsyな値と条件付きクラスを除外する", () => {
-		expect(cn("flex", void 0, null, false, {
-			hidden: false,
-			grow: true
-		})).toBe("flex grow");
-	});
-	it("ネストした配列を展開する", () => {
-		expect(cn(["flex", ["items-center"]])).toBe("flex items-center");
-	});
-	it("競合するTailwindクラスは後勝ちで解決する", () => {
-		expect(cn("p-2", "p-4")).toBe("p-4");
-		expect(cn("text-sm", "text-lg")).toBe("text-lg");
-	});
-	it("競合しないクラスはどちらも残す", () => {
-		expect(cn("px-2", "py-4")).toBe("px-2 py-4");
-	});
-});
-//#endregion
-export { cn };

package/dist/hooks/breakpoint/index.d.mts

@@ -1,5 +0,0 @@
-//#region src/hooks/breakpoint/index.d.ts
-type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-declare const useBreakpoint: (breakpoint: Breakpoint) => boolean;
-//#endregion
-export { useBreakpoint };

package/dist/hooks/breakpoint/index.mjs

@@ -1,24 +0,0 @@
-"use client";
-import { useCallback, useSyncExternalStore } from "react";
-//#region src/hooks/breakpoint/index.ts
-const BREAKPOINTS = {
-	sm: "40rem",
-	md: "48rem",
-	lg: "64rem",
-	xl: "80rem",
-	"2xl": "96rem"
-};
-const useBreakpoint = (breakpoint) => {
-	const query = `(min-width: ${BREAKPOINTS[breakpoint]})`;
-	const subscribe = useCallback((cb) => {
-		const mediaQueryList = window.matchMedia(query);
-		mediaQueryList.addEventListener("change", cb);
-		return () => {
-			mediaQueryList.removeEventListener("change", cb);
-		};
-	}, [query]);
-	const getSnapshot = () => window.matchMedia(query).matches;
-	return useSyncExternalStore(subscribe, getSnapshot, () => false);
-};
-//#endregion
-export { useBreakpoint };

package/dist/hooks/client/index.d.mts

@@ -1,4 +0,0 @@
-//#region src/hooks/client/index.d.ts
-declare const useClient: () => boolean;
-//#endregion
-export { useClient };

package/dist/hooks/client/index.mjs

@@ -1,6 +0,0 @@
-"use client";
-import { useSyncExternalStore } from "react";
-//#region src/hooks/client/index.ts
-const useClient = () => useSyncExternalStore(() => () => {}, () => true, () => false);
-//#endregion
-export { useClient };

package/dist/hooks/clipboard/index.d.mts

@@ -1,7 +0,0 @@
-//#region src/hooks/clipboard/index.d.ts
-declare const useClipboard: () => {
-  writeClipboard: (text: string) => Promise<void>;
-  readClipboard: () => Promise<string>;
-};
-//#endregion
-export { useClipboard };