@kubed.io/cdn 0.0.3 → 0.0.5

package/README.md

@@ -9,10 +9,24 @@
 
 ## 🗂️ What is here
 
-| File | What it is |
+| Entry | What it brings |
 |---|---|
-| `dist/kd.js` | the core: `applyTheme`, `followTheme` and `define` |
-| `dist/kd.css` | text, links, tables, badges, code and cards for `.kd` markup, styled only from the theme |
+| `dist/kd.js` | 🎨 the core: the theme layer, the Grafana page helpers, and every generic element |
+| `dist/kd.css` | text, links, tables, badges, code and cards for plain `.kd` markup |
+| `dist/openapi.js` | 📜 `<kd-schema>`: any OpenAPI v3 or JSON Schema, kubectl-explain style, rendered lazily |
+| `dist/k8s.js` | ☸️ Kubernetes objects mapped onto the core elements: `<kd-k8s-object>`, `<kd-k8s-ref>`, `<kd-k8s-events>` |
+| `dist/n8n.js` | 💬 `mount(config)`: the n8n agent chat tile for app dashboards |
+
+The entries share chunks, so a page that loads several pays for Lit and the core once. The look lives in the core; a domain entry adds behaviour, never colours.
+
+**Elements** (all `kd-*`, real custom elements with shadow DOM, themed from `--kd-*`):
+
+| | |
+|---|---|
+| `kd-pill` `kd-tile` `kd-link` `kd-mask` | small things: a toned pill, a header tile, a dashboard link that keeps the time range and a back chain, a click-to-reveal value |
+| `kd-bar` `kd-sheet` `kd-table` | a title bar with chips and a breadcrumb, a property sheet, a table; cells can be text, pills, links, code or data |
+| `kd-groups` `kd-data` | labels as grouped pills, annotations as a tree; any JSON value as folded YAML |
+| `kd-tabs` `kd-steps` `kd-meter` | tabs that remember their choice, a stepper, a value against request/limit marks |
 
 The source is TypeScript under `src/`, one folder per entry. `dist/` is built by CI and exists only in the published package.
 
@@ -56,7 +70,7 @@ A release is then a one-line change per dashboard. Move every dashboard together
 ## 🧩 In a Business Text panel
 
 ```
-externalStyles: ["${assets}/kd.css"]
+externalStyles: [{ id: "kd", url: "${assets}/kd.css" }]   # objects: a bare string never loads
 content:        <div class="kd"> ... </div>
 afterRender:    import(context.grafana.replaceVariables("${assets}") + "/kd.js")
                   .then(m => m.applyTheme(context.element, context.grafana.theme))
@@ -64,7 +78,21 @@ afterRender:    import(context.grafana.replaceVariables("${assets}") + "/kd.js")
 
 `afterRender` runs on every re-render and `applyTheme` is idempotent, so switching Grafana's theme restyles the panel. Code with no `context.grafana.theme` calls `followTheme(element)` instead: it reads the live theme from Grafana's runtime and follows a theme switch.
 
-Every panel imports what it needs itself. The browser loads a URL once per page however many panels import it.
+Every panel imports what it needs itself. The browser loads a URL once per page however many panels import it, and an element defined by one panel works in all of them.
+
+**Feeding an element.** Elements draw from their `data` and nothing else, because Business Text recreates them whenever the panel's HTML changes. Push data in from `afterRender` on every render:
+
+```
+content:        <div class="kd"><kd-table></kd-table></div>
+afterRender:    import(base + "/kd.js").then(m => {
+                  m.applyTheme(context.element, context.grafana.theme)
+                  context.element.querySelector("kd-table").data = { rows: context.data }
+                })
+```
+
+Markup from a query can carry the data as a JSON attribute instead, escaped: `data="{{kdjson rows}}"` with the `kdjson` helper (`registerHelpers(context.handlebars)`), or `@json | @html` in Infinity jq. Never `{{{ }}}` JSON into an attribute.
+
+Ready-made panels are in [`examples/`](examples).
 
 ## 🛠️ Develop
 

package/dist/chunks/define-BSZoKakE.js

@@ -0,0 +1,10 @@
+//#region src/kd/define.ts
+var e = "0.0.5";
+function t(t, n, r = customElements) {
+	let i = r.get(t);
+	return i ? (i !== n && i.kdVersion !== "0.0.5" && console.warn(`@kubed.io/cdn ${e}: <${t}> is already defined by ${i.kdVersion ? `@kubed.io/cdn ${i.kdVersion}` : "another script"}; that definition stays until the page is reloaded.`), !1) : (Object.defineProperty(n, "kdVersion", { value: e }), r.define(t, n), !0);
+}
+//#endregion
+export { t as n, e as t };
+
+//# sourceMappingURL=define-BSZoKakE.js.map

package/dist/chunks/define-BSZoKakE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-BSZoKakE.js","names":["VERSION","define","existing","registry","name","element"],"sources":["../../src/kd/define.ts"],"sourcesContent":["/** This build's package version. */\nexport const VERSION: string = __KD_VERSION__;\n\n/**\n * Registers a custom element unless the name is taken, and says so when it is.\n *\n * Every panel on a page shares one registry, and a definition outlives SPA\n * navigation, so the first version of a tag loaded owns it until a full page\n * reload. A second define would throw; this keeps the first and warns when the\n * two builds differ.\n *\n * @returns whether this call defined the element\n */\nexport function define(\n  name: string,\n  element: CustomElementConstructor,\n  registry: CustomElementRegistry = customElements,\n): boolean {\n  const existing = registry.get(name) as (CustomElementConstructor & { kdVersion?: string }) | undefined;\n  if (existing) {\n    if (existing !== element && existing.kdVersion !== VERSION) {\n      console.warn(\n        `@kubed.io/cdn ${VERSION}: <${name}> is already defined by ${existing.kdVersion ? `@kubed.io/cdn ${existing.kdVersion}` : 'another script'}; ` +\n          'that definition stays until the page is reloaded.',\n      );\n    }\n    return false;\n  }\n  Object.defineProperty(element, 'kdVersion', { value: VERSION });\n  registry.define(name, element);\n  return true;\n}\n"],"mappings":";AACA,IAAaA,IAAA;AAYb,SAAgBC,EACd,GACA,GACA,IAAkC,gBACzB;CACT,IAAMC,IAAWC,EAAS,IAAIC,CAAI;CAYlC,OAXIF,KACEA,MAAaG,KAAWH,EAAS,cAAA,WACnC,QAAQ,KACN,iBAAiBF,EAAQ,KAAKI,EAAK,0BAA0BF,EAAS,YAAY,iBAAiBA,EAAS,cAAc,iBAAiB,oDAE7I,GAEK,OAET,OAAO,eAAeG,GAAS,aAAa,EAAE,OAAOL,EAAQ,CAAC,GAC9DG,EAAS,OAAOC,GAAMC,CAAO,GACtB;AACT"}