vunor 0.1.2 → 0.1.4

package/dist/utils-6bTTIoaw.js

@@ -0,0 +1,40 @@
+import { computed, getCurrentInstance } from "vue";
+//#region src/components/Input/utils.ts
+function useInputProps() {
+	const instance = getCurrentInstance();
+	if (instance) {
+		const props = instance.props;
+		return computed(() => ({
+			label: props.label,
+			stackLabel: props.stackLabel,
+			placeholder: props.placeholder,
+			design: props.design,
+			readonly: props.readonly,
+			disabled: props.disabled,
+			iconPrepend: props.iconPrepend,
+			iconAppend: props.iconAppend,
+			groupItem: props.groupItem,
+			type: props.type,
+			rows: props.type === "textarea" ? props.rows : void 0,
+			autoGrow: props.autoGrow,
+			maxlength: props.maxlength,
+			required: props.required,
+			active: props.active,
+			loading: props.loading,
+			onAppendClick: props.onAppendClick,
+			onPrependClick: props.onPrependClick,
+			onBlur: props.onBlur,
+			onFocus: props.onFocus,
+			iconBefore: props.iconBefore,
+			iconAfter: props.iconAfter,
+			error: props.error,
+			hint: props.hint,
+			autocomplete: props.autocomplete,
+			onBeforeClick: props.onBeforeClick,
+			onAfterClick: props.onAfterClick,
+			onClick: props.onClick
+		}));
+	}
+}
+//#endregion
+export { useInputProps as t };

package/dist/utils.d.mts

@@ -13,11 +13,11 @@ type TVueCssClass = string | string[] | Record<string, boolean | undefined>;
 declare function mergeCssClasses(...args: Array<TVueCssClass | undefined>): Record<string, boolean>;
 //#endregion
 //#region src/components/utils/provide-inject.d.ts
-declare const useProvideInject: <PA extends any[], IA extends any[], PR, INJ>(key: string, init: () => TProvideInjectBody<PA, IA, PR, INJ>) => {
+declare const useProvideInject: <PA extends unknown[], IA extends unknown[], PR, INJ>(key: string, init: () => TProvideInjectBody<PA, IA, PR, INJ>) => {
   provide: (...args: PA) => PR;
   inject: (...args: IA) => INJ | undefined;
 };
-interface TProvideInjectBody<PA extends any[], IA extends any[], PR, INJ> {
+interface TProvideInjectBody<PA extends unknown[], IA extends unknown[], PR, INJ> {
   _provide: (...args: PA) => PR;
   _inject: (...args: IA) => INJ;
 }

package/dist/utils.mjs

@@ -1,5 +1,4 @@
 import { inject, provide } from "vue";
-
 //#region src/components/utils/merge-class.ts
 /**
 * Merges CSS classes from various input types into a single object.
@@ -17,7 +16,6 @@ function mergeCssClasses(...args) {
 	}
 	return result;
 }
-
 //#endregion
 //#region src/components/utils/provide-inject.ts
 const useProvideInject = (key, init) => {
@@ -47,6 +45,5 @@ useProvideInject("key", () => {
 		_inject: () => a
 	};
 });
-
 //#endregion
-export { mergeCssClasses, useProvideInject };
+export { mergeCssClasses, useProvideInject };

package/dist/vite.mjs

@@ -6,6 +6,5 @@ const VunorVueResolver = (componentName) => {
 		from: `vunor/${componentName.slice(2)}`
 	};
 };
-
 //#endregion
-export { VunorVueResolver };
+export { VunorVueResolver };

package/dist/vunor.d.mts

@@ -1,4 +1,4 @@
-import * as vue from "vue";
+import * as _$vue from "vue";
 import { ComputedRef, Ref } from "vue";
 
 //#region src/components/AppToasts/app-toasts.d.ts
@@ -19,7 +19,7 @@ type TToastInternal = TAppToast & {
 };
 declare function useAppToasts(): {
   create: (toast: TAppToast) => () => void;
-  toasts: vue.Ref<{
+  toasts: _$vue.Ref<{
     title: string;
     message: string;
     duration?: number | undefined;
@@ -50,7 +50,7 @@ declare function useAppToasts(): {
 //#region src/components/Card/pi.d.ts
 declare const useCardPI: () => {
   provide: () => {
-    headerLevel: vue.Ref<string, string>;
+    headerLevel: _$vue.Ref<string, string>;
   };
   inject: () => void | undefined;
 };
@@ -58,7 +58,7 @@ declare const useCardPI: () => {
 //#region src/components/Input/pi.d.ts
 declare const useInputPi: () => {
   provide: () => {
-    focused: vue.ComputedRef<boolean>;
+    focused: _$vue.ComputedRef<boolean>;
   };
   inject: (a: Ref<boolean, boolean>) => void | undefined;
 };
@@ -96,10 +96,10 @@ interface TInputBaseProps extends Omit<TInputAttrs, 'data-has-prepend' | 'data-h
   active?: boolean;
   loading?: boolean;
   noUnderline?: boolean;
-  onAppendClick?: (event: MouseEvent) => any;
-  onPrependClick?: (event: MouseEvent) => any;
-  onBlur?: (event: FocusEvent) => any;
-  onFocus?: (event: FocusEvent) => any;
+  onAppendClick?: (event: MouseEvent) => void;
+  onPrependClick?: (event: MouseEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
 }
 interface TInputProps extends TInputBaseProps {
   iconBefore?: string;
@@ -108,11 +108,11 @@ interface TInputProps extends TInputBaseProps {
   hint?: string;
   groupTemplate?: string;
   stackLabel?: boolean;
-  onBeforeClick?: (event: MouseEvent) => any;
-  onAfterClick?: (event: MouseEvent) => any;
-  onClick?: (event: MouseEvent) => any;
-  onBlur?: (event: FocusEvent) => any;
-  onFocus?: (event: FocusEvent) => any;
+  onBeforeClick?: (event: MouseEvent) => void;
+  onAfterClick?: (event: MouseEvent) => void;
+  onClick?: (event: MouseEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
 }
 interface TInputBaseEmits {
   (e: 'prependClick' | 'appendClick', event: MouseEvent): void;

package/dist/vunor.mjs

@@ -1,6 +1,5 @@
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 import { useProvideInject } from "vunor/utils";
-
 //#region src/components/AppToasts/app-toasts.ts
 const toasts = ref([]);
 function useAppToasts() {
@@ -28,7 +27,6 @@ function useAppToasts() {
 		close
 	};
 }
-
 //#endregion
 //#region src/components/Card/pi.ts
 const safeTag = (t) => t && /^h[1-6]$/.test(t) ? t : "";
@@ -56,7 +54,6 @@ const useCardPI = () => useProvideInject("__vunor_card_PI", () => {
 		}
 	};
 });
-
 //#endregion
 //#region src/components/Input/pi.ts
 const useInputPi = () => useProvideInject("__vunor_input_PI", () => {
@@ -72,7 +69,6 @@ const useInputPi = () => useProvideInject("__vunor_input_PI", () => {
 		}
 	};
 });
-
 //#endregion
 //#region src/components/Input/utils.ts
 function useHtmlInputAttrs() {
@@ -168,6 +164,5 @@ function useInputDataAttrs() {
 		"aria-disabled": instance?.props.disabled ? true : void 0
 	}));
 }
-
 //#endregion
-export { useAppToasts, useCardPI, useHtmlInputAttrs, useInputBaseProps, useInputDataAttrs, useInputPi, useInputProps };
+export { useAppToasts, useCardPI, useHtmlInputAttrs, useInputBaseProps, useInputDataAttrs, useInputPi, useInputProps };

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "vunor",
-  "version": "0.1.2",
-  "bin": {
-    "setup-skills": "./scripts/setup-skills.js"
-  },
+  "version": "0.1.4",
   "files": [
-    "dist",
-    "skills",
-    "scripts/setup-skills.js"
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -183,43 +178,41 @@
     "pub": "npm publish --access public",
     "type-check": "vue-tsc --build --force",
     "test": "vitest run && playwright test",
-    "test:e2e": "playwright test",
-    "setup-skills": "node ./scripts/setup-skills.js",
-    "postinstall": "node ./scripts/setup-skills.js --postinstall"
+    "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@internationalized/date": "^3.11.0",
-    "@prostojs/palitra": "^0.0.3",
-    "@unocss/preset-mini": "^66.6.0",
-    "defu": "^6.1.4",
-    "reka-ui": "^2.0.0",
-    "unocss": "^66.6.0",
-    "vue": "^3.5.28"
+    "@internationalized/date": "^3.12.1",
+    "@prostojs/palitra": "^0.0.4",
+    "@unocss/preset-mini": "^66.6.8",
+    "defu": "^6.1.7",
+    "reka-ui": "^2.9.6",
+    "unocss": "^66.6.8",
+    "vue": "^3.5.32"
   },
   "devDependencies": {
     "@iconify/utils": "^3.1.0",
-    "@nuxt/kit": "^3.21.1",
-    "@nuxt/schema": "^3.21.1",
-    "@playwright/test": "^1.58.2",
-    "@types/node": "^22.19.11",
-    "@unocss/preset-icons": "^66.6.0",
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^25.6.0",
+    "@unocss/preset-icons": "^66.6.8",
     "@unocss/preset-mini": "^66.6.0",
-    "@unocss/preset-wind": "^66.6.0",
-    "@unocss/reset": "^66.6.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.9.0",
-    "rolldown": "1.0.0-rc.5",
-    "rolldown-plugin-dts": "^0.22.1",
+    "@unocss/preset-wind": "^66.6.8",
+    "@unocss/reset": "^66.6.8",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "@vueuse/core": "^14.2.1",
+    "rolldown": "1.0.0-rc.16",
+    "rolldown-plugin-dts": "^0.23.2",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "unocss": "^66.6.0",
-    "unocss-preset-scrollbar": "^3.2.0",
-    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.3.1",
-    "vitest": "^3.2.4",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "^3.2.4"
+    "unocss-preset-scrollbar": "^4.0.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
+    "vue-router": "^5.0.4",
+    "vue-tsc": "^3.2.6"
   }
 }

package/scripts/setup-skills.js

@@ -1,78 +0,0 @@
-#!/usr/bin/env node
-/* prettier-ignore */
-import fs from 'fs'
-import path from 'path'
-import os from 'os'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const SKILL_NAME = 'vunor'
-const SKILL_SRC = path.join(__dirname, '..', 'skills', SKILL_NAME)
-
-if (!fs.existsSync(SKILL_SRC)) {
-  console.error(`No skills found at ${SKILL_SRC}`)
-  console.error('Add your SKILL.md files to the skills/' + SKILL_NAME + '/ directory first.')
-  process.exit(1)
-}
-
-const AGENTS = {
-  'Claude Code': { dir: '.claude/skills',   global: path.join(os.homedir(), '.claude', 'skills') },
-  'Cursor':      { dir: '.cursor/skills',   global: path.join(os.homedir(), '.cursor', 'skills') },
-  'Windsurf':    { dir: '.windsurf/skills', global: path.join(os.homedir(), '.windsurf', 'skills') },
-  'Codex':       { dir: '.codex/skills',    global: path.join(os.homedir(), '.codex', 'skills') },
-  'OpenCode':    { dir: '.opencode/skills', global: path.join(os.homedir(), '.opencode', 'skills') },
-}
-
-const args = process.argv.slice(2)
-const isGlobal = args.includes('--global') || args.includes('-g')
-const isPostinstall = args.includes('--postinstall')
-let installed = 0, skipped = 0
-const installedDirs = []
-
-for (const [agentName, cfg] of Object.entries(AGENTS)) {
-  const targetBase = isGlobal ? cfg.global : path.join(process.cwd(), cfg.dir)
-  const agentRootDir = path.dirname(cfg.global) // Check if the agent has ever been installed globally
-
-  // In postinstall mode: silently skip agents that aren't set up globally
-  if (isPostinstall || isGlobal) {
-    if (!fs.existsSync(agentRootDir)) { skipped++; continue }
-  }
-
-  const dest = path.join(targetBase, SKILL_NAME)
-  try {
-    fs.mkdirSync(dest, { recursive: true })
-    fs.cpSync(SKILL_SRC, dest, { recursive: true })
-    console.log(`✅  ${agentName}: installed to ${dest}`)
-    installed++
-    if (!isGlobal) installedDirs.push(cfg.dir + '/' + SKILL_NAME)
-  } catch (err) {
-    console.warn(`⚠️   ${agentName}: failed — ${err.message}`)
-  }
-}
-
-// Add locally-installed skill dirs to .gitignore
-if (!isGlobal && installedDirs.length > 0) {
-  const gitignorePath = path.join(process.cwd(), '.gitignore')
-  let gitignoreContent = ''
-  try { gitignoreContent = fs.readFileSync(gitignorePath, 'utf8') } catch {}
-  const linesToAdd = installedDirs.filter(d => !gitignoreContent.includes(d))
-  if (linesToAdd.length > 0) {
-    const hasHeader = gitignoreContent.includes('# AI agent skills')
-    const block = (gitignoreContent && !gitignoreContent.endsWith('\n') ? '\n' : '')
-      + (hasHeader ? '' : '\n# AI agent skills (auto-generated by setup-skills)\n')
-      + linesToAdd.join('\n') + '\n'
-    fs.appendFileSync(gitignorePath, block)
-    console.log(`📝  Added ${linesToAdd.length} entries to .gitignore`)
-  }
-}
-
-if (installed === 0 && isPostinstall) {
-  // Silence is fine — no agents present, nothing to do
-} else if (installed === 0 && skipped === Object.keys(AGENTS).length) {
-  console.log('No agent directories detected. Try --global or run without it for project-local install.')
-} else if (installed === 0) {
-  console.log('Nothing installed. Run without --global to install project-locally.')
-} else {
-  console.log(`\n✨  Done! Restart your AI agent to pick up the "${SKILL_NAME}" skill.`)
-}

package/skills/vunor/SKILL.md

@@ -1,115 +0,0 @@
----
-name: vunor
-description: "Vunor — Vue 3 / Nuxt 3 UI library and UnoCSS theme engine. Use this skill when working with: presetVunor, vunorShortcuts, defineShortcuts, mergeVunorShortcuts, VunorVueResolver, Vu-prefixed components (VuButton, VuInput, VuSelect, VuCombobox, VuCard, VuDialog, VuTabs, VuCheckbox, VuRadioGroup, VuSlider, VuDatePicker, VuMenu, VuAppLayout, VuIcon, VuPopover), vunor UnoCSS custom rules (scope-*, current-*, layer-*, surface-*, text-h1/text-body/text-label typography, text-mt-*/text-mb-* text margins, $xxs/$xs/$s/$m/$l/$xl/$xxl spacing tokens, card-* card spacing, fingertip-* touch targets, c8-filled/c8-flat/c8-outlined/c8-light clickable styles, i8-flat/i8-filled/i8-round input styles, i8-border-*/i8-bg-*/i8-outline-* input rules, icon-color/icon-size/icon-opacity-*, bg-current/text-current/icon-current/border-current current-color system), vunor Oklab perceptual color palette, vunor golden-ratio typography and spacing, vunor shortcut objects. Import paths: vunor, vunor/theme, vunor/utils, vunor/vite, vunor/nuxt."
----
-
-# vunor
-
-A UnoCSS theme engine that derives a complete design system from mathematical constants (golden ratio, Oklab color model) — plus 30+ accessible Vue 3 components built on Reka UI. All styling is UnoCSS-only with no CSS files.
-
-## How to use this skill
-
-Read the domain file that matches the task. Do not load all files — only what you need.
-
-| Domain | File | Load when... |
-|--------|------|-------------|
-| Core concepts & setup | [core.md](core.md) | Installing vunor, setting up Vue+Vite or Nuxt, understanding the mental model |
-| Color palette | [palette.md](palette.md) | Configuring colors, using layers/surfaces/scopes, understanding the current-color system |
-| Typography & spacing | [typography.md](typography.md) | Using text utilities, spacing tokens, fingertip sizes, card spacing |
-| Shortcut objects | [shortcuts.md](shortcuts.md) | Customizing component styles, understanding c8/i8 systems, merging shortcuts |
-| Components overview | [components.md](components.md) | Using layout, action, feedback, or utility components (Card, Dialog, Button, Tabs, etc.) |
-| Form components | [forms.md](forms.md) | Using Input, Select, Combobox, Checkbox, RadioGroup, Slider, DatePicker |
-| UnoCSS custom rules | [rules.md](rules.md) | Understanding exact rule patterns, CSS custom properties, i8-*/scope-*/current-*/card-*/fingertip-*/icon-* rules |
-
-## High-level guide
-
-### Color scope — required foundation
-
-**`scope-{color}` must be set at the root level** (`<html>`, `<body>`, or your app wrapper). It defines the default palette for the entire page — layers, surfaces, buttons, inputs, and all components depend on it. Without a scope, no colors are available.
-
-```html
-<html class="scope-primary">        <!-- sets the default palette for the whole app -->
-  <body class="layer-0">            <!-- page background using that palette -->
-```
-
-You can override the scope on any subtree for a different palette:
-
-```html
-<body class="scope-primary layer-0">
-  <main>                             <!-- inherits scope-primary -->
-    <div class="scope-error">        <!-- this subtree uses error palette -->
-      <button class="c8-filled">Delete</button>
-    </div>
-  </main>
-</body>
-```
-
-See [palette.md](palette.md) for color configuration and details.
-
-### Backgrounds: layers and surfaces
-
-Use `scope-{color}` to set the active palette, then apply backgrounds:
-
-- **`layer-0` through `layer-4`** — screen/page backgrounds. `layer-0` is the outermost (lightest in light mode, darkest in dark). Each layer steps progressively deeper. Layers auto-adapt to light/dark mode. Control the brightness difference between layers via `palette.layersDepth` in [palette.md](palette.md).
-
-- **`surface-50` through `surface-900`** — colored blocks, banners, callouts. These map to the main 10-step palette and apply a full bg + text + icon set. `surface-0`–`surface-4` map to the layer scale. Configure via `palette.surfaces` — see [palette.md](palette.md).
-
-```html
-<div class="layer-0 scope-primary">           <!-- page background -->
-  <div class="layer-1">                       <!-- card/section -->
-    <div class="surface-100">info banner</div> <!-- colored block -->
-    <div class="surface-500">bold accent</div>
-  </div>
-</div>
-```
-
-### Interactive elements: c8 and i8
-
-- **`c8-filled` / `c8-flat` / `c8-outlined` / `c8-light`** — clickable styles for buttons and interactive elements. Each includes hover, active, focus, and disabled states. Always pair with `scope-{color}`. See [shortcuts.md](shortcuts.md).
-
-- **`i8-flat` / `i8-filled` / `i8-round`** — input field styles with floating labels, underlines, and focus states. Used by `VuInput`, `VuSelect`, `VuCombobox`. See [shortcuts.md](shortcuts.md) and [forms.md](forms.md).
-
-```html
-<button class="scope-primary c8-filled">Save</button>
-<button class="scope-error c8-flat">Cancel</button>
-<VuInput v-model="name" label="Name" design="filled" />
-```
-
-### Spacing and typography
-
-Golden-ratio spacing tokens work with all UnoCSS spacing utilities (`p-`, `m-`, `gap-`, etc.):
-
-| Token | ~Value | Usage |
-|-------|--------|-------|
-| `$xxs` | 0.24em | Tiny gaps |
-| `$xs` | 0.38em | Compact spacing |
-| `$s` | 0.62em | Small spacing |
-| `$m` | 1em | Standard spacing |
-| `$l` | 1.62em | Large spacing |
-| `$xl` | 2.62em | Section spacing |
-| `$xxl` | 4.24em | Page-level spacing |
-
-Typography utilities (`text-h1`..`text-caption`) set font size, weight, line height, and letter spacing in one class. Use `text-mt-*` / `text-mb-*` for optically-corrected margins between text blocks. See [typography.md](typography.md).
-
-```html
-<h1 class="text-h1 text-mb-$m">Title</h1>
-<p class="text-body p-$s">Content with golden-ratio spacing</p>
-```
-
-## Quick reference
-
-```ts
-// Setup
-import { presetVunor, vunorShortcuts } from 'vunor/theme'
-import { VunorVueResolver } from 'vunor/vite'
-
-// UnoCSS config
-presets: [presetVunor({ palette: { colors: { primary: '#6B4EFF' } } })]
-shortcuts: [vunorShortcuts()]
-
-// Components auto-import (Vite)
-resolvers: [VunorVueResolver]  // maps <VuButton> → import from 'vunor/Button'
-
-// Nuxt — just add the module
-modules: ['vunor/nuxt']
-```