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/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 {