@knime/product-features 0.3.0 → 0.4.1

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.js

@@ -1,6 +1,7 @@
 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 { d as KdsIcon, e as _sfc_main$1s, _ as _export_sfc, f as KdsProgressBar, g as KdsLink } from './_plugin-vue_export-helper-BLJdeqtw.js';
+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 = {
@@ -26,7 +27,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           class: "icon"
         }, null, 8, ["name"]),
         createElementVNode("span", _hoisted_2$1, toDisplayString(__props.status.message), 1),
-        __props.status.buttonLabel ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+        __props.status.buttonLabel ? (openBlock(), createBlock(unref(KdsButton), {
           key: 0,
           class: "action",
           size: "small",
@@ -147,14 +148,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ]),
           createElementVNode("div", _hoisted_4, [
-            __props.loading ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+            __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(_sfc_main$1s), {
+            })) : (openBlock(), createBlock(unref(KdsButton), {
               key: 1,
               variant: "filled",
               "leading-icon": "send",

package/dist/ai.js.map

@@ -1 +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","KdsButton","_useModel","_openBlock"],"mappings":"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"}
+{"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);
+}