@milaboratories/uikit 2.8.8 → 2.9.0

package/dist/layout/PlPlaceholder/PlPlaceholder.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlPlaceholder.vue2.js","sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from './paint-worklet.js?raw';\n\nexport interface PlPlaceholderProps {\n  variant?: 'table' | 'graph';\n  title?: string;\n  subtitle?: string | string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob([paintWorkletCode], { type: 'application/javascript' });\nconst workletUrl = URL.createObjectURL(workletBlob);\n(CSS as unknown as {\n  paintWorklet: { addModule: (url: string) => void };\n}).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue';\nimport PlLoaderLogo from '../../components/PlLoaderLogo.vue';\n\nconst {\n  variant,\n  title = 'Running analysis...',\n  subtitle = [\n    'No action needed—the job is active',\n    'Larger datasets take longer to process',\n    'Results will appear here as soon as they’re ready',\n    'Processing may take minutes to hours',\n  ],\n} = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n  <div :class=\"styles.root\">\n    <div\n      :class=\"[styles.background, {\n        [styles.table]: variant === 'table',\n        [styles.graph]: variant === 'graph',\n      }]\"\n    />\n    <div :class=\"styles.content\">\n      <PlLoaderLogo :size=\"64\" color=\"var(--color-div-grey)\" />\n      <div :class=\"styles.text\">\n        <div :class=\"styles.title\">{{ title }}</div>\n        <div :class=\"styles.subtitle\">\n          <template v-if=\"Array.isArray(subtitle)\">\n            <span v-for=\"(item, key) of subtitle\" :key>{{ item }}</span>\n          </template>\n          <span v-else>{{ subtitle }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root {\n  block-size: 100%;\n  inline-size: 100%;\n  position: relative;\n  user-select: none;\n  background-color: var(--bg-elevated-01);\n}\n\n.background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n  mask-size: 100% 300%;\n  animation-duration: 5s;\n  animation-iteration-count: infinite;\n  animation-name: slide;\n  &.table {\n    background-image: paint(pl-placeholder-table-skeleton);\n  }\n  &.graph {\n    background-image: paint(pl-placeholder-graph-skeleton);\n  }\n}\n\n.content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  -webkit-text-stroke-color: white;\n  -webkit-text-stroke-width: 4px;\n  paint-order: stroke;\n}\n\n.title {\n  color: var(--txt-03);\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: -0.2px;\n}\n\n.subtitle {\n  color: var(--txt-03);\n  font-weight: 500;\n  line-height: 20px;\n  display: grid;\n  span {\n    grid-area: 1 / 1;\n    text-align: center;\n    animation-name: active-subtitle;\n    animation-duration: calc(6s * sibling-count());\n    animation-iteration-count: infinite;\n    animation-timing-function: steps(sibling-count(), jump-none);\n    visibility: if(\n      style(--pl-placeholder-active-subtitle: sibling-index()): visible;\n      else: hidden;\n    );\n  }\n}\n\n@keyframes slide {\n  from {\n    mask-position: 0 100%;\n  }\n}\n\n@keyframes active-subtitle {\n  from {\n    --pl-placeholder-active-subtitle: 1;\n  }\n  to {\n    --pl-placeholder-active-subtitle: sibling-count();\n  }\n}\n\n@property --pl-placeholder-active-subtitle {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 1;\n}\n</style>\n"],"names":["workletBlob","paintWorkletCode","workletUrl","styles","useCssModule","_createElementBlock","_normalizeClass","_unref","_createElementVNode","__props","_createVNode","PlLoaderLogo","_openBlock","_Fragment","_renderList","item","key"],"mappings":";;;sBAUMA,IAAc,IAAI,KAAK,CAACC,CAAgB,GAAG,EAAE,MAAM,0BAA0B,GAC7EC,IAAa,IAAI,gBAAgBF,CAAW;AACjD,IAEE,aAAa,UAAUE,CAAU;;;;;;;;;;;;;;AAkBpC,UAAMC,IAASC,EAAA;2BAIbC,EAmBM,OAAA;AAAA,MAnBA,OAAKC,EAAEC,EAAAJ,CAAA,EAAO,IAAI;AAAA,IAAA;MACtBK,EAKE,OAAA;AAAA,QAJC,OAAKF,EAAA,CAAGC,EAAAJ,CAAA,EAAO,YAAU;AAAA,WAAaI,EAAAJ,CAAA,EAAO,KAAK,GAAGM,EAAA,YAAO;AAAA,WAAuBF,EAAAJ,CAAA,EAAO,KAAK,GAAGM,EAAA,YAAO;AAAA,QAAA;;MAK5GD,EAWM,OAAA;AAAA,QAXA,OAAKF,EAAEC,EAAAJ,CAAA,EAAO,OAAO;AAAA,MAAA;QACzBO,EAAyDC,GAAA;AAAA,UAA1C,MAAM;AAAA,UAAI,OAAM;AAAA,QAAA;QAC/BH,EAQM,OAAA;AAAA,UARA,OAAKF,EAAEC,EAAAJ,CAAA,EAAO,IAAI;AAAA,QAAA;UACtBK,EAA4C,OAAA;AAAA,YAAtC,OAAKF,EAAEC,EAAAJ,CAAA,EAAO,KAAK;AAAA,UAAA,KAAKM,EAAA,KAAK,GAAA,CAAA;AAAA,UACnCD,EAKM,OAAA;AAAA,YALA,OAAKF,EAAEC,EAAAJ,CAAA,EAAO,QAAQ;AAAA,UAAA;YACV,MAAM,QAAQM,EAAA,QAAQ,KACpCG,EAAA,EAAA,GAAAP,EAA4DQ,GAAA,EAAA,KAAA,KAAAC,EAAhCL,EAAA,UAAQ,CAAtBM,GAAMC,OAApBJ,EAAA,GAAAP,EAA4D,QAAA,EAArB,KAAAW,OAAOD,CAAI,GAAA,CAAA,cAEpDH,EAAA,GAAAP,EAAkC,aAAlBI,EAAA,QAAQ,GAAA,CAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"PlPlaceholder.vue2.js","sources":["../../../src/layout/PlPlaceholder/PlPlaceholder.vue"],"sourcesContent":["<script lang=\"ts\">\nimport paintWorkletCode from './paint-worklet.js?raw';\n\nexport interface PlPlaceholderProps {\n  variant?: 'table' | 'graph';\n  title?: string;\n  subtitle?: string | string[];\n}\n\n// Register paint worklet once at module load (uses blob URL to comply with CSP)\nconst workletBlob = new Blob(\n  [paintWorkletCode],\n  { type: 'application/javascript' },\n);\nconst workletUrl = URL.createObjectURL(workletBlob);\n(CSS as unknown as {\n  paintWorklet: { addModule: (url: string) => void };\n}).paintWorklet.addModule(workletUrl);\n</script>\n\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue';\nimport PlLoaderLogo from '../../components/PlLoaderLogo.vue';\n\nconst props = defineProps<PlPlaceholderProps>();\n\nconst styles = useCssModule();\n</script>\n\n<template>\n  <div :class=\"styles.root\">\n    <div\n      :class=\"[styles.background, {\n        [styles.table]: props.variant === 'table',\n        [styles.graph]: props.variant === 'graph',\n      }]\"\n    />\n    <div :class=\"styles.content\">\n      <PlLoaderLogo :size=\"64\" color=\"var(--color-div-grey)\" />\n      <div v-if=\"props.title || props.subtitle\" :class=\"styles.text\">\n        <div v-if=\"props.title\" :class=\"styles.title\">{{ props.title }}</div>\n        <div v-if=\"props.subtitle\" :class=\"styles.subtitle\">\n          <template v-if=\"Array.isArray(props.subtitle)\">\n            <span v-for=\"(item, key) of props.subtitle\" :key>{{ item }}</span>\n          </template>\n          <span v-else>{{ props.subtitle }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root {\n  block-size: 100%;\n  inline-size: 100%;\n  position: relative;\n  user-select: none;\n  background-color: var(--bg-elevated-01);\n}\n\n.background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);\n  mask-size: 100% 300%;\n  animation-duration: 5s;\n  animation-iteration-count: infinite;\n  animation-name: slide;\n  &.table {\n    background-image: paint(pl-placeholder-table-skeleton);\n  }\n  &.graph {\n    background-image: paint(pl-placeholder-graph-skeleton);\n  }\n}\n\n.content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  -webkit-text-stroke-color: white;\n  -webkit-text-stroke-width: 4px;\n  paint-order: stroke;\n}\n\n.title {\n  color: var(--txt-03);\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: -0.2px;\n}\n\n.subtitle {\n  color: var(--txt-03);\n  font-weight: 500;\n  line-height: 20px;\n  display: grid;\n  span {\n    grid-area: 1 / 1;\n    text-align: center;\n    animation-name: active-subtitle;\n    animation-duration: calc(6s * sibling-count());\n    animation-iteration-count: infinite;\n    animation-timing-function: steps(sibling-count(), jump-none);\n    visibility: if(\n      style(--pl-placeholder-active-subtitle: sibling-index()): visible;\n      else: hidden;\n    );\n  }\n}\n\n@keyframes slide {\n  from {\n    mask-position: 0 100%;\n  }\n}\n\n@keyframes active-subtitle {\n  from {\n    --pl-placeholder-active-subtitle: 1;\n  }\n  to {\n    --pl-placeholder-active-subtitle: sibling-count();\n  }\n}\n\n@property --pl-placeholder-active-subtitle {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 1;\n}\n</style>\n"],"names":["workletBlob","paintWorkletCode","workletUrl","props","__props","styles","useCssModule","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","PlLoaderLogo","_toDisplayString","_openBlock","_Fragment","item","key","_hoisted_1"],"mappings":";;;sBAUMA,IAAc,IAAI;AAAA,EACtB,CAACC,CAAgB;AAAA,EACjB,EAAE,MAAM,yBAAA;AACV,GACMC,IAAa,IAAI,gBAAgBF,CAAW;AACjD,IAEE,aAAa,UAAUE,CAAU;;;;;;;;;AAOpC,UAAMC,IAAQC,GAERC,IAASC,EAAA;2BAIbC,EAmBM,OAAA;AAAA,MAnBA,OAAKC,EAAEC,EAAAJ,CAAA,EAAO,IAAI;AAAA,IAAA;MACtBK,EAKE,OAAA;AAAA,QAJC,OAAKF,EAAA,CAAGC,EAAAJ,CAAA,EAAO,YAAU;AAAA,UAAa,CAAAI,EAAAJ,CAAA,EAAO,KAAK,GAAGF,EAAM,YAAO;AAAA,UAAuB,CAAAM,EAAAJ,CAAA,EAAO,KAAK,GAAGF,EAAM,YAAO;AAAA,QAAA;;MAKxHO,EAWM,OAAA;AAAA,QAXA,OAAKF,EAAEC,EAAAJ,CAAA,EAAO,OAAO;AAAA,MAAA;QACzBM,EAAyDC,GAAA;AAAA,UAA1C,MAAM;AAAA,UAAI,OAAM;AAAA,QAAA;QACpBT,EAAM,SAASA,EAAM,iBAAhCI,EAQM,OAAA;AAAA;UARqC,OAAKC,EAAEC,EAAAJ,CAAA,EAAO,IAAI;AAAA,QAAA;UAChDF,EAAM,cAAjBI,EAAqE,OAAA;AAAA;YAA5C,OAAKC,EAAEC,EAAAJ,CAAA,EAAO,KAAK;AAAA,UAAA,GAAKQ,EAAAV,EAAM,KAAK,GAAA,CAAA;UACjDA,EAAM,iBAAjBI,EAKM,OAAA;AAAA;YALsB,OAAKC,EAAEC,EAAAJ,CAAA,EAAO,QAAQ;AAAA,UAAA;YAChC,MAAM,QAAQF,EAAM,QAAQ,KAC1CW,EAAA,EAAA,GAAAP,EAAkEQ,iBAAtCZ,EAAM,UAAQ,CAA5Ba,GAAMC,OAApBH,EAAA,GAAAP,EAAkE,QAAA,EAArB,KAAAU,OAAOD,CAAI,GAAA,CAAA,mBAE1DT,EAAwC,QAAAW,GAAAL,EAAxBV,EAAM,QAAQ,GAAA,CAAA;AAAA,UAAA;;;;;;"}

package/dist/layout/PlPlaceholder/index.d.ts

@@ -1,2 +1,12 @@
-export { default as PlPlaceholder, type PlPlaceholderProps, } from './PlPlaceholder.vue';
+export { type PlPlaceholderProps, default as PlPlaceholder, } from './PlPlaceholder.vue';
+export declare const PL_PLACEHOLDER_TEXTS: {
+    LOADING: {
+        title: string;
+        subtitle: string[];
+    };
+    RUNNING: {
+        title: string;
+        subtitle: string[];
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/layout/PlPlaceholder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/PlPlaceholder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,kBAAkB,GACxB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/PlPlaceholder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EACvB,OAAO,IAAI,aAAa,GACzB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,oBAAoB;;;;;;;;;CAmBhC,CAAC"}

package/dist/layout/PlPlaceholder/index.js

@@ -0,0 +1,25 @@
+import "./PlPlaceholder.vue2.js";
+const t = {
+  LOADING: {
+    title: "Loading data...",
+    subtitle: [
+      "No action needed—the job is active",
+      "Larger datasets take longer to load",
+      "Results will appear here as soon as they’re ready",
+      "Loading may take minutes to hours"
+    ]
+  },
+  RUNNING: {
+    title: "Running analysis...",
+    subtitle: [
+      "No action needed—the job is active",
+      "Larger datasets take longer to process",
+      "Results will appear here as soon as they’re ready",
+      "Processing may take minutes to hours"
+    ]
+  }
+};
+export {
+  t as PL_PLACEHOLDER_TEXTS
+};
+//# sourceMappingURL=index.js.map

package/dist/layout/PlPlaceholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/layout/PlPlaceholder/index.ts"],"sourcesContent":["export {\n  type PlPlaceholderProps,\n  default as PlPlaceholder,\n} from './PlPlaceholder.vue';\n\nexport const PL_PLACEHOLDER_TEXTS = {\n  LOADING: {\n    title: 'Loading data...',\n    subtitle: [\n      'No action needed—the job is active',\n      'Larger datasets take longer to load',\n      'Results will appear here as soon as they’re ready',\n      'Loading may take minutes to hours',\n    ],\n  },\n  RUNNING: {\n    title: 'Running analysis...',\n    subtitle: [\n      'No action needed—the job is active',\n      'Larger datasets take longer to process',\n      'Results will appear here as soon as they’re ready',\n      'Processing may take minutes to hours',\n    ],\n  },\n};\n"],"names":["PL_PLACEHOLDER_TEXTS"],"mappings":";AAKO,MAAMA,IAAuB;AAAA,EAClC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/utils/DoubleContour.vue2.js

@@ -0,0 +1,23 @@
+import { defineComponent as t, createElementBlock as r, openBlock as n, normalizeClass as s, createElementVNode as a, normalizeProps as l, guardReactiveProps as i, renderSlot as u } from "vue";
+const d = {
+  inheritAttrs: !1
+}, m = /* @__PURE__ */ t({
+  ...d,
+  __name: "DoubleContour",
+  props: {
+    groupPosition: { default: void 0 }
+  },
+  setup(o) {
+    return (e, c) => (n(), r("div", {
+      class: s(["double-contour", { [o.groupPosition]: !0 }])
+    }, [
+      a("div", l(i(e.$attrs)), [
+        u(e.$slots, "default")
+      ], 16)
+    ], 2));
+  }
+});
+export {
+  m as default
+};
+//# sourceMappingURL=DoubleContour.vue2.js.map

package/dist/utils/DoubleContour.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleContour.vue2.js","sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(defineProps<{\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n}>(), {\n  groupPosition: undefined,\n});\n</script>\n\n<script lang=\"ts\">\n\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"{ [groupPosition]: true }\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div{\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"names":["__default__","_createElementBlock","_normalizeClass","__props","_createElementVNode","$attrs","_renderSlot","_ctx"],"mappings":";AAUA,MAAAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;2BAIEC,EAIM,OAAA;AAAA,MAJD,OAAKC,EAAA,CAAC,kBAAgB,EAAA,CAAYC,EAAA,aAAa,GAAA,IAAA,CAAA;AAAA,IAAA;MAClDC,EAEM,WAFOC,EAAAA,MAAM,CAAA,GAAA;AAAA,QACjBC,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/utils/DoubleContour.vue3.js

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import o from "./DoubleContour.vue.js";
+import o from "./DoubleContour.vue2.js";
 
 export {
   o as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.8.8",
+  "version": "2.9.0",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "d3-axis": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "canonicalize": "~2.1.0",
-    "@milaboratories/helpers": "1.12.1",
-    "@platforma-sdk/model": "1.49.0"
+    "@platforma-sdk/model": "1.50.0",
+    "@milaboratories/helpers": "1.13.0"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",
@@ -43,10 +43,10 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "typescript": "~5.6.3",
-    "@milaboratories/ts-configs": "1.2.0",
-    "@milaboratories/ts-builder": "1.2.1",
     "@milaboratories/eslint-config": "1.0.5",
-    "@milaboratories/build-configs": "1.2.1"
+    "@milaboratories/ts-configs": "1.2.0",
+    "@milaboratories/build-configs": "1.2.1",
+    "@milaboratories/ts-builder": "1.2.1"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlLogView/PlLogView.vue

@@ -12,7 +12,7 @@ import { computed, ref, useSlots, watch } from 'vue';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
-import type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';
+import type { AnyLogHandle, OutputWithStatus, Platforma } from '@platforma-sdk/model';
 import { useLogHandle } from './useLogHandle';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import DoubleContour from '../../utils/DoubleContour.vue';
@@ -20,7 +20,7 @@ import { PlTooltip } from '../PlTooltip';
 import { PlIcon24 } from '../PlIcon24';
 import { downloadContent } from '../../helpers/dom';
 
-const getOutputError = <T>(o?: ValueOrErrors<T>) => {
+const getOutputError = <T>(o?: OutputWithStatus<T>) => {
   if (o && o.ok === false) {
     return o.errors.join('\n');
   }
@@ -52,7 +52,7 @@ const props = defineProps<{
   /**
    * Block output (Note: error and value take precedence over output property)
    */
-  output?: ValueOrErrors<unknown>;
+  output?: OutputWithStatus<unknown>;
   /**
    * Max retries for AnyLogHandle fetch (with the same parameters)
    */

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -9,7 +9,7 @@ export default {
 import { computed, useSlots } from 'vue';
 import { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';
 import './pl-block-page.scss';
-import { PlPlaceholder, type PlPlaceholderProps } from '../PlPlaceholder';
+import { PL_PLACEHOLDER_TEXTS, PlPlaceholder, type PlPlaceholderProps } from '../PlPlaceholder';
 
 const slots = useSlots();
 
@@ -26,7 +26,7 @@ const props = defineProps<{
 
 const loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {
   if (typeof props.bodyLoading === 'string') {
-    return { variant: props.bodyLoading };
+    return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };
   }
   return props.bodyLoading;
 });

package/src/layout/PlPlaceholder/PlPlaceholder.vue

@@ -8,7 +8,10 @@ export interface PlPlaceholderProps {
 }
 
 // Register paint worklet once at module load (uses blob URL to comply with CSP)
-const workletBlob = new Blob([paintWorkletCode], { type: 'application/javascript' });
+const workletBlob = new Blob(
+  [paintWorkletCode],
+  { type: 'application/javascript' },
+);
 const workletUrl = URL.createObjectURL(workletBlob);
 (CSS as unknown as {
   paintWorklet: { addModule: (url: string) => void };
@@ -19,16 +22,7 @@ const workletUrl = URL.createObjectURL(workletBlob);
 import { useCssModule } from 'vue';
 import PlLoaderLogo from '../../components/PlLoaderLogo.vue';
 
-const {
-  variant,
-  title = 'Running analysis...',
-  subtitle = [
-    'No action needed—the job is active',
-    'Larger datasets take longer to process',
-    'Results will appear here as soon as they’re ready',
-    'Processing may take minutes to hours',
-  ],
-} = defineProps<PlPlaceholderProps>();
+const props = defineProps<PlPlaceholderProps>();
 
 const styles = useCssModule();
 </script>
@@ -37,19 +31,19 @@ const styles = useCssModule();
   <div :class="styles.root">
     <div
       :class="[styles.background, {
-        [styles.table]: variant === 'table',
-        [styles.graph]: variant === 'graph',
+        [styles.table]: props.variant === 'table',
+        [styles.graph]: props.variant === 'graph',
       }]"
     />
     <div :class="styles.content">
       <PlLoaderLogo :size="64" color="var(--color-div-grey)" />
-      <div :class="styles.text">
-        <div :class="styles.title">{{ title }}</div>
-        <div :class="styles.subtitle">
-          <template v-if="Array.isArray(subtitle)">
-            <span v-for="(item, key) of subtitle" :key>{{ item }}</span>
+      <div v-if="props.title || props.subtitle" :class="styles.text">
+        <div v-if="props.title" :class="styles.title">{{ props.title }}</div>
+        <div v-if="props.subtitle" :class="styles.subtitle">
+          <template v-if="Array.isArray(props.subtitle)">
+            <span v-for="(item, key) of props.subtitle" :key>{{ item }}</span>
           </template>
-          <span v-else>{{ subtitle }}</span>
+          <span v-else>{{ props.subtitle }}</span>
         </div>
       </div>
     </div>

package/src/layout/PlPlaceholder/index.ts

@@ -1,4 +1,25 @@
 export {
-  default as PlPlaceholder,
   type PlPlaceholderProps,
+  default as PlPlaceholder,
 } from './PlPlaceholder.vue';
+
+export const PL_PLACEHOLDER_TEXTS = {
+  LOADING: {
+    title: 'Loading data...',
+    subtitle: [
+      'No action needed—the job is active',
+      'Larger datasets take longer to load',
+      'Results will appear here as soon as they’re ready',
+      'Loading may take minutes to hours',
+    ],
+  },
+  RUNNING: {
+    title: 'Running analysis...',
+    subtitle: [
+      'No action needed—the job is active',
+      'Larger datasets take longer to process',
+      'Results will appear here as soon as they’re ready',
+      'Processing may take minutes to hours',
+    ],
+  },
+};