@lyda/kilo-ui 0.1.4 → 0.1.5

package/README.md

@@ -12,11 +12,11 @@ After you **publish** this project to npm, install the **exact** `name` from its
 **Do not** run `npm install -D kilo-ui` expecting this Vue CLI — the public npm name `kilo-ui` is already used by a different project.
 
 ```bash
-npm install -D @lyda/kilo-ui
+npm install -D @lyda/kilo-ui@latest
 npx kilo-ui add data-table
 ```
 
-**First install in a new project:** the package **postinstall** runs `kilo-ui init` once (unless `kilo.config.ts` already exists). That creates **`kilo.config.ts` in your app root** (next to `package.json`) — not inside `node_modules`. Edit it for **aliases**, **`ui.componentsDir`** (folder prefix under `src/components`, default `ui`), and **Tailwind CSS path**. An annotated example ships with the library at **`node_modules/@lyda/kilo-ui/config/kilo.config.example.ts`**. If install used **`--ignore-scripts`**, run **`npx kilo-ui init`** once yourself.
+**First install in a new project:** the package **postinstall** runs `kilo-ui init` once (unless `kilo.config.ts` already exists). That creates **`kilo.config.ts` in your app root** (next to `package.json`) — not inside `node_modules`. Edit **`ui.componentsDir`** (or **`componentsPrefix`**) for the install folder (e.g. `ki` → `src/components/ki/...`). If the folder is not `ui`, **`kilo-ui add`** injects **`defineOptions({ name: "KiCardBox" })`** so you can use **`<KiCardBox />`** (prefix + file name). Use **`ui.componentTagPrefix: false`** to skip that. An annotated example ships at **`node_modules/@lyda/kilo-ui/config/kilo.config.example.ts`**. If install used **`--ignore-scripts`**, run **`npx kilo-ui init`** once yourself.
 
 You can still run **`npx kilo-ui init`** anytime to add missing scaffold files; use **`init --force`** to reset **`kilo.config.ts`** to defaults (back up first if you customized it).
 

package/bin/kilo-ui.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { createJiti } from 'jiti'
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { dirname, join, relative, resolve } from 'node:path'
+import { basename, dirname, join, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -92,6 +92,45 @@ function normalizeConfig(raw) {
   return c
 }
 
+/** "ki" → "Ki", "my-kit" → "MyKit" */
+function segmentToPascal(segment) {
+  return String(segment)
+    .split(/[^a-zA-Z0-9]+/)
+    .filter(Boolean)
+    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())
+    .join('')
+}
+
+/** Pascal prefix for defineOptions name, or null if disabled / default ui folder. */
+function effectiveDevTagPrefix(config) {
+  const v = config.ui?.componentTagPrefix
+  if (v === false) return null
+  if (typeof v === 'string' && v.trim().length) return segmentToPascal(v.trim())
+
+  const segs = componentDirSegments(config)
+  const first = segs[0]
+  if (!first) return null
+  if (first.toLowerCase() === 'ui') return null
+  return segmentToPascal(first)
+}
+
+function vueResolvedComponentName(config, fileBaseNoExt) {
+  const prefix = effectiveDevTagPrefix(config)
+  if (!prefix) return null
+  return `${prefix}${fileBaseNoExt}`
+}
+
+function injectVueComponentName(content, name) {
+  if (/\bdefineOptions\s*\(/.test(content)) return content
+  const safe = String(name).replace(/[^A-Za-z0-9_]/g, '')
+  if (!safe) return content
+  const injectLine = `defineOptions({ name: '${safe}' })\n`
+  const m = content.match(/<script setup[^>]*>/)
+  if (!m || m.index === undefined) return content
+  const end = m.index + m[0].length
+  return `${content.slice(0, end)}\n${injectLine}${content.slice(end)}`
+}
+
 function hasKiloModuleConfig(cwd) {
   return CONFIG_MODULES.some((name) => existsSync(join(cwd, name)))
 }
@@ -166,11 +205,18 @@ function componentFilePath(config, componentName, fileName) {
 function copyRegistryFile(sourceRelative, targetPath, config, force) {
   const sourcePath = join(registryRoot, sourceRelative)
   if (!existsSync(sourcePath)) fail(`Registry file not found: ${sourceRelative}`)
-  const content = readFileSync(sourcePath, 'utf8')
+  let content = readFileSync(sourcePath, 'utf8')
     .replaceAll('__COMPONENTS_ALIAS__', config.aliases.components)
     .replaceAll('__COMPOSABLES_ALIAS__', config.aliases.composables)
     .replaceAll('__LIB_ALIAS__', config.aliases.lib)
     .replaceAll('__TYPES_ALIAS__', config.aliases.types)
+
+  if (targetPath.endsWith('.vue')) {
+    const base = basename(targetPath, '.vue')
+    const devName = vueResolvedComponentName(config, base)
+    if (devName) content = injectVueComponentName(content, devName)
+  }
+
   writeFile(targetPath, content, force)
 }
 
@@ -192,7 +238,7 @@ function kiloConfigSerializable(config) {
 function buildKiloConfigFileContent(config) {
   const obj = kiloConfigSerializable(config)
   const body = JSON.stringify(obj, null, 2)
-  const header = `// Kilo UI — app config (generated in your project root by ${pkgName}, not inside the library package)\n// ui.componentsDir = folder prefix under aliases.components (default "ui" → …/components/ui/<component>/)\n// Use "" for no prefix: …/components/<component>/\n\n`
+  const header = `// Kilo UI — app config (generated in your project root by ${pkgName}, not inside the library package)\n// ui.componentsDir / componentsPrefix = folder under aliases.components (default "ui")\n// If folder is not "ui", copied .vue files get defineOptions({ name: "<Prefix><FileName>" }) for <PrefixFileName /> in templates (override with ui.componentTagPrefix: false or a string).\n\n`
   return `${header}import { defineConfig } from '${pkgName}/config'\n\nexport default defineConfig(${body})\n`
 }
 
@@ -306,6 +352,11 @@ function init(args) {
 
   writeKiloConfigTs(cwd, config, force)
 
+  // Create the base folder for installed components so users can see it immediately after install/init.
+  // Actual component subfolders are created by `kilo-ui add`.
+  const baseComponents = join(cwd, aliasPath(config, 'components'), ...componentDirSegments(config))
+  if (baseComponents) ensureDir(baseComponents)
+
   copyRegistryFile('styles/teamwork-ui.css', join(process.cwd(), config.tailwind.css), config, force)
   copyRegistryFile('lib/utils.ts', resolveTarget(config, 'lib', 'utils.ts'), config, force)
   copyRegistryFile('vue/env.d.ts', join(process.cwd(), 'env.d.ts'), config, force)

package/config/define-config.d.ts

@@ -11,6 +11,12 @@ export interface KiloUiUserConfig {
     componentsDir?: string
     /** Same as `componentsDir` if you prefer the name “prefix”. */
     componentsPrefix?: string
+    /**
+     * Pascal prefix for Vue `defineOptions({ name })` on copied `.vue` files so you can use
+     * `<KiCardBox />` in templates when folder prefix is `ki` (auto: from first folder segment unless it is `ui`).
+     * Set a string to force (e.g. `"Ki"`). Set `false` to disable injection.
+     */
+    componentTagPrefix?: string | false
   }
   tailwind?: {
     css: string

package/config/kilo.config.example.ts

@@ -7,6 +7,9 @@
  *
  * Change **`ui.componentsDir`** to set the folder prefix under your components path
  * (e.g. `"ui"` → src/components/ui/data-table/…). Use `componentsPrefix` as an alias.
+ *
+ * With a non-`ui` folder (e.g. `"ki"`), `kilo-ui add` injects `defineOptions({ name: "KiCardBox" })`
+ * so you can use `<KiCardBox />` in templates. Override with `ui.componentTagPrefix` (`string` or `false`).
  */
 import { defineConfig } from '@lyda/kilo-ui/config'
 
@@ -16,6 +19,8 @@ export default defineConfig({
   ui: {
     /** Folder prefix under `aliases.components` for copied registry components */
     componentsDir: 'ui',
+    /** Set `false` to skip defineOptions name injection; set a string to force tag prefix */
+    // componentTagPrefix: false,
   },
   tailwind: {
     css: 'src/styles/teamwork-ui.css',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyda/kilo-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "shadcn-style Vue component registry for team CRUD apps",
   "type": "module",
   "repository": {