@qilin-agent/client-ui-attachment 0.0.0-stage → 3.1.3

package/lib/index.js

@@ -0,0 +1,6 @@
+//#region lib/types/index.js
+/** Host half of the browser-only attachment presentation plugin. */
+/** No host-side behavior; the client half registers the React slot entries. */
+function apply() {}
+//#endregion
+export { apply };

package/lib/types/AttachmentRail.d.ts

@@ -0,0 +1,39 @@
+/** Draft-attachment rail: scrollbar-less horizontal overflow paged by edge arrows. */
+import type { ReactNode } from 'react';
+/** One ordered draft attachment rendered by the rail owner. */
+export interface AttachmentRailItem {
+    /** Stable identity for the React key. */
+    id: string;
+}
+/** Rail-level strings the owner resolves from its own locale namespace. */
+export interface AttachmentRailLabels {
+    /** Accessible name of the rail group. */
+    group: string;
+    /** Accessible label of the left paging arrow. */
+    scrollLeft: string;
+    /** Accessible label of the right paging arrow. */
+    scrollRight: string;
+}
+/**
+ * Horizontal rail over the caller's ordered draft attachments.
+ *
+ * The rail scrolls with its scrollbar hidden; overflow is announced by edge
+ * arrows recomputed from scroll geometry on scroll, item-count changes, and
+ * rail size changes (a ResizeObserver on the rail element, so sidebar or
+ * panel resizes count, not only window resizes). A vertical wheel pans the
+ * rail horizontally and is consumed exclusively (non-passive listener), a
+ * newly added item is revealed at the rail's end while a rail that mounts
+ * over an existing draft keeps its start position. The owner renders each
+ * item and decides mounting; it renders the rail only while items exist.
+ *
+ * @param props.items - attachments in draft order.
+ * @param props.labels - rail-level strings (group name and paging arrows).
+ * @param props.renderItem - render one attachment card in draft order.
+ * @returns the rail group with its paging arrows.
+ */
+export declare function AttachmentRail<T extends AttachmentRailItem>({ items, labels, renderItem }: {
+    items: readonly T[];
+    labels: AttachmentRailLabels;
+    renderItem: (item: T) => ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AttachmentRail.d.ts.map

package/lib/types/DropOverlay.d.ts

@@ -0,0 +1,24 @@
+/** Drop-overlay strings the owner resolves from its own locale namespace. */
+export interface DropOverlayLabels {
+    /** Headline inviting the drop, or naming why it is unavailable. */
+    title: string;
+    /** Limits line under the title; shown only while drops are accepted. */
+    desc?: string | undefined;
+}
+/**
+ * Full-viewport invitation shown while a file drag is over the page
+ * (DeepSeek Chat's DragMask). Decoration only: `pointer-events: none` keeps
+ * drag targeting on the page below, so the owner's document-level listeners
+ * keep an accurate enter/leave count and own accept/reject. Rendered through
+ * a body portal for the same transformed-ancestor reason as the lightbox.
+ *
+ * @param props.disabled - drops are currently refused; renders the blocked
+ * illustration and drops the desc line.
+ * @param props.labels - resolved title and limits strings.
+ * @returns the overlay layer.
+ */
+export declare function DropOverlay({ disabled, labels }: {
+    disabled: boolean;
+    labels: DropOverlayLabels;
+}): import("react").ReactPortal;
+//# sourceMappingURL=DropOverlay.d.ts.map

package/lib/types/FileCard.d.ts

@@ -0,0 +1,26 @@
+/** Localized strings consumed by one pending-file card. */
+export interface FileCardLabels {
+    /** Card body announcement, e.g. "Pending file {name}". */
+    readonly label: string;
+    /** Remove-button label. */
+    readonly remove: string;
+    /** Status line while the upload is in flight. */
+    readonly uploading: string;
+    /** Status line and retry affordance after a failed upload. */
+    readonly failed: string;
+    /** Retry-button label. */
+    readonly retry: string;
+}
+/** Upload display state resolved by the owner. */
+export type FileCardState = 'uploading' | 'ready' | 'error';
+/** One pending file card: type glyph, name, size or upload status, remove, retry. */
+export declare function FileCard({ name, bytes, state, progress, labels, onRemove, onRetry, }: {
+    name: string;
+    bytes: number;
+    state: FileCardState;
+    progress?: number;
+    labels: FileCardLabels;
+    onRemove: () => void;
+    onRetry: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FileCard.d.ts.map

package/lib/types/MessageImage.d.ts

@@ -0,0 +1,64 @@
+import type { ImageAttachmentRef } from '@qilin-agent/attachment';
+import type { ImageLightboxLabels } from '@qilin-agent/client-ui-primitives';
+/** Loads a session-authorized durable image URL and may expose a cached URL synchronously. */
+export type ImageLoader = ((attachment: ImageAttachmentRef) => Promise<string>) & {
+    peek?: (attachment: ImageAttachmentRef) => string | undefined;
+};
+/** One gallery entry: a durable admitted reference, or a submission echo's local preview. */
+export type MessageImageSpec = {
+    readonly attachment: ImageAttachmentRef;
+    /** Presentation-only name for the thumbnail and lightbox; loading uses the original reference. */
+    readonly label?: string;
+} | {
+    readonly preview: {
+        readonly url: string;
+        readonly name?: string;
+        readonly width?: number;
+        readonly height?: number;
+    };
+};
+/** Message-image strings the owner resolves from its own locale namespace. */
+export interface MessageImageLabels {
+    /** Fallback display name for an unnamed image. */
+    image: string;
+    /** Thumbnail tooltip inviting the original-image preview. */
+    open: string;
+    /** Accessible thumbnail label; receives the image's display name. */
+    openNamed: (label: string) => string;
+    /** Loading placeholder shown until bytes resolve. */
+    loading: string;
+    /** Retry-control label shown when the load fails. */
+    loadFailed: string;
+    /** Lightbox strings forwarded to the opened preview. */
+    lightbox: ImageLightboxLabels;
+}
+/**
+ * Compact history renderer with retryable loading and click-to-open original
+ * preview. A lone image renders at its `singleFit` size; an image among
+ * several renders as a fixed 64px square tile. The preview arm displays its
+ * local URL directly — no loader round-trip, no failure/retry surface.
+ * List thumbnails use status icons with localized tooltips and accessible names.
+ *
+ * @param props.image - the durable reference to load, or the local preview to display.
+ * @param props.load - session-authorized URL loader for the durable arm.
+ * @param props.variant - lone image, cropped gallery tile, or uncropped list thumbnail.
+ * @param props.labels - resolved strings (tooltip, loading, retry, lightbox).
+ * @returns the bounded thumbnail button, or the retry control on failure.
+ */
+export declare function MessageImage({ image, load, variant, labels }: {
+    image: MessageImageSpec;
+    load: ImageLoader;
+    variant: 'single' | 'tile' | 'thumbnail';
+    labels: MessageImageLabels;
+}): import("react").JSX.Element;
+/** Wrapping image group shared by user and assistant history: a lone image
+ * renders large unless its owner requests compact tiles or contained list thumbnails. */
+export declare function ImageGallery({ images, load, align, compact, thumbnail, labels }: {
+    images: readonly MessageImageSpec[];
+    load: ImageLoader;
+    align: 'start' | 'end';
+    compact?: boolean;
+    thumbnail?: boolean;
+    labels: MessageImageLabels;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=MessageImage.d.ts.map

package/lib/types/client/ComposerAttachments.d.ts

@@ -0,0 +1,4 @@
+import type { ComposerAttachmentsProps } from '@qilin-agent/client-ui-conversation/client';
+/** Draft image previews, pending-file cards, drop target, and original-image preview. */
+export declare function ComposerAttachments({ attachments, canAcceptDrop, onAddFiles, onRemoveAttachment, uploads, onRetryFile, dropLimits, t, }: ComposerAttachmentsProps): import("react").JSX.Element;
+//# sourceMappingURL=ComposerAttachments.d.ts.map

package/lib/types/client/MessageImages.d.ts

@@ -0,0 +1,4 @@
+import type { MessageImagesProps } from '@qilin-agent/client-ui-chat/client';
+/** Historical message-image slot entry. */
+export declare function MessageImages({ images, loadImage, align, compact, thumbnail, t }: MessageImagesProps): import("react").JSX.Element;
+//# sourceMappingURL=MessageImages.d.ts.map

package/lib/types/client/drop-events.d.ts

@@ -0,0 +1,14 @@
+/** Document drag-and-drop listeners owned by one mounted attachment view. */
+import type { ComposerAttachmentsProps } from '@qilin-agent/client-ui-conversation/client';
+/**
+ * Install one attachment view's file-drop listeners.
+ * @param canAcceptDrop - whether this view accepts the dropped files.
+ * @param onAddFiles - attachment intake callback.
+ * @param dragDepth - the view's retained nested-drag counter.
+ * @param setDragActive - publish whether a file drag is active.
+ * @returns cleanup for exactly these listeners.
+ */
+export declare function installDocumentDropEvents(canAcceptDrop: ComposerAttachmentsProps['canAcceptDrop'], onAddFiles: ComposerAttachmentsProps['onAddFiles'], dragDepth: {
+    current: number;
+}, setDragActive: (active: boolean) => void): () => void;
+//# sourceMappingURL=drop-events.d.ts.map

package/lib/types/client/index.d.ts

@@ -0,0 +1,7 @@
+/** Browser attachment plugin: fills conversation's composer and image slots. */
+import type { Context as ClientContext } from '@qilin-agent/kylin';
+/** Slot registry required by this presentation plugin. */
+export declare const inject: string[];
+/** Register attachment presentation without exporting React components as package values. */
+export declare function apply(ctx: ClientContext): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/client/labels.d.ts

@@ -0,0 +1,43 @@
+import type { TranslateNS } from '@qilin-agent/client-ui-slots';
+import type { AttachmentRailLabels } from '../AttachmentRail.tsx';
+import type { DropOverlayLabels } from '../DropOverlay.tsx';
+import type { FileCardLabels } from '../FileCard.tsx';
+import type { ImageLightboxLabels } from '@qilin-agent/client-ui-primitives';
+import type { MessageImageLabels } from '../MessageImage.tsx';
+/**
+ * Resolve original-image lightbox strings from the conversation namespace.
+ * @param t - conversation namespace translator.
+ * @returns translated lightbox labels.
+ */
+export declare function lightboxLabels(t: TranslateNS<'conversation'>): ImageLightboxLabels;
+/**
+ * Resolve historical message-image strings from the conversation namespace.
+ * @param t - conversation namespace translator.
+ * @returns translated message-image labels.
+ */
+export declare function messageImageLabels(t: TranslateNS<'conversation'>): MessageImageLabels;
+/**
+ * Resolve the document-level drop invitation and its optional limits line.
+ * @param t - conversation namespace translator.
+ * @param accepting - whether the composer can accept dropped files.
+ * @param limits - optional translated count and size values.
+ * @returns translated drop-overlay labels.
+ */
+export declare function dropOverlayLabels(t: TranslateNS<'conversation'>, accepting: boolean, limits?: {
+    readonly count: number;
+    readonly size: string;
+}): DropOverlayLabels;
+/**
+ * Resolve pending-file card strings from the conversation namespace.
+ * @param t - conversation namespace translator.
+ * @param name - browser file name interpolated into remove/retry labels.
+ * @returns translated file-card labels.
+ */
+export declare function fileCardLabels(t: TranslateNS<'conversation'>, name: string): FileCardLabels;
+/**
+ * Resolve the mixed draft-attachment rail strings from the conversation namespace.
+ * @param t - conversation namespace translator.
+ * @returns translated attachment-rail labels.
+ */
+export declare function attachmentRailLabels(t: TranslateNS<'conversation'>): AttachmentRailLabels;
+//# sourceMappingURL=labels.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+/** Host half of the browser-only attachment presentation plugin. */
+/** No host-side behavior; the client half registers the React slot entries. */
+export declare function apply(): void;
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@qilin-agent/client-ui-attachment",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "description": "Dynamic attachment presentation plugin for conversation input, message-image, and trajectory image slots",
+  "version": "3.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kkutysllb/QiLin.git",
+    "directory": "packages/client/ui-attachment"
+  },
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "qilin": {
+    "client": {
+      "inject": [
+        "@qilin-agent/client-ui-chat",
+        "@qilin-agent/client-ui-conversation",
+        "@qilin-agent/client-ui-renderer",
+        "@qilin-agent/client-ui-trajectory",
+        "@qilin-agent/client-ui-tool"
+      ],
+      "platform": "web"
+    }
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "clsx": "^2.0.0",
+    "@qilin-agent/kylin": "~4.0.3",
+    "@qilin-agent/client-ui-trajectory": "3.1.3",
+    "@qilin-agent/client-ui-chat": "3.1.3",
+    "@qilin-agent/client-ui-conversation": "3.1.3",
+    "@qilin-agent/client-ui-renderer": "3.1.3",
+    "@qilin-agent/client-ui-primitives": "3.1.3",
+    "@qilin-agent/client-ui-slots": "3.1.3",
+    "@qilin-agent/attachment": "3.1.3",
+    "@qilin-agent/client-ui-tool": "3.1.3"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "peerDependencies": {
+    "@qilin-agent/kylin": "~4.0.3"
+  },
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  }
 }