create-buntui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/templates/full/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "{{name}}",
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "bun --preload @buntui/compiler/vue-plugin src/dev.ts",
+        "build": "bun run ./scripts/build.ts"
+    },
+    "dependencies": {
+        "@buntui/core": "{{version}}",
+        "@buntui/compiler": "{{version}}",
+        "@buntui/native": "{{version}}",
+        "@buntui/extensions": "{{version}}",
+        "@vue/reactivity": "^3.5.34"
+    },
+    "devDependencies": {
+        "@types/bun": "latest",
+        "vue": "^3.5.34",
+        "vue-tsc": "^3.2.8"
+    }
+}

package/templates/full/scripts/build.ts

@@ -0,0 +1,66 @@
+import process from 'node:process';
+import path from 'node:path';
+import fs from 'node:fs';
+import {compile, CORE_REGISTRY} from '@buntui/compiler';
+import {getBinaryPath} from '@buntui/native';
+
+const result = await Bun.build({
+  entrypoints: ['src/main.ts'],
+  outdir: 'dist',
+  target: 'bun',
+  minify: true,
+  plugins: [
+    {
+      name: 'buntui-vue',
+      setup(build) {
+        build.onLoad({filter: /\.vue$/v}, async args => {
+          const source = await Bun.file(args.path).text();
+          const compiled = compile(source, {
+            filename: args.path,
+            registry: CORE_REGISTRY,
+            codegen: {
+              coreModuleId: '@buntui/core',
+              reactivityModuleId: '@vue/reactivity',
+            },
+          });
+          return {contents: compiled.code, loader: 'ts'};
+        });
+      },
+    },
+  ],
+});
+
+if (!result.success) {
+  for (const error of result.logs) {
+    console.error(error);
+  }
+
+  process.exit(1);
+}
+
+for (const output of result.outputs) {
+  console.log(`Built: ${output.path} (${(output.size / 1024).toFixed(1)} KB)`);
+}
+
+function getBinaryExt(): string {
+  if (process.platform === 'win32') return 'dll';
+  if (process.platform === 'darwin') return 'dylib';
+  return 'so';
+}
+
+const binaryName = `buntui.${getBinaryExt()}`;
+const nativePath = getBinaryPath();
+const dllSearchPaths = [
+  ...(nativePath ? [nativePath] : []),
+  path.resolve(import.meta.dir, '..', 'node_modules', '@buntui', 'core', binaryName),
+  path.resolve(import.meta.dir, '..', binaryName),
+];
+
+for (const candidate of dllSearchPaths) {
+  if (fs.existsSync(candidate)) {
+    const dest = path.resolve(import.meta.dir, '..', 'dist', binaryName);
+    fs.copyFileSync(candidate, dest);
+    console.log(`Copied: ${binaryName} -> dist/`);
+    break;
+  }
+}

package/templates/full/src/App.vue

@@ -0,0 +1,49 @@
+<template>
+    <SelectButton :x="1" :y="2" :height="1" :options="tabOptions" v-model="currentTab" />
+
+    <BoxDemo v-if="currentTab === 'Box'" />
+    <ButtonDemo v-if="currentTab === 'Button'" />
+    <InputDemo v-if="currentTab === 'Input'" />
+    <TextDemo v-if="currentTab === 'Text'" />
+    <ProgressDemo v-if="currentTab === 'Progress'" />
+    <CheckboxDemo v-if="currentTab === 'Checkbox'" />
+    <SwitchDemo v-if="currentTab === 'Switch'" />
+    <RadioDemo v-if="currentTab === 'Radio'" />
+    <ScrollBoxDemo v-if="currentTab === 'ScrollBox'" />
+    <TextareaDemo v-if="currentTab === 'Textarea'" />
+    <TableDemo v-if="currentTab === 'Table'" />
+    <SelectDemo v-if="currentTab === 'Select'" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+import BoxDemo from './components/BoxDemo.vue'
+import ButtonDemo from './components/ButtonDemo.vue'
+import InputDemo from './components/InputDemo.vue'
+import TextDemo from './components/TextDemo.vue'
+import ProgressDemo from './components/ProgressDemo.vue'
+import CheckboxDemo from './components/CheckboxDemo.vue'
+import SwitchDemo from './components/SwitchDemo.vue'
+import RadioDemo from './components/RadioDemo.vue'
+import ScrollBoxDemo from './components/ScrollBoxDemo.vue'
+import TextareaDemo from './components/TextareaDemo.vue'
+import TableDemo from './components/TableDemo.vue'
+import SelectDemo from './components/SelectDemo.vue'
+
+const tabOptions = ref([
+    'Box',
+    'Button',
+    'Input',
+    'Text',
+    'Progress',
+    'Checkbox',
+    'Switch',
+    'Radio',
+    'ScrollBox',
+    'Textarea',
+    'Table',
+    'Select',
+])
+const currentTab = ref(tabOptions.value[0]!)
+</script>

package/templates/full/src/components/BoxDemo.vue

@@ -0,0 +1,80 @@
+<template>
+    <Text :x="1" :y="3" value="Box widget — layout container with borders, padding, alignment" />
+
+    <Box
+        :x="1"
+        :y="4"
+        :width="30"
+        :height="6"
+        borderColor="rgba(137,180,250,1)"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Rounded border" />
+        <Text value="With padding and gap" />
+    </Box>
+
+    <Box
+        :x="33"
+        :y="4"
+        :width="30"
+        :height="6"
+        borderColor="rgba(166,227,161,1)"
+        borderStyle="double"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Double border" />
+        <Text value="Vertical layout" />
+    </Box>
+
+    <Box
+        :x="1"
+        :y="11"
+        :width="30"
+        :height="3"
+        borderColor="rgba(250,179,135,1)"
+        borderStyle="solid"
+        direction="horizontal"
+        :gap="2"
+        align="center"
+    >
+        <Text value="Horizontal" />
+        <Text value="center aligned" />
+    </Box>
+
+    <Box
+        :x="33"
+        :y="11"
+        :width="30"
+        :height="3"
+        borderColor="rgba(243,139,168,1)"
+        borderStyle="dashed"
+        direction="horizontal"
+        :gap="2"
+        align="center"
+    >
+        <Text value="Dashed border" />
+        <Text value="gap=2" />
+    </Box>
+
+    <Box
+        :draggable="true"
+        :x="1"
+        :y="15"
+        :width="20"
+        :height="3"
+        borderColor="rgba(203,166,245,1)"
+        borderStyle="rounded"
+    >
+        <Text value="Drag me!" />
+    </Box>
+</template>
+
+<script setup lang="ts">
+</script>

package/templates/full/src/components/ButtonDemo.vue

@@ -0,0 +1,32 @@
+<template>
+    <Text :x="1" :y="3" value="Button widget — interactive clickable element" />
+
+    <Button :x="1" :y="4" :width="18" :height="3" value="Click me" @click="handleClick" />
+    <Text :x="21" :y="5" :value="log" />
+
+    <Text :x="1" :y="8" value="Border variants:" />
+    <Button :x="1" :y="9" :width="12" :height="3" value="Solid" borderStyleNormal="solid" @click="handleClick" />
+    <Button :x="15" :y="9" :width="12" :height="3" value="Rounded" borderStyleNormal="rounded" @click="handleClick" />
+    <Button :x="29" :y="9" :width="12" :height="3" value="Bold" borderStyleNormal="bold" @click="handleClick" />
+    <Button :x="43" :y="9" :width="12" :height="3" value="Double" borderStyleNormal="double" @click="handleClick" />
+
+    <Text :x="1" :y="13" value="States:" />
+    <Button :x="1" :y="14" :width="18" :height="3" value="Disabled" :disabled="disabled" />
+    <Button :x="21" :y="14" :width="18" :height="3" value="Toggle me" @click="toggleDisabled" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Click a button above')
+const disabled = ref(false)
+
+function handleClick() {
+    const now = new Date()
+    log.value = `Clicked at ${now.toLocaleTimeString()}`
+}
+
+function toggleDisabled() {
+    disabled.value = !disabled.value
+}
+</script>

package/templates/full/src/components/CheckboxDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <Text :x="1" :y="3" value="Checkbox widget — boolean toggle" />
+
+    <Checkbox :x="1" :y="4" label="Enable feature A" @change="handleChange('A', $event)" />
+    <Checkbox :x="1" :y="5" label="Enable feature B" @change="handleChange('B', $event)" />
+    <Checkbox :x="1" :y="6" label="Disabled option" :disabled="true" />
+
+    <Text :x="1" :y="8" :value="log" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Toggle a checkbox above')
+
+function handleChange(name: string, event: TuiCheckboxChangeEvent) {
+    log.value = `${name}: ${event.checked ? 'checked' : 'unchecked'}`
+}
+</script>

package/templates/full/src/components/InputDemo.vue

@@ -0,0 +1,34 @@
+<template>
+    <Text :x="1" :y="3" value="Input widget — text field with editing support" />
+
+    <Box
+        :x="1"
+        :y="4"
+        :width="50"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Type something and press Enter:" />
+        <Input
+            :width="46"
+            placeholder="Enter text here..."
+            @submit="handleSubmit"
+        />
+    </Box>
+
+    <Text :x="1" :y="13" :value="submittedValue" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const submittedValue = ref('Submit result appears here')
+
+function handleSubmit(event: TuiSubmitEvent) {
+    submittedValue.value = `Submitted: "${event.value}"`
+}
+</script>

package/templates/full/src/components/ProgressDemo.vue

@@ -0,0 +1,25 @@
+<template>
+    <Text :x="1" :y="3" value="Progress widget — bar indicator" />
+
+    <Text :x="1" :y="4" value="Determinate:" />
+    <Progress :x="1" :y="5" :width="40" :height="1" :value="progress" />
+
+    <Text :x="1" :y="7" :value="`${Math.round(progress * 100)}%`" />
+
+    <Button :x="1" :y="9" :width="20" :height="3" value="Reset" @click="reset" />
+    <Button :x="23" :y="9" :width="20" :height="3" value="Set 75%" @click="set75" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const progress = ref(0.5)
+
+function reset() {
+    progress.value = 0
+}
+
+function set75() {
+    progress.value = 0.75
+}
+</script>

package/templates/full/src/components/RadioDemo.vue

@@ -0,0 +1,23 @@
+<template>
+    <Text :x="1" :y="3" value="RadioGroup widget — single selection from options" />
+
+    <RadioGroup
+        :x="1"
+        :y="4"
+        :width="30"
+        :options="['Red', 'Green', 'Blue']"
+        @change="handleChange"
+    />
+
+    <Text :x="1" :y="8" :value="log" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Select a color above')
+
+function handleChange(event: TuiRadioGroupChangeEvent) {
+    log.value = `Selected: ${event.label} (index ${event.value})`
+}
+</script>

package/templates/full/src/components/ScrollBoxDemo.vue

@@ -0,0 +1,50 @@
+<template>
+    <Text :x="1" :y="3" value="ScrollBox widget — scrollable container" />
+
+    <ScrollBox
+        :x="1"
+        :y="4"
+        :width="40"
+        :height="8"
+        borderStyle="rounded"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+        :alwaysShowScrollbar="true"
+    >
+        <Text v-for="item in items" :key="item" :value="item" />
+    </ScrollBox>
+
+    <Box
+        :x="44"
+        :y="4"
+        :width="30"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Scroll with arrow keys" />
+        <Text value="Content overflows the visible area" />
+        <Text value="Scrollbar appears automatically" />
+    </Box>
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const items = ref([
+    'Item 1 — Apple',
+    'Item 2 — Banana',
+    'Item 3 — Cherry',
+    'Item 4 — Date',
+    'Item 5 — Elderberry',
+    'Item 6 — Fig',
+    'Item 7 — Grape',
+    'Item 8 — Honeydew',
+    'Item 9 — Kiwi',
+    'Item 10 — Lemon',
+])
+</script>

package/templates/full/src/components/SelectDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <Text :x="1" :y="3" value="Select widget — dropdown selection" />
+
+    <Box
+        :x="1"
+        :y="4"
+        :width="50"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Choose a framework:" />
+        <Select
+            :width="46"
+            :options="frameworks"
+            placeholder="Select a framework..."
+            @change="handleChange"
+        />
+    </Box>
+
+    <Text :x="1" :y="13" :value="selected" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const frameworks = ref([
+    {value: 'bun', label: 'Bun'},
+    {value: 'node', label: 'Node.js'},
+    {value: 'deno', label: 'Deno'},
+])
+
+const selected = ref('Select an option above')
+
+function handleChange(event: TuiChangeEventData) {
+    selected.value = `Selected: ${String(event.value)}`
+}
+</script>

package/templates/full/src/components/SwitchDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <Text :x="1" :y="3" value="Switch widget — on/off toggle" />
+
+    <Switch :x="1" :y="4" label="Dark mode" @change="handleChange('Dark mode', $event)" />
+    <Switch :x="1" :y="5" label="Notifications" @change="handleChange('Notifications', $event)" />
+    <Switch :x="1" :y="6" label="Disabled" :disabled="true" />
+
+    <Text :x="1" :y="8" :value="log" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Toggle a switch above')
+
+function handleChange(name: string, event: TuiSwitchChangeEvent) {
+    log.value = `${name}: ${event.checked ? 'on' : 'off'}`
+}
+</script>

package/templates/full/src/components/TableDemo.vue

@@ -0,0 +1,33 @@
+<template>
+    <Text :x="1" :y="3" value="Table widget — structured data display with selection" />
+
+    <Table
+        :x="1"
+        :y="4"
+        :width="60"
+        :height="8"
+        borderStyle="rounded"
+        :columns="columns"
+        :rows="rows"
+    />
+
+    <Text :x="1" :y="13" value="Use arrow keys to navigate rows" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const columns = ref([
+    {key: 'name', label: 'Name', width: 20},
+    {key: 'role', label: 'Role', width: 16},
+    {key: 'status', label: 'Status', width: 10},
+])
+
+const rows = ref([
+    {name: 'Alice', role: 'Engineer', status: 'Active'},
+    {name: 'Bob', role: 'Designer', status: 'Away'},
+    {name: 'Charlie', role: 'Manager', status: 'Active'},
+    {name: 'Diana', role: 'Engineer', status: 'Busy'},
+    {name: 'Eve', role: 'Analyst', status: 'Active'},
+])
+</script>

package/templates/full/src/components/TextDemo.vue

@@ -0,0 +1,66 @@
+<template>
+    <Text :x="1" :y="3" value="Text widget — display styled text" />
+
+    <Box
+        :x="1"
+        :y="4"
+        width="45%"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Font styles" />
+        <Text styleModifier="bold" value="Bold text" />
+        <Text styleModifier="italic" value="Italic text" />
+    </Box>
+
+    <Box
+        x="50%"
+        :y="4"
+        width="45%"
+        :height="10"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Colors" />
+        <Text colorFg="rgba(243,139,168,1)" value="Red " />
+        <Text colorFg="rgba(137,180,250,1)" value="Blue " />
+        <Text colorFg="rgba(166,227,161,1)" value="Green" />
+    </Box>
+
+    <Box
+        :x="1"
+        :y="15"
+        width="95%"
+        :height="6"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Dynamic clock:" />
+        <Text :value="clock" />
+    </Box>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from '@vue/reactivity'
+
+const elapsed = ref(0)
+setInterval(() => {
+    elapsed.value += 1
+}, 1000)
+
+const clock = computed(() => {
+    elapsed.value
+    const now = new Date()
+    return now.toLocaleTimeString()
+})
+</script>

package/templates/full/src/components/TextareaDemo.vue

@@ -0,0 +1,38 @@
+<template>
+    <Text :x="1" :y="3" value="Textarea widget — multi-line text editor" />
+
+    <Box
+        :x="1"
+        :y="4"
+        :width="50"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text :value="label" />
+        <Textarea
+            :width="46"
+            :height="3"
+            placeholder="Enter multi-line text..."
+            v-model="text"
+        />
+    </Box>
+
+    <Text :x="1" :y="13" :value="preview" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from '@vue/reactivity'
+
+const text = ref('')
+
+const label = computed(() => text.value.length > 0 ? `Characters: ${text.value.length}` : 'Type something below:')
+
+const preview = computed(() => {
+    const lines = text.value.split('\n')
+    return text.value.length > 0 ? `${lines.length} lines, ${text.value.length} chars` : 'Preview appears here'
+})
+</script>

package/templates/full/src/dev.ts

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import {createDevServer, CORE_REGISTRY, type DevServerOptions} from '@buntui/compiler';
+import {mountHmrErrorOverlay, type HmrErrorOverlayHandle} from '@buntui/extensions/hmr-error-overlay';
+import {ENTRY, run} from './main';
+
+const DEV_DIR = path.join(import.meta.dir, '.dev');
+fs.mkdirSync(DEV_DIR, {recursive: true});
+
+const {scene} = run({logFilePath: DEV_DIR});
+
+const VUE_FILE = path.join(import.meta.dir, ENTRY);
+
+let errorOverlay: HmrErrorOverlayHandle | undefined;
+
+createDevServer({
+  file: VUE_FILE,
+  tempDir: DEV_DIR,
+  compileOptions: {
+    registry: CORE_REGISTRY,
+    codegen: {
+      coreModuleId: '@buntui/core',
+      reactivityModuleId: '@vue/reactivity',
+    },
+  },
+  onClear() {
+    errorOverlay?.dismiss();
+    errorOverlay = undefined;
+    scene.clearWidgets();
+  },
+  onReload(setupFn: (scene: unknown) => void) {
+    errorOverlay?.dismiss();
+    errorOverlay = undefined;
+    setupFn(scene);
+  },
+  onError(error: Error) {
+    errorOverlay?.dismiss();
+    errorOverlay = mountHmrErrorOverlay(scene, error);
+  },
+} satisfies DevServerOptions);

package/templates/full/src/main.ts

@@ -0,0 +1,21 @@
+import {createApp} from '@buntui/core';
+import App from './App.vue';
+
+export const ENTRY = 'App.vue';
+
+export function run(devOptions: {logFilePath?: string} = {}) {
+  const app = createApp({
+    logLevel: 'info',
+    clearLog: true,
+    tickRate: 60,
+    renderRate: 24,
+    ...devOptions,
+  });
+  const scene = app.createScene(App, {bgHexRgb: 0x1A_1B_26, visible: true});
+  app.start();
+  return {app, scene};
+}
+
+if (import.meta.main) {
+  run();
+}