@blokkli/editor 2.0.0-alpha.61 → 2.0.0-alpha.63

package/dist/global/types/colorOptions.d.ts

@@ -1,4 +1,20 @@
+/**
+ * A color option declared at build time.
+ *
+ * Two shapes:
+ * - A flat color with a single hex value.
+ * - A ramped color with a map of shades and an explicit `mainShade` that
+ *   identifies which shade is the canonical/base swatch.
+ *
+ * For ramped colors, a chart can reference the base via the bare color id
+ * (e.g. `red`) or any specific shade via the compound id `red.<shade>` (e.g.
+ * `red.300`).
+ */
 export type ColorOption = {
+    label: string;
     hex: string;
+} | {
     label: string;
+    shades: Record<string, string>;
+    mainShade: string;
 };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.61",
+  "version": "2.0.0-alpha.63",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -19,7 +19,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.61";
+const version = "2.0.0-alpha.63";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1008,6 +1008,95 @@ class FileCache {
   }
 }
 
+const HEX_COLOR_REGEX = /^#(?:[\da-f]{3}|[\da-f]{6})$/i;
+const VALID_ID_REGEX = /^[a-z_$][\w$]*$/i;
+function isHex(value) {
+  return typeof value === "string" && HEX_COLOR_REGEX.test(value);
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.length > 0;
+}
+function hasShades(option) {
+  return "shades" in option && !!option.shades && typeof option.shades === "object";
+}
+function validateColorOption(colorId, option) {
+  const errors = [];
+  if (!VALID_ID_REGEX.test(colorId)) {
+    errors.push({
+      message: `Color id "${colorId}" is not a valid JavaScript identifier (must start with a letter, underscore or $, followed by letters, digits, underscores or $). Color ids may not contain "." \u2014 that character is reserved for shade-qualified ids (e.g. "red.300").`,
+      optionKey: colorId
+    });
+  }
+  if (!isNonEmptyString(option.label)) {
+    errors.push({
+      message: `Option "${colorId}" is missing a non-empty "label".`,
+      optionKey: colorId
+    });
+  }
+  if (hasShades(option)) {
+    const shadeKeys = Object.keys(option.shades);
+    if (shadeKeys.length === 0) {
+      errors.push({
+        message: `Option "${colorId}" declares an empty "shades" object. Either omit "shades" or declare at least one shade.`,
+        optionKey: colorId
+      });
+    }
+    for (const shadeKey of shadeKeys) {
+      const shadeValue = option.shades[shadeKey];
+      if (!isHex(shadeValue)) {
+        errors.push({
+          message: `Option "${colorId}" shade "${shadeKey}" has value "${shadeValue}" which is not a valid hex color (expected format: #RRGGBB or #RGB)`,
+          optionKey: colorId
+        });
+      }
+    }
+    if (!isNonEmptyString(option.mainShade)) {
+      errors.push({
+        message: `Option "${colorId}" declares "shades" but is missing "mainShade".`,
+        optionKey: colorId
+      });
+    } else if (!shadeKeys.includes(option.mainShade)) {
+      errors.push({
+        message: `Option "${colorId}" mainShade "${option.mainShade}" is not a key of shades (available: ${shadeKeys.map((k) => `"${k}"`).join(", ")})`,
+        optionKey: colorId
+      });
+    }
+    if ("hex" in option) {
+      errors.push({
+        message: `Option "${colorId}" declares both "hex" and "shades". Use one or the other: shaded colors derive their base hex from "shades[mainShade]".`,
+        optionKey: colorId
+      });
+    }
+  } else {
+    const hex = option.hex;
+    if (hex === void 0) {
+      errors.push({
+        message: `Option "${colorId}": "hex" is required when "shades" is not provided.`,
+        optionKey: colorId
+      });
+    } else if (!isHex(hex)) {
+      errors.push({
+        message: `Option "${colorId}" has hex value "${hex}" which is not a valid hex color (expected format: #RRGGBB or #RGB)`,
+        optionKey: colorId
+      });
+    }
+  }
+  return errors;
+}
+function validateColorOptions(colorOptions) {
+  if (!colorOptions) {
+    return [];
+  }
+  const errors = [];
+  for (const [colorId, option] of Object.entries(colorOptions)) {
+    if (!option || typeof option !== "object") {
+      continue;
+    }
+    errors.push(...validateColorOption(colorId, option));
+  }
+  return errors;
+}
+
 const defaultColorOptions = {
   blue: { hex: "#3b82f6", label: "Blue" },
   red: { hex: "#ef4444", label: "Red" },
@@ -1221,9 +1310,10 @@ class ModuleHelper {
     return bundle;
   }
   validate(icons) {
-    const errors = validateOptions(this.options.globalOptions, icons);
-    if (errors.length > 0) {
-      const lines = errors.map((error) => {
+    let hasErrors = false;
+    const optionErrors = validateOptions(this.options.globalOptions, icons);
+    if (optionErrors.length > 0) {
+      const lines = optionErrors.map((error) => {
         const prefix = error.optionKey ? `  Option "${error.optionKey}": ` : "  ";
         return prefix + error.message;
       });
@@ -1231,9 +1321,21 @@ class ModuleHelper {
         `bl\xF6kkli global options validation errors:
 ${lines.join("\n")}`
       );
-      return true;
+      hasErrors = true;
     }
-    return false;
+    const colorErrors = validateColorOptions(this.options.colorOptions);
+    if (colorErrors.length > 0) {
+      const lines = colorErrors.map((error) => {
+        const prefix = error.optionKey ? `  Option "${error.optionKey}": ` : "  ";
+        return prefix + error.message;
+      });
+      this.logger.error(
+        `bl\xF6kkli colorOptions validation errors:
+${lines.join("\n")}`
+      );
+      hasErrors = true;
+    }
+    return hasErrors;
   }
 }
 
@@ -2121,12 +2223,20 @@ function mangleClassExpression(expr) {
   }
   return result;
 }
+const CLASS_BEARING_PROPS = ["button-class", "background-class"];
 function mangleTemplateAndScript(code) {
   let result = code;
   result = result.replace(
     /(?<![-:.])\bclass="([^"]*)"/g,
     (_match, value) => `class="${mangleClassString(value)}"`
   );
+  for (const prop of CLASS_BEARING_PROPS) {
+    const staticAttr = new RegExp(`(?<![:.])\\b${prop}="([^"]*)"`, "g");
+    result = result.replace(
+      staticAttr,
+      (_match, value) => `${prop}="${mangleClassString(value)}"`
+    );
+  }
   result = result.replace(
     /\btw\(\s*(['"])([\s\S]*?)\1\s*\)/g,
     (_match, quote, value) => `tw(${quote}${mangleClassString(value)}${quote})`
@@ -2135,6 +2245,13 @@ function mangleTemplateAndScript(code) {
     /(?::|v-bind:)class="([^"]*)"/g,
     (_match, expr) => `:class="${mangleClassExpression(expr)}"`
   );
+  for (const prop of CLASS_BEARING_PROPS) {
+    const boundAttr = new RegExp(`(:|v-bind:)${prop}="([^"]*)"`, "g");
+    result = result.replace(
+      boundAttr,
+      (_match, prefix, expr) => `${prefix}${prop}="${mangleClassExpression(expr)}"`
+    );
+  }
   return result;
 }
 function withTailwindConfig(cssContent, tailwindConfigPath) {
@@ -2279,6 +2396,19 @@ ${moduleCSS}
   { dependencies: ["module-css"] }
 );
 
+function buildColorPalette(ctx) {
+  const palette = [];
+  for (const [id, option] of Object.entries(
+    ctx.helper.options.colorOptions || {}
+  )) {
+    if ("shades" in option) {
+      palette.push(`${id}.${option.mainShade}`);
+    } else {
+      palette.push(id);
+    }
+  }
+  return palette;
+}
 function mapVars(ctx) {
   return {
     itemEntityType: JSON.stringify(
@@ -2289,7 +2419,8 @@ function mapVars(ctx) {
     ),
     fragmentBlockBundle: JSON.stringify(
       ctx.helper.options.fragmentBlockBundle ?? "blokkli_fragment"
-    )
+    ),
+    colorPalette: JSON.stringify(buildColorPalette(ctx))
   };
 }
 const config = defineCodeTemplate(
@@ -2302,6 +2433,8 @@ export const itemEntityType = ${vars.itemEntityType}
 export const fromLibraryBlockBundle = ${vars.fromLibraryBlockBundle}
 
 export const fragmentBlockBundle = ${vars.fragmentBlockBundle}
+
+export const colorPalette = ${vars.colorPalette}
 `;
   },
   (ctx) => {
@@ -2314,6 +2447,15 @@ export declare const itemEntityType: ${vars.itemEntityType}
 
 export declare const fromLibraryBlockBundle: ${vars.fromLibraryBlockBundle}
 export declare const fragmentBlockBundle: ${vars.fragmentBlockBundle}
+
+/**
+ * Ordered list of canonical default color ids \u2014 one per declared family,
+ * in declaration order. Flat colors appear as bare ids, ramped colors as
+ * \`<id>.<mainShade>\`. Runtime consumers cycle through this to assign
+ * default colors (e.g. dynamic chart series); the runtime composable also
+ * walks it as a fallback cascade when a requested id can't be resolved.
+ */
+export declare const colorPalette: string[]
 `;
   }
 );
@@ -3176,6 +3318,10 @@ import type { InterfaceLanguage } from '#blokkli-build/translations'
 
 export type ValidColorOption = ${validColorOptions}
 
+export type GeneratedColorOption =
+  | { label: string; hex: string }
+  | { label: string; shades: Record<string, string>; mainShade: string }
+
 /**
  * Whether the app uses a custom theme.
  */
@@ -3189,7 +3335,7 @@ export declare const themes: Record<string, Theme>
 /**
  * The available color options.
  */
-export declare const colorOptions: Record<ValidColorOption, { hex: string; label: string }>
+export declare const colorOptions: Record<ValidColorOption, GeneratedColorOption>
 
 /**
  * The default theme.
@@ -4366,14 +4512,21 @@ const module$1 = defineNuxtModule({
       import.meta.url,
       moduleOptions
     );
-    const colorOptions = Object.entries(
+    const colorOptions = {};
+    for (const [id, option] of Object.entries(
       helper.options.colorOptions || {}
-    ).reduce((acc, entry) => {
-      acc[entry[0]] = entry[1].hex;
-      return acc;
-    }, {});
+    )) {
+      if ("shades" in option) {
+        colorOptions[id] = option.shades[option.mainShade];
+        for (const [shadeId, hex] of Object.entries(option.shades)) {
+          colorOptions[`${id}.${shadeId}`] = hex;
+        }
+      } else {
+        colorOptions[id] = option.hex;
+      }
+    }
     nuxt.options.appConfig.blokkli = {
-      // @ts-expect-error The module config type defined a generic Record type, but in userland, this type will automatically contain the actual color keys as properties.
+      // @ts-expect-error generic type vs runtime derived type.
       colorOptions
     };
     const theme = new ThemeData(helper);
@@ -4450,6 +4603,7 @@ const module$1 = defineNuxtModule({
     helper.addComposable("defineBlokkliProvider");
     helper.addComposable("useBlokkli");
     helper.addComposable("useBlokkliHelper");
+    helper.addComposable("useBlokkliRuntimeConfig");
     helper.addAlias(
       "#blokkli/analyzer",
       resolver.resolve("runtime/editor/features/analyze/analyzers")

package/dist/modules/agent/runtime/app/components/Conversation/Item/Assistant/index.vue

@@ -7,6 +7,7 @@
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import Markdown from "#blokkli/agent/app/components/Markdown/index.vue";
+import { linkifyBlockUuids } from "#blokkli/agent/app/helpers/linkifyBlockUuids";
 import { PLACEHOLDER_USER_NAME } from "#blokkli/agent/shared/placeholders";
 const props = defineProps({
   id: { type: String, required: true },
@@ -14,11 +15,19 @@ const props = defineProps({
   type: { type: String, required: true },
   content: { type: String, required: true }
 });
-const { state } = useBlokkli();
-const renderedContent = computed(
-  () => props.content.replaceAll(
+const { $t, state, blocks, types } = useBlokkli();
+const renderedContent = computed(() => {
+  const withName = props.content.replaceAll(
     PLACEHOLDER_USER_NAME,
     state.owner.value?.name || ""
-  )
-);
+  );
+  return linkifyBlockUuids(
+    withName,
+    (uuid) => {
+      const block = blocks.getBlock(uuid);
+      return block ? types.getBlockLabel(block.bundle) : null;
+    },
+    $t("deleted", "deleted")
+  );
+});
 </script>

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/ConversationsTab/Item.vue

@@ -6,7 +6,7 @@
   >
     <Avatar
       :deleted="!item.author"
-      :name="item.author?.name || $t('userDeleted', '[deleted]')"
+      :name="item.author?.name || `[${$t('deleted', 'deleted')}]`"
       :seed="item.author?.id"
       :image-url="item.author?.imageUrl"
     />
@@ -15,7 +15,7 @@
         {{ item.title || $t("agentConversationsUntitled", "Untitled") }}
       </span>
       <span class="_bk_text-xs _bk_text-mono-600 _bk_truncate _bk_flex _bk_gap-2">
-        <span>{{ item.author?.name || $t("userDeleted", "[deleted]") }}</span>
+        <span>{{ item.author?.name || `[${$t("deleted", "deleted")}]` }}</span>
         <span v-if="item.host?.label" class="_bk_truncate">
           · {{ item.host.label }}
         </span>

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/RatingsTab/Item.vue

@@ -24,12 +24,12 @@
       <span class="_bk_text-xs _bk_text-mono-500 _bk_flex _bk_items-center _bk_gap-5 _bk_mt-3">
         <Avatar
           :deleted="!item.author"
-          :name="item.author?.name || $t('userDeleted', '[deleted]')"
+          :name="item.author?.name || `[${$t('deleted', 'deleted')}]`"
           :seed="item.author?.id"
           :image-url="item.author?.imageUrl"
         />
         <span class="_bk_truncate">{{
-          item.author?.name || $t("userDeleted", "[deleted]")
+          item.author?.name || `[${$t("deleted", "deleted")}]`
         }}</span>
         <span class="_bk_ml-auto _bk_shrink-0">
           <RelativeTime :timestamp="item.createdAt" />

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/SplitView/ConversationDetail.vue

@@ -10,11 +10,11 @@
         <span class="_bk_flex _bk_items-center _bk_gap-5">
           <Avatar
             :deleted="!parsed.author"
-            :name="parsed.author?.name || $t('userDeleted', '[deleted]')"
+            :name="parsed.author?.name || `[${$t('deleted', 'deleted')}]`"
             :seed="parsed.author?.id"
             :image-url="parsed.author?.imageUrl"
           />
-          {{ parsed.author?.name || $t("userDeleted", "[deleted]") }}
+          {{ parsed.author?.name || `[${$t("deleted", "deleted")}]` }}
         </span>
         <span
           v-if="parsed.host?.label"

package/dist/modules/agent/runtime/app/features/agent/Transcript/MessageContent.vue

@@ -27,7 +27,9 @@
             Tool Result ({{ block.tool_use_id }})
             <span v-if="block.is_error" class="_bk_text-red-dark _bk_ml-5">ERROR</span>
           </div>
-          <pre class="bk-agent-transcript-block">{{ block.content }}</pre>
+          <pre class="bk-agent-transcript-block">{{
+            formatMaybeJson(block.content)
+          }}</pre>
         </template>
       </div>
     </template>
@@ -38,4 +40,15 @@
 defineProps({
   content: { type: [String, Array], required: true }
 });
+function formatMaybeJson(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return value;
+  const first = trimmed[0];
+  if (first !== "{" && first !== "[") return value;
+  try {
+    return JSON.stringify(JSON.parse(trimmed), null, 2);
+  } catch {
+    return value;
+  }
+}
 </script>

package/dist/modules/agent/runtime/app/features/agent/Transcript/index.vue

@@ -39,6 +39,15 @@
       <template #post-title>
         <Pill :text="transcript.messages.length" />
       </template>
+      <template #actions>
+        <PanelAction
+          :title="
+  copiedKey === 'conversation' ? 'Copied!' : 'Copy conversation JSON'
+"
+          icon="bk_mdi_content_copy"
+          @click="copyConversation"
+        />
+      </template>
       <div>
         <div
           v-for="(message, i) in transcript.messages"
@@ -69,7 +78,7 @@
       }}</pre>
       <template #actions>
         <PanelAction
-          :title="copied ? 'Copied!' : 'Copy JSON'"
+          :title="copiedKey === 'request' ? 'Copied!' : 'Copy JSON'"
           icon="bk_mdi_content_copy"
           @click="copyLastRequest"
         />
@@ -88,25 +97,34 @@ import { Pill } from "#blokkli/editor/components";
 const props = defineProps({
   transcript: { type: Object, required: true }
 });
-const copied = ref(false);
+const copiedKey = ref(null);
 let copiedTimeout = null;
 onBeforeUnmount(() => {
   if (copiedTimeout) {
     clearTimeout(copiedTimeout);
   }
 });
+function flashCopied(key) {
+  copiedKey.value = key;
+  if (copiedTimeout) {
+    clearTimeout(copiedTimeout);
+  }
+  copiedTimeout = setTimeout(() => {
+    copiedKey.value = null;
+    copiedTimeout = null;
+  }, 2e3);
+}
 function copyLastRequest() {
   const json = JSON.stringify(props.transcript.lastRequest, null, 2);
-  navigator.clipboard.writeText(json).then(() => {
-    copied.value = true;
-    if (copiedTimeout) {
-      clearTimeout(copiedTimeout);
-    }
-    copiedTimeout = setTimeout(() => {
-      copied.value = false;
-      copiedTimeout = null;
-    }, 2e3);
-  });
+  navigator.clipboard.writeText(json).then(() => flashCopied("request"));
+}
+function copyConversation() {
+  const snapshot = props.transcript.messages.map((m) => ({
+    type: m.type,
+    content: m.seen
+  }));
+  const json = JSON.stringify(snapshot, null, 2);
+  navigator.clipboard.writeText(json).then(() => flashCopied("conversation"));
 }
 </script>
 

package/dist/modules/agent/runtime/app/helpers/linkifyBlockUuids.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Replace bare block UUIDs in markdown text with clickable chips. Known UUIDs
+ * become `<a class="bk-agent-block-ref" href="#uuid">label</a>`; UUIDs whose
+ * block is no longer on the page become a non-clickable
+ * `<span class="bk-agent-block-ref-deleted">[<deletedLabel>]</span>`.
+ *
+ * UUIDs inside fenced or inline code regions and UUIDs already used as a link
+ * target (preceded by `#`) are left alone, so existing `[text](#uuid)` links
+ * from older conversations pass through unchanged.
+ */
+export declare function linkifyBlockUuids(content: string, resolve: (uuid: string) => string | null, deletedLabel: string): string;

package/dist/modules/agent/runtime/app/helpers/linkifyBlockUuids.js

@@ -0,0 +1,47 @@
+const UUID_PATTERN = /(?<![\w#-])[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}(?![\w-])/gi;
+const CODE_REGION_PATTERN = /```[\s\S]*?```|`[^`\n]*`/g;
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (c) => {
+    switch (c) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+}
+export function linkifyBlockUuids(content, resolve, deletedLabel) {
+  if (!content) return content;
+  const parts = [];
+  let cursor = 0;
+  CODE_REGION_PATTERN.lastIndex = 0;
+  let match;
+  while ((match = CODE_REGION_PATTERN.exec(content)) !== null) {
+    parts.push(
+      replaceOutsideCode(
+        content.slice(cursor, match.index),
+        resolve,
+        deletedLabel
+      )
+    );
+    parts.push(match[0]);
+    cursor = match.index + match[0].length;
+  }
+  parts.push(replaceOutsideCode(content.slice(cursor), resolve, deletedLabel));
+  return parts.join("");
+}
+function replaceOutsideCode(segment, resolve, deletedLabel) {
+  return segment.replace(UUID_PATTERN, (uuid) => {
+    const label = resolve(uuid);
+    if (label === null) {
+      return `<span class="bk-agent-block-ref-deleted">[${escapeHtml(deletedLabel)}]</span>`;
+    }
+    return `<a class="bk-agent-block-ref" href="#${uuid}">${escapeHtml(label)}</a>`;
+  });
+}

package/dist/modules/agent/runtime/app/tools/auto_translate_paragraphs/Component.d.vue.ts

@@ -9,6 +9,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;
@@ -19,6 +30,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         acceptedCount: number;
         rejectedByUser: Record<string, Record<string, {
             reasonForRejection: string;
+            partial?: {
+                accepted: number;
+                total: number;
+                rejectedSegments: {
+                    tag: string;
+                    beforeHtml: string;
+                    afterHtml: string;
+                    status: "deleted" | "matched" | "inserted";
+                    reasonForRejection: string;
+                }[];
+            } | undefined;
         }>>;
         label: string;
         agentMessage?: string | undefined;