{"_id":"@delkon/apple-letters","_rev":"2-44db80cd810bb1dc3ef27e702b92fcf8","name":"@delkon/apple-letters","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@delkon/apple-letters","version":"0.1.0","_id":"@delkon/apple-letters@0.1.0","maintainers":[{"name":"delkon","email":"2799388816@qq.com"}],"dist":{"shasum":"33b1c0fdb22d0efacdf8b663b53a6acf1d7180db","tarball":"https://registry.npmjs.org/@delkon/apple-letters/-/apple-letters-0.1.0.tgz","fileCount":14,"integrity":"sha512-D2g0gsE8y9ZIpPC0EuB/xeGgwhan6G2bON+5B011jeTFa5QVVoqqNBhh016s2Gk6kMnJkaJGpjomfBl+ovF1hA==","signatures":[{"sig":"MEUCIQCujQo5FDrSUmZEpBubmgmMH9FU5515E0Zy0GIawCJ9wQIgRWMZ6NqXnZrLYAEXKHysp2Ab5zUZO3Y8JgI4J15uHEs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":169853},"main":"./dist/index.cjs","type":"module","types":"./dist/types/lib/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/types/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"38ec4ce0d7a9faea55ad714728af8e9d00a7560a","scripts":{"dev":"vite","build":"vite build && pnpm build:types","preview":"vite preview","build:types":"vue-tsc -p tsconfig.lib.json","prepublishOnly":"pnpm build"},"_npmUser":{"name":"delkon","email":"2799388816@qq.com"},"_npmVersion":"11.7.0","description":"`@delkon/apple-letters` is a Vue 3 handwritten text library built around a small engine-first core. The published package exposes a thin component layer, a composable, and the render-model engine used underneath.","directories":{},"_nodeVersion":"25.3.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.32","vite":"^8.0.9","vue-tsc":"^3.2.7","typescript":"~6.0.2","@types/node":"^24.12.2","@vue/tsconfig":"^0.9.1","@vitejs/plugin-vue":"^6.0.6"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/apple-letters_0.1.0_1776770337823_0.800424076951485","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@delkon/apple-letters","version":"0.1.1","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/types/lib/index.d.ts","exports":{".":{"types":"./dist/types/lib/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"vite build && pnpm build:types","build:types":"vue-tsc -p tsconfig.lib.json","preview":"vite preview","prepublishOnly":"pnpm build"},"peerDependencies":{"vue":"^3.5.0"},"devDependencies":{"@types/node":"^24.12.2","@vitejs/plugin-vue":"^6.0.6","@vue/tsconfig":"^0.9.1","typescript":"~6.0.2","vite":"^8.0.9","vue":"^3.5.32","vue-tsc":"^3.2.7"},"gitHead":"38ec4ce0d7a9faea55ad714728af8e9d00a7560a","_id":"@delkon/apple-letters@0.1.1","description":"`@delkon/apple-letters` is a Vue 3 handwritten text library built around a small engine-first core.","_nodeVersion":"25.3.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-0qRTPwXKXArj/WBeOZTH7XtlRJFPb8/sNld0eRmOw+7duLEYS/4WNA9p5SIP+dJtRc4MxybronqCTZboU47TtA==","shasum":"4daf7f389d0904c70e8d00acd5b12a2a4cafb002","tarball":"https://registry.npmjs.org/@delkon/apple-letters/-/apple-letters-0.1.1.tgz","fileCount":14,"unpackedSize":172379,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDcONEg578yADb+DbNtoAwjzQjekHFaHkz6rA3x/HLxWAIgWvxDsvhxLEzwS4oc1+nZoclDWfuKmZRwlbcGrXFqIoU="}]},"_npmUser":{"name":"delkon","email":"2799388816@qq.com"},"directories":{},"maintainers":[{"name":"delkon","email":"2799388816@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apple-letters_0.1.1_1776772170235_0.3375574729733595"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-21T11:18:57.736Z","modified":"2026-04-21T11:49:30.474Z","0.1.0":"2026-04-21T11:18:57.962Z","0.1.1":"2026-04-21T11:49:30.381Z"},"description":"`@delkon/apple-letters` is a Vue 3 handwritten text library built around a small engine-first core.","maintainers":[{"name":"delkon","email":"2799388816@qq.com"}],"readme":"# Apple Letters\n\n`@delkon/apple-letters` is a Vue 3 handwritten text library built around a small engine-first core.\n\nIt gives you two layers:\n\n- a thin `Letters` Vue component for direct rendering\n- a lower-level engine API for custom SVG or animation workflows\n\n## Install\n\n```bash\npnpm add @delkon/apple-letters\n```\n\n`vue` is a peer dependency.\n\n## Quick Start\n\n```vue\n<script setup lang=\"ts\">\nimport { Letters } from '@delkon/apple-letters'\n</script>\n\n<template>\n  <Letters text=\"hello\" color=\"#1f2937\" />\n</template>\n```\n\n## Common Usage\n\n### Control draw progress\n\n```vue\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Letters } from '@delkon/apple-letters'\n\nconst progress = ref(0.4)\nconst percentage = computed(() => `${Math.round(progress.value * 100)}%`)\n</script>\n\n<template>\n  <Letters text=\"hello\" :progress=\"progress\" color=\"currentColor\" />\n  <input v-model.number=\"progress\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" />\n  <span>{{ percentage }}</span>\n</template>\n```\n\n### Tune stroke style\n\n```vue\n<script setup lang=\"ts\">\nimport { Letters } from '@delkon/apple-letters'\n</script>\n\n<template>\n  <Letters\n    text=\"bonjour\"\n    color=\"#b45309\"\n    :stroke-width=\"2.4\"\n    variant=\"simple\"\n    :overlap=\"0.04\"\n  />\n</template>\n```\n\n### Use the composable in your own component\n\n```vue\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { useLettersRender } from '@delkon/apple-letters'\n\nconst progress = ref(0.65)\n\nconst model = useLettersRender(\n  computed(() => ({\n    text: 'engine',\n    progress: progress.value,\n    color: '#111827',\n    strokeWidth: 2,\n  })),\n)\n</script>\n\n<template>\n  <svg :viewBox=\"model.svg.viewBox\" fill=\"none\">\n    <path\n      v-for=\"item in model.paths\"\n      :key=\"item.key\"\n      :d=\"item.d\"\n      :stroke=\"item.stroke\"\n      :stroke-width=\"item.strokeWidth\"\n      :stroke-dasharray=\"item.strokeDasharray\"\n      :stroke-dashoffset=\"item.strokeDashoffset\"\n      :stroke-linecap=\"item.linecap\"\n      :stroke-linejoin=\"item.linejoin\"\n      pathLength=\"1\"\n      fill=\"none\"\n    />\n    <circle\n      v-for=\"item in model.dots\"\n      :key=\"item.key\"\n      :cx=\"item.translateX != null ? item.cx + item.translateX : item.cx\"\n      :cy=\"item.cy\"\n      :r=\"item.r\"\n      :fill=\"item.fill\"\n      :opacity=\"item.opacity\"\n    />\n  </svg>\n</template>\n```\n\n### Use the engine directly\n\n```ts\nimport { createLettersRenderModel } from '@delkon/apple-letters'\n\nconst model = createLettersRenderModel({\n  text: 'hello',\n  progress: 0.5,\n  color: '#2563eb',\n  strokeWidth: 2,\n})\n\nconsole.log(model.svg.viewBox)\nconsole.log(model.paths)\nconsole.log(model.dots)\n```\n\n## API\n\n```ts\nimport {\n  Letters,\n  createLettersRenderModel,\n  layoutText,\n  useLettersRender,\n} from '@delkon/apple-letters'\n```\n\n### `Letters`\n\nThe default Vue component for rendering handwritten SVG paths.\n\nSupported props:\n\n- `text: string`\n- `progress?: number`\n- `strokeWidth?: number`\n- `color?: string`\n- `variant?: 'simple' | 'complex'`\n- `overlap?: number`\n- `opts?: SmoothingOptions`\n\n### `useLettersRender`\n\nTurns reactive input into a computed render model. Useful when you want full control over SVG rendering while staying inside Vue reactivity.\n\n### `createLettersRenderModel`\n\nFramework-agnostic engine entry. Returns:\n\n- `svg`\n- `paths`\n- `dots`\n\nThis is the best choice when you want to build your own renderer or feed the geometry into another animation system.\n\n### `layoutText`\n\nLower-level layout helper for advanced use cases. Most consumers will not need it directly.\n\n## Notes\n\n- `progress` is expected to be between `0` and `1`\n- `variant=\"simple\"` is the default\n- `color` defaults to `currentColor`\n- `strokeWidth` defaults to `2`\n- `overlap` defaults to `0.02`\n\n## Development\n\n```bash\npnpm install\npnpm dev\npnpm build\n```\n\n- `pnpm dev` runs the local demo\n- `pnpm build` emits the publishable library bundles and type declarations into `dist/`\n\n## Reference\n\nInspired by `@kumailnanji/letters`:\nhttps://github.com/kumailnanji/letters\n","readmeFilename":"README.md"}