@iyulab/chat-components 0.13.0 → 0.14.1

package/dist/utilities/sanitizers.js

@@ -76,18 +76,29 @@ var HREF_STRIP_CHARS_REGEX = /[\u0000-\u001F\u007F\s]+/g;
 /** href/src에서 차단해야 하는 위험 protocol */
 var HREF_UNSAFE_PROTOCOL_REGEX = /^(?:javascript|data|vbscript):/i;
 /**
-* href / src attribute용 문자열 처리
+* URL 의 프로토콜을 검사해 안전한 URL 문자열을 돌려줍니다 — HTML escape 는 하지 않습니다.
+* Lit 의 속성 바인딩처럼 escape 를 스스로 하는 자리에서 씁니다(두 번 escape 하면 `&` 가 `&` 가 된다).
+* 위험한 URL(javascript:/data:/vbscript:, protocol-relative)은 `#` 가 됩니다.
 *
 * 예:
-*  <a href="{value}">
+*  html`<a href=${sanitizeHref(url)}>`
 */
-function escapeHtmlHref(value) {
+function sanitizeHref(value) {
 	let normalized = value.replace(ZERO_WIDTH_STRICT_REGEX, "").trim();
 	if (HREF_STRIP_CHARS_REGEX.test(normalized)) normalized = normalized.replace(HREF_STRIP_CHARS_REGEX, "");
 	normalized = normalized.replace(/\\/g, "/");
 	if (normalized.startsWith("//")) return "#";
 	if (HREF_UNSAFE_PROTOCOL_REGEX.test(normalized)) return "#";
-	return escapeHtmlAttr(normalized);
+	return normalized;
+}
+/**
+* href / src attribute용 문자열 처리 — HTML 문자열을 직접 조립하는 자리에서 씁니다.
+*
+* 예:
+*  <a href="{value}">
+*/
+function escapeHtmlHref(value) {
+	return escapeHtmlAttr(sanitizeHref(value));
 }
 //#endregion
-export { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth };
+export { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, sanitizeHref, stripZeroWidth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -38,6 +38,8 @@
     "./src/extra.ts",
     "./dist/index.js",
     "./src/index.ts",
+    "./dist/utilities/icons.js",
+    "./src/utilities/icons.ts",
     "./dist/react/index.js"
   ],
   "exports": {
@@ -67,7 +69,7 @@
     "marked": "^18.0.6"
   },
   "peerDependencies": {
-    "@iyulab/components": ">=1.49.0",
+    "@iyulab/components": ">=1.51.0",
     "@lit/react": ">=1.0.8",
     "chart.js": ">=4.5.1",
     "react": ">=18.0.0"

package/skills/iyulab-chat-components/SKILL.md

@@ -31,6 +31,7 @@ import '@iyulab/chat-components/dist/components/prompt/UPrompt.js';
 ```
 
 > For detailed setup and usage patterns, see [./references/usage.md](./references/usage.md).
+> Model output is untrusted — see [./references/security.md](./references/security.md) for what each input may contain.
 
 ---
 

package/skills/iyulab-chat-components/references/components/element-block.md

@@ -6,7 +6,7 @@ import '@iyulab/chat-components/dist/components/blocks/UElementBlock.js';
 
 **Tag:** `u-element-block`
 
-Dynamic custom element renderer. Creates the element specified by `tag`, binds `properties` to it, and shows a skeleton placeholder while `loading`. Used internally by `u-marked-block` to render `block-json` code fences (see [../extra-system.md](../extra-system.md)) — you generally don't create it directly.
+Dynamic block renderer. Creates the registered block specified by `tag`, binds the schema's `properties` to it, and shows a skeleton placeholder while `loading`. Used internally by `u-marked-block` to render `block-json` code fences (see [../extra-system.md](../extra-system.md)) — you generally don't create it directly.
 
 Extends `UDataElement`, so `tag`/`properties` can also be injected via a `<script type="application/json">` slot.
 
@@ -43,15 +43,14 @@ This is converted to `<u-element-block tag="u-images-block" ...>` via `UElementB
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
-| `tag` | `string` | `undefined` | — | Custom element tag to render. Must already be registered |
-| `properties` | `Record<string, unknown>` | `undefined` | — | Properties to bind to the rendered element |
+| `tag` | `string` | `undefined` | — | Block tag to render. Must be a registered block (`registerElementBlock` or `ElementPromptBuilder.add`) whose element is defined |
+| `properties` | `Record<string, unknown>` | `undefined` | — | Values to bind. Only names listed in the block schema's `properties` are assigned |
 | `loading` | `boolean` | `false` | ✓ | Shows a skeleton placeholder instead of the element |
-| `blacklist` | `string[]` | `['innerHTML', 'outerHTML', 'textContent', 'innerText', 'outerText', 'srcdoc']` | — | Property names blocked from binding for XSS prevention |
 
 ## Error Handling
 
-If `tag` is missing, unregistered, or `properties` fails validation/assignment, `u-element-block` does **not** show an error card — it renders nothing and logs to the console (`[u-element-block] ...`). While `loading` is `true`, JSON parse failures from the underlying `UDataElement` are silently ignored too, since incomplete streamed JSON is expected mid-stream.
+If `tag` is missing or not a registered block, or `properties` is not an object or fails to assign, `u-element-block` does **not** show an error card — it renders nothing and logs to the console (`[u-element-block] ...`). While `loading` is `true`, JSON parse failures from the underlying `UDataElement` are silently ignored too, since incomplete streamed JSON is expected mid-stream.
 
 ## Security
 
-The following property names are blocked by default to prevent XSS: `innerHTML`, `outerHTML`, `textContent`, `innerText`, `outerText`, `srcdoc`. Extend `blacklist` to add more restrictions.
+`tag` and `properties` usually come from model output, so they are treated as untrusted. Only registered blocks are created, and only the property names in the block's schema are assigned — any other key (for example `style`) is dropped and logged. See [../extra-system.md](../extra-system.md#security).

package/skills/iyulab-chat-components/references/components/images-block.md

@@ -71,3 +71,4 @@ interface ImageSlide {
 | Carousel | Up to 3 slides visible; draggable |
 | Lightbox | Full-screen modal on image click |
 | Keyboard | `←` `→` to navigate, `Esc` to close |
+| Image origin policy | `setAllowedImagePrefixes()` applies — a blocked item shows its alt text and is not requested (see [../security.md](../security.md)) |

package/skills/iyulab-chat-components/references/components/marked-block.md

@@ -65,8 +65,25 @@ Vendored from GitHub's markdown theme — light values shown, dark auto-applies
 | `--base-size-4` / `-8` / `-16` / `-24` / `-40` | Spacing scale used throughout (margins, padding, gaps) |
 | `--base-text-weight-normal` / `-medium` / `-semibold` | Font-weight scale (body / table header / heading) |
 
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `image-blocked` | Alt text shown in place of an image the image origin policy blocked (see Images) |
+
+## Images
+
+Markdown images (table cells included) follow the page-wide image origin policy set with
+`setAllowedImagePrefixes()`. A blocked image is not requested; its alt text is shown in a
+`part="image-blocked"` span (`Image blocked: …`, localized). See [../security.md](../security.md).
+
 ## ReferenceCitation Type
 
+A citation is drawn at `endIndex` in the markdown source. While a response streams, a citation whose
+`endIndex` is past the text received so far is held until that text arrives; a negative or non-integer
+index is ignored. If `endIndex` falls inside a link URL, an image, or inline code, the citation is drawn
+right after that element; inside a fenced code block it is dropped.
+
 ```ts
 interface ReferenceCitation {
   startIndex: number;    // Start character index in the markdown text

package/skills/iyulab-chat-components/references/extra-system.md

@@ -76,20 +76,20 @@ const def: ElementSchema = {
 ElementPromptBuilder.instance.add(def);
 ```
 
-The element just needs to accept standard property assignments — `u-element-block` binds `properties` keys directly to element properties.
+The element just needs to accept standard property assignments. `add()` also registers the schema as a renderable block — `u-element-block` assigns only the names in the schema's `properties`. If you write your own prompt instead, call `registerElementBlock(def)` (exported from `@iyulab/chat-components`).
 
 ## Error Handling
 
-If the LLM outputs a `tag` that isn't registered (e.g. missing `@iyulab/chat-components/extra` import, or a custom extra's element isn't defined yet), `u-element-block` does **not** show an error card — it renders nothing and logs to the console instead. Genuine data errors (invalid `properties`, assignment failures) are also console-only.
+If the LLM outputs a `tag` that isn't a registered block (e.g. missing `@iyulab/chat-components/extra` import, or a custom extra's schema was never registered or its element isn't defined yet), `u-element-block` does **not** show an error card — it renders nothing and logs to the console instead. Genuine data errors (invalid `properties`, assignment failures) are also console-only.
 
 ## Security
 
-`u-element-block` maintains a `blacklist` of dangerous property names that are never bound: `innerHTML`, `outerHTML`, `textContent`, `innerText`, `outerText`, `srcdoc`. Custom elements registered as extras should only accept well-typed, data-only properties.
+`block-json` is model output and is treated as untrusted. `u-element-block` creates only registered blocks (`ElementPromptBuilder.add()` or `registerElementBlock()`; built-in extras register on import) and assigns only the property names in the block's schema `properties` — other keys, including `style`, are dropped and logged. Custom extras should accept data only; if a property is rendered as HTML, sanitize it inside the element.
 
 ## `ElementPromptBuilder` API
 
 | Method | Description |
 |--------|-------------|
 | `ElementPromptBuilder.instance` | Singleton accessor |
-| `.add(definition: ElementSchema)` | Register a custom extra (throws on tag conflict) |
+| `.add(definition: ElementSchema)` | Register a custom extra (throws on tag conflict). Also registers it as a renderable block |
 | `.build(): string` | Generate system prompt instruction string |

package/skills/iyulab-chat-components/references/security.md

@@ -0,0 +1,23 @@
+# Security model
+
+Model output is **untrusted** (prompt injection can put third-party text in any response). What each input
+is trusted to contain:
+
+| Input | Treated as | Handling |
+|---|---|---|
+| `u-marked-block` `value` | untrusted | Raw HTML shown as text · link/image URLs protocol-checked (`javascript:`/`data:`/`vbscript:`/`//host` → `#`) · code fences escaped · table cells same rules |
+| `block-json` fences | untrusted | Only registered blocks; only the schema's property names are assigned |
+| `refs` | untrusted | Text rendered as text · URLs protocol-checked in `u-ref-tag` and `u-ref-card` |
+| `u-table-block` cell `text` bound directly | **trusted HTML** | Sanitize before binding. `block-json` cannot reach it |
+| Your custom block | your element's contract | The schema allows names, not content — sanitize HTML-rendered properties inside the element |
+
+Requests: markdown images and `u-images-block` load the `http:`/`https:` URL the model writes as soon as they
+render (an image URL can carry data out). When the model reads content you do not control, call
+`setAllowedImagePrefixes([location.origin + '/', 'https://cdn.example.com/images/'])` before rendering —
+images outside the list are not requested and show their alt text (`Image blocked: …`). Prefixes match the
+resolved absolute URL; prefer paths to whole domains (open redirects). `data:image/…` is always shown (no
+request). Default: all allowed. Add CSP `img-src` as a second layer.
+`u-map-block` (OpenStreetMap iframe) and `u-video-block` (YouTube/Vimeo/direct) embed external content.
+`u-ref-card` requests no favicon by default.
+
+Do not insert model output with `innerHTML` yourself; route it through `u-marked-block`.