{"_id":"@aphexcms/plugin-color-picker","_rev":"2-b7e63b39915591635e30027f0942dedd","name":"@aphexcms/plugin-color-picker","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.0":{"name":"@aphexcms/plugin-color-picker","version":"0.0.0","keywords":["aphex","aphexcms","cms","plugin","color","color-picker"],"license":"MIT","_id":"@aphexcms/plugin-color-picker@0.0.0","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"homepage":"https://github.com/IcelandicIcecream/aphex#readme","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"3d07d90e1f415f6b98274c33baf7f1303cfbdb12","tarball":"https://registry.npmjs.org/@aphexcms/plugin-color-picker/-/plugin-color-picker-0.0.0.tgz","fileCount":21,"integrity":"sha512-7Uwxz9h7/Lk/dsj9tjjPFFBYRGr+/PYGXQctQ8WuhqFADjnioRyAqKtcoWYFhXjNCDfJeDVl3/iAikFiADEGxg==","signatures":[{"sig":"MEYCIQDoydMhvElAitwQZYsl0FoHJZR4QsJH1fEb/itr98PpKAIhAIxXNCjy8hgrIN40fWc9mHIavKMNuU9EH7NZGw//29oM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44275},"main":"./src/lib/index.js","type":"module","types":"./src/lib/index.d.ts","svelte":"./src/lib/index.js","exports":{".":{"types":"./src/lib/index.d.ts","svelte":"./src/lib/index.js","default":"./src/lib/index.js"},"./schema":{"types":"./src/lib/schema.d.ts","default":"./src/lib/schema.js"}},"gitHead":"825e464b08e9b5d8bced9f96936eb95a95d147d2","scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","prepack":"node ../../scripts/swap-package-paths.js ./package.json dist lib","postpack":"node ../../scripts/swap-package-paths.js ./package.json src lib","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_npmUser":{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"},"repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"plugins/plugin-color-picker"},"_npmVersion":"11.12.1","description":"Color picker field widget for AphexCMS — a rich color input (hex, optional alpha) registered as a plugin field component","directories":{},"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0","@aphexcms/ui":"workspace:^","@lucide/svelte":"^0.554.0","@aphexcms/cms-core":"workspace:^"},"_npmOperationalInternal":{"tmp":"tmp/plugin-color-picker_0.0.0_1784275702402_0.7454744943337461","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@aphexcms/plugin-color-picker","version":"0.1.0","description":"Color picker field widget for AphexCMS — a rich color input (hex, optional alpha) registered as a plugin field component","license":"MIT","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/IcelandicIcecream/aphex.git","directory":"plugins/plugin-color-picker"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./schema":{"types":"./dist/schema.d.ts","default":"./dist/schema.js"}},"keywords":["aphex","aphexcms","cms","plugin","color","color-picker"],"devDependencies":{"@sveltejs/package":"^2.5.6","svelte":"^5.0.0","svelte-check":"^4.0.0","typescript":"^5.9.3"},"peerDependencies":{"@lucide/svelte":"^0.554.0","svelte":"^5.0.0","@aphexcms/cms-core":"^9.5.0","@aphexcms/ui":"^0.8.3"},"scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_id":"@aphexcms/plugin-color-picker@0.1.0","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"homepage":"https://github.com/IcelandicIcecream/aphex#readme","_integrity":"sha512-bJKBjTokMyN7kgff3U5FP5JZSl49dC7/KNrjRxBNZ/39JvmUCPEGHlIyT/kSBaWWAKqD7rXZOZParZR98ichgw==","_resolved":"/tmp/18afb2a6246b722fefdfc36556bb7d0b/aphexcms-plugin-color-picker-0.1.0.tgz","_from":"file:aphexcms-plugin-color-picker-0.1.0.tgz","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-bJKBjTokMyN7kgff3U5FP5JZSl49dC7/KNrjRxBNZ/39JvmUCPEGHlIyT/kSBaWWAKqD7rXZOZParZR98ichgw==","shasum":"c21698202fddc2eadc76b9f127be924f0cdbc408","tarball":"https://registry.npmjs.org/@aphexcms/plugin-color-picker/-/plugin-color-picker-0.1.0.tgz","fileCount":22,"unpackedSize":45268,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aphexcms%2fplugin-color-picker@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEmHurKJXD//G/B3PxjwbtKQFrFZop3WYaIKm0kRrvmdAiEAyUNNFdvSMYAgm3Y3KHV6LSlaKoy1c5WhB9XqEfjtkUc="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f3b1f958-7302-4eb2-8ac0-b94c8f0df0a6"}},"directories":{},"maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/plugin-color-picker_0.1.0_1784276776092_0.5823806802298059"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-17T08:08:22.201Z","modified":"2026-07-17T08:26:16.598Z","0.0.0":"2026-07-17T08:08:22.556Z","0.1.0":"2026-07-17T08:26:16.237Z"},"bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"license":"MIT","homepage":"https://github.com/IcelandicIcecream/aphex#readme","keywords":["aphex","aphexcms","cms","plugin","color","color-picker"],"repository":{"type":"git","url":"git+https://github.com/IcelandicIcecream/aphex.git","directory":"plugins/plugin-color-picker"},"description":"Color picker field widget for AphexCMS — a rich color input (hex, optional alpha) registered as a plugin field component","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"readme":"# @aphexcms/plugin-color-picker\n\nA color field for AphexCMS — a swatch + popover picker (hex / RGB / HSL, optional\nalpha). Color is a plugin, not a built-in field type: the engine ships the primitives,\ncolor composes on top of them.\n\n## Install\n\n```bash\npnpm add @aphexcms/plugin-color-picker\n```\n\nRegister it once in your client-safe plugin registry (`src/lib/plugins.ts`):\n\n```ts\nimport { colorPickerPlugin } from '@aphexcms/plugin-color-picker';\n\nexport const plugins = [colorPickerPlugin()];\n```\n\nThat single registration does three things: adds the picker widget, registers the\n`type: 'color'` field type (so it's type-safe with no extra import), and installs the\ntransform that expands it.\n\nThose land on **both planes**, so `plugins.ts` has to reach both: `aphex.config.ts`\nimports it (the engine needs the transform) and the admin passes it to\n`<AdminApp {plugins} />` (the browser needs the widget). Scaffolded projects are already\nwired this way, so there's nothing further to do — but in a hand-rolled setup,\nregistering on only one side leaves you with either a `color` field the engine can't\nexpand, or an expanded field with no picker.\n\n## Two ways to store a color\n\nThe plugin supports two storage shapes. Pick per field by the shape you want to read.\n\n### Rich object — `type: 'color'`\n\nStores the full `{ hex, alpha, rgb, hsl, hsv }` object (the same model as Sanity's\n`@sanity/color-input`), so you can read the color in any format without converting.\n\n```ts\n// In a schema — no import needed; registering the plugin makes `type: 'color'`\n// available and fully type-safe (autocomplete, typos caught).\n{ name: 'brand', type: 'color', title: 'Brand color' }\n\n// Allow an alpha channel:\n{ name: 'overlay', type: 'color', title: 'Overlay', alpha: true }\n```\n\nStored value:\n\n```json\n{\n\t\"hex\": \"#9D2F2F\",\n\t\"alpha\": 1,\n\t\"rgb\": { \"r\": 157, \"g\": 47, \"b\": 47, \"a\": 1 },\n\t\"hsl\": { \"h\": 0, \"s\": 53.9, \"l\": 40, \"a\": 1 },\n\t\"hsv\": { \"h\": 0, \"s\": 70.1, \"v\": 61.6, \"a\": 1 }\n}\n```\n\nRead `.hex` for a CSS value:\n\n```svelte\n<div style:--accent={settings.brand?.hex}>…</div>\n```\n\n`type: 'color'` generates a fully-typed nested interface in `generated-types.ts` — not\n`unknown` — because the plugin's schema-transform runs during type generation too (see\n[How `type: 'color'` works](#how-type-color-works)).\n\n### Plain string — `type: 'string', input: 'color'`\n\nStores just a CSS color string (`\"#9D2F2F\"`). Simplest to consume — it drops straight\ninto CSS — ideal for theme tokens where you never need the other formats.\n\n```ts\n{ name: 'accent', type: 'string', input: 'color' }\n\n// Works per-item in arrays too:\n{ name: 'palette', type: 'array', of: [{ type: 'string', input: 'color' }] }\n```\n\nHex-only (no rgb/hsl formats in the picker):\n\n```ts\n{ name: 'accent', type: 'string', input: 'color', inputOptions: { hexOnly: true } }\n```\n\n### The `color()` helper (alternative to `type: 'color'`)\n\nEquivalent to `type: 'color'`, for when you'd rather import a builder than rely on the\nambient type (e.g. to avoid depending on plugin registration order). It accepts the same\nfield properties the literal does — `access`, `validation`, `group` (including multiple)\n— so neither way is more expressive. Import from the server-safe `/schema` entry:\n\n```ts\nimport { color } from '@aphexcms/plugin-color-picker/schema';\n\n// in a schema's fields:\ncolor({ name: 'brand', title: 'Brand color', group: 'design', alpha: true });\n```\n\n## Which should I use?\n\n| Want                                                  | Use                                            |\n| ----------------------------------------------------- | ---------------------------------------------- |\n| A CSS value that drops straight into `style`/tokens   | `type: 'string', input: 'color'` → `\"#…\"`      |\n| The color in multiple formats (hex + rgb + hsl + hsv) | `type: 'color'` → the object, read `.hex` etc. |\n| A builder instead of the ambient type                 | `color({ … })`                                 |\n\n## Type generation\n\n`type: 'color'` only desugars into its object shape during codegen if the type generator\nis told about your plugins. Pass your plugin registry as the third argument:\n\n```jsonc\n// package.json\n\"generate:types\": \"aphex generate:types ./src/lib/schemaTypes/index.ts ./src/lib/generated-types.ts ./src/lib/plugins.ts\"\n```\n\nThe `aphex()` Vite plugin does this automatically in dev (it passes `src/lib/plugins.ts`\nby default; override with the `typegen.plugins` option). Without the plugins argument,\n`type: 'color'` fields generate as `unknown`.\n\n## How `type: 'color'` works\n\nColor is **not** a new storage primitive — the engine only knows built-in field types.\n`type: 'color'` is sugar in two halves:\n\n- **Compile-time:** the plugin augments core's `FieldTypeMap` (via `declare module`), so\n  `{ type: 'color' }` is a first-class, type-safe field wherever the plugin is imported.\n- **Runtime + codegen:** the plugin's `aphex/schema/transform` part rewrites every\n  `{ type: 'color' }` into the rich `object` field **before** the engine, admin, and type\n  generator see it. So the stored data is a plain object — portable and interpretable by\n  core alone, even if the plugin is later removed.\n\nThis is why `type: 'color'` reads like a native type while keeping full type safety and\nAphex's \"documents are portable\" guarantee.\n\n## Exports\n\n| Import                     | From                                   | What                                   |\n| -------------------------- | -------------------------------------- | -------------------------------------- |\n| `colorPickerPlugin()`      | `@aphexcms/plugin-color-picker`        | The plugin (register in `plugins.ts`)  |\n| `ColorPicker`              | `@aphexcms/plugin-color-picker`        | The standalone picker Svelte component |\n| `color()`                  | `@aphexcms/plugin-color-picker/schema` | Rich-color field builder               |\n| `ColorValue`, `ColorField` | `@aphexcms/plugin-color-picker/schema` | Types                                  |\n","readmeFilename":"README.md"}