chore: align Vue file conventions (#137)

- document Vue file authoring conventions
- rename runtime/example component files to kebab-case
- update imports and docs references

packages/runtime-tests/integration/accessibility/screen-reader.test.tsx

@@ -1131,7 +1131,7 @@ describe("screen reader enabled mode", () => {
 // suite above did not already cover.
 describe("screen reader: Ink test/screen-reader.tsx parity (component path)", () => {
   // Ink screen-reader.tsx:78-84 — aria-label-only <Text> (no children) emits the
-  // label. Component path: Text.ts substitutes ariaLabel for an absent default slot.
+  // label. Component path: text.ts substitutes ariaLabel for an absent default slot.
   test("aria-label-only Text (no children) emits the label", () => {
     const output = renderToString(
       defineComponent(() => () => <Text aria-label="Screen-reader only" />),
@@ -1141,7 +1141,7 @@ describe("screen reader: Ink test/screen-reader.tsx parity (component path)", ()
   });
 
   // Ink screen-reader.tsx:86-92 — aria-label-only <Box> (no children) emits the
-  // label. Component path: Box.ts builds a label text node when SR + ariaLabel and
+  // label. Component path: box.ts builds a label text node when SR + ariaLabel and
   // there is no default slot.
   test("aria-label-only Box (no children) emits the label", () => {
     const output = renderToString(

packages/runtime-tests/integration/components/borders.test.tsx

@@ -1390,7 +1390,7 @@ test("G16: per-edge borderDimColor=false overrides general borderDimColor", asyn
 // reserved a 1-cell inset). Ink's render-border.ts has no existence check: it
 // reads box.topLeft/box.top off `cliBoxes[name]` === undefined and crashes with a
 // TypeError. We align by throwing a clear, descriptive Error — but do it in the
-// Box component's RENDER (Box.ts), so the throw is caught by vue-tui's existing
+// Box component's RENDER (box.ts), so the throw is caught by vue-tui's existing
 // error boundary (onErrorCaptured → ErrorOverview → exit), exactly like any other
 // component render error. paint.ts stays a silent `if (!chars) return` fallback
 // (a raw throw in the post-flush commit would wedge Vue's scheduler).

packages/runtime-tests/integration/components/static.test.tsx

@@ -818,7 +818,7 @@ test("two separate <Static> regions both render their items (additive divergence
 // B04(a) — the render-prop's SECOND arg (`index`) is the ABSOLUTE array index,
 // stable across INCREMENTAL appends.
 //
-// Static.ts renders `items.slice(cursor)` and passes `index = cursor + i`, where
+// static.ts renders `items.slice(cursor)` and passes `index = cursor + i`, where
 // the cursor advances to items.length after each batch is written. So an item's
 // index is its position in the FULL list, never its position within the append
 // batch. This mirrors Ink's Static, which renders `items.slice(index)` and passes
@@ -869,7 +869,7 @@ test("Static render-prop index is the absolute array index across incremental ap
 
 // B04(b) — vertical padding on the <Static> container paints into the static frame.
 //
-// Static.ts merges the caller `style` onto the internal static box, and
+// static.ts merges the caller `style` onto the internal static box, and
 // static-channel.ts paints that node via its OWN yoga node (paintIsolated). So
 // paddingTop/paddingBottom resolve as real layout: they add blank rows above /
 // below the item inside the painted static frame. Confirmed against the pinned

packages/runtime-tests/integration/components/text.test.tsx

@@ -565,7 +565,7 @@ test("strip complete ESC#8 (DECALN) sequence without clipping at a tight width",
   expect(stripAnsi(output)).toBe("ABC");
 });
 
-// Mirrors Ink text.tsx:277-283 ("strip complete ESC control sequences with
+// Mirrors Ink Text.tsx:277-283 ("strip complete ESC control sequences with
 // intermediates"). The existing ESC#8-only test above misses the ESC-c (RIS, full
 // terminal reset) leg: sanitizeAnsi must strip BOTH the intermediate-byte ESC#8 and
 // the bare ESC c so neither leaks into the painted frame, leaving the visible "ABC".

packages/runtime/README.md

@@ -27,13 +27,13 @@ npm install @vue-tui/runtime vue
 ```ts
 // src/main.ts
 import { createApp } from "@vue-tui/runtime";
-import App from "./App.vue";
+import App from "./app.vue";
 
 createApp(App).mount();
 ```
 
 ```vue
-<!-- src/App.vue -->
+<!-- src/app.vue -->
 <script setup lang="ts">
 import { shallowRef } from "vue";
 import { Box, Text, useInput } from "@vue-tui/runtime";

packages/runtime/src/components/error-overview.ts

@@ -3,8 +3,8 @@ import { cwd } from "node:process";
 import { defineComponent, h, type PropType } from "vue";
 import StackUtils from "stack-utils";
 import codeExcerpt, { type CodeExcerpt } from "code-excerpt";
-import { Box } from "./Box.ts";
-import { Text } from "./Text.ts";
+import { Box } from "./box.ts";
+import { Text } from "./text.ts";
 
 // Ported from Ink's src/components/ErrorOverview.tsx (v7.0.4). We use the <Box>
 // and <Text> wrapper components (not raw host elements) because Ink does, and

packages/runtime/src/host/node-ops.ts

@@ -418,7 +418,7 @@ export function buildNodeOps(options: TtyRendererOptions): RendererOptions<TuiNo
         key === "ariaHidden" ||
         key === "accessibilityLabel"
       ) {
-        // Handled at the Vue component level (Box.ts / Text.ts / Transform.ts),
+        // Handled at the Vue component level (box.ts / text.ts / transform.ts),
         // not stored on the DOM node. Silently ignore so we don't warn.
       } else if (key === "key" || key === "ref" || key.startsWith("on")) {
         // Reserved by Vue / event keys, ignore.

packages/runtime/src/host/text-measure.test.ts

@@ -5,8 +5,8 @@ import wrapAnsi from "wrap-ansi";
 import { createText, createTextLeaf, createTransform, createVirtualText } from "./nodes.ts";
 import { flattenLeaves, measureTextNatural, wrapText } from "./text-measure.ts";
 import { renderToString } from "../render-to-string.ts";
-import { Box } from "../components/Box.ts";
-import { Text } from "../components/Text.ts";
+import { Box } from "../components/box.ts";
+import { Text } from "../components/text.ts";
 
 // Minimal ANSI-stripping helper for test assertions (avoids strip-ansi dep).
 function stripAnsi(s: string): string {

packages/runtime/src/index.ts

@@ -7,12 +7,12 @@ export {
   type AriaState,
   type BoxStyle,
   type BoxProps,
-} from "./components/Box.ts";
-export { Text, type TextProps } from "./components/Text.ts";
-export { Newline, type NewlineProps } from "./components/Newline.ts";
-export { Spacer } from "./components/Spacer.ts";
-export { Static, type StaticProps } from "./components/Static.ts";
-export { Transform, type TransformProps } from "./components/Transform.ts";
+} from "./components/box.ts";
+export { Text, type TextProps } from "./components/text.ts";
+export { Newline, type NewlineProps } from "./components/newline.ts";
+export { Spacer } from "./components/spacer.ts";
+export { Static, type StaticProps } from "./components/static.ts";
+export { Transform, type TransformProps } from "./components/transform.ts";
 
 export { useApp, type UseAppReturn } from "./composables/useApp.ts";
 export { useInput, type Key, type UseInputOptions } from "./composables/useInput.ts";

packages/runtime/src/overlay.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, inject, type Component, type PropType } from "@vue/runtime-core";
-import { Box } from "./components/Box.ts";
-import { Text } from "./components/Text.ts";
+import { Box } from "./components/box.ts";
+import { Text } from "./components/text.ts";
 import { DevStateKey, type DevState } from "./hmr.ts";
 
 const ErrorDisplay = defineComponent({

packages/runtime/src/paint/static-channel.ts

@@ -76,7 +76,7 @@ export function paintStaticNode(
       // exactly how screen-reader.ts linearizes a box/root container of these
       // children (screen-reader.ts:73-82): the separator and child order derive
       // from the container's resolved flexDirection (defaulting to the
-      // <Static> "column" default set in Static.ts).
+      // <Static> "column" default set in static.ts).
       const flexDirection = resolvedFlexDirection(stat);
       // Match screen-reader.ts:76 exactly — row/row-reverse use a space, all
       // other directions (incl. the column default) use a newline.

packages/runtime/src/render.ts

@@ -43,7 +43,7 @@ import {
 } from "./context.ts";
 import { devState, DevStateKey, initHmrBridge } from "./hmr.ts";
 import { createDevOverlayWrapper } from "./overlay.ts";
-import { ErrorOverview } from "./components/ErrorOverview.ts";
+import { ErrorOverview } from "./components/error-overview.ts";
 import { resolveSize } from "./composables/useTerminalSize.ts";
 
 export interface MountOptions {