@revenexx/editor 0.1.0

package/dist/runtime/editor/features/workspace/Overlay/Item.vue

@@ -0,0 +1,41 @@
+<template>
+  <a
+    :href="url"
+    class="bk-command _bk_flex _bk_items-center _bk_gap-10 _bk_px-15 _bk_w-full _bk_text-left _bk_no-underline _bk_max-w-full _bk_min-w-0 _bk_border _bk_border-transparent"
+    :class="focused ? '_bk_bg-mono-800 _bk_text-white' : '_bk_text-mono-300'"
+  >
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div class="_bk_truncate _bk_font-semibold _bk_text-base">
+        {{ label }}
+        <span class="_bk_font-normal _bk_text-mono-500">{{ id }}</span>
+      </div>
+      <div class="bk-pill-list _bk_mt-3">
+        <Pill :text="bundleLabel" variant="dark" scheme="mono" />
+        <Pill v-if="lastChanged" scheme="yellow" variant="dark">
+          <RelativeTime :timestamp="lastChanged" />
+        </Pill>
+        <Pill v-if="isOwner" :text="$t('owner', 'Owner')" variant="dark" />
+      </div>
+    </div>
+  </a>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { RelativeTime, Pill } from "#blokkli/editor/components";
+defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  entityType: { type: String, required: true },
+  bundle: { type: String, required: true },
+  label: { type: String, required: true },
+  url: { type: String, required: true },
+  lastChanged: { type: [String, null], required: true },
+  uid: { type: [String, null], required: true },
+  context: { type: String, required: false },
+  focused: { type: Boolean, required: true },
+  bundleLabel: { type: String, required: true },
+  isOwner: { type: Boolean, required: true }
+});
+const { $t } = useBlokkli();
+</script>

package/dist/runtime/editor/features/workspace/Overlay/Item.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/workspace/Overlay/index.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/workspace/Overlay/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <SearchOverlay
+    v-slot="{ focusedIndex, onMouseEnter }"
+    v-model:text="searchText"
+    :title="$t('switchPage', 'Switch page')"
+    :total-items="displayItems.length"
+    :is-searching
+    :placeholder="
+  $t('workspaceSearchPlaceholder', 'Search pages', { more: true })
+"
+    :item-height="70"
+    :is-loading="workspaces.isLoading.value"
+    @select="onSelectByIndex"
+    @close="emit('close')"
+  >
+    <Item
+      v-for="(item, i) in displayItems"
+      :key="item.uuid"
+      v-bind="item"
+      :focused="focusedIndex === i"
+      :bundle-label="workspaces.getBundleLabel(item.bundle)"
+      :is-owner="!!(item.uid && item.uid === ownerId)"
+      @mouseenter="onMouseEnter(i)"
+    />
+  </SearchOverlay>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  watch
+} from "#imports";
+import { SearchOverlay } from "#blokkli/editor/components";
+import Item from "./Item.vue";
+const emit = defineEmits(["close"]);
+const { $t, state, workspaces } = useBlokkli();
+const searchText = ref("");
+const fzfResults = ref([]);
+const isSearching = ref(false);
+const ownerId = computed(() => state.owner.value?.id);
+const displayItems = computed(() => {
+  const source = searchText.value.trim() ? fzfResults.value : workspaces.defaultSorted.value;
+  return source.slice(0, 50);
+});
+function onSelectByIndex(index) {
+  const item = displayItems.value[index];
+  if (item) {
+    window.location.href = item.url;
+  }
+}
+let searchTimeout = null;
+watch(searchText, (newValue) => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout);
+    searchTimeout = null;
+  }
+  if (!newValue.trim()) {
+    fzfResults.value = [];
+    isSearching.value = false;
+    return;
+  }
+  isSearching.value = true;
+  const query = newValue.trim();
+  searchTimeout = setTimeout(async () => {
+    if (searchText.value.trim() !== query) {
+      isSearching.value = false;
+      return;
+    }
+    try {
+      const results = await workspaces.search(query);
+      if (searchText.value.trim() === query) {
+        fzfResults.value = results;
+      }
+    } finally {
+      if (searchText.value.trim() === query) {
+        isSearching.value = false;
+      }
+    }
+  }, 150);
+});
+onMounted(() => workspaces.ensureLoaded());
+onBeforeUnmount(() => {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout);
+  }
+});
+</script>

package/dist/runtime/editor/features/workspace/Overlay/index.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/workspace/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/workspace/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div class="bk">
+      <BlokkliTransition name="command-palette">
+        <Overlay v-if="isVisible" @close="isVisible = false" />
+      </BlokkliTransition>
+    </div>
+  </Teleport>
+
+  <PluginToolbarButton
+    id="workspace"
+    :title="$t('switchPage', 'Switch page')"
+    meta
+    key-code="P"
+    no-command
+    region="title"
+    weight="500"
+    icon="bk_mdi_feature_search"
+    class="_bk_relative"
+    @click="isVisible = !isVisible"
+  />
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { PluginToolbarButton } from "#blokkli/editor/plugins";
+import { onBlokkliEvent, useDialog } from "#blokkli/editor/composables";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
+defineBlokkliFeature({
+  id: "workspace",
+  icon: "bk_mdi_workspaces",
+  label: "Workspace",
+  description: "Allows users to switch between edit states.",
+  requiredAdapterMethods: ["getHostEntities"]
+});
+const { $t, ui } = useBlokkli();
+const isVisible = useDialog("workspace", "center");
+onBlokkliEvent("window:clickAway", () => isVisible.value = false);
+</script>
+
+<script>
+export default {
+  name: "Workspace"
+};
+</script>

package/dist/runtime/editor/features/workspace/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/helpers/array/index.d.ts

@@ -0,0 +1 @@
+export declare function getArrayDiff(a: string[], b: string[]): string[];

package/dist/runtime/editor/helpers/array/index.js

@@ -0,0 +1,4 @@
+export function getArrayDiff(a, b) {
+  const setA = new Set(a);
+  return b.filter((item) => !setA.has(item));
+}

package/dist/runtime/editor/helpers/bundles/index.d.ts

@@ -0,0 +1 @@
+export declare function isInternalBundle(bundle: string): boolean;

package/dist/runtime/editor/helpers/bundles/index.js

@@ -0,0 +1,8 @@
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
+const INTERNAL_BUNDLES = [fromLibraryBlockBundle, fragmentBlockBundle];
+export function isInternalBundle(bundle) {
+  return INTERNAL_BUNDLES.includes(bundle);
+}

package/dist/runtime/editor/helpers/clipboardData/index.d.ts

@@ -0,0 +1,11 @@
+export declare class ClipboardData {
+    private html;
+    private text;
+    constructor(data: DataTransfer);
+    hasHtml(): boolean;
+    hasText(): boolean;
+    /** Returns markdown converted from HTML, falling back to plain text. */
+    toMarkdown(): string;
+    /** Returns the raw plain text. */
+    toText(): string;
+}

package/dist/runtime/editor/helpers/clipboardData/index.js

@@ -0,0 +1,157 @@
+function convertNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || "";
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return "";
+  }
+  const el = node;
+  const tag = el.tagName.toLowerCase();
+  const children = Array.from(el.childNodes).map(convertNode).join("");
+  switch (tag) {
+    case "br":
+      return "\n";
+    case "p":
+    case "div":
+      return children + "\n\n";
+    case "strong":
+    case "b":
+      return `**${children}**`;
+    case "em":
+    case "i":
+      return `*${children}*`;
+    case "del":
+    case "s":
+      return `~~${children}~~`;
+    case "code":
+      if (el.parentElement?.tagName.toLowerCase() === "pre") {
+        return children;
+      }
+      return `\`${children}\``;
+    case "pre": {
+      const codeEl = el.querySelector("code");
+      const content = codeEl ? convertNode(codeEl) : children;
+      return `
+\`\`\`
+${content}
+\`\`\`
+`;
+    }
+    case "h1":
+      return `# ${children}
+
+`;
+    case "h2":
+      return `## ${children}
+
+`;
+    case "h3":
+      return `### ${children}
+
+`;
+    case "h4":
+      return `#### ${children}
+
+`;
+    case "h5":
+      return `##### ${children}
+
+`;
+    case "h6":
+      return `###### ${children}
+
+`;
+    case "a": {
+      const href = el.getAttribute("href");
+      return href ? `[${children}](${href})` : children;
+    }
+    case "ul":
+    case "ol":
+      return "\n" + children + "\n";
+    case "li": {
+      const parent = el.parentElement;
+      if (parent?.tagName.toLowerCase() === "ol") {
+        const index = Array.from(parent.children).indexOf(el) + 1;
+        return `${index}. ${children.trim()}
+`;
+      }
+      return `- ${children.trim()}
+`;
+    }
+    case "blockquote":
+      return children.trim().split("\n").map((line) => `> ${line}`).join("\n") + "\n";
+    case "table": {
+      const rows = [];
+      el.querySelectorAll("tr").forEach((tr) => {
+        const cells = [];
+        tr.querySelectorAll("td, th").forEach((cell) => {
+          cells.push(convertNode(cell).replace(/\n/g, " ").trim());
+        });
+        if (cells.length) {
+          rows.push(cells);
+        }
+      });
+      if (!rows.length) return "";
+      const colCount = Math.max(...rows.map((r) => r.length));
+      const colWidths = Array.from(
+        { length: colCount },
+        (_, i) => Math.max(3, ...rows.map((r) => (r[i] || "").length))
+      );
+      const formatRow = (cells) => "| " + colWidths.map((w, i) => (cells[i] || "").padEnd(w)).join(" | ") + " |";
+      const separator = "| " + colWidths.map((w) => "-".repeat(w)).join(" | ") + " |";
+      const [header, ...body] = rows;
+      if (!header) return "";
+      const lines = [formatRow(header), separator];
+      for (const row of body) {
+        lines.push(formatRow(row));
+      }
+      return "\n" + lines.join("\n") + "\n";
+    }
+    case "thead":
+    case "tbody":
+    case "tfoot":
+    case "colgroup":
+    case "col":
+    case "tr":
+    case "td":
+    case "th":
+    case "caption":
+      return children;
+    case "hr":
+      return "\n---\n";
+    case "style":
+    case "script":
+      return "";
+    default:
+      return children;
+  }
+}
+function htmlToMarkdown(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return convertNode(doc.body).replace(/\n{3,}/g, "\n\n").trim();
+}
+export class ClipboardData {
+  html;
+  text;
+  constructor(data) {
+    this.html = data.getData("text/html");
+    this.text = data.getData("text/plain");
+  }
+  hasHtml() {
+    return !!this.html;
+  }
+  hasText() {
+    return !!this.text;
+  }
+  /** Returns markdown converted from HTML, falling back to plain text. */
+  toMarkdown() {
+    if (this.html) {
+      return htmlToMarkdown(this.html);
+    }
+    return this.text;
+  }
+  /** Returns the raw plain text. */
+  toText() {
+    return this.text;
+  }
+}

package/dist/runtime/editor/helpers/color/index.d.ts

@@ -0,0 +1,13 @@
+import type { RGB } from './../../../../global/types/theme.js';
+export declare function toShaderColor(rgba: RGB): RGB;
+export declare const rgbaToString: (color: RGB, alpha?: number) => string;
+export declare function getContrastRatio(color1: RGB, color2: RGB): number;
+export declare function findHighestContrastColor(colors: RGB[], backgroundColor?: RGB): RGB;
+export declare const hexToRgb: (hex: string) => RGB | undefined;
+/**
+ * Whether the given hex color is "light" — i.e. dark text on top of it would
+ * be more readable than light text. Use this to decide between black/white
+ * foreground content on a colored background. Unparseable hex → `false`.
+ */
+export declare const isLightHex: (hex: string) => boolean;
+export declare const parseColorString: (color: string) => RGB | undefined;

package/dist/runtime/editor/helpers/color/index.js

@@ -0,0 +1,62 @@
+export function toShaderColor(rgba) {
+  return rgba.map((v) => v / 255);
+}
+export const rgbaToString = (color, alpha = 1) => `rgba(${[...color, alpha].join(", ")})`;
+export function getContrastRatio(color1, color2) {
+  const luminance1 = getLuminance(color1);
+  const luminance2 = getLuminance(color2);
+  const lighter = Math.max(luminance1, luminance2);
+  const darker = Math.min(luminance1, luminance2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getLuminance(color) {
+  const [r, g, b] = color.map((val) => {
+    val /= 255;
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function findHighestContrastColor(colors, backgroundColor = [255, 255, 255]) {
+  let maxContrast = 0;
+  let maxContrastColor = colors[0];
+  for (const color of colors) {
+    const contrast = getContrastRatio(color, backgroundColor);
+    if (contrast > maxContrast) {
+      maxContrast = contrast;
+      maxContrastColor = color;
+    }
+  }
+  return maxContrastColor;
+}
+export const hexToRgb = (hex) => {
+  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!match) return;
+  return [
+    Number.parseInt(match[1], 16),
+    Number.parseInt(match[2], 16),
+    Number.parseInt(match[3], 16)
+  ];
+};
+export const isLightHex = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return false;
+  return getContrastRatio(rgb, [0, 0, 0]) > getContrastRatio(rgb, [255, 255, 255]);
+};
+export const parseColorString = (color) => {
+  const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(0|1|0?\.\d+))?\)$/;
+  const match = color.match(rgbaRegex);
+  if (!match) {
+    return;
+  }
+  const r = Number.parseInt(match[1]);
+  const g = Number.parseInt(match[2]);
+  const b = Number.parseInt(match[3]);
+  const a = match[4] !== void 0 ? Number.parseFloat(match[4]) : 1;
+  if ([r, g, b, a].some((val) => Number.isNaN(val))) {
+    throw new Error("Invalid color values");
+  }
+  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+    return;
+  }
+  return [r, g, b];
+};

package/dist/runtime/editor/helpers/date/index.d.ts

@@ -0,0 +1 @@
+export declare function isValidDate(d: Date): boolean;

package/dist/runtime/editor/helpers/date/index.js

@@ -0,0 +1,3 @@
+export function isValidDate(d) {
+  return d instanceof Date && !isNaN(+d);
+}

package/dist/runtime/editor/helpers/diff/index.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Compute an inline HTML diff between two strings.
+ *
+ * For content with block-level HTML elements (p, h1-h6, etc.), aligns blocks
+ * by tag name and diffs within each block individually, preventing diff markers
+ * from crossing element boundaries.
+ *
+ * For plain text or inline-only HTML, uses flat word-level diffing with
+ * post-processing to merge long runs of consecutive modifications.
+ */
+export declare function computeDiff(before: string, after: string): string;
+/**
+ * Render the new value entirely as an insertion, with no deletions.
+ *
+ * Used when diffing against the original is pointless — e.g. translations,
+ * where virtually the whole text changes and an interleaved del/ins diff is
+ * just noise. The result reuses the same <ins> markup as computeDiff, so the
+ * approval preview styling is identical.
+ *
+ * Block-level HTML is preserved by wrapping each block's inner content in
+ * <ins> rather than wrapping the block tags themselves.
+ */
+export declare function computeInsertion(after: string): string;
+/**
+ * One chunk of a field's diff that can be individually accepted or rejected
+ * by the user. A markup field becomes an ordered list of segments; lists
+ * (<ul>/<ol>) become a `list` segment whose children are the individual
+ * <li> atoms.
+ *
+ * Acceptance semantics (see `reassembleValue`):
+ * - matched: accepted → afterHtml, rejected → beforeHtml
+ * - inserted: accepted → keep, rejected → drop
+ * - deleted: accepted → drop (matches after), rejected → restore (matches before)
+ */
+export type AtomicSegment = {
+    kind: 'atomic';
+    id: string;
+    tag: string;
+    openTag: string;
+    closeTag: string;
+    beforeHtml: string;
+    afterHtml: string;
+    changed: boolean;
+    status: 'matched' | 'inserted' | 'deleted';
+};
+export type ListSegment = {
+    kind: 'list';
+    id: string;
+    tag: 'ul' | 'ol';
+    openTag: string;
+    closeTag: string;
+    children: AtomicSegment[];
+};
+export type Segment = AtomicSegment | ListSegment;
+/**
+ * Split a before/after value pair into chunks the user can individually
+ * accept or reject. Returns null when chunk-level approval can't apply:
+ *
+ * - non-markup fields
+ * - either side contains inline-only HTML or stray top-level text
+ *   (`parseBlocks` returns null)
+ * - both sides empty
+ *
+ * Two-level structure: top-level block alignment, then a one-level recurse
+ * into matched <ul>/<ol> blocks whose innerHTML differs. <li> is the leaf.
+ *
+ * Used for both rewrites (word-diff preview) and translations
+ * (insertion-only preview). The difference is at the renderer.
+ */
+export declare function splitIntoSegments(before: string, after: string, fieldType: 'plain' | 'markup'): Segment[] | null;
+/**
+ * True when at least one segment (or list child) actually changes. Use to
+ * skip the approval row for fields where the proposed value already matches
+ * the current value chunk-for-chunk.
+ */
+export declare function segmentsHaveChanges(segments: Segment[]): boolean;
+/**
+ * Render segments as preview HTML with `data-chunk-index` attributes on each
+ * atomic block, so the approval UI can locate each chunk's DOM bounds. The
+ * resulting markup replaces the editable's innerHTML during preview, just
+ * like `computeDiff` / `computeInsertion`.
+ *
+ * `insertionsOnly` matches the existing prop on DiffApproval — translations
+ * render new content as a single <ins> per leaf, rewrites render word-diffs.
+ *
+ * `acceptedById` (optional) makes the preview track per-segment acceptance:
+ * rejected matched segments render their original content with no markers,
+ * rejected insertions render as deletions, rejected deletions render plain.
+ * Defaults to "all accepted" when omitted (initial render).
+ */
+export declare function renderSegmentDiff(segments: Segment[], opts?: {
+    insertionsOnly?: boolean;
+    acceptedById?: Record<string, boolean>;
+}): string;
+/**
+ * Reassemble a field value from segments using per-segment acceptance.
+ * Acceptance defaults to `true` for any unmapped segment id, mirroring the
+ * DiffApproval initial state.
+ *
+ * For `list` segments the wrapper is emitted only when at least one child
+ * survives — accepting a full deletion of every item drops the list itself.
+ */
+export declare function reassembleValue(segments: Segment[], acceptedById: Record<string, boolean>): string;
+/**
+ * Walk a segment list and return every atomic segment in reading order,
+ * including those inside list wrappers. Used by the approval UI for
+ * keyboard nav, selection initialisation, and the rejected-segments
+ * feedback to the agent.
+ */
+export declare function flattenSegments(segments: Segment[]): AtomicSegment[];