@kouji-ui/components 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/components",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Opinionated styled Angular components built on @kouji-ui/core directives. Themed at runtime via @kouji-ui/themes.",
   "license": "MIT",
   "repository": {
@@ -25,26 +25,27 @@
     "directory": "../../dist/kj-components"
   },
   "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@angular/cdk": "^22.0.0",
-    "@kouji-ui/core": ">=0.3.0",
-    "lucide-static": "^1.14.0",
     "@angular/forms": "^22.0.0",
-    "rxjs": "^7.8.0",
-    "lexical": "^0.38.0",
-    "@lexical/rich-text": "^0.38.0",
-    "@lexical/list": "^0.38.0",
-    "@lexical/link": "^0.38.0",
-    "@lexical/history": "^0.38.0",
-    "@lexical/markdown": "^0.38.0",
+    "@kouji-ui/core": ">=0.3.0",
     "@lexical/code": "^0.38.0",
+    "@lexical/history": "^0.38.0",
     "@lexical/html": "^0.38.0",
-    "@lexical/selection": "^0.38.0"
+    "@lexical/link": "^0.38.0",
+    "@lexical/list": "^0.38.0",
+    "@lexical/markdown": "^0.38.0",
+    "@lexical/rich-text": "^0.38.0",
+    "@lexical/selection": "^0.38.0",
+    "lexical": "^0.38.0",
+    "lucide-static": "^1.14.0",
+    "rxjs": "^7.8.0"
   },
   "sideEffects": false,
   "dependencies": {
     "@tanstack/virtual-core": "^3.14.0",
+    "marked": "^18.0.11",
     "tslib": "^2.3.0"
   },
   "peerDependenciesMeta": {

package/types/kouji-ui-components.d.ts

@@ -1,5 +1,5 @@
 import * as i1 from '@kouji-ui/core';
-import { KjAlertMode, KjAvatarShape, KjOverflowContent, KjBadgeVariant, KjButtonGroupOrientation, KjCarousel, KjLiveRegion, KjCarouselSlide, KjCarouselAlign, KjChatStore, KjChatAnnouncer, KjChatMessageData, KjSlashCommand, KjColorFormat, KjColorPreset, KjColorValue, KjColorPicker, KjCombobox, KjOverlayTriggerLike, KjDatePicker, KjDateRange, KjDateRangePreset, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjEditorInstance, KjFileRejection, KjUploadableFile, KjFileUpload, KjInput, KjDividerOrientation, KjDividerAlign, KjListAs, KjListOrientation, KjPasswordAutocomplete, KjPasswordScore, KjOverflowContext, KjRichTextFeature, KjRichTextEditor, KjRteToolbarItem, KjActiveOverlay, KjSkeletonShape, KjSkeletonAnimation, KjSpinnerAnimation, KjResourceResult, KjStorageAdapter, KjTableState, KjTable, KjNumberFilterType, KjTabPanel, KjTagList, KjTextareaResize, KjTextareaAutoresize, KjHourCycle, TimeParts, KjToastVariant, KjCascadeSelectOption, KjTreeSelect, KjTreeNode } from '@kouji-ui/core';
+import { KjAlertMode, KjAvatarShape, KjOverflowContent, KjBadgeVariant, KjButtonGroupOrientation, KjCarousel, KjLiveRegion, KjCarouselSlide, KjCarouselAlign, KjChatStore, KjChatAnnouncer, KjChatMessageData, KjChatRenderer, KjChatItemInput, KjSlashCommand, KjColorFormat, KjColorPreset, KjColorValue, KjColorPicker, KjCombobox, KjOverlayTriggerLike, KjDatePicker, KjDateRange, KjDateRangePreset, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjEditorInstance, KjFileRejection, KjUploadableFile, KjFileUpload, KjInput, KjDividerOrientation, KjDividerAlign, KjListAs, KjListOrientation, KjPasswordAutocomplete, KjPasswordScore, KjOverflowContext, KjRichTextFeature, KjRichTextEditor, KjRteToolbarItem, KjActiveOverlay, KjSkeletonShape, KjSkeletonAnimation, KjSpinnerAnimation, KjResourceResult, KjStorageAdapter, KjTableState, KjTable, KjNumberFilterType, KjTabPanel, KjTagList, KjTextareaResize, KjTextareaAutoresize, KjHourCycle, TimeParts, KjToastVariant, KjCascadeSelectOption, KjTreeSelect, KjTreeNode } from '@kouji-ui/core';
 export { KJ_DROPDOWN_MENU, KjActiveOverlay, KjAlertMode, KjAvatarGroupAriaLabelFormat, KjAvatarShape, KjBadgeVariant, KjBlockquote, KjButtonGroupOrientation, KjCarousel, KjCarouselAlign, KjCarouselControlPattern, KjCarouselOrientation, KjCarouselSlide, KjCascadeSelectOption, KjChatAnnouncer, KjChatMessageData, KjChatRole, KjChatSide, KjChatState, KjChatStore, KjCode, KjColorFormat, KjColorPicker, KjColorPreset, KjColorValue, KjCombobox, KjDatePicker, KjDateRange, KjDateRangePreset, KjDialog, KjDialogOpenOptions, KjDialogRef, KjDialogService, KjDividerAlign, KjDividerOrientation, KjDrawer, KjDrawerOpenOptions, KjDrawerRef, KjDrawerService, KjDrawerSide, KjDropdownMenuCloseReason, KjDropdownMenuContent, KjDropdownMenuContext, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuMount, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjDropdownMenuTriggerKind, KjEditorInstance, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjFileRejection, KjFileUpload, KjHourCycle, KjInput, KjLead, KjListAs, KjListOrientation, KjLiveRegion, KjMuted, KjNumberFilterType, KjOverlayPanel, KjOverlayTriggerLike, KjPasswordAutocomplete, KjPasswordScore, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjResourceResult, KjRichTextEditor, KjRichTextFeature, KjRteToolbarItem, KjSheet, KjSheetDetent, KjSheetOpenOptions, KjSheetRef, KjSheetService, KjSkeletonAnimation, KjSkeletonShape, KjSlashCommand, KjSpeedDialDirection, KjSpinnerAnimation, KjStorageAdapter, KjTabPanel, KjTable, KjTableState, KjTextareaAutoresize, KjTextareaResize, KjToastVariant, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeNode, KjTreeSelect, KjTruncate, KjUploadableFile, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ModelSignal, AfterViewInit, ElementRef, OnDestroy, EventEmitter, EnvironmentProviders, OnInit, Injector, ResourceRef, Type, InjectionToken } from '@angular/core';
@@ -1009,6 +1009,10 @@ declare class KjButtonComponent {
  * @doc-example Variants
  *   Set `kjVariant` on the group to cascade onto every child button.
  *   @doc-file button-group.variants.example.ts
+ * @doc-example Segmented
+ *   `kjVariant="segmented"` moves the border onto the group and fills only
+ *   the pressed child — a mode switcher rather than a toolbar.
+ *   @doc-file button-group.segmented.example.ts
  * @doc-example Toggle
  *   Pair with `[kjPressed]` on each child to build a segmented control.
  *   @doc-file button-group.toggle.example.ts
@@ -1040,7 +1044,17 @@ declare class KjButtonComponent {
  * @doc-related button,toggle,tabs
  *
  * @doc-css-var
- *   --kj-button-group-gap  — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-button-group-gap        — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-segmented-border  — Shell and divider colour, `kjVariant="segmented"` only. Defaults to `--kj-border-default`.
+ *   --kj-segmented-bg-on   — Fill behind the pressed segment. Defaults to `--kj-bg-surface`.
+ *   --kj-segmented-fg-on   — Ink on the pressed segment. Defaults to `--kj-fg-default`.
+ *
+ *   Typography needs no dedicated hook: set the ordinary `--kj-button-font`,
+ *   `--kj-button-font-size`, `--kj-button-letter-spacing` and
+ *   `--kj-button-text-transform` on this host and they reach each child,
+ *   since every knob is read as `var(name, default)`. The on-state colours
+ *   are the exception — variant rules declare those knobs on the element,
+ *   so they get their own `--kj-segmented-*` indirection.
  *
  * @doc-category Library/Actions
  * @doc
@@ -1057,7 +1071,9 @@ declare class KjButtonGroupComponent {
     readonly kjOrientation: _angular_core.InputSignal<KjButtonGroupOrientation>;
     /**
      * Default variant forwarded to children via `KJ_BUTTON_GROUP`. Children
-     * that set their own `kjVariant` override this fallback.
+     * that set their own `kjVariant` override this fallback. Also mirrored to
+     * `data-variant` on the host, which is how `segmented` draws its shared
+     * shell and dividers.
      */
     readonly kjVariant: _angular_core.InputSignal<string | undefined>;
     /**
@@ -1771,6 +1787,10 @@ declare class KjChatFooterComponent {
  * Provider-agnostic: pair with `KjPromptInput` and drive `KjChatStore` from any
  * model / stream — the kit ships **no** LLM SDK or backend.
  *
+ * @doc-example Custom thread items
+ *   `provideKjChat` maps an item `type` to a component, so a thread can render
+ *   turns the kit knows nothing about. Ordinary messages are untouched.
+ *   @doc-file ai-chat.custom-items.example.ts
  * @doc-example Streaming (simulated)
  *   A full send → simulated-stream → reply loop with slash commands, a Stop
  *   button, tool-call cards and citations. No backend — a fake token generator
@@ -1810,6 +1830,19 @@ declare class KjChatThread {
     readonly kjLabel: _angular_core.InputSignal<string | undefined>;
     /** @internal — the coalescing announcer for the polite live region. */
     readonly announcer: KjChatAnnouncer;
+    private readonly config;
+    /**
+     * The registered component for a message's `type`, or `null` to let the
+     * built-in renderer draw it. A message with no `type` never consults the
+     * registry — that is the overwhelmingly common case and must stay free.
+     *
+     * An unknown `type` falls back to the configured `fallback`, and failing
+     * that to the built-in renderer: a transcript that silently drops a turn is
+     * worse than one that renders it plainly.
+     */
+    protected rendererFor(message: KjChatMessageData): KjChatRenderer | null;
+    /** The neutral shape handed to a registered renderer's `item` input. */
+    protected itemFor(message: KjChatMessageData): KjChatItemInput;
     private readonly injector;
     private readonly logEl;
     private lastId;
@@ -1822,9 +1855,13 @@ declare class KjChatThread {
 }
 
 /**
- * A parsed markdown block. Prose blocks carry a **pre-sanitised** HTML string
- * (escaped first, then a whitelist of inline tags applied); code blocks are
- * kept structural so the view can render a `<pre><code>` with a copy button.
+ * A parsed markdown block. Prose blocks carry an HTML string; code blocks stay
+ * structural so the view can render a `<pre><code>` with a copy button.
+ *
+ * Raw HTML in the source is escaped, never emitted (see the renderer override
+ * below), so the prose HTML only ever contains tags this module produced. The
+ * view sanitises it again anyway — a model's output is not a trust boundary
+ * worth betting one layer on.
  */
 type KjMdBlock = {
     readonly kind: 'prose';
@@ -1835,13 +1872,12 @@ type KjMdBlock = {
     readonly code: string;
 };
 /**
- * Parse a lightweight markdown subset into blocks: fenced code blocks
- * (```lang) become structural `code` blocks; everything else becomes `prose`
- * blocks with sanitised inline HTML.
+ * Parse markdown into blocks: fenced code becomes a structural `code` block,
+ * everything else is rendered to HTML as a `prose` block.
  *
- * Deliberately minimal (no tables / nested lists) and **self-contained** — the
- * repo ships no markdown engine on `main`. Swap in a full parser later without
- * touching the view.
+ * Code is split out at the TOKEN level rather than by regex so an indented
+ * block, a `~~~` fence, or a fence inside a list is still recognised — and so
+ * a stray fence in a partial stream cannot swallow the rest of the message.
  */
 declare function renderMarkdown(src: string): KjMdBlock[];
 
@@ -1873,6 +1909,13 @@ declare class KjChatMessage {
     readonly blocks: _angular_core.Signal<KjMdBlock[]>;
     private readonly _copied;
     readonly copiedIndex: _angular_core.Signal<number | null>;
+    /**
+     * Sanitise rather than bypass. `renderMarkdown` already escapes raw HTML at
+     * the parse layer, but a chat body is model or user output — the one place
+     * in a UI kit where trusting a single layer is a bad bet. `sanitize` strips
+     * anything the parser somehow let through instead of waving it past
+     * Angular's checks.
+     */
     safe(html: string): SafeHtml;
     copy(code: string, index: number): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjChatMessage, never>;