@revenexx/editor 0.1.0

package/dist/runtime/editor/features/fragments/Dialog/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/fragments/docs.md

@@ -0,0 +1,101 @@
+## Overview
+
+The fragments feature implements a way to create non-editable content fragments
+that can be placed on multiple pages. A fragment can be anything from a simple
+button to a complex section, for example:
+
+- CTA section with title, lead and CTA button
+- Pricing table
+- Table of contents
+- Contact form
+
+A fragment is entirely defined by your app and does not have to rely on data
+from your backend.
+
+In the background, a fragment is rendered using the special `blokkli_fragment`
+block bundle. For fragments to work your backend must provide a block of this
+bundle. The block stores the `name` of the fragment.
+
+## Defining fragments
+
+Defining a fragment is similar to defining a normal block component. But instead
+of `defineBlokkli` you have to use `defineBlokkliFragment`:
+
+```vue
+<template>
+  <div>
+    <h2>This is my fragment!</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineBlokkliFragment({
+  name: 'my_demo_fragment',
+  label: 'My Demo Fragment',
+  description: 'Renders a simple text.',
+  editor: {
+    previewWidth: 1200,
+  },
+})
+</script>
+```
+
+The argument of the composable is similar to the one of `defineBlokkli`, but
+instead of `bundle` you define both a `name` and `label` (both are required) and
+an option `description`. Other properties like `options`, `globalOptions` or
+`editor` are also available.
+
+## Data structure
+
+For blökkli to render the correct fragment a block of bundle `blokkli_fragment`
+must exist.
+
+To render a fragment, the following data structure is needed:
+
+::: code-group
+
+```vue [~/pages/example.vue]
+<template>
+  <BlokkliProvider
+    entity-type="content"
+    entity-bundle="blog_post"
+    entity-uuid="1"
+  >
+    <BlokkliField :list="blocks" name="blocks" />
+  </BlokkliProvider>
+</template>
+
+<script lang="ts" setup>
+const blocks = [
+  {
+    uuid: '9485812c-0ecd-4699-85b2-3a031d47a0a1',
+    bundle: 'blokkli_fragment',
+    props: {
+      name: 'my_demo_fragment',
+    },
+  },
+]
+</script>
+```
+
+:::
+
+The block must provide the name of the fragment as the only prop. blökkli will
+then render the fragment component that matches this name.
+
+Options work as you would expect:
+
+```typescript
+const blocks = [
+  {
+    uuid: '9485812c-0ecd-4699-85b2-3a031d47a0a1',
+    bundle: 'blokkli_fragment',
+    options: {
+      myDemoOption: true,
+    },
+    props: {
+      name: 'my_demo_fragment',
+    },
+  },
+]
+```

package/dist/runtime/editor/features/fragments/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/fragments/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-in">
+      <FragmentsDialog
+        v-if="placedAction"
+        :field="placedAction.field"
+        @close="placedAction = null"
+        @submit="onAddFragment"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { defineAddAction } from "#blokkli/editor/composables";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const FragmentsDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
+const { adapter } = defineBlokkliFeature({
+  id: "fragments",
+  icon: "bk_mdi_newspaper",
+  label: "Fragments",
+  description: "Provides way to add content fragments defined by the frontend.",
+  requiredAdapterMethods: ["fragmentsAddBlock"]
+});
+const { state, $t, types, dom, ui, permissions } = useBlokkli();
+const canAddFragment = computed(
+  () => permissions.checkBlockBundlePermission(fragmentBlockBundle, "add")
+);
+const placedAction = ref(null);
+const onAddFragment = async (name) => {
+  if (!placedAction.value || !adapter.fragmentsAddBlock) {
+    return;
+  }
+  await state.mutateWithLoadingState(
+    () => adapter.fragmentsAddBlock({
+      name,
+      host: placedAction.value.host,
+      preceedingUuid: placedAction.value.preceedingUuid
+    })
+  );
+  placedAction.value = null;
+};
+const isSupportedOnEntity = computed(
+  () => types.generallyAvailableBundles.find((v) => v.id === fragmentBlockBundle)
+);
+defineAddAction(() => {
+  if (!isSupportedOnEntity.value || !canAddFragment.value) {
+    return;
+  }
+  return {
+    id: "fragment",
+    icon: "bk_mdi_newspaper",
+    color: "accent",
+    itemBundle: fragmentBlockBundle,
+    title: $t("fragmentsAddFragmentAction", "Fragment"),
+    weight: 20,
+    description: $t(
+      "fragmentsAddFragmentDescription",
+      "<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>"
+    ),
+    callback: (action) => {
+      placedAction.value = action;
+    },
+    enabled: (item) => {
+      const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
+      return !!field?.allowedFragments.length;
+    }
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Fragments"
+};
+</script>

package/dist/runtime/editor/features/fragments/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/features/fragments/types.d.ts

@@ -0,0 +1,15 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+export type AdapterFragmentsAddBlock = {
+    name: string;
+    host: BlokkliItemHost;
+    preceedingUuid: string | null;
+    options?: Record<string, string>;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Add a fragment block.
+         */
+        fragmentsAddBlock?: (e: AdapterFragmentsAddBlock) => Promise<MutationResponseLike<T>> | undefined;
+    }
+}

package/dist/runtime/editor/features/grid/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/grid/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="isVisible" class="bk-grid-overlay" v-html="gridMarkup" />
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { defineViewOption } from "#blokkli/editor/composables";
+const { adapter } = defineBlokkliFeature({
+  id: "grid",
+  label: "Grid",
+  icon: "bk_mdi_grid_view",
+  requiredAdapterMethods: ["getGridMarkup"],
+  description: "Provides a view option to render a grid.",
+  viewports: ["desktop"]
+});
+const gridMarkup = await Promise.resolve(adapter.getGridMarkup());
+const { $t } = useBlokkli();
+const { isVisible } = defineViewOption({
+  id: "grid",
+  label: $t("viewOptionGrid", "Grid"),
+  description: $t(
+    "viewOptionGridDescription",
+    "Shows a layout grid overlay on top of the page."
+  ),
+  tourText: $t(
+    "gridTourText",
+    "Display a layout grid overlay on top of the page."
+  ),
+  keyCode: "G",
+  icon: "bk_mdi_grid_view"
+});
+</script>
+
+<script>
+export default {
+  name: "Grid"
+};
+</script>

package/dist/runtime/editor/features/grid/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/features/grid/types.d.ts

@@ -0,0 +1,9 @@
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Return the HTML markup for displaying the grid.
+         */
+        getGridMarkup?: () => Promise<string> | string;
+    }
+}
+export {};

package/dist/runtime/editor/features/grid/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/help/Dialog/index.d.vue.ts

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

package/dist/runtime/editor/features/help/Dialog/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <DialogModal
+    id="help"
+    :title="$t('featureHelpTitle', 'Help')"
+    hide-buttons
+    icon="bk_mdi_help"
+    mono
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk bk-help">
+      <div v-if="isTourEnabled" class="bk-help-section">
+        <button
+          class="bk-button bk-scheme-yellow bk-is-fullwidth"
+          :disabled="tour.isTouring.value"
+          @click="onStartTour"
+        >
+          {{ $t("tourLabel", "Take a tour") }}
+        </button>
+      </div>
+      <div class="bk-help-section">
+        <h3>{{ $t("featureHelpShortcuts", "Shortcuts") }}</h3>
+        <Shortcuts />
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { useBlokkli, computed, defineAsyncComponent } from "#imports";
+import { DialogModal } from "#blokkli/editor/components";
+const Shortcuts = defineAsyncComponent(() => import("../Shortcuts/index.vue"));
+const { $t, features, tour } = useBlokkli();
+const emit = defineEmits(["cancel"]);
+const isTourEnabled = computed(
+  () => features.mountedFeatures.value.find((v) => v.id === "tour")
+);
+function onStartTour() {
+  tour.isTouring.value = true;
+  emit("cancel");
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-help {
+  padding: 20px;
+  container-type: inline-size;
+}
+:is(.bk.bk-help .bk-help-section):not(:last-child) {
+  margin-bottom: 20px;
+}
+:is(.bk.bk-help .bk-help-section)  > h3 {
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+</style>

package/dist/runtime/editor/features/help/Dialog/index.vue.d.ts

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

package/dist/runtime/editor/features/help/Shortcuts/index.d.vue.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/help/Shortcuts/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="bk-help-shortcuts">
+    <table>
+      <tbody>
+        <!-- eslint-disable-next-line vue/no-v-for-template-key -->
+        <template v-for="group in groups" :key="group.group">
+          <tr class="bk-is-heading">
+            <th colspan="2">{{ group.group }}</th>
+          </tr>
+          <tr v-for="(shortcut, i) in group.shortcuts" :key="group.group + i">
+            <td>
+              <ShortcutIndicator
+                view-only
+                :meta="shortcut.meta"
+                :shift="shortcut.shift"
+                :key-code="shortcut.code"
+                :label="shortcut.label"
+              />
+            </td>
+            <td>{{ shortcut.label }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { ShortcutIndicator } from "#blokkli/editor/components";
+const { keyboard, $t } = useBlokkli();
+const getGroupLabel = (key) => {
+  if (key === "general") {
+    return $t("shortcutGroupGeneral", "General");
+  } else if (key === "blocks") {
+    return $t("shortcutGroupBlocks", "Blocks");
+  } else if (key === "ui") {
+    return $t("shortcutGroupUi", "UI");
+  }
+  return key;
+};
+const groups = computed(() => {
+  return Object.values(
+    keyboard.shortcuts.value.reduce((acc, v) => {
+      const group = getGroupLabel(v.shortcut.group || "general");
+      if (!acc[group]) {
+        acc[group] = {
+          group,
+          shortcuts: []
+        };
+      }
+      acc[group].shortcuts.push(v.shortcut);
+      return acc;
+    }, {})
+  ).map((group) => {
+    group.shortcuts.sort((a, b) => a.code.localeCompare(b.code));
+    return group;
+  });
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk .bk-help-shortcuts) table {
+  width: 100%;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+@container (min-width: 500px) {
+  :is(.bk .bk-help-shortcuts) table {
+    font-size: var(--text-lg, 18px);
+    line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  }
+}
+:is(:is(:is(.bk .bk-help-shortcuts) table) .bk-shortcut)  > kbd {
+  border-style: var(--bk-tw-border-style) !important;
+  border-width: 1px !important;
+  border-color: rgb(var(--bk-theme-mono-300) / 1) !important;
+  background-color: rgb(var(--bk-theme-mono-100) / 1) !important;
+  color: rgb(var(--bk-theme-mono-800) / 1) !important;
+}
+@container (min-width: 500px) {
+  :is(:is(.bk .bk-help-shortcuts) table) .bk-shortcut {
+    font-size: var(--text-base, 16px);
+    line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  }
+  :is(:is(:is(.bk .bk-help-shortcuts) table) .bk-shortcut)  > kbd {
+    font-size: var(--text-base, 16px);
+    line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  }
+}
+:is(:is(.bk .bk-help-shortcuts) table) tr {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk-is-heading:is(:is(:is(.bk .bk-help-shortcuts) table) tr) {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 2px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(:is(.bk .bk-help-shortcuts) table) th {
+  padding-top: 30px;
+  padding-bottom: 10px;
+  text-align: left;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-900) / 1);
+  text-transform: uppercase;
+}
+:is(:is(.bk .bk-help-shortcuts) table) td {
+  padding-block: 10px;
+}
+:is(:is(:is(.bk .bk-help-shortcuts) table) td):first-child {
+  width: 0;
+  padding-right: 10px;
+}
+</style>

package/dist/runtime/editor/features/help/Shortcuts/index.vue.d.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/help/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/help/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <HelpDialog v-if="showDialog" @cancel="onClose" />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import {
+  defineMenuButton,
+  defineShortcut,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
+const HelpDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
+defineBlokkliFeature({
+  id: "help",
+  icon: "bk_mdi_help",
+  label: "Help",
+  description: "Provides a menu button to display a dialog with shortcuts and a link to the editor tour.",
+  viewports: ["desktop"]
+});
+const { $t, ui } = useBlokkli();
+const showDialog = computed(() => ui.currentDialog.value?.id === "help");
+function onOpen() {
+  ui.openDialog({ id: "help", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("help");
+}
+defineMenuButton(() => {
+  return {
+    id: "help",
+    title: $t("featureHelpTitle", "Help"),
+    description: $t("helpMenuDescription", "View available keyboard shortcuts"),
+    icon: "bk_mdi_help",
+    secondary: true,
+    callback: onOpen
+  };
+});
+defineShortcut({
+  code: "F1",
+  label: $t("featureHelpTitle", "Help")
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "F1") {
+    return;
+  }
+  if (ui.hasNestedEditorOpen.value) {
+    return;
+  }
+  if (ui.hasDialogOpen.value && !showDialog.value) {
+    return;
+  }
+  e.originalEvent.preventDefault();
+  if (showDialog.value) {
+    onClose();
+  } else {
+    onOpen();
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "Help"
+};
+</script>

package/dist/runtime/editor/features/help/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/features/highlights/Renderer/fragment.glsl

@@ -0,0 +1,89 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 v_quad;
+in vec3 v_color1;
+in vec3 v_color2;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_border_factor;
+in vec2 v_rect_size_artboard;
+in float v_active;
+
+out vec4 fragColor;
+
+uniform float u_dpi;
+uniform float u_scale;
+uniform float u_opacity;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  float borderThickness = (1.5 + v_active * 1.5) * u_dpi * v_border_factor;
+  vec2 size = v_rect_size;
+  vec4 radius = vec4(0.0);
+  float borderSoftness = 1.0;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  // Signed distance to the outer edge of the border.
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
+
+  // Border alpha (band around the edge).
+  float borderAlpha =
+    1.0 -
+    smoothstep(-borderSoftness, 0.0, abs(mainDist) - borderThickness);
+
+  // Determine border color: striped if two different colors, solid otherwise.
+  // Calculate perimeter distance in artboard space for scale-independent stripes.
+  vec2 viewportToArtboardRatio = v_rect_size_artboard / v_rect_size;
+  vec2 posRelativeToQuad_artboard = posRelativeToQuad * viewportToArtboardRatio;
+  vec2 halfSize_artboard = v_rect_size_artboard / 2.0;
+  vec2 posFromTopLeft = posRelativeToQuad_artboard + halfSize_artboard;
+  vec2 p = clamp(posFromTopLeft, vec2(0.0), v_rect_size_artboard);
+
+  float perimeterDistance = 0.0;
+  float width = v_rect_size_artboard.x;
+  float height = v_rect_size_artboard.y;
+
+  vec2 absP = abs(posRelativeToQuad_artboard);
+  float dx = absP.x - halfSize_artboard.x;
+  float dy = absP.y - halfSize_artboard.y;
+
+  if (dy > dx) {
+    if (posRelativeToQuad_artboard.y > 0.0) {
+      perimeterDistance = p.x;
+    } else {
+      perimeterDistance = height + p.x;
+    }
+  } else {
+    if (posRelativeToQuad_artboard.x < 0.0) {
+      perimeterDistance = height - p.y;
+    } else {
+      perimeterDistance = width + (height - p.y);
+    }
+  }
+
+  // Stripe pattern: alternate between color1 and color2 along perimeter.
+  float stripeLength = 14.0 - u_scale;
+  float stripePhase = mod(perimeterDistance, stripeLength * 2.0);
+  vec3 borderColor = stripePhase < stripeLength ? v_color1 : v_color2;
+
+  vec4 finalColor = vec4(borderColor, borderAlpha);
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
+}

package/dist/runtime/editor/features/highlights/Renderer/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>;