@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/ai/response/response.css

@@ -0,0 +1,453 @@
+@layer properties, theme, base;
+
+@layer components {
+  .fhQxUq_markdown {
+    white-space: normal;
+
+    @scope (&) {
+      :where(& > :not(:last-child)) {
+        margin-block-end: calc(var(--spacing) * 4);
+      }
+
+      :where(& > :first-child) {
+        margin-block-start: 0;
+      }
+
+      :where(& > :last-child) {
+        margin-block-end: 0;
+      }
+    }
+  }
+
+  .fhQxUq_root {
+    color: var(--color-fg-base);
+
+    @scope (&) {
+      & [data-streamdown^="heading-"] {
+        margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
+        font-weight: var(--font-weight-bold);
+      }
+
+      & [data-streamdown="heading-1"] {
+        font-size: var(--font-size-3xl);
+        line-height: var(--line-height-3xl);
+      }
+
+      & [data-streamdown="heading-2"] {
+        font-size: var(--font-size-2xl);
+        line-height: var(--line-height-2xl);
+      }
+
+      & [data-streamdown="heading-3"] {
+        font-size: var(--font-size-xl);
+        line-height: var(--line-height-xl);
+      }
+
+      & [data-streamdown="heading-4"] {
+        font-size: var(--font-size-lg);
+        line-height: var(--line-height-lg);
+      }
+
+      & [data-streamdown="heading-5"] {
+        font-size: var(--font-size-md);
+        line-height: var(--line-height-md);
+      }
+
+      & [data-streamdown="heading-6"] {
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+      }
+
+      & [data-streamdown="strong"] {
+        font-weight: var(--font-weight-bold);
+      }
+
+      & [data-streamdown="link"] {
+        overflow-wrap: anywhere;
+        color: var(--color-fg-info);
+        font-weight: var(--font-weight-medium);
+        text-align: start;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      & [data-streamdown="inline-code"] {
+        padding: calc(var(--spacing) * .5) calc(var(--spacing) * 1.5);
+        border-radius: var(--radius-sm);
+        background-color: var(--color-bg-mute);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+      }
+
+      & [data-streamdown="unordered-list"], & [data-streamdown="ordered-list"] {
+        white-space: normal;
+        list-style-position: inside;
+      }
+
+      & [data-streamdown="unordered-list"] {
+        list-style-type: disc;
+      }
+
+      & [data-streamdown="ordered-list"] {
+        list-style-type: decimal;
+      }
+
+      & [data-streamdown="list-item"] :is([data-streamdown="unordered-list"], [data-streamdown="ordered-list"]) {
+        padding-inline-start: calc(var(--spacing) * 6);
+      }
+
+      & [data-streamdown="list-item"] {
+        padding-block: calc(var(--spacing) * 1);
+      }
+
+      & [data-streamdown="list-item"] > p {
+        display: inline;
+      }
+
+      & [data-streamdown="blockquote"] {
+        margin-block: calc(var(--spacing) * 4);
+        border-inline-start: 4px solid
+        color-mix(in oklab, var(--color-fg-mute) 30%, transparent);
+        color: var(--color-fg-mute);
+        padding-inline-start: calc(var(--spacing) * 4);
+        font-style: italic;
+      }
+
+      & [data-streamdown="horizontal-rule"] {
+        margin-block: calc(var(--spacing) * 6);
+        border-color: var(--color-border-mute);
+      }
+
+      & [data-streamdown="superscript"], & [data-streamdown="subscript"] {
+        font-size: var(--font-size-xs);
+      }
+
+      & [data-streamdown="image-wrapper"] {
+        margin-block: calc(var(--spacing) * 4);
+        display: inline-block;
+        position: relative;
+      }
+
+      & [data-streamdown="image"] {
+        border-radius: var(--radius-lg);
+        max-width: 100%;
+      }
+
+      & [data-streamdown="image-placeholder"] {
+        width: calc(var(--spacing) * 48);
+        height: calc(var(--spacing) * 24);
+        border-radius: var(--radius-lg);
+        background-color: var(--color-bg-mute);
+      }
+
+      & [data-streamdown="image-fallback"] {
+        color: var(--color-fg-mute);
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+        font-style: italic;
+      }
+
+      & [data-streamdown="code-block"] {
+        gap: calc(var(--spacing) * 2);
+        width: 100%;
+        margin-block: calc(var(--spacing) * 4);
+        padding: calc(var(--spacing) * 2);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-xl);
+        background-color: var(--color-bg-subtle);
+        flex-direction: column;
+        display: flex;
+        position: relative;
+      }
+
+      & [data-streamdown="code-block-header"] {
+        height: calc(var(--spacing) * 8);
+        color: var(--color-fg-mute);
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+        align-items: center;
+        display: flex;
+      }
+
+      & [data-streamdown="code-block-header"] > span {
+        font-family: var(--font-family-mono);
+        text-transform: lowercase;
+        margin-inline-start: calc(var(--spacing) * 1);
+      }
+
+      & [data-streamdown="code-block"] > div:has( > [data-streamdown="code-block-actions"]) {
+        pointer-events: none;
+        top: calc(var(--spacing) * 2);
+        right: calc(var(--spacing) * 2);
+        z-index: var(--z-index-raised);
+        align-items: center;
+        display: flex;
+        position: absolute;
+      }
+
+      & [data-streamdown="code-block-actions"] {
+        pointer-events: auto;
+        align-items: center;
+        gap: calc(var(--spacing) * 2);
+        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5);
+        border: 1px solid var(--color-bg-subtle);
+        border-radius: var(--radius-md);
+        background-color: color-mix(in oklab,
+        var(--color-bg-subtle) 70%,
+        transparent);
+        backdrop-filter: blur(8px);
+        flex-shrink: 0;
+        display: flex;
+      }
+
+      & [data-streamdown="code-block-body"] {
+        padding: calc(var(--spacing) * 4);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-base);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+        overflow-x: auto;
+      }
+
+      & [data-streamdown="code-block-body"] > pre {
+        background-color: light-dark(var(--sdm-bg, transparent), var(--shiki-dark-bg, var(--sdm-bg, transparent)));
+      }
+
+      & [data-streamdown="code-block-body"] code > span {
+        display: block;
+      }
+
+      & [data-streamdown="code-block-body"] code > span > span {
+        color: light-dark(var(--sdm-c, currentcolor), var(--shiki-dark, var(--sdm-c, currentcolor)));
+      }
+
+      & [data-streamdown="code-block-body"] code[class] {
+        counter-reset: line;
+      }
+
+      & [data-streamdown="code-block-body"] code[class] > span:before {
+        content: counter(line);
+        counter-increment: line;
+        width: calc(var(--spacing) * 6);
+        color: color-mix(in oklab, var(--color-fg-mute) 50%, transparent);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-xs);
+        text-align: right;
+        -webkit-user-select: none;
+        user-select: none;
+        margin-inline-end: calc(var(--spacing) * 4);
+        display: inline-block;
+      }
+
+      & [data-streamdown="table-wrapper"] {
+        gap: calc(var(--spacing) * 2);
+        margin-block: calc(var(--spacing) * 4);
+        padding: calc(var(--spacing) * 2);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-lg);
+        background-color: var(--color-bg-subtle);
+        flex-direction: column;
+        display: flex;
+      }
+
+      & [data-streamdown="table-wrapper"] > div:not(:has(table)) {
+        justify-content: flex-end;
+        align-items: center;
+        gap: calc(var(--spacing) * 1);
+        display: flex;
+      }
+
+      & [data-streamdown="table-wrapper"] > div:has(table) {
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-base);
+        overflow: auto;
+      }
+
+      & [data-streamdown="table"] {
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      & [data-streamdown="table-header"] {
+        background-color: color-mix(in oklab,
+        var(--color-bg-mute) 80%,
+        transparent);
+      }
+
+      & [data-streamdown="table-body"] > [data-streamdown="table-row"] + [data-streamdown="table-row"] {
+        border-top: 1px solid var(--color-border-mute);
+      }
+
+      & [data-streamdown="table-header-cell"], & [data-streamdown="table-cell"] {
+        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+        text-align: start;
+      }
+
+      & [data-streamdown="table-header-cell"] {
+        white-space: nowrap;
+        font-weight: var(--font-weight-bold);
+      }
+
+      & :is([data-streamdown="code-block-actions"], [data-streamdown="table-wrapper"], [data-streamdown="mermaid-block-actions"]) button {
+        padding: calc(var(--spacing) * 1);
+        color: var(--color-fg-mute);
+        cursor: pointer;
+        transition-property: color, background-color;
+        transition-duration: var(--duration-fast);
+        transition-timing-function: var(--easing-in-out);
+      }
+
+      @media (hover: hover) {
+        & :is([data-streamdown="code-block-actions"], [data-streamdown="table-wrapper"], [data-streamdown="mermaid-block-actions"]) button:hover {
+          color: var(--color-fg-base);
+        }
+      }
+
+      & :is([data-streamdown="code-block-actions"], [data-streamdown="table-wrapper"], [data-streamdown="mermaid-block-actions"]) button:disabled {
+        cursor: not-allowed;
+        opacity: .5;
+      }
+
+      & [data-streamdown="table-fullscreen"] {
+        z-index: var(--z-index-modal);
+        background-color: var(--color-bg-base);
+        flex-direction: column;
+        display: flex;
+        position: fixed;
+        inset: 0;
+      }
+
+      & [data-streamdown="table-fullscreen"] > [data-streamdown="table-wrapper"] {
+        background-color: #0000;
+        border: 0;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      & [data-streamdown="table-fullscreen"] > [data-streamdown="table-wrapper"] > div:not(:has(table)) {
+        padding: calc(var(--spacing) * 4);
+      }
+
+      & [data-streamdown="table-fullscreen"] > [data-streamdown="table-wrapper"] > div:has(table) {
+        padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
+        border: 0;
+        flex: 1;
+      }
+
+      & [data-streamdown="link-safety-modal"] {
+        z-index: var(--z-index-modal);
+        background-color: var(--color-back-drop);
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        position: fixed;
+        inset: 0;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div {
+        gap: calc(var(--spacing) * 4);
+        width: 100%;
+        max-width: 28rem;
+        margin-inline: calc(var(--spacing) * 4);
+        padding: calc(var(--spacing) * 6);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-xl);
+        background-color: var(--color-bg-raised);
+        box-shadow: var(--shadow-lg);
+        flex-direction: column;
+        display: flex;
+        position: relative;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > button:first-child {
+        top: calc(var(--spacing) * 4);
+        right: calc(var(--spacing) * 4);
+        padding: calc(var(--spacing) * 1);
+        border-radius: var(--radius-md);
+        color: var(--color-fg-mute);
+        cursor: pointer;
+        position: absolute;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:nth-child(2) {
+        gap: calc(var(--spacing) * 2);
+        flex-direction: column;
+        display: flex;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:nth-child(2) > div {
+        align-items: center;
+        gap: calc(var(--spacing) * 2);
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-lg);
+        display: flex;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:nth-child(2) > p {
+        color: var(--color-fg-mute);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:nth-child(3) {
+        overflow-wrap: anywhere;
+        max-height: calc(var(--spacing) * 32);
+        padding: calc(var(--spacing) * 3);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-mute);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+        overflow-y: auto;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:last-child {
+        gap: calc(var(--spacing) * 2);
+        display: flex;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:last-child > button {
+        justify-content: center;
+        align-items: center;
+        gap: calc(var(--spacing) * 2);
+        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+        border: 1px solid var(--color-border-mute);
+        border-radius: var(--radius-md);
+        background-color: var(--color-bg-base);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-sm);
+        cursor: pointer;
+        flex: 1;
+        display: flex;
+      }
+
+      & [data-streamdown="link-safety-modal"] > div > div:last-child > button:last-child {
+        background-color: var(--color-primary-bg);
+        color: var(--color-primary-fg);
+        border-color: #0000;
+      }
+
+      @media (hover: hover) {
+        & [data-streamdown="link-safety-modal"] > div > button:first-child:hover, & [data-streamdown="link-safety-modal"] > div > div:last-child > button:hover {
+          background-color: var(--color-bg-mute);
+          color: var(--color-fg-base);
+        }
+
+        & [data-streamdown="link-safety-modal"] > div > div:last-child > button:last-child:hover {
+          background-color: var(--color-primary-bg-emphasize);
+          color: var(--color-primary-fg);
+        }
+      }
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/ai/response/response.d.mts

@@ -9,12 +9,10 @@ type Props = {
  * ストリーミング対応の Markdown レンダラ。未クローズのコードブロックなど
  * 途中の Markdown も streamdown が破綻なく描画する。
  *
- * このコンポーネントは streamdown（optional peer）に依存する。利用側は
- * `pnpm add streamdown` に加え、`streamdown/styles.css` の読み込みと
- * Tailwind の `@source` 設定が必要。詳細は docs を参照。
+ * このコンポーネントは streamdown（optional peer）に依存する。見た目は
+ * Response の CSS が持つので、Tailwind は要らない。
  *
  * `children` / `isStreaming` 以外の props は streamdown にそのまま渡る。
  */
-declare const Response: FC<Props>;
-//#endregion
-export { Response };
+export declare const Response: FC<Props>;
+//#endregion

package/dist/components/ai/response/response.mjs

@@ -1,7 +1,8 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { getMessages } from "../../../i18n/current.mjs";
+import response_module_default from "./response.module.mjs";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
 //#region src/components/ai/response/response.tsx
 const defaultLinkSafety = { enabled: false };
@@ -9,14 +10,13 @@ const defaultLinkSafety = { enabled: false };
 * ストリーミング対応の Markdown レンダラ。未クローズのコードブロックなど
 * 途中の Markdown も streamdown が破綻なく描画する。
 *
-* このコンポーネントは streamdown（optional peer）に依存する。利用側は
-* `pnpm add streamdown` に加え、`streamdown/styles.css` の読み込みと
-* Tailwind の `@source` 設定が必要。詳細は docs を参照。
+* このコンポーネントは streamdown（optional peer）に依存する。見た目は
+* Response の CSS が持つので、Tailwind は要らない。
 *
 * `children` / `isStreaming` 以外の props は streamdown にそのまま渡る。
 */
 const Response = ({ children, isStreaming = false, linkSafety = defaultLinkSafety, translations, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const mergedTranslations = useMemo(() => ({
 		close: messages.close,
 		copied: messages.responseCopied,
@@ -43,14 +43,19 @@ const Response = ({ children, isStreaming = false, linkSafety = defaultLinkSafet
 		viewFullscreen: messages.responseViewFullscreen,
 		...translations
 	}), [messages, translations]);
-	return /* @__PURE__ */ jsx(Streamdown, {
-		className: "text-fg-base",
-		linkSafety,
-		mode: isStreaming ? "streaming" : "static",
-		parseIncompleteMarkdown: true,
-		translations: mergedTranslations,
-		...rest,
-		children
+	const overlayRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: response_module_default.root,
+		children: [/* @__PURE__ */ jsx(Streamdown, {
+			className: response_module_default.markdown,
+			linkSafety,
+			mode: isStreaming ? "streaming" : "static",
+			parseIncompleteMarkdown: true,
+			portal: () => overlayRef.current,
+			translations: mergedTranslations,
+			...rest,
+			children
+		}), /* @__PURE__ */ jsx("div", { ref: overlayRef })]
 	});
 };
 //#endregion

package/dist/components/ai/response/response.module.mjs

@@ -0,0 +1,8 @@
+import './response.css';
+//#region src/components/ai/response/response.module.css
+var response_module_default = {
+	"markdown": "fhQxUq_markdown",
+	"root": "fhQxUq_root"
+};
+//#endregion
+export { response_module_default as default };

package/dist/components/ai/source/index.d.mts

@@ -0,0 +1,12 @@
+//#region src/components/ai/source/index.d.ts
+export declare const Source: {
+  readonly List: import("react").FC<{
+    label?: string;
+    children: import("react").ReactNode;
+  }>;
+  readonly Item: import("react").FC<{
+    href?: string;
+    title?: string;
+  }>;
+};
+//#endregion

package/dist/components/ai/source/index.mjs

@@ -0,0 +1,8 @@
+import { Item, List } from "./source.mjs";
+//#region src/components/ai/source/index.ts
+const Source = {
+	List,
+	Item
+};
+//#endregion
+export { Source };

package/dist/components/ai/source/source.css

@@ -0,0 +1,54 @@
+@layer properties, theme, base;
+
+@layer components {
+  .bT4CPW_list {
+    gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .bT4CPW_item {
+    min-width: 0;
+  }
+
+  .bT4CPW_chip {
+    max-width: calc(var(--spacing) * 64);
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-subtle);
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    display: inline-flex;
+  }
+
+  .bT4CPW_link {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+  }
+
+  @media (hover: hover) {
+    .bT4CPW_link:hover {
+      background-color: var(--color-bg-mute);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .bT4CPW_icon {
+    flex-shrink: 0;
+  }
+
+  .bT4CPW_label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+@layer utilities;

package/dist/components/ai/source/source.d.mts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/source/source.d.ts
+type ListProps = {
+  label?: string;
+  children: ReactNode;
+};
+export declare const List: FC<ListProps>;
+type ItemProps = {
+  href?: string;
+  title?: string;
+};
+export declare const Item: FC<ItemProps>;
+//#endregion

package/dist/components/ai/source/source.mjs

@@ -0,0 +1,51 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { ExternalLinkIcon } from "../../icons/lucide.mjs";
+import { FileIcon } from "../_internal/icons.mjs";
+import source_module_default from "./source.module.mjs";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/source/source.tsx
+const List = ({ label, children }) => {
+	const messages = getMessages();
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label ?? messages.sources,
+		className: source_module_default.list,
+		children
+	});
+};
+const webUrl = (href) => {
+	const url = href === void 0 ? null : URL.parse(href);
+	return url?.protocol === "https:" || url?.protocol === "http:" ? url : void 0;
+};
+const Item = ({ href, title }) => {
+	const url = webUrl(href);
+	const label = title ?? url?.hostname ?? href;
+	return /* @__PURE__ */ jsx("li", {
+		className: source_module_default.item,
+		children: url === void 0 ? /* @__PURE__ */ jsxs("span", {
+			className: source_module_default.chip,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: source_module_default.icon,
+				children: /* @__PURE__ */ jsx(FileIcon, { size: "xs" })
+			}), /* @__PURE__ */ jsx("span", {
+				className: source_module_default.label,
+				children: label
+			})]
+		}) : /* @__PURE__ */ jsxs("a", {
+			className: clsx(source_module_default.chip, source_module_default.link, focus_ring_module_default.ring),
+			href: url.href,
+			rel: "noopener noreferrer",
+			target: "_blank",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: source_module_default.label,
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: source_module_default.icon,
+				children: /* @__PURE__ */ jsx(ExternalLinkIcon, { size: "xs" })
+			})]
+		})
+	});
+};
+//#endregion
+export { Item, List };

package/dist/components/ai/source/source.module.mjs

@@ -0,0 +1,12 @@
+import './source.css';
+//#region src/components/ai/source/source.module.css
+var source_module_default = {
+	"chip": "bT4CPW_chip",
+	"icon": "bT4CPW_icon",
+	"item": "bT4CPW_item",
+	"label": "bT4CPW_label",
+	"link": "bT4CPW_link",
+	"list": "bT4CPW_list"
+};
+//#endregion
+export { source_module_default as default };