@knime/product-features 0.2.3 → 0.4.0

package/dist/_plugin-vue_export-helper-pcqpp-6-.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as _ };
+//# sourceMappingURL=_plugin-vue_export-helper-pcqpp-6-.js.map

package/dist/_plugin-vue_export-helper-pcqpp-6-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_plugin-vue_export-helper-pcqpp-6-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/ai.css

@@ -0,0 +1,197 @@
+
+.inline-status-banner {
+&[data-v-506380c6] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+
+  /*
+   * The banner extends 0.25x behind the input below so the input's
+   * rounded top corners carve out of the banner's bottom edge.
+   * The extra 0.25x of bottom padding keeps the
+   * content visually centered against the visible portion of the box.
+   * Top and horizontal padding subtract the border width so the box
+   * matches Figma (where the border is drawn outside the layout box).
+   * Bottom has no border, so no subtraction is needed there.
+   */
+  padding: calc(
+      var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+    )
+    calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))
+    calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  border-style: solid;
+  border-width: var(--kds-core-border-width-xs);
+  border-bottom: none;
+  border-top-left-radius: var(--kds-border-radius-container-0-50x);
+  border-top-right-radius: var(--kds-border-radius-container-0-50x);
+}
+.icon[data-v-506380c6],
+  .action[data-v-506380c6] {
+    flex-shrink: 0;
+}
+&.error {
+&[data-v-506380c6] {
+    background-color: var(--kds-color-background-static-danger-muted);
+    border: var(--kds-border-base-danger);
+    border-bottom: none;
+}
+.icon[data-v-506380c6] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+}
+&.note {
+&[data-v-506380c6] {
+    background-color: var(--kds-color-background-static-info-muted);
+    border: var(--kds-border-base-info);
+    border-bottom: none;
+}
+.icon[data-v-506380c6] {
+      color: var(--kds-color-text-and-icon-info);
+}
+}
+}
+.text {
+&[data-v-506380c6] {
+  flex: 1 0 0;
+  min-width: 0;
+
+  /* Allow up to 2 lines, scroll beyond that. */
+  max-height: calc(2 * 1lh);
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  scrollbar-width: thin;
+}
+&[data-v-506380c6]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.prompt-input[data-v-bd237a7d] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.input-container {
+&[data-v-bd237a7d] {
+  position: relative;
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: flex-end;
+  padding: calc(
+    var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  cursor: text;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-bd237a7d]:has(textarea:focus:not(:disabled)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-bd237a7d]:has(textarea:hover:not(:disabled, :focus)) {
+    background: var(--kds-color-background-input-hover);
+}
+&.disabled[data-v-bd237a7d] {
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+}
+}
+.text-input-wrapper[data-v-bd237a7d] {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  min-width: 0;
+
+  /*
+   * Match the Send/Stop button height so a single-line textarea sits
+   * vertically centered against the button.
+   */
+  min-height: var(--kds-dimension-component-height-1-75x);
+  padding-left: var(--kds-spacing-container-0-37x);
+}
+.text-input {
+&[data-v-bd237a7d] {
+  width: 100%;
+  min-width: 0;
+
+  /* Cap textarea growth at 4 lines, scroll beyond that. */
+  max-height: calc(4 * 1lh);
+  padding: 0;
+  overflow-y: auto;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  resize: none;
+  outline: none;
+  scrollbar-width: none;
+  background: transparent;
+  border: none;
+  }
+&[data-v-bd237a7d]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-bd237a7d] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    }
+&[data-v-bd237a7d]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+&[data-v-bd237a7d]::-webkit-scrollbar {
+    display: none;
+}
+}
+.action[data-v-bd237a7d] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-end;
+}
+.progress-bar[data-v-bd237a7d] {
+  position: absolute;
+  inset: -1px 0 auto;
+}
+.subtext[data-v-bd237a7d] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  align-items: center;
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
+    0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+.subtext-left[data-v-bd237a7d] {
+  /*
+   * Take all remaining inline space so the right block is pushed to the
+   * end. `min-width: 0` lets the ellipsis kick in when the right block
+   * grows past the container width.
+   */
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.subtext-right[data-v-bd237a7d] {
+  /*
+   * On row 1 (alongside .subtext-left) the right block stays at its
+   * intrinsic width — line-breaking in flex layout is decided from
+   * `flex-basis`, so it wraps onto its own row as soon as the container
+   * is narrower than that intrinsic width. On row 2 (its own row) the
+   * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the
+   * container width and wrap its own content (text + link).
+   */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-width: 0;
+  margin-left: auto;
+}

package/dist/ai.js

@@ -0,0 +1,196 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createVNode, unref, createElementVNode, toDisplayString, createBlock, createCommentVNode, useModel, useTemplateRef, computed, watch, withDirectives, vModelText, withModifiers, mergeModels } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { KdsIcon, KdsButton, KdsProgressBar, KdsLink } from '@knime/kds-components';
+import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
+
+import './ai.css';const _hoisted_1$1 = ["role"];
+const _hoisted_2$1 = {
+  class: "text",
+  tabindex: "0"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "InlineStatusBanner",
+  props: {
+    status: {}
+  },
+  emits: ["buttonClick"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["inline-status-banner", __props.status.type]),
+        role: __props.status.type === "error" ? "alert" : "status"
+      }, [
+        createVNode(unref(KdsIcon), {
+          name: __props.status.type === "error" ? "circle-error" : "circle-info",
+          size: "small",
+          class: "icon"
+        }, null, 8, ["name"]),
+        createElementVNode("span", _hoisted_2$1, toDisplayString(__props.status.message), 1),
+        __props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
+          key: 0,
+          class: "action",
+          size: "small",
+          variant: "filled",
+          label: __props.status.buttonLabel,
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick"))
+        }, null, 8, ["label"])) : createCommentVNode("", true)
+      ], 10, _hoisted_1$1);
+    };
+  }
+});
+
+const InlineStatusBanner = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-506380c6"]]);
+
+const _hoisted_1 = { class: "prompt-input" };
+const _hoisted_2 = { class: "text-input-wrapper" };
+const _hoisted_3 = ["placeholder", "disabled", "aria-label"];
+const _hoisted_4 = { class: "action" };
+const _hoisted_5 = {
+  key: 1,
+  class: "subtext"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "subtext-left"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "subtext-right"
+};
+const _hoisted_8 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "KdsPromptInput",
+  props: /* @__PURE__ */ mergeModels({
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    status: { default: () => void 0 },
+    ariaLabel: { default: "Prompt" },
+    leftSubtext: { default: () => void 0 },
+    rightSubtext: { default: () => void 0 },
+    link: { default: () => void 0 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit", "stop", "statusButtonClick"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const textareaRef = useTemplateRef("textareaRef");
+    const canSubmit = computed(
+      () => !__props.disabled && !__props.loading && modelValue.value.trim().length > 0
+    );
+    function resizeTextarea() {
+      const el = textareaRef.value;
+      if (!el) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (!textareaRef.value) {
+          return;
+        }
+        el.style.height = "auto";
+        const scrollHeight = el.scrollHeight;
+        if (scrollHeight <= el.offsetHeight) {
+          return;
+        }
+        el.style.height = `${scrollHeight}px`;
+      });
+    }
+    useResizeObserver(textareaRef, resizeTextarea);
+    watch(modelValue, resizeTextarea, { immediate: true });
+    function onSubmit() {
+      if (!canSubmit.value) {
+        return;
+      }
+      emit("submit", modelValue.value.trim());
+    }
+    function onKeydown(event) {
+      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+        event.preventDefault();
+        onSubmit();
+      }
+    }
+    __expose({
+      focus: () => textareaRef.value?.focus()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.status ? (openBlock(), createBlock(InlineStatusBanner, {
+          key: 0,
+          status: __props.status,
+          onButtonClick: _cache[0] || (_cache[0] = ($event) => emit("statusButtonClick"))
+        }, null, 8, ["status"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["input-container", { disabled: __props.disabled }]),
+          onClick: _cache[3] || (_cache[3] = ($event) => textareaRef.value?.focus())
+        }, [
+          __props.loading ? (openBlock(), createBlock(unref(KdsProgressBar), {
+            key: 0,
+            class: "progress-bar",
+            indeterminate: ""
+          })) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            withDirectives(createElementVNode("textarea", {
+              ref_key: "textareaRef",
+              ref: textareaRef,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+              class: "text-input",
+              rows: "1",
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              "aria-label": __props.ariaLabel,
+              onKeydown
+            }, null, 40, _hoisted_3), [
+              [vModelText, modelValue.value]
+            ])
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            __props.loading ? (openBlock(), createBlock(unref(KdsButton), {
+              key: 0,
+              variant: "outlined",
+              "leading-icon": "stop",
+              size: "medium",
+              ariaLabel: "Stop",
+              onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("stop"), ["stop"]))
+            })) : (openBlock(), createBlock(unref(KdsButton), {
+              key: 1,
+              variant: "filled",
+              "leading-icon": "send",
+              size: "medium",
+              ariaLabel: "Send",
+              disabled: !canSubmit.value,
+              onClick: withModifiers(onSubmit, ["stop"])
+            }, null, 8, ["disabled"]))
+          ])
+        ], 2),
+        __props.leftSubtext || __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          __props.leftSubtext ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.leftSubtext), 1)) : createCommentVNode("", true),
+          __props.rightSubtext || __props.link ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            __props.rightSubtext ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.rightSubtext), 1)) : createCommentVNode("", true),
+            __props.link ? (openBlock(), createBlock(unref(KdsLink), {
+              key: 1,
+              label: __props.link.label,
+              to: __props.link.to
+            }, null, 8, ["label", "to"])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsPromptInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd237a7d"]]);
+
+const kdsPromptInputStatusType = {
+  ERROR: "error",
+  NOTE: "note"
+};
+const kdsPromptInputStatusTypes = Object.values(
+  kdsPromptInputStatusType
+);
+
+export { KdsPromptInput, kdsPromptInputStatusType, kdsPromptInputStatusTypes };
+//# sourceMappingURL=ai.js.map

package/dist/ai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai.js","sources":["../src/ai/KdsPromptInput/InlineStatusBanner.vue","../src/ai/KdsPromptInput/KdsPromptInput.vue","../src/ai/KdsPromptInput/enums.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { KdsButton, KdsIcon } from \"@knime/kds-components\";\n\nimport type { KdsPromptInputStatus } from \"./types\";\n\nconst { status } = defineProps<{\n  status: KdsPromptInputStatus;\n}>();\n\nconst emit = defineEmits<{\n  buttonClick: [];\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"['inline-status-banner', status.type]\"\n    :role=\"status.type === 'error' ? 'alert' : 'status'\"\n  >\n    <KdsIcon\n      :name=\"status.type === 'error' ? 'circle-error' : 'circle-info'\"\n      size=\"small\"\n      class=\"icon\"\n    />\n    <!--\n      tabindex=\"0\" so keyboard users can scroll the message when it\n      overflows the 2-line cap (axe rule: scrollable-region-focusable).\n    -->\n    <span class=\"text\" tabindex=\"0\">{{ status.message }}</span>\n    <KdsButton\n      v-if=\"status.buttonLabel\"\n      class=\"action\"\n      size=\"small\"\n      variant=\"filled\"\n      :label=\"status.buttonLabel\"\n      @click=\"emit('buttonClick')\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.inline-status-banner {\n  display: flex;\n  gap: var(--kds-spacing-container-0-37x);\n  align-items: center;\n\n  /*\n   * The banner extends 0.25x behind the input below so the input's\n   * rounded top corners carve out of the banner's bottom edge.\n   * The extra 0.25x of bottom padding keeps the\n   * content visually centered against the visible portion of the box.\n   * Top and horizontal padding subtract the border width so the box\n   * matches Figma (where the border is drawn outside the layout box).\n   * Bottom has no border, so no subtraction is needed there.\n   */\n  padding: calc(\n      var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)\n    )\n    calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs))\n    calc(var(--kds-spacing-container-0-5x) + var(--kds-spacing-container-0-25x));\n  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  border-style: solid;\n  border-width: var(--kds-core-border-width-xs);\n  border-bottom: none;\n  border-top-left-radius: var(--kds-border-radius-container-0-50x);\n  border-top-right-radius: var(--kds-border-radius-container-0-50x);\n\n  .icon,\n  .action {\n    flex-shrink: 0;\n  }\n\n  &.error {\n    background-color: var(--kds-color-background-static-danger-muted);\n    border: var(--kds-border-base-danger);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-danger);\n    }\n  }\n\n  &.note {\n    background-color: var(--kds-color-background-static-info-muted);\n    border: var(--kds-border-base-info);\n    border-bottom: none;\n\n    .icon {\n      color: var(--kds-color-text-and-icon-info);\n    }\n  }\n}\n\n.text {\n  flex: 1 0 0;\n  min-width: 0;\n\n  /* Allow up to 2 lines, scroll beyond that. */\n  max-height: calc(2 * 1lh);\n  overflow-y: auto;\n  overflow-wrap: anywhere;\n  scrollbar-width: thin;\n\n  &:focus-visible {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useTemplateRef, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\n\nimport { KdsButton, KdsLink, KdsProgressBar } from \"@knime/kds-components\";\n\nimport InlineStatusBanner from \"./InlineStatusBanner.vue\";\nimport type { KdsPromptInputProps } from \"./types\";\n\nconst {\n  placeholder = \"\",\n  disabled = false,\n  loading = false,\n  status = undefined,\n  ariaLabel = \"Prompt\",\n  leftSubtext = undefined,\n  rightSubtext = undefined,\n  link = undefined,\n} = defineProps<KdsPromptInputProps>();\n\nconst emit = defineEmits<{\n  /** User submitted the prompt (Enter or send button). */\n  submit: [value: string];\n  /** User clicked the stop button while loading. */\n  stop: [];\n  /** User clicked the action button inside the inline status banner. */\n  statusButtonClick: [];\n}>();\n\nconst modelValue = defineModel<string>({ default: \"\" });\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\");\n\nconst canSubmit = computed(\n  () => !disabled && !loading && modelValue.value.trim().length > 0,\n);\n\nfunction resizeTextarea() {\n  const el = textareaRef.value;\n  if (!el) {\n    return;\n  }\n  // Defer style writes to the next animation frame so they don't run inside\n  // the ResizeObserver callback (which would otherwise trigger the\n  // \"ResizeObserver loop completed with undelivered notifications\" warning).\n  requestAnimationFrame(() => {\n    if (!textareaRef.value) {\n      return;\n    }\n    el.style.height = \"auto\";\n    const scrollHeight = el.scrollHeight;\n    if (scrollHeight <= el.offsetHeight) {\n      return;\n    }\n    el.style.height = `${scrollHeight}px`;\n  });\n}\n\nuseResizeObserver(textareaRef, resizeTextarea);\nwatch(modelValue, resizeTextarea, { immediate: true });\n\nfunction onSubmit() {\n  if (!canSubmit.value) {\n    return;\n  }\n  emit(\"submit\", modelValue.value.trim());\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  // Enter submits, Shift+Enter inserts a newline. Ignore Enter while an IME\n  // composition session is in progress.\n  if (event.key === \"Enter\" && !event.shiftKey && !event.isComposing) {\n    event.preventDefault();\n    onSubmit();\n  }\n}\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n});\n</script>\n\n<template>\n  <div class=\"prompt-input\">\n    <InlineStatusBanner\n      v-if=\"status\"\n      :status=\"status\"\n      @button-click=\"emit('statusButtonClick')\"\n    />\n\n    <div\n      :class=\"['input-container', { disabled }]\"\n      @click=\"textareaRef?.focus()\"\n    >\n      <KdsProgressBar v-if=\"loading\" class=\"progress-bar\" indeterminate />\n\n      <div class=\"text-input-wrapper\">\n        <textarea\n          ref=\"textareaRef\"\n          v-model=\"modelValue\"\n          class=\"text-input\"\n          rows=\"1\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          @keydown=\"onKeydown\"\n        />\n      </div>\n\n      <div class=\"action\">\n        <KdsButton\n          v-if=\"loading\"\n          variant=\"outlined\"\n          leading-icon=\"stop\"\n          size=\"medium\"\n          ariaLabel=\"Stop\"\n          @click.stop=\"emit('stop')\"\n        />\n        <KdsButton\n          v-else\n          variant=\"filled\"\n          leading-icon=\"send\"\n          size=\"medium\"\n          ariaLabel=\"Send\"\n          :disabled=\"!canSubmit\"\n          @click.stop=\"onSubmit\"\n        />\n      </div>\n    </div>\n\n    <div v-if=\"leftSubtext || rightSubtext || link\" class=\"subtext\">\n      <div v-if=\"leftSubtext\" class=\"subtext-left\">{{ leftSubtext }}</div>\n      <div v-if=\"rightSubtext || link\" class=\"subtext-right\">\n        <span v-if=\"rightSubtext\">{{ rightSubtext }}</span>\n        <KdsLink v-if=\"link\" :label=\"link.label\" :to=\"link.to\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.prompt-input {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  gap: var(--kds-spacing-container-0-5x);\n  align-items: flex-end;\n  padding: calc(\n    var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)\n  );\n  overflow: hidden;\n  cursor: text;\n  background: var(--kds-color-background-input-initial);\n  border: var(--kds-border-action-input);\n  border-radius: var(--kds-border-radius-container-0-37x);\n\n  &:has(textarea:focus:not(:disabled)) {\n    outline: var(--kds-border-action-focused);\n    outline-offset: var(--kds-spacing-offset-focus);\n  }\n\n  &:has(textarea:hover:not(:disabled, :focus)) {\n    background: var(--kds-color-background-input-hover);\n  }\n\n  &.disabled {\n    cursor: default;\n    border: var(--kds-border-action-disabled);\n  }\n}\n\n.text-input-wrapper {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  min-width: 0;\n\n  /*\n   * Match the Send/Stop button height so a single-line textarea sits\n   * vertically centered against the button.\n   */\n  min-height: var(--kds-dimension-component-height-1-75x);\n  padding-left: var(--kds-spacing-container-0-37x);\n}\n\n.text-input {\n  width: 100%;\n  min-width: 0;\n\n  /* Cap textarea growth at 4 lines, scroll beyond that. */\n  max-height: calc(4 * 1lh);\n  padding: 0;\n  overflow-y: auto;\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n  resize: none;\n  outline: none;\n  scrollbar-width: none;\n  background: transparent;\n  border: none;\n\n  &::placeholder {\n    color: var(--kds-color-text-and-icon-subtle);\n  }\n\n  &:disabled {\n    color: var(--kds-color-text-and-icon-disabled);\n    cursor: default;\n\n    &::placeholder {\n      color: var(--kds-color-text-and-icon-disabled);\n    }\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.action {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-end;\n}\n\n.progress-bar {\n  position: absolute;\n  inset: -1px 0 auto;\n}\n\n.subtext {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);\n  align-items: center;\n  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)\n    0;\n  font: var(--kds-font-base-body-small);\n  color: var(--kds-color-text-and-icon-neutral);\n}\n\n.subtext-left {\n  /*\n   * Take all remaining inline space so the right block is pushed to the\n   * end. `min-width: 0` lets the ellipsis kick in when the right block\n   * grows past the container width.\n   */\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.subtext-right {\n  /*\n   * On row 1 (alongside .subtext-left) the right block stays at its\n   * intrinsic width — line-breaking in flex layout is decided from\n   * `flex-basis`, so it wraps onto its own row as soon as the container\n   * is narrower than that intrinsic width. On row 2 (its own row) the\n   * default `flex-shrink: 1` plus `min-width: 0` lets it shrink to the\n   * container width and wrap its own content (text + link).\n   */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--kds-spacing-container-0-25x);\n  align-items: center;\n  min-width: 0;\n  margin-left: auto;\n}\n</style>\n","export const kdsPromptInputStatusType = {\n  ERROR: \"error\",\n  NOTE: \"note\",\n} as const;\n\nexport const kdsPromptInputStatusTypes = Object.values(\n  kdsPromptInputStatusType,\n);\n"],"names":["_createElementBlock","_normalizeClass","_createVNode","_unref","_createElementVNode","_hoisted_2","_toDisplayString","_createBlock","_useModel","_openBlock"],"mappings":"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"}

package/dist/dataTransfer.css

@@ -0,0 +1,161 @@
+
+.collapsible-panel {
+&[data-v-3fdfcc1c] {
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-spacing-container-0-25x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+& .title-bar {
+&[data-v-3fdfcc1c] {
+    display: flex;
+    align-items: center;
+    height: var(--kds-dimension-component-height-2-5x);
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-75x);
+    font: var(--kds-font-base-title-small-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+& .actions[data-v-3fdfcc1c] {
+      display: flex;
+      gap: var(--kds-spacing-container-0-25x);
+      align-items: center;
+      margin-left: auto;
+}
+}
+&:not(.collapsed) {
+& .title-bar[data-v-3fdfcc1c] {
+      border-bottom: var(--kds-border-base-subtle);
+}
+}
+}
+.panel-content[data-v-3fdfcc1c] {
+  overflow: hidden;
+}
+.expand-enter-active[data-v-3fdfcc1c],
+.expand-leave-active[data-v-3fdfcc1c] {
+  display: grid;
+  overflow: hidden;
+  transition:
+    grid-template-rows 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+.expand-enter-from[data-v-3fdfcc1c],
+.expand-leave-to[data-v-3fdfcc1c] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.expand-enter-to[data-v-3fdfcc1c],
+.expand-leave-from[data-v-3fdfcc1c] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+.panel-content[data-v-3fdfcc1c] >  * {
+  min-height: 0;
+}
+
+.progress-wrapper[data-v-80e5d197] {
+  --base-padding: var(--kds-spacing-container-1x);
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+  --progress-bar-distance: var(--kds-spacing-container-0-25x);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--progress-bar-distance);
+  height: var(--kds-dimension-component-height-4x);
+  padding: var(--base-padding);
+}
+.progress-item {
+&[data-v-80e5d197] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  /* add extra margin to prevent content jump when a progress bars appears/disappears */
+  }
+&.padded[data-v-80e5d197] {
+    margin-bottom: calc(
+      var(--progress-bar-height) + var(--progress-bar-distance)
+    );
+}
+}
+.progress[data-v-80e5d197] {
+  min-height: var(--progress-bar-height);
+}
+.item-info {
+&[data-v-80e5d197] {
+  display: flex;
+  flex-grow: 1;
+  gap: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  }
+& .item-name {
+&[data-v-80e5d197] {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+    justify-content: center;
+    overflow: hidden;
+    color: var(--kds-color-text-and-icon-neutral);
+    }
+& .title[data-v-80e5d197] {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-interactive-small);
+      white-space: nowrap;
+}
+& .subtitle[data-v-80e5d197] {
+      font: var(--kds-font-base-subtext-small);
+}
+}
+}
+.item-action[data-v-80e5d197] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+}
+
+.progress-list {
+&[data-v-66f55049] {
+  max-height: var(--kds-dimension-component-height-20x);
+  overflow-y: auto;
+}
+&[data-v-66f55049] .progress-wrapper:not(:first-child) {
+    border-top: var(--kds-border-base-subtle);
+}
+}
+
+.upload-panel[data-v-7d4c779e] {
+  width: var(--kds-dimension-component-width-20x);
+  max-width: var(--kds-dimension-component-width-20x);
+}
+.upload-panel-content[data-v-7d4c779e] {
+  max-height: var(--kds-dimension-component-height-20x);
+}
+.skeleton-container {
+&[data-v-7d4c779e] {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-height: var(--kds-dimension-component-height-4x);
+  padding: 0 var(--kds-spacing-container-1x);
+  border-top: var(--kds-border-base-subtle);
+  }
+& .skeleton-text-content[data-v-7d4c779e] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+}
+
+.download-panel[data-v-f5f774fd] {
+  width: var(--kds-dimension-component-width-20x);
+  max-width: var(--kds-dimension-component-width-20x);
+}
+.download-panel-content[data-v-f5f774fd] {
+  max-height: var(--kds-dimension-component-height-20x);
+}