@shwfed/config 2.11.0 → 2.11.4

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/config.vue

@@ -0,0 +1,349 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
+import { Schema } from "effect";
+import { Icon } from "@iconify/vue";
+import { registerLoopVariablesIfAbsent } from "../../../../../share/loop-item-var";
+import BlockLayoutEditor from "../../../../block-layout-editor/index.vue";
+import LayoutsSidebar from "../../../../block-layout-editor/sidebar.vue";
+import LayoutMetaStrip from "../../../../block-layout-editor/meta-strip.vue";
+import { Button } from "../../../../ui/button";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
+import { Markdown } from "../../../../ui/markdown";
+import { ScrollArea } from "../../../../ui/scroll-area";
+import { Separator } from "../../../../ui/separator";
+import { BREADCRUMB_EXTENSION_KEY } from "../../../breadcrumb-extension";
+import { findBlock } from "../../../utils/resolve";
+import { useSlotEditor, useSlotClipboard } from "../../../use-editor";
+import LoopScopeProvider from "./loop-scope-provider.vue";
+import {
+  getStructFieldDescription,
+  getStructFieldTitle,
+  schema
+} from "./schema";
+defineOptions({ name: "ShwfedBlockLoopConfig" });
+const block = defineModel({ type: null, ...{ required: true } });
+const props = defineProps({
+  configure: { type: Function, required: false }
+});
+const configure = computed(() => props.configure ?? (() => {
+}));
+const itemConfigure = (env) => {
+  configure.value(env);
+  registerLoopVariablesIfAbsent(env);
+};
+const blockSchema = schema(() => {
+}, Schema.Any);
+const fieldTitle = (f) => getStructFieldTitle(blockSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(blockSchema, f);
+const slotAccessor = computed({
+  get: () => block.value.slot,
+  set: (next) => {
+    block.value = { ...block.value, slot: next };
+  }
+});
+const editor = useSlotEditor(slotAccessor, { configure: itemConfigure });
+const { copy: copyBlocks, paste: pasteBlocks } = useSlotClipboard(editor);
+const viewMode = ref("general");
+function selectContent() {
+  viewMode.value = "content";
+  drilledBlockId.value = null;
+}
+function selectGeneral() {
+  viewMode.value = "general";
+  drilledBlockId.value = null;
+}
+function setDisplayName(v) {
+  const s = String(v ?? "");
+  block.value = { ...block.value, displayName: s.length > 0 ? s : void 0 };
+}
+function setItems(v) {
+  block.value = { ...block.value, items: v };
+}
+function setStyle(v) {
+  block.value = { ...block.value, style: v.trim().length > 0 ? v : void 0 };
+}
+function selectLayout(index) {
+  editor.activeLayoutIndex.value = index;
+  viewMode.value = "content";
+  drilledBlockId.value = null;
+}
+function addLayout() {
+  const cur = editor.layouts.value;
+  editor.layouts.value = [
+    ...cur,
+    { name: "\u65B0\u5E03\u5C40", layout: { columns: 1, placements: {} } }
+  ];
+  editor.activeLayoutIndex.value = cur.length;
+  viewMode.value = "content";
+}
+function addBlock(entry, options) {
+  editor.addBlock(entry, options);
+}
+const drilledBlockId = ref(null);
+const drilledBlock = computed(() => {
+  const id = drilledBlockId.value;
+  if (!id) return null;
+  return editor.blocks.value.find((b) => b.id === id) ?? null;
+});
+const drilledEntry = computed(() => {
+  const b = drilledBlock.value;
+  return b ? findBlock(b.type, b.compatibilityDate) ?? null : null;
+});
+function onDrillDown(id) {
+  drilledBlockId.value = id;
+}
+function popDrill() {
+  drilledBlockId.value = null;
+}
+watch(
+  () => editor.blocks.value.map((b) => b.id),
+  (ids) => {
+    const id = drilledBlockId.value;
+    if (id && !ids.includes(id)) drilledBlockId.value = null;
+  }
+);
+function updateDrilledBlock(next) {
+  const id = drilledBlockId.value;
+  if (!id) return;
+  editor.updateBlock(id, next);
+}
+const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
+if (breadcrumbExt) {
+  const blockCrumb = breadcrumbExt.add();
+  watch(
+    drilledBlock,
+    (drilled) => {
+      if (drilled) {
+        blockCrumb.label.value = editor.getBlockLabel(drilled);
+        blockCrumb.back.value = popDrill;
+      } else {
+        blockCrumb.label.value = null;
+        blockCrumb.back.value = null;
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    blockCrumb.dispose();
+  });
+}
+</script>
+
+<template>
+  <div class="flex min-w-0 gap-2 min-h-128">
+    <!-- Left rail: setting rows (top) + the slot's layouts (bottom). Hidden
+         while drilled into a child block so the drilled view owns the width. -->
+    <div
+      v-if="!drilledBlockId"
+      class="flex w-56 shrink-0 flex-col"
+    >
+      <div
+        class="row pl-2"
+        :class="viewMode === 'general' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-700 hover:bg-zinc-50'"
+        @click="selectGeneral()"
+      >
+        <Icon
+          icon="fluent:settings-20-regular"
+          class="size-4 shrink-0"
+        />
+        <span class="flex-1 truncate">通用配置</span>
+      </div>
+
+      <div
+        class="row pl-2"
+        :class="viewMode === 'content' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-700 hover:bg-zinc-50'"
+        @click="selectContent()"
+      >
+        <Icon
+          icon="fluent:apps-list-20-regular"
+          class="size-4 shrink-0"
+        />
+        <span class="flex-1 truncate">内容</span>
+      </div>
+
+      <Separator class="my-2" />
+
+      <!-- Layouts of the slot -->
+      <div class="flex flex-1 min-h-0 flex-col">
+        <ScrollArea class="flex-1">
+          <LayoutsSidebar
+            :model-value="editor.layouts.value"
+            :active-index="editor.activeLayoutIndex.value"
+            @update:model-value="(v) => {
+  editor.layouts.value = v;
+}"
+            @update:active-index="selectLayout"
+          />
+        </ScrollArea>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="w-full justify-start"
+          @click="addLayout()"
+        >
+          <Icon
+            icon="fluent:add-20-regular"
+            class="size-4"
+          />
+          <span>新增布局</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Right pane -->
+    <div class="flex min-w-0 flex-1 flex-col gap-3">
+      <!-- Drilled into a child block. Deliberately NOT wrapped in
+           LoopScopeProvider and given the bare page `configure`: a nested block's
+           own CEL fields are validated at decode against the page's ROOT
+           configure (the block union is pre-built there, without item/index), so
+           advertising item/index here would be green-in-editor / red-on-save.
+           The drilled child sees only the page context — matching what its fields
+           can actually save. (item/index reach inner blocks at runtime via
+           loop-item.vue, and inner markdown `{{ }}` interpolation is freeform, so
+           the headline use case still works.) -->
+      <template v-if="drilledBlockId">
+        <div
+          v-if="!drilledBlock"
+          class="flex min-h-96 items-center justify-center p-8 text-sm text-zinc-400"
+        >
+          块已不存在
+        </div>
+        <div v-else-if="drilledEntry">
+          <component
+            :is="drilledEntry.config"
+            :model-value="drilledBlock"
+            :configure="configure"
+            @update:model-value="(next) => updateDrilledBlock(next)"
+          />
+        </div>
+        <div
+          v-else
+          class="p-6 text-sm text-red-500"
+        >
+          未注册的块类型：{{ drilledBlock.type }}@{{ drilledBlock.compatibilityDate }}
+        </div>
+      </template>
+
+      <!-- General block-level settings — `items` / `style` evaluate at page
+           scope, so this branch is deliberately OUTSIDE LoopScopeProvider. -->
+      <template v-else-if="viewMode === 'general'">
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('displayName')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('displayName')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("displayName") }}
+          </FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              :model-value="block.displayName ?? ''"
+              placeholder="例：流转意见"
+              @update:model-value="setDisplayName"
+            />
+          </InputGroup>
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('items')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('items')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("items") }}
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="block.items"
+            placeholder="返回列表的表达式，如 task.flowExecuteRecordList.filter(n, n.taskStatus == 'DONE')"
+            multiline
+            class="min-h-16"
+            @update:model-value="(v) => setItems(v)"
+          />
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('style')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('style')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("style") }}
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="block.style ?? ''"
+            placeholder="可选；返回 CSS 字符串或样式对象的表达式，如 'gap: 1.5rem'"
+            multiline
+            class="min-h-12"
+            @update:model-value="(v) => setStyle(v)"
+          />
+        </Field>
+      </template>
+
+      <!-- Content: slot layout editor — wrapped so the layout `media` editor
+           (in the meta-strip) advertises `item` / `index`. The inner slot
+           registers them via `itemConfigure`, so decode accepts a media like
+           `index == 0`; this keeps that editor consistent with the save. -->
+      <LoopScopeProvider v-else>
+        <LayoutMetaStrip
+          :model-value="editor.layouts.value"
+          :index="editor.activeLayoutIndex.value"
+          @update:model-value="(v) => {
+  editor.layouts.value = v;
+}"
+        />
+        <div class="flex-1">
+          <BlockLayoutEditor
+            :model-value="editor.layouts.value"
+            :active-index="editor.activeLayoutIndex.value"
+            :selected-item-ids="editor.selectedBlockIds.value"
+            :items="editor.blocks.value"
+            :find-entry="editor.findBlockMeta"
+            :get-item-label="editor.getBlockLabel"
+            :picker-entries="editor.pickerEntries.value"
+            :can-delete="true"
+            item-noun="块"
+            @update:model-value="(v) => {
+  editor.layouts.value = v;
+}"
+            @update:active-index="(v) => {
+  editor.activeLayoutIndex.value = v;
+}"
+            @update:selected-item-ids="(v) => {
+  editor.selectedBlockIds.value = v;
+}"
+            @add-new="addBlock"
+            @drill-down="onDrillDown"
+            @delete-item="(id) => editor.removeBlock(id)"
+            @delete-items="(ids) => editor.removeBlocks(ids)"
+            @copy-items="copyBlocks"
+            @paste="pasteBlocks"
+          />
+        </div>
+      </LoopScopeProvider>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.row{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;font-size:.875rem;gap:.375rem;padding-block:.375rem;padding-left:.5rem;padding-right:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/config.vue.d.ts

@@ -0,0 +1,70 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import { type Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly type: "com.shwfed.block.loop";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly slot: {
+            readonly blocks: readonly any[];
+            readonly layouts: readonly {
+                readonly name: string;
+                readonly layout: {
+                    readonly style?: string | undefined;
+                    readonly columns: number;
+                    readonly gap?: number | undefined;
+                    readonly rows?: number | undefined;
+                    readonly placements: {
+                        readonly [x: string]: {
+                            readonly area: readonly [readonly [number, number], readonly [number, number]];
+                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                        };
+                    };
+                };
+                readonly media?: string | undefined;
+            }[];
+        };
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-25";
+        readonly items: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly type: "com.shwfed.block.loop";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly slot: {
+            readonly blocks: readonly any[];
+            readonly layouts: readonly {
+                readonly name: string;
+                readonly layout: {
+                    readonly style?: string | undefined;
+                    readonly columns: number;
+                    readonly gap?: number | undefined;
+                    readonly rows?: number | undefined;
+                    readonly placements: {
+                        readonly [x: string]: {
+                            readonly area: readonly [readonly [number, number], readonly [number, number]];
+                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                        };
+                    };
+                };
+                readonly media?: string | undefined;
+            }[];
+        };
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-25";
+        readonly items: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-item.d.vue.ts

@@ -0,0 +1,33 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { SlotValue } from '../../../../../share/layout.js';
+type __VLS_Props = {
+    item: unknown;
+    index: number;
+    slotValue: SlotValue;
+    configure?: (env: Environment) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:slotValue": (next: Readonly<{
+        blocks: ReadonlyArray<Readonly<{
+            id: string;
+        } & Record<string, unknown>>>;
+        layouts: readonly Readonly<{
+            name: string;
+            media?: string;
+            layout: import("../../../../form/schema.js").LayoutValue;
+        }>[];
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:slotValue"?: ((next: Readonly<{
+        blocks: ReadonlyArray<Readonly<{
+            id: string;
+        } & Record<string, unknown>>>;
+        layouts: readonly Readonly<{
+            name: string;
+            media?: string;
+            layout: import("../../../../form/schema.js").LayoutValue;
+        }>[];
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-item.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { provideCELContext } from "../../../../../utils/cel-context";
+import SlotRenderer from "../../../../../share/slot-renderer.vue";
+import { findBlock } from "../../../utils/resolve";
+defineOptions({ name: "ShwfedBlockLoopItem" });
+const props = defineProps({
+  item: { type: null, required: true },
+  index: { type: Number, required: true },
+  slotValue: { type: Object, required: true },
+  configure: { type: Function, required: false }
+});
+const emit = defineEmits(["update:slotValue"]);
+provideCELContext({
+  item: {
+    type: "dyn",
+    label: "item",
+    description: "\u5F53\u524D\u5FAA\u73AF\u9879",
+    value: () => props.item
+  },
+  index: {
+    type: "number",
+    label: "index",
+    description: "\u5F53\u524D\u5FAA\u73AF\u9879\u7D22\u5F15\uFF0C\u4ECE 0 \u5F00\u59CB",
+    value: () => props.index
+  }
+});
+</script>
+
+<template>
+  <SlotRenderer
+    :slot-value="slotValue"
+    :configure="configure ?? (() => {
+})"
+    :find-entry="findBlock"
+    @update:slot-value="(s) => emit('update:slotValue', s)"
+  />
+</template>

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-item.vue.d.ts

@@ -0,0 +1,33 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { SlotValue } from '../../../../../share/layout.js';
+type __VLS_Props = {
+    item: unknown;
+    index: number;
+    slotValue: SlotValue;
+    configure?: (env: Environment) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:slotValue": (next: Readonly<{
+        blocks: ReadonlyArray<Readonly<{
+            id: string;
+        } & Record<string, unknown>>>;
+        layouts: readonly Readonly<{
+            name: string;
+            media?: string;
+            layout: import("../../../../form/schema.js").LayoutValue;
+        }>[];
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:slotValue"?: ((next: Readonly<{
+        blocks: ReadonlyArray<Readonly<{
+            id: string;
+        } & Record<string, unknown>>>;
+        layouts: readonly Readonly<{
+            name: string;
+            media?: string;
+            layout: import("../../../../form/schema.js").LayoutValue;
+        }>[];
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-scope-provider.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-scope-provider.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { provideCELContext } from "../../../../../utils/cel-context";
+defineOptions({ name: "ShwfedBlockLoopScopeProvider" });
+provideCELContext({
+  item: {
+    type: "dyn",
+    label: "item",
+    description: "\u5F53\u524D\u5FAA\u73AF\u9879",
+    value: void 0
+  },
+  index: {
+    type: "number",
+    label: "index",
+    description: "\u5F53\u524D\u5FAA\u73AF\u9879\u7D22\u5F15\uFF0C\u4ECE 0 \u5F00\u59CB",
+    value: void 0
+  }
+});
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/loop-scope-provider.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/config/blocks/2026-06-25/com.shwfed.block.loop/runtime.d.vue.ts

@@ -0,0 +1,70 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    'block': Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:block": (value: {
+        readonly type: "com.shwfed.block.loop";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly slot: {
+            readonly blocks: readonly any[];
+            readonly layouts: readonly {
+                readonly name: string;
+                readonly layout: {
+                    readonly style?: string | undefined;
+                    readonly columns: number;
+                    readonly gap?: number | undefined;
+                    readonly rows?: number | undefined;
+                    readonly placements: {
+                        readonly [x: string]: {
+                            readonly area: readonly [readonly [number, number], readonly [number, number]];
+                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                        };
+                    };
+                };
+                readonly media?: string | undefined;
+            }[];
+        };
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-25";
+        readonly items: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: {
+        readonly type: "com.shwfed.block.loop";
+        readonly style?: string | undefined;
+        readonly id: string;
+        readonly slot: {
+            readonly blocks: readonly any[];
+            readonly layouts: readonly {
+                readonly name: string;
+                readonly layout: {
+                    readonly style?: string | undefined;
+                    readonly columns: number;
+                    readonly gap?: number | undefined;
+                    readonly rows?: number | undefined;
+                    readonly placements: {
+                        readonly [x: string]: {
+                            readonly area: readonly [readonly [number, number], readonly [number, number]];
+                            readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                            readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                        };
+                    };
+                };
+                readonly media?: string | undefined;
+            }[];
+        };
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-25";
+        readonly items: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;