@qkix/strapi-plugin-chartkit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 qkix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# @qkix/strapi-plugin-chartkit
+
+Charts for Strapi v5, as a custom field. The chart is rendered to **SVG on the
+server**, so a page carrying twenty of them ships no charting library and runs
+no JavaScript to draw them.
+
+```sh
+npm install @qkix/strapi-plugin-chartkit
+```
+
+Add a **Chart** field to a content type, and the edit view gives the author a
+data grid, spreadsheet paste, and a live preview.
+
+## What it stores
+
+A `ChartSpec` — the same object the renderers take. There is nothing in between
+the field and the page:
+
+```tsx
+import { Chart } from '@qkix/chartkit-react-renderer';
+
+const article = await fetch('/api/articles/1').then((r) => r.json());
+
+<Chart spec={article.data.chart} locale="en-US" />;
+```
+
+Astro is the same shape:
+
+```astro
+---
+import { Chart } from '@qkix/chartkit-astro-renderer';
+---
+
+<Chart spec={article.chart} locale="en-US" />
+```
+
+Both render to markup at build or request time. Neither sends a runtime.
+
+## Styling
+
+The chart carries no colors of its own. Series are drawn as
+`fill="var(--chart-series-N, currentColor)"` and text inherits the page's font,
+so a chart takes the theme of wherever it lands — including class-based dark
+mode, which is the reason for hand-written SVG rather than an off-the-shelf SSR
+renderer that bakes hex values into the markup.
+
+```css
+:root {
+  --chart-series-1: #4945ff;
+  --chart-series-2: #66b7f1;
+  --chart-axis: #8e8ea9;
+  --chart-text: #32324a;
+  --chart-grid: #eaeaef;
+}
+```
+
+The admin preview is deliberately drawn on white with dark text regardless of
+the admin's theme, because it is showing what the chart will look like on a page
+this plugin knows nothing about.
+
+## Field options
+
+| Option                       | Effect                                                                                                                          |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| **Number formatting locale** | How axis numbers are formatted **in the admin preview** — a BCP 47 tag such as `de-DE`. The front end passes its own at render. |
+| **Required**                 | Standard Strapi validation.                                                                                                     |
+
+## Three ways to get data in
+
+The grid is there to type into, but most charts already exist as numbers
+somewhere:
+
+- **Paste from a spreadsheet** — copy a range out of Sheets or Excel and paste.
+  Tab, comma and semicolon are all detected; `1.234,5` and `1,234.5` both read
+  as 1234.5; `n/a` and blanks become **gaps, not zeroes**.
+- **From the Media Library** — pick a `.csv`, `.tsv` or `.txt` already uploaded.
+- **By hand** — add categories and series in the grid.
+
+Paste and import both show **what was parsed before replacing anything**. The
+parser has to guess whether the first row is a header, and a wrong guess that
+silently overwrites an author's data is far worse than one they can cancel.
+
+## The editor opens in a dialog
+
+Rather than sitting inline. The editing surface is a preview plus a grid plus a
+row of settings — most of a screen, given to a field the author is usually
+scrolling past on their way to the rest of the form. Clicking the preview or
+**Edit chart** opens it; **Cancel** genuinely cancels, because the dialog edits a
+draft and only writes on save.
+
+A field nobody has filled in shows an empty state rather than writing a starter
+chart into the document. Opening an entry must not be enough to mark it dirty.
+
+## Old charts, and charts that are not charts
+
+The field **migrates a spec on the way in**, so an author who opens a chart saved
+against an older schema edits and saves the current shape. Pages stay correct in
+the meantime on their own: `renderChart` migrates in memory too, so nothing has
+to be resaved for a site to keep working.
+
+If the field holds something that is not a readable chart — a value written by an
+import script, or a field that used to be a different type — it says so and goes
+**read-only**. Showing the usual "create a chart" prompt over data that exists
+would be an offer to overwrite it.
+
+## Also available as a block
+
+Chartkit is two surfaces over one editor. If you use
+[Better Blocks](https://www.npmjs.com/package/@qkix/strapi-plugin-better-blocks),
+charts can live inside a rich-text document as a block instead of, or as well
+as, in a field of their own — see `@qkix/chartkit-core`'s `chartBlock` and the
+`registerBlock` API.
+
+## Packages
+
+| Package                                                                                        | For                                          |
+| ---------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| [`@qkix/strapi-plugin-chartkit`](https://www.npmjs.com/package/@qkix/strapi-plugin-chartkit)   | this plugin — the field in the Strapi admin  |
+| [`@qkix/chartkit-core`](https://www.npmjs.com/package/@qkix/chartkit-core)                     | the spec, the validator and the SVG renderer |
+| [`@qkix/chartkit-react-renderer`](https://www.npmjs.com/package/@qkix/chartkit-react-renderer) | rendering a stored chart in React / Next.js  |
+| [`@qkix/chartkit-astro-renderer`](https://www.npmjs.com/package/@qkix/chartkit-astro-renderer) | rendering a stored chart in Astro            |
+| [`@qkix/chartkit-editor`](https://www.npmjs.com/package/@qkix/chartkit-editor)                 | the editing surface, if you are embedding it |
+
+## License
+
+MIT

package/dist/_chunks/ChartField-CKCDQc6g.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@strapi/design-system"),g=require("@qkix/chartkit-editor"),S=require("react"),u=require("../admin/index.js");function F(r){if(r&&r.__esModule)return r;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(i,a,o.get?o:{enumerable:!0,get:()=>r[a]})}}return i.default=r,Object.freeze(i)}const c=F(S),x=c.forwardRef((r,i)=>{const{name:a,value:o,onChange:j,disabled:s,error:p,hint:y,label:l,required:f}=r,[b,d]=c.useState(!1),n=c.useMemo(()=>u.readValue(o),[o]),h=r.attribute?.options?.previewLocale||void 0,m=k=>{j({target:{name:a,type:"json",value:u.writeValue(k)}})},v=c.useMemo(()=>u.starterSpec(),[]),C=n.status==="ok"?n.spec:v;return e.jsxs(e.Fragment,{children:[e.jsx(t.Field.Root,{id:a,name:a,required:f,error:p,hint:y,children:e.jsxs(t.Flex,{direction:"column",alignItems:"stretch",gap:1,ref:i,children:[e.jsx(t.Field.Label,{children:l}),n.status==="ok"&&e.jsx(g.ChartPreview,{spec:n.spec,locale:h,idPrefix:`chartkit-${a}`,onClick:s?void 0:()=>d(!0)}),n.status==="empty"&&e.jsx(E,{disabled:s,hasError:!!p,onCreate:()=>d(!0)}),n.status==="unreadable"&&e.jsxs(t.Box,{padding:4,background:"danger100",hasRadius:!0,children:[e.jsx(t.Typography,{variant:"pi",fontWeight:"bold",textColor:"danger600",tag:"p",children:n.reason}),e.jsx(t.Box,{paddingTop:2,children:e.jsx(t.Typography,{variant:"pi",textColor:"danger600",children:"Editing here would replace it, so the field is read-only until the value is fixed or cleared."})})]}),n.status==="ok"&&e.jsx(t.Flex,{paddingTop:2,gap:2,children:e.jsx(t.Button,{variant:"secondary",size:"S",disabled:s,onClick:()=>d(!0),children:"Edit chart"})}),e.jsx(t.Field.Hint,{}),e.jsx(t.Field.Error,{})]})}),n.status!=="unreadable"&&e.jsx(g.ChartEditorDialog,{spec:C,open:b,onOpenChange:d,onSave:m,locale:h,disabled:s,title:l?`Edit ${l}`:"Edit chart"})]})});x.displayName="ChartField";function E({disabled:r,hasError:i,onCreate:a}){return e.jsxs(t.Flex,{direction:"column",gap:2,padding:6,hasRadius:!0,justifyContent:"center",background:"neutral100",style:{border:`1px dashed ${i?"#d02b20":"#dcdce4"}`},children:[e.jsx(t.Typography,{variant:"pi",textColor:"neutral600",children:"No chart yet."}),e.jsx(t.Button,{variant:"secondary",size:"S",disabled:r,onClick:a,children:"Create chart"})]})}exports.default=x;

package/dist/_chunks/ChartField-N1BDNZ3c.mjs

@@ -0,0 +1,86 @@
+import { jsxs as s, Fragment as F, jsx as e } from "react/jsx-runtime";
+import { Field as o, Flex as u, Box as f, Typography as h, Button as C } from "@strapi/design-system";
+import { ChartPreview as R, ChartEditorDialog as j } from "@qkix/chartkit-editor";
+import * as d from "react";
+import { readValue as B, starterSpec as T, writeValue as $ } from "../admin/index.mjs";
+const z = d.forwardRef((a, l) => {
+  const { name: r, value: p, onChange: v, disabled: i, error: g, hint: y, label: c, required: b } = a, [x, n] = d.useState(!1), t = d.useMemo(() => B(p), [p]), m = a.attribute?.options?.previewLocale || void 0, k = (w) => {
+    v({ target: { name: r, type: "json", value: $(w) } });
+  }, E = d.useMemo(() => T(), []), S = t.status === "ok" ? t.spec : E;
+  return /* @__PURE__ */ s(F, { children: [
+    /* @__PURE__ */ e(o.Root, { id: r, name: r, required: b, error: g, hint: y, children: /* @__PURE__ */ s(u, { direction: "column", alignItems: "stretch", gap: 1, ref: l, children: [
+      /* @__PURE__ */ e(o.Label, { children: c }),
+      t.status === "ok" && /* @__PURE__ */ e(
+        R,
+        {
+          spec: t.spec,
+          locale: m,
+          idPrefix: `chartkit-${r}`,
+          onClick: i ? void 0 : () => n(!0)
+        }
+      ),
+      t.status === "empty" && /* @__PURE__ */ e(
+        L,
+        {
+          disabled: i,
+          hasError: !!g,
+          onCreate: () => n(!0)
+        }
+      ),
+      t.status === "unreadable" && /* @__PURE__ */ s(f, { padding: 4, background: "danger100", hasRadius: !0, children: [
+        /* @__PURE__ */ e(h, { variant: "pi", fontWeight: "bold", textColor: "danger600", tag: "p", children: t.reason }),
+        /* @__PURE__ */ e(f, { paddingTop: 2, children: /* @__PURE__ */ e(h, { variant: "pi", textColor: "danger600", children: "Editing here would replace it, so the field is read-only until the value is fixed or cleared." }) })
+      ] }),
+      t.status === "ok" && /* @__PURE__ */ e(u, { paddingTop: 2, gap: 2, children: /* @__PURE__ */ e(
+        C,
+        {
+          variant: "secondary",
+          size: "S",
+          disabled: i,
+          onClick: () => n(!0),
+          children: "Edit chart"
+        }
+      ) }),
+      /* @__PURE__ */ e(o.Hint, {}),
+      /* @__PURE__ */ e(o.Error, {})
+    ] }) }),
+    t.status !== "unreadable" && /* @__PURE__ */ e(
+      j,
+      {
+        spec: S,
+        open: x,
+        onOpenChange: n,
+        onSave: k,
+        locale: m,
+        disabled: i,
+        title: c ? `Edit ${c}` : "Edit chart"
+      }
+    )
+  ] });
+});
+z.displayName = "ChartField";
+function L({
+  disabled: a,
+  hasError: l,
+  onCreate: r
+}) {
+  return /* @__PURE__ */ s(
+    u,
+    {
+      direction: "column",
+      gap: 2,
+      padding: 6,
+      hasRadius: !0,
+      justifyContent: "center",
+      background: "neutral100",
+      style: { border: `1px dashed ${l ? "#d02b20" : "#dcdce4"}` },
+      children: [
+        /* @__PURE__ */ e(h, { variant: "pi", textColor: "neutral600", children: "No chart yet." }),
+        /* @__PURE__ */ e(C, { variant: "secondary", size: "S", disabled: a, onClick: r, children: "Create chart" })
+      ]
+    }
+  );
+}
+export {
+  z as default
+};

package/dist/_chunks/en-BcPniuRQ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={};exports.default=e;

package/dist/_chunks/en-DYxpcVy9.mjs

@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};

package/dist/admin/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("react/jsx-runtime"),o=require("@qkix/chartkit-core"),c=(e,t,i)=>{const s=e[t];return s?typeof s=="function"?s():Promise.resolve(s):new Promise((y,u)=>{(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(u.bind(null,new Error("Unknown variable dynamic import: "+t+(t.split("/").length!==i?". Note that variables only represent file names one level deep.":""))))})},r="chartkit",l="chart",d=({setPlugin:e})=>{const t=a.useRef(e);return a.useEffect(()=>{t.current(r)},[]),null},f=()=>n.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[n.jsx("path",{d:"M2 14V2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("path",{d:"M2 14h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("rect",{x:"4",y:"7",width:"2.5",height:"5",fill:"currentColor"}),n.jsx("rect",{x:"8",y:"4",width:"2.5",height:"8",fill:"currentColor"}),n.jsx("rect",{x:"12",y:"9",width:"2.5",height:"3",fill:"currentColor"})]});function p(e){if(e==null||e==="")return{status:"empty"};let t=e;if(typeof e=="string"){try{t=JSON.parse(e)}catch{return{status:"unreadable",reason:"This field contains text that is not JSON."}}if(t===null||t==="")return{status:"empty"}}if(typeof t!="object"||t===null||Array.isArray(t))return{status:"unreadable",reason:"This field contains JSON that is not a chart."};const i=o.migrateChartSpec(t);return i.status==="skipped"?{status:"unreadable",reason:`Chartkit cannot read what is in this field: ${i.reason}.`}:{status:"ok",spec:i.spec}}function h(e){return JSON.stringify(e)}function m(){return{version:o.CHART_SPEC_VERSION,type:"bar",data:{source:"inline",labels:["Q1","Q2","Q3","Q4"],series:[{name:"Series 1",values:[null,null,null,null]}]}}}const g={register(e){e.registerPlugin({id:r,name:r,initializer:d,isReady:!1}),e.customFields.register({name:l,pluginId:r,type:"json",icon:f,intlLabel:{id:`${r}.field.label`,defaultMessage:"Chart"},intlDescription:{id:`${r}.field.description`,defaultMessage:"A chart, rendered as SVG with no client-side JavaScript"},components:{Input:async()=>({default:(await Promise.resolve().then(()=>require("../_chunks/ChartField-CKCDQc6g.js"))).default})},options:{base:[{sectionTitle:{id:`${r}.section.preview`,defaultMessage:"Preview"},items:[{name:"options.previewLocale",type:"text",placeholder:{id:`${r}.previewLocale.placeholder`,defaultMessage:"en-US"},intlLabel:{id:`${r}.previewLocale`,defaultMessage:"Number formatting locale"},description:{id:`${r}.previewLocale.description`,defaultMessage:"How axis numbers are formatted in the admin preview — a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."}}]}],advanced:[{sectionTitle:null,items:[{name:"required",type:"checkbox",intlLabel:{id:`${r}.required`,defaultMessage:"Required field"},description:{id:`${r}.required.description`,defaultMessage:"You won't be able to create an entry if this field is empty"}}]}]}})},async registerTrads({locales:e}){return Promise.all(e.map(async t=>{try{const{default:i}=await c(Object.assign({"./translations/en.json":()=>Promise.resolve().then(()=>require("../_chunks/en-BcPniuRQ.js"))}),`./translations/${t}.json`,3);return{data:i,locale:t}}catch{return{data:{},locale:t}}}))}};exports.FIELD_NAME=l;exports.PLUGIN_ID=r;exports.default=g;exports.readValue=p;exports.starterSpec=m;exports.writeValue=h;

package/dist/admin/index.mjs

@@ -0,0 +1,163 @@
+import { useRef as o, useEffect as l } from "react";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { migrateChartSpec as u, CHART_SPEC_VERSION as c } from "@qkix/chartkit-core";
+const f = (e, t, i) => {
+  const s = e[t];
+  return s ? typeof s == "function" ? s() : Promise.resolve(s) : new Promise((y, a) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      a.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + t + (t.split("/").length !== i ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, r = "chartkit", p = "chart", h = ({ setPlugin: e }) => {
+  const t = o(e);
+  return l(() => {
+    t.current(r);
+  }, []), null;
+}, m = () => /* @__PURE__ */ d("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ n("path", { d: "M2 14V2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ n("path", { d: "M2 14h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ n("rect", { x: "4", y: "7", width: "2.5", height: "5", fill: "currentColor" }),
+  /* @__PURE__ */ n("rect", { x: "8", y: "4", width: "2.5", height: "8", fill: "currentColor" }),
+  /* @__PURE__ */ n("rect", { x: "12", y: "9", width: "2.5", height: "3", fill: "currentColor" })
+] });
+function v(e) {
+  if (e == null || e === "") return { status: "empty" };
+  let t = e;
+  if (typeof e == "string") {
+    try {
+      t = JSON.parse(e);
+    } catch {
+      return {
+        status: "unreadable",
+        reason: "This field contains text that is not JSON."
+      };
+    }
+    if (t === null || t === "") return { status: "empty" };
+  }
+  if (typeof t != "object" || t === null || Array.isArray(t))
+    return {
+      status: "unreadable",
+      reason: "This field contains JSON that is not a chart."
+    };
+  const i = u(t);
+  return i.status === "skipped" ? {
+    status: "unreadable",
+    reason: `Chartkit cannot read what is in this field: ${i.reason}.`
+  } : { status: "ok", spec: i.spec };
+}
+function k(e) {
+  return JSON.stringify(e);
+}
+function L() {
+  return {
+    version: c,
+    type: "bar",
+    data: {
+      source: "inline",
+      labels: ["Q1", "Q2", "Q3", "Q4"],
+      series: [{ name: "Series 1", values: [null, null, null, null] }]
+    }
+  };
+}
+const M = {
+  register(e) {
+    e.registerPlugin({
+      id: r,
+      name: r,
+      initializer: h,
+      isReady: !1
+    }), e.customFields.register({
+      name: p,
+      pluginId: r,
+      type: "json",
+      icon: m,
+      intlLabel: {
+        id: `${r}.field.label`,
+        defaultMessage: "Chart"
+      },
+      intlDescription: {
+        id: `${r}.field.description`,
+        defaultMessage: "A chart, rendered as SVG with no client-side JavaScript"
+      },
+      components: {
+        // Lazy, so the editor and its data grid are not in the bundle of every
+        // admin page — only of the ones that actually show a chart field.
+        Input: async () => ({
+          default: (await import("../_chunks/ChartField-N1BDNZ3c.mjs")).default
+        })
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: {
+              id: `${r}.section.preview`,
+              defaultMessage: "Preview"
+            },
+            items: [
+              {
+                name: "options.previewLocale",
+                type: "text",
+                placeholder: {
+                  id: `${r}.previewLocale.placeholder`,
+                  defaultMessage: "en-US"
+                },
+                intlLabel: {
+                  id: `${r}.previewLocale`,
+                  defaultMessage: "Number formatting locale"
+                },
+                description: {
+                  id: `${r}.previewLocale.description`,
+                  defaultMessage: "How axis numbers are formatted in the admin preview — a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."
+                }
+              }
+            ]
+          }
+        ],
+        advanced: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: "required",
+                type: "checkbox",
+                intlLabel: {
+                  id: `${r}.required`,
+                  defaultMessage: "Required field"
+                },
+                description: {
+                  id: `${r}.required.description`,
+                  defaultMessage: "You won't be able to create an entry if this field is empty"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+  },
+  async registerTrads({ locales: e }) {
+    return Promise.all(
+      e.map(async (t) => {
+        try {
+          const { default: i } = await f(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("../_chunks/en-DYxpcVy9.mjs") }), `./translations/${t}.json`, 3);
+          return { data: i, locale: t };
+        } catch {
+          return { data: {}, locale: t };
+        }
+      })
+    );
+  }
+};
+export {
+  p as FIELD_NAME,
+  r as PLUGIN_ID,
+  M as default,
+  v as readValue,
+  L as starterSpec,
+  k as writeValue
+};

package/dist/admin/src/components/ChartField.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The chart custom field.
+ *
+ * A preview, and a button that opens the editor. The editor itself is
+ * `@qkix/chartkit-editor` — the same component the chart block inside Better
+ * Blocks mounts, which is why it is a package rather than living in one of the
+ * two plugins that need it.
+ *
+ * The dialog rather than an inline editor for the same reason the block uses
+ * one: the editor is a preview plus a grid plus a row of settings, which is
+ * most of a screen given to a field the author usually only glances at on their
+ * way to the rest of the form.
+ */
+import * as React from 'react';
+type ChartFieldProps = {
+    name: string;
+    value?: string | null;
+    onChange: (event: {
+        target: {
+            name: string;
+            type: string;
+            value: string;
+        };
+    }) => void;
+    attribute?: {
+        type: string;
+        customField: string;
+        options?: {
+            previewLocale?: string;
+        };
+    };
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+declare const ChartField: React.ForwardRefExoticComponent<ChartFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default ChartField;

package/dist/admin/src/components/Initializer.d.ts

@@ -0,0 +1,5 @@
+type InitializerProps = {
+    setPlugin: (id: string) => void;
+};
+declare const Initializer: ({ setPlugin }: InitializerProps) => null;
+export { Initializer };

package/dist/admin/src/components/PluginIcon.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * The icon shown against the field in the content-type builder.
+ *
+ * Drawn here rather than taken from `@strapi/icons`, which has no chart glyph
+ * that reads as one at 16px.
+ */
+declare const PluginIcon: () => import("react").JSX.Element;
+export { PluginIcon };

package/dist/admin/src/index.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    register(app: any): void;
+    registerTrads({ locales }: {
+        locales: string[];
+    }): Promise<{
+        data: any;
+        locale: string;
+    }[]>;
+};
+export default _default;
+/**
+ * Re-exported so an app that stores a chart in this field and renders it
+ * elsewhere — a preview route, a custom admin page — does not need a second
+ * install to get at the spec's type or to draw one.
+ */
+export { readValue, writeValue, starterSpec } from './value';
+export type { ReadValue } from './value';
+export { FIELD_NAME, PLUGIN_ID } from './pluginId';
+export type { ChartSpec, ChartType, Series, ChartOptions } from '@qkix/chartkit-core';

package/dist/admin/src/pluginId.d.ts

@@ -0,0 +1,9 @@
+export declare const PLUGIN_ID = "chartkit";
+/**
+ * The custom field's name, which is not the plugin's.
+ *
+ * A field is referred to as `plugin::chartkit.chart` in a content-type schema,
+ * so the plugin is the namespace and this is the field inside it. Naming both
+ * `chartkit` would read as `plugin::chartkit.chartkit`.
+ */
+export declare const FIELD_NAME = "chart";

package/dist/admin/src/value.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Getting a chart in and out of a Strapi field value.
+ *
+ * Small, and separated out anyway, because it is where the field can lose
+ * someone's work. Strapi hands a custom field whatever is in the document: a
+ * JSON string on one code path and an already-parsed object on another, `null`
+ * for a new entry, and — for a field that used to be something else, or a
+ * document written by an import script — text that is not a chart at all.
+ *
+ * None of that may throw. A field that throws while rendering takes the whole
+ * edit view down, and the author loses every other field on the page along with
+ * this one.
+ */
+import { type ChartSpec } from '@qkix/chartkit-core';
+/**
+ * What a stored value turned out to be.
+ *
+ * `empty` and `unreadable` are deliberately different. Empty is a field nobody
+ * has filled in yet and the answer is an invitation to make a chart. Unreadable
+ * is data that exists and is not a chart, where quietly showing that same
+ * invitation would be an offer to overwrite it.
+ */
+export type ReadValue = {
+    status: 'empty';
+} | {
+    status: 'ok';
+    spec: ChartSpec;
+} | {
+    status: 'unreadable';
+    reason: string;
+};
+/**
+ * Reads the stored value into a spec.
+ *
+ * Migrates on the way in, so an author opening a chart saved against an older
+ * schema edits the current shape and saves the current shape. `renderChart`
+ * migrates in memory too, which is what keeps the published page correct in the
+ * meantime — but a document only stops being old once someone writes it back.
+ */
+export declare function readValue(value: unknown): ReadValue;
+/**
+ * The value to store.
+ *
+ * A string, because Strapi's `json` custom fields are read back as strings and
+ * writing an object here makes the field's own round trip asymmetric — it would
+ * work until the page is reloaded.
+ */
+export declare function writeValue(spec: ChartSpec): string;
+/**
+ * The chart a new field starts from.
+ *
+ * Not empty. An empty chart renders as an error panel, which is a poor first
+ * impression of a field someone just added, and a grid with no rows gives
+ * nothing to paste over or type into. Four quarters and one series is the
+ * smallest thing that is recognisably a chart.
+ */
+export declare function starterSpec(): ChartSpec;

package/dist/server/index.js

@@ -0,0 +1 @@
+"use strict";const t=({strapi:e})=>{e.customFields.register({name:"chart",plugin:"chartkit",type:"json",inputSize:{default:12,isResizable:!1}})},s={register:t};module.exports=s;

package/dist/server/index.mjs

@@ -0,0 +1,18 @@
+const t = ({ strapi: e }) => {
+  e.customFields.register({
+    name: "chart",
+    plugin: "chartkit",
+    type: "json",
+    inputSize: {
+      // Full width. The field is a chart preview above a data grid, and half a
+      // row is not enough for either.
+      default: 12,
+      isResizable: !1
+    }
+  });
+}, s = {
+  register: t
+};
+export {
+  s as default
+};

package/dist/server/src/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The server half of the plugin.
+ *
+ * Deliberately just a registration. Charts render from their spec, so there is
+ * no chart data to store beyond the field itself, no routes to serve it over
+ * and no service to compute it — a Chartkit content type would be a second
+ * place for the same numbers to live and drift.
+ */
+declare const _default: {
+    register: ({ strapi }: {
+        strapi: import("@strapi/types/dist/core").Strapi;
+    }) => void;
+};
+export default _default;

package/dist/server/src/register.d.ts

@@ -0,0 +1,17 @@
+import type { Core } from '@strapi/strapi';
+/**
+ * Registers the chart custom field.
+ *
+ * `json`, because a chart is a spec — a type, some labels, some series — and
+ * the alternatives are worse. A relation would need a content type nobody
+ * asked for; text would need every consumer to parse it and guess at what
+ * failure means.
+ *
+ * The stored value is a `ChartSpec` from `@qkix/chartkit-core`, which is also
+ * exactly what the renderers take. A front end reads the field and passes it
+ * straight to `<Chart spec={...} />` with nothing in between.
+ */
+declare const register: ({ strapi }: {
+    strapi: Core.Strapi;
+}) => void;
+export default register;

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@qkix/strapi-plugin-chartkit",
+  "version": "0.1.0",
+  "description": "Charts for Strapi v5, rendered as server-side SVG with no client-side JavaScript",
+  "strapi": {
+    "kind": "plugin",
+    "name": "chartkit",
+    "displayName": "Chartkit",
+    "description": "Charts for Strapi v5, rendered as server-side SVG with no client-side JavaScript"
+  },
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "strapi-v5",
+    "chart",
+    "charts",
+    "chartkit",
+    "svg",
+    "custom-field",
+    "cms",
+    "headless-cms",
+    "data-visualization"
+  ],
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "types": "./dist/admin/src/index.d.ts",
+      "source": "./admin/src/index.ts",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "types": "./dist/server/src/index.d.ts",
+      "source": "./server/src/index.ts",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@qkix/chartkit-core": "^0.2.0",
+    "@qkix/chartkit-editor": "^0.1.1"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.12.5",
+    "@strapi/typescript-utils": "^5.12.5",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^10.8.1",
+    "prettier": "^3.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.17",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "@qkix/tsconfig": "0.0.0",
+    "@qkix/eslint-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "@strapi/admin": "^5.0.0",
+    "@strapi/design-system": "^2.0.0",
+    "@strapi/icons": "^2.0.0",
+    "@strapi/strapi": "^5.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-intl": "^6.0.0 || ^7.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0 <=24.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT",
+  "author": "qkix",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qkix/strapi-plugins.git",
+    "directory": "packages/strapi-plugin-chartkit"
+  },
+  "bugs": {
+    "url": "https://github.com/qkix/strapi-plugins/issues"
+  },
+  "homepage": "https://github.com/qkix/strapi-plugins#readme",
+  "nx": {
+    "tags": [
+      "scope:plugin"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && strapi-plugin build --minify",
+    "clean": "rm -rf dist",
+    "lint": "eslint . && prettier --check .",
+    "format": "prettier --write .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "verify": "strapi-plugin verify",
+    "watch": "strapi-plugin watch",
+    "watch:link": "strapi-plugin watch:link",
+    "typecheck": "tsc -p admin/tsconfig.json && tsc -p server/tsconfig.json"
+  }
+}