@kitn.ai/ui 0.22.0 → 0.22.1

package/dist/mcp.es.js

@@ -737,14 +737,14 @@ Call component_reference with no name (or name: "list") to list all ${all.length
       lines.push(`- **${slot.name}**${desc ? ` — ${desc}` : ""}`);
     }
   }
-  const parts = el.cssParts ?? [];
-  if (parts.length > 0) {
+  const parts2 = el.cssParts ?? [];
+  if (parts2.length > 0) {
     lines.push(
       "",
       "### Styleable parts (`::part`)",
       "Restyle these from outside the Shadow DOM via `" + tag + "::part(name) { … }`."
     );
-    for (const part of parts) {
+    for (const part of parts2) {
       const desc = part.description?.trim() ?? "";
       lines.push(`- **${part.name}**${desc ? ` — ${desc}` : ""}`);
       if (part.recipe) {
@@ -2594,6 +2594,83 @@ function listIntegrations() {
 function listArchetypes() {
   return archetypes;
 }
+const ENCODABLE = [
+  { pattern: "image/jpeg", kind: "image" },
+  { pattern: "image/png", kind: "image" },
+  { pattern: "image/gif", kind: "image" },
+  { pattern: "image/webp", kind: "image" },
+  { pattern: "application/pdf", kind: "document" },
+  { pattern: "text/*", kind: "text" },
+  { pattern: "application/json", kind: "text" },
+  { pattern: "application/xml", kind: "text" },
+  { pattern: "application/x-yaml", kind: "text" },
+  { pattern: "application/yaml", kind: "text" }
+];
+const UNNAMED_TEXT_MEDIA_TYPE = "text/plain";
+const NAMES_NOTHING = ["", "application/octet-stream"];
+const normalize = (value) => value.trim().toLowerCase();
+const namesNothing = (mediaType) => NAMES_NOTHING.includes(mediaType === void 0 ? "" : normalize(mediaType));
+const assertMediaType = (entry) => {
+  if (!entry.startsWith(".")) return entry;
+  throw new Error(
+    `\`accept\` entry "${entry}" is a file extension, and this kit takes media types only. HTML's own accept attribute does take extensions, which is exactly why this throws rather than quietly matching nothing. Use a media type instead -- "text/*" covers source files, "image/*" images, "application/pdf" PDFs, and \`encodableMediaTypes()\` is the full set. You lose nothing by dropping the extension: a file the browser cannot name is decided by decoding its bytes, which is stronger than matching its name.`
+  );
+};
+const splitFilter = (filter) => (typeof filter === "string" ? filter.split(",") : filter).map(normalize).filter((v2) => v2 !== "").map(assertMediaType);
+const parts = (pattern) => {
+  const slash = pattern.indexOf("/");
+  return slash === -1 ? [pattern, ""] : [pattern.slice(0, slash), pattern.slice(slash + 1)];
+};
+const matches = (pattern, mediaType) => {
+  const [pType, pSub] = parts(pattern);
+  const [mType, mSub] = parts(mediaType);
+  if (pType !== "*" && pType !== mType) return false;
+  return pSub === "*" || pSub === mSub;
+};
+const intersect = (capability, filter) => {
+  if (matches(capability, filter)) return filter;
+  if (matches(filter, capability)) return capability;
+  return void 0;
+};
+function encodableMediaTypes() {
+  return ENCODABLE.map((entry) => entry.pattern);
+}
+function resolveMediaPolicy(options = {}) {
+  const filter = options.accept === void 0 ? void 0 : splitFilter(options.accept);
+  const effective = [];
+  for (const capability of ENCODABLE) {
+    if (filter === void 0) {
+      effective.push({ ...capability });
+      continue;
+    }
+    for (const wanted of filter) {
+      const overlap = intersect(capability.pattern, wanted);
+      if (overlap !== void 0 && !effective.some((e) => e.pattern === overlap)) {
+        effective.push({ pattern: overlap, kind: capability.kind });
+      }
+    }
+  }
+  return {
+    types: effective.map((e) => e.pattern),
+    accept: effective.map((e) => e.pattern).join(","),
+    decide(mediaType) {
+      const type = mediaType === void 0 ? "" : normalize(mediaType);
+      if (namesNothing(type)) {
+        return effective.some((e) => matches(e.pattern, UNNAMED_TEXT_MEDIA_TYPE)) ? { status: "undetermined" } : (
+          // `unsupported` rather than `filtered`, deliberately: `filtered`
+          // claims the kit COULD have encoded this file, and nobody has
+          // established what it is. Unread and unnamed, it is not a text
+          // file the filter excluded -- it is a file with no known type.
+          { status: "unsupported" }
+        );
+      }
+      const hit = effective.find((e) => matches(e.pattern, type));
+      if (hit) return { status: "allowed", kind: hit.kind };
+      return ENCODABLE.some((e) => matches(e.pattern, type)) ? { status: "filtered" } : { status: "unsupported" };
+    }
+  };
+}
+resolveMediaPolicy();
 const text = (s) => ({
   content: [{ type: "text", text: s }]
 });
@@ -3015,6 +3092,7 @@ const ATTACHMENT_TAGS = /* @__PURE__ */ new Set(["kai-file-upload", "kai-attachm
 function hasAttachments(components) {
   return components.includes("kai-file-upload") && components.includes("kai-attachments");
 }
+const ATTACHMENT_ACCEPT = encodableMediaTypes().join(",");
 const ATTACHMENT_WIRE_NOTE = [
   "// The staged files ride along on the message as `file` parts, so they RENDER",
   "// in the thread AND reach the model: toOpenAIMessages / toAnthropicMessages",
@@ -3119,7 +3197,7 @@ function componentTags(components, chatFill) {
       `  <!-- Drop files here to stage them for the NEXT message. src/main.ts wires`,
       `       kai-files-added -> the staged list -> kai-attachments' items property. -->`,
       `  <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-      `    <kai-file-upload id="upload" accept="image/*,application/pdf"></kai-file-upload>`,
+      `    <kai-file-upload id="upload" accept="${ATTACHMENT_ACCEPT}"></kai-file-upload>`,
       `    <!-- items is a JS PROPERTY (arrays can't be attributes); 'removable' fires kai-remove. -->`,
       `    <kai-attachments id="attachments" variant="inline" removable></kai-attachments>`,
       `  </div>`
@@ -3382,7 +3460,7 @@ function renderJsx(components, ctx, framework) {
   const attachmentJsx = attachments ? [
     `      {/* Drop files here to stage them for the NEXT message. */}`,
     `      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.75rem' }}>`,
-    `        <FileUpload accept="image/*,application/pdf" onFilesAdded={onFilesAdded} />`,
+    `        <FileUpload accept="${ATTACHMENT_ACCEPT}" onFilesAdded={onFilesAdded} />`,
     `        {/* items is an ARRAY, so the wrapper sets it as a DOM property, never an attribute. */}`,
     `        <Attachments items={staged} variant="inline" removable onRemove={onRemoveAttachment} />`,
     `      </div>`
@@ -3659,7 +3737,7 @@ function renderVue(components, ctx) {
   const attachmentTemplate = attachments ? [
     `    <!-- Drop files here to stage them for the NEXT message. -->`,
     `    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-    `      <kai-file-upload accept="image/*,application/pdf" @kai-files-added="onFilesAdded" />`,
+    `      <kai-file-upload accept="${ATTACHMENT_ACCEPT}" @kai-files-added="onFilesAdded" />`,
     `      <kai-attachments :items.prop="staged" variant="inline" removable @kai-remove="onRemoveAttachment" />`,
     `    </div>`
   ].join("\n") : "";
@@ -3914,7 +3992,7 @@ function renderSvelte(components, ctx) {
   const attachmentMarkup = attachments ? [
     `  <!-- Drop files here to stage them for the NEXT message. -->`,
     `  <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-    `    <kai-file-upload accept="image/*,application/pdf" onkai-files-added={onFilesAdded}></kai-file-upload>`,
+    `    <kai-file-upload accept="${ATTACHMENT_ACCEPT}" onkai-files-added={onFilesAdded}></kai-file-upload>`,
     `    <kai-attachments bind:this={attachmentsEl} variant="inline" removable onkai-remove={onRemoveAttachment}></kai-attachments>`,
     `  </div>`
   ] : [];
@@ -4033,7 +4111,7 @@ function renderTanstackStart(components, ctx) {
   const attachmentJsx = attachments ? [
     `      {/* Drop files here to stage them for the NEXT message. */}`,
     `      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.75rem' }}>`,
-    `        <FileUpload accept="image/*,application/pdf" onFilesAdded={onFilesAdded} />`,
+    `        <FileUpload accept="${ATTACHMENT_ACCEPT}" onFilesAdded={onFilesAdded} />`,
     `        {/* items is an ARRAY, so the wrapper sets it as a DOM property, never an attribute. */}`,
     `        <Attachments items={staged} variant="inline" removable onRemove={onRemoveAttachment} />`,
     `      </div>`
@@ -4235,7 +4313,7 @@ function renderAngular(components, ctx) {
   const attachmentTemplate = attachments ? [
     `      <!-- Drop files here to stage them for the NEXT message. -->`,
     `      <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-    `        <kai-file-upload accept="image/*,application/pdf" (kai-files-added)="onFilesAdded($event)"></kai-file-upload>`,
+    `        <kai-file-upload accept="${ATTACHMENT_ACCEPT}" (kai-files-added)="onFilesAdded($event)"></kai-file-upload>`,
     `        <kai-attachments [items]="staged()" variant="inline" removable (kai-remove)="onRemoveAttachment($event)"></kai-attachments>`,
     `      </div>`
   ] : [];
@@ -4598,7 +4676,7 @@ function renderSolid(components, ctx) {
       `        {/* Read every file BEFORE appending: a per-file append would order`,
       `            the list by whichever finished reading first. */}`,
       `        <FileUpload`,
-      `          accept="image/*,application/pdf"`,
+      `          accept="${ATTACHMENT_ACCEPT}"`,
       `          onFilesAdded={async (files) => setStaged([...staged(), ...(await Promise.all(files.map(toAttachment)))])}`,
       `        >`,
       `          <FileUploadTrigger class="border-border text-muted-foreground w-full rounded-xl border border-dashed px-4 py-3 text-center text-sm">`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitn.ai/ui",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "nx": {
     "name": "ui",
     "targets": {
@@ -178,6 +178,8 @@
     "verify:ssr:render": "node scripts/verify-ssr-render.mjs",
     "verify:pack": "node scripts/verify-pack-weight.mjs",
     "verify:starters": "node scripts/verify-starters.mjs",
+    "lint:attachment-object-urls": "node scripts/lint-attachment-object-urls.mjs --self-test && node scripts/lint-attachment-object-urls.mjs",
+    "lint:silent-drops": "node scripts/lint-silent-drops.mjs --self-test && node scripts/lint-silent-drops.mjs",
     "test": "vitest run",
     "test:react": "vitest run --config vitest.react.config.ts",
     "test:storybook": "vitest run --project=storybook",

package/src/agent-tooling/mcp/tools/scaffold.ts

@@ -8,6 +8,12 @@ import {
   listArchetypes,
   listIntegrations,
 } from '../../registry';
+// The kit's media-type declaration, read rather than restated. This is the one
+// import in agent-tooling that reaches outside itself, and the module it reaches
+// for is the reason: `wire/media-types.ts` is pure (no I/O, no DOM, no solid-js),
+// so the Node MCP pass typechecks and bundles it unchanged. See
+// `ATTACHMENT_ACCEPT`.
+import { encodableMediaTypes } from '../../../wire/media-types';
 
 /**
  * scaffold — the keystone tool. Composes a working chat surface from four axes:
@@ -1081,6 +1087,40 @@ function hasAttachments(components: readonly string[]): boolean {
   return components.includes('kai-file-upload') && components.includes('kai-attachments');
 }
 
+/**
+ * ★ THE EMITTED `accept`, DERIVED. The seven renderers below interpolate this;
+ * none of them writes a media type.
+ *
+ * It used to be the literal `image/*,application/pdf` in all seven, which was
+ * right when only images and PDFs could be encoded and silently stopped being
+ * right when #190 made `text/*`, `application/json`, `application/xml` and YAML
+ * encodable. The list did not become wrong in this file — it became wrong in
+ * every app scaffolded from it, which is the worst place for a copy to live and
+ * exactly what `wire/media-types.ts` exists to prevent. An `accept` attribute is
+ * a harder case than the prose in `ATTACHMENT_WIRE_NOTE` only in that a comment
+ * can point at a function and an attribute has to CONTAIN the answer; the fix is
+ * the same either way, which is to read the declaration rather than restate it.
+ *
+ * WHY EMIT IT AT ALL, RATHER THAN NOTHING. An absent filter means the full
+ * capability set to `resolveMediaPolicy`, so omitting looks equivalent and is
+ * not, because the tags emitted here never call it. `<kai-file-upload>` (and the
+ * Solid `<FileUpload>`) pass `accept` straight to `<input type="file">` and do no
+ * JS filtering at all — unlike `<kai-chat accept>`, which resolves the policy in
+ * `default-input.tsx`. So on THESE tags an absent attribute is not the capability
+ * set, it is wider than the capability set: the dialog offers `.zip`, the emitted
+ * `toAttachment` stages it, and the encoder throws on a file the picker
+ * volunteered. Deriving the attribute is the only form that tracks the
+ * declaration; omitting it is a third behaviour that matches neither layer.
+ *
+ * IT IS A STEER, NOT A GATE, and nothing here should be read as claiming
+ * otherwise. `accept` filters the OS dialog, which always offers an "All Files"
+ * escape, and it does not apply to drag-and-drop — `file-upload.tsx` hands
+ * `dataTransfer.files` straight to `onFilesAdded`. A scaffolded app that wants a
+ * filter that HOLDS calls `resolveMediaPolicy().decide()` on what it staged; the
+ * emitted note points at it.
+ */
+const ATTACHMENT_ACCEPT = encodableMediaTypes().join(',');
+
 /**
  * What the scaffolder INTENDS to emit for one components list, so a guard can
  * check the seven renderers against the decision instead of restating it.
@@ -1161,15 +1201,35 @@ export const ATTACHMENT_WIRE_NOTE = [
  *
  * `<kai-file-upload>` hands over `File` objects and `<kai-attachments>` renders
  * `AttachmentData`, so something has to bridge them and it may as well be code
- * the consumer can edit. The object URL is what makes an image preview a real
- * thumbnail rather than a generic icon; it is deliberately not revoked here,
- * and the comment says why rather than leaving a silent leak.
+ * the consumer can edit.
+ *
+ * It reads the file with `FileReader.readAsDataURL` and stages a `data:` URI —
+ * the same call `readAsDataUrl` in `elements/default-input.tsx` makes, for the
+ * same reason. `URL.createObjectURL` would draw an identical thumbnail and be
+ * meaningless to anything downstream: an object URL resolves only inside the tab
+ * that minted it, so `toOpenAIMessages` / `toAnthropicMessages` refuse it rather
+ * than send a provider an address it cannot fetch. A `data:` URI previews the
+ * same and is the one form both APIs actually take. Reading is async, which is
+ * the only reason the emitted function is.
+ *
+ * WHICH files survive that encoding is deliberately not stated here, and the
+ * emitted code does not state it either: `encodableMediaTypes()` is the set, and
+ * is public precisely so that nothing has to keep a second copy of it (the
+ * reasoning is on `ATTACHMENT_WIRE_NOTE` above).
  *
  * The parameter type is derived from the property it feeds
  * (`KaiAttachmentsElement['items']` / the wrapper's `items` prop) at each call
  * site rather than importing `AttachmentData`, for the reason the html target
  * already derives its message type from `KaiChatElement['messages']`: a type
  * read off the assignment target cannot drift out of step with it.
+ *
+ * This comment taught the reverse until now, and approvingly — it described the
+ * object URL as what made a preview a real thumbnail and called leaving it
+ * unrevoked a deliberate choice, having gone untouched since #185 while #186
+ * rewrote the function under it. That is the second time in this file the code
+ * was corrected and the prose above it was not; the paragraph on
+ * `ATTACHMENT_WIRE_NOTE` records the first. Neither claim had anything to
+ * disagree with, which is the whole hazard of explaining emitted code in prose.
  */
 function fileToAttachmentLines(pad: string, typeName: string): string[] {
   return [
@@ -1404,7 +1464,7 @@ function componentTags(components: readonly string[], chatFill: string): string
       `  <!-- Drop files here to stage them for the NEXT message. src/main.ts wires`,
       `       kai-files-added -> the staged list -> kai-attachments' items property. -->`,
       `  <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-      `    <kai-file-upload id="upload" accept="image/*,application/pdf"></kai-file-upload>`,
+      `    <kai-file-upload id="upload" accept="${ATTACHMENT_ACCEPT}"></kai-file-upload>`,
       `    <!-- items is a JS PROPERTY (arrays can't be attributes); 'removable' fires kai-remove. -->`,
       `    <kai-attachments id="attachments" variant="inline" removable></kai-attachments>`,
       `  </div>`,
@@ -1815,7 +1875,7 @@ function renderJsx(components: readonly string[], ctx: RenderCtx, framework: str
     ? [
         `      {/* Drop files here to stage them for the NEXT message. */}`,
         `      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.75rem' }}>`,
-        `        <FileUpload accept="image/*,application/pdf" onFilesAdded={onFilesAdded} />`,
+        `        <FileUpload accept="${ATTACHMENT_ACCEPT}" onFilesAdded={onFilesAdded} />`,
         `        {/* items is an ARRAY, so the wrapper sets it as a DOM property, never an attribute. */}`,
         `        <Attachments items={staged} variant="inline" removable onRemove={onRemoveAttachment} />`,
         `      </div>`,
@@ -2176,7 +2236,7 @@ function renderVue(components: readonly string[], ctx: RenderCtx): string {
     ? [
         `    <!-- Drop files here to stage them for the NEXT message. -->`,
         `    <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-        `      <kai-file-upload accept="image/*,application/pdf" @kai-files-added="onFilesAdded" />`,
+        `      <kai-file-upload accept="${ATTACHMENT_ACCEPT}" @kai-files-added="onFilesAdded" />`,
         `      <kai-attachments :items.prop="staged" variant="inline" removable @kai-remove="onRemoveAttachment" />`,
         `    </div>`,
       ].join('\n')
@@ -2533,7 +2593,7 @@ function renderSvelte(components: readonly string[], ctx: RenderCtx): string {
     ? [
         `  <!-- Drop files here to stage them for the NEXT message. -->`,
         `  <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-        `    <kai-file-upload accept="image/*,application/pdf" onkai-files-added={onFilesAdded}></kai-file-upload>`,
+        `    <kai-file-upload accept="${ATTACHMENT_ACCEPT}" onkai-files-added={onFilesAdded}></kai-file-upload>`,
         `    <kai-attachments bind:this={attachmentsEl} variant="inline" removable onkai-remove={onRemoveAttachment}></kai-attachments>`,
         `  </div>`,
       ]
@@ -2714,7 +2774,7 @@ function renderTanstackStart(components: readonly string[], ctx: RenderCtx): str
     ? [
         `      {/* Drop files here to stage them for the NEXT message. */}`,
         `      <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: '0.5rem', padding: '0.75rem' }}>`,
-        `        <FileUpload accept="image/*,application/pdf" onFilesAdded={onFilesAdded} />`,
+        `        <FileUpload accept="${ATTACHMENT_ACCEPT}" onFilesAdded={onFilesAdded} />`,
         `        {/* items is an ARRAY, so the wrapper sets it as a DOM property, never an attribute. */}`,
         `        <Attachments items={staged} variant="inline" removable onRemove={onRemoveAttachment} />`,
         `      </div>`,
@@ -2989,7 +3049,7 @@ function renderAngular(components: readonly string[], ctx: RenderCtx): string {
     ? [
         `      <!-- Drop files here to stage them for the NEXT message. -->`,
         `      <div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem;">`,
-        `        <kai-file-upload accept="image/*,application/pdf" (kai-files-added)="onFilesAdded($event)"></kai-file-upload>`,
+        `        <kai-file-upload accept="${ATTACHMENT_ACCEPT}" (kai-files-added)="onFilesAdded($event)"></kai-file-upload>`,
         `        <kai-attachments [items]="staged()" variant="inline" removable (kai-remove)="onRemoveAttachment($event)"></kai-attachments>`,
         `      </div>`,
       ]
@@ -3498,7 +3558,7 @@ function renderSolid(components: readonly string[], ctx: RenderCtx): string {
             `        {/* Read every file BEFORE appending: a per-file append would order`,
             `            the list by whichever finished reading first. */}`,
             `        <FileUpload`,
-            `          accept="image/*,application/pdf"`,
+            `          accept="${ATTACHMENT_ACCEPT}"`,
             `          onFilesAdded={async (files) => setStaged([...staged(), ...(await Promise.all(files.map(toAttachment)))])}`,
             `        >`,
             `          <FileUploadTrigger class="border-border text-muted-foreground w-full rounded-xl border border-dashed px-4 py-3 text-center text-sm">`,

package/src/wire/encode.ts

@@ -143,6 +143,7 @@ type SettledTool = ToolPart & { toolCallId: string };
 
 const isTextPart = (p: MessagePart): p is TextPart => p.type === 'text';
 
+// lint-silent-drops: drops reasoning,tool,card,source,file -- text projection by name and contract, used for the plain-string form of a turn; every caller that needs the other variants encodes them itself before falling back here.
 const textOf = (parts: MessagePart[]): string =>
   parts
     .filter(isTextPart)
@@ -423,6 +424,7 @@ function reasoningDetailOf(part: ReasoningPart): OpenAIReasoningDetail | undefin
  * or document content in an assistant message, so there is nothing to encode it
  * to; attachments belong to the user turn that sent them.
  */
+// lint-silent-drops: drops card,source -- kit-side parts with no OpenAI wire representation; cards come from tool calls, which ARE encoded, and sources are UI citations.
 export function toOpenAIMessages(
   messages: ChatMessage[],
   options: OpenAIEncodeOptions = {},
@@ -449,6 +451,7 @@ export function toOpenAIMessages(
         buffered = '';
       };
 
+      // lint-silent-drops: drops reasoning,tool,card,source -- a USER turn carries authored content only; reasoning and tool parts are assistant-side, cards and sources are kit-side UI with no OpenAI wire form.
       message.parts.forEach((part, partIndex) => {
         if (part.type === 'text') {
           buffered += part.text;
@@ -593,6 +596,7 @@ export function toAnthropicMessages(
     if (message.role === 'user') {
       // Part order, for the same reason as `toOpenAIMessages`.
       const userBlocks: AnthropicContentBlock[] = [];
+      // lint-silent-drops: drops reasoning,tool,card,source -- a USER turn carries authored content only; reasoning and tool parts are assistant-side, cards and sources are kit-side UI with no Anthropic wire form.
       message.parts.forEach((part, partIndex) => {
         if (part.type === 'text') {
           if (part.text !== '') userBlocks.push({ type: 'text', text: part.text });
@@ -619,6 +623,7 @@ export function toAnthropicMessages(
       results = [];
     };
 
+    // lint-silent-drops: drops card,source,file -- cards and sources are kit-side UI; a file part on an ASSISTANT turn has no Anthropic representation, since the API takes image and document content on user turns only.
     message.parts.forEach((part, partIndex) => {
       switch (part.type) {
         case 'reasoning': {