@shwfed/config 1.0.0

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.tabs/runtime.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { getLocalizedText } from "../../../../../share/locale";
+import { useActiveTabId } from "../../../../../share/use-active-tab-id";
+import SlotRenderer from "../../../../../share/slot-renderer.vue";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../ui/tabs";
+import { findBlock } from "../../../utils/resolve";
+defineOptions({ name: "ShwfedBlockTabsRuntime" });
+const block = defineModel("block", { type: null, ...{ required: true } });
+const props = defineProps({
+  configure: { type: Function, required: false }
+});
+const configure = computed(() => props.configure ?? (() => {
+}));
+const { locale } = useI18n();
+const tabIds = computed(() => block.value.tabs.map((t) => t.id));
+const active = useActiveTabId(block.value.id, tabIds);
+function paneLabel(tab, index) {
+  return getLocalizedText(tab.label, locale.value) ?? `\u6807\u7B7E\u9875 ${index + 1}`;
+}
+function updateTabSlot(tabId, next) {
+  const nextTabs = block.value.tabs.map(
+    (t) => t.id === tabId ? { ...t, slot: next } : t
+  );
+  block.value = { ...block.value, tabs: nextTabs };
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <Tabs
+      :model-value="active"
+      @update:model-value="(v) => {
+  if (typeof v === 'string') active = v;
+}"
+    >
+      <TabsList>
+        <TabsTrigger
+          v-for="(t, i) in block.tabs"
+          :key="t.id"
+          :value="t.id"
+        >
+          {{ paneLabel(t, i) }}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent
+        v-for="t in block.tabs"
+        :key="t.id"
+        :value="t.id"
+        class="outline-none"
+      >
+        <SlotRenderer
+          :slot-value="t.slot"
+          :configure="configure"
+          :find-entry="findBlock"
+          @update:slot-value="(s) => updateTabSlot(t.id, s)"
+        />
+      </TabsContent>
+    </Tabs>
+  </ClientOnly>
+</template>

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

@@ -0,0 +1,86 @@
+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.tabs";
+        readonly id: string;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-06";
+        readonly tabs: readonly {
+            readonly label: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            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;
+                }[];
+            };
+        }[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: {
+        readonly type: "com.shwfed.block.tabs";
+        readonly id: string;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-05-06";
+        readonly tabs: readonly {
+            readonly label: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            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;
+                }[];
+            };
+        }[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.tabs/schema.d.ts

@@ -0,0 +1,155 @@
+import { Schema } from 'effect';
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+type AnySchema = Schema.Schema<any, any, never>;
+export declare const type: "com.shwfed.block.tabs";
+export declare const compatibilityDate: "2026-05-06";
+export declare const metadata: {
+    readonly name: "标签页";
+    readonly icon: "fluent:tabs-20-regular";
+    readonly w: {
+        readonly initial: 12;
+        readonly min: 4;
+        readonly max: number;
+    };
+    readonly h: {
+        readonly initial: 6;
+        readonly min: 4;
+        readonly max: number;
+    };
+};
+export declare function schema(configure: (env: Environment) => void, blockRef: AnySchema): Schema.refine<{
+    readonly type: "com.shwfed.block.tabs";
+    readonly id: string;
+    readonly displayName?: string | undefined;
+    readonly compatibilityDate: "2026-05-06";
+    readonly tabs: readonly {
+        readonly label: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        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;
+            }[];
+        };
+    }[];
+}, Schema.Struct<{
+    id: Schema.refine<string, typeof Schema.String>;
+    type: Schema.tag<"com.shwfed.block.tabs">;
+    compatibilityDate: Schema.tag<"2026-05-06">;
+    displayName: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    tabs: Schema.refine<readonly {
+        readonly label: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        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;
+            }[];
+        };
+    }[], Schema.filter<Schema.Array$<Schema.Struct<{
+        id: Schema.refine<string, typeof Schema.String>;
+        label: Schema.TupleType<readonly [Schema.Struct<{
+            locale: Schema.Literal<["zh"]>;
+            message: Schema.SchemaClass<string, string, never>;
+        }>], [Schema.Struct<{
+            locale: Schema.Literal<["ja", "en", "ko"]>;
+            message: Schema.SchemaClass<string, string, never>;
+        }>]>;
+        slot: Schema.refine<{
+            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;
+            }[];
+        }, Schema.Struct<{
+            blocks: Schema.Array$<Schema.Schema<any, any, never>>;
+            layouts: Schema.refine<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;
+            }[], Schema.Array$<Schema.Struct<{
+                name: Schema.SchemaClass<string, string, never>;
+                media: Schema.optional<Schema.Schema<string, string, never>>;
+                layout: Schema.Struct<{
+                    columns: Schema.refine<number, Schema.filter<typeof Schema.Number>>;
+                    rows: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+                    gap: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+                    style: Schema.optional<Schema.SchemaClass<string, string, never>>;
+                    placements: Schema.Record$<typeof Schema.String, Schema.Struct<{
+                        area: Schema.refine<readonly [readonly [number, number], readonly [number, number]], Schema.Tuple2<Schema.Tuple2<Schema.filter<Schema.filter<typeof Schema.Number>>, Schema.filter<Schema.filter<typeof Schema.Number>>>, Schema.Tuple2<Schema.filter<Schema.filter<typeof Schema.Number>>, Schema.filter<Schema.filter<typeof Schema.Number>>>>>;
+                        h: Schema.optional<Schema.Literal<["start", "center", "end", "stretch"]>>;
+                        v: Schema.optional<Schema.Literal<["start", "center", "end", "stretch"]>>;
+                    }>>;
+                }>;
+            }>>>;
+        }>>;
+    }>>>>;
+}>>;
+export declare function defaultBody(): Record<string, unknown>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;
+export {};

package/dist/runtime/components/config/blocks/2026-05-06/com.shwfed.block.tabs/schema.js

@@ -0,0 +1,94 @@
+import { Schema } from "effect";
+import { Locale } from "../../../../../share/locale.js";
+import { Slot, defaultSlot } from "../../../../../share/layout.js";
+export const type = "com.shwfed.block.tabs";
+export const compatibilityDate = "2026-05-06";
+export const metadata = {
+  name: "\u6807\u7B7E\u9875",
+  icon: "fluent:tabs-20-regular",
+  w: { initial: 12, min: 4, max: Infinity },
+  h: { initial: 6, min: 4, max: Infinity }
+};
+const MAX_NESTING_DEPTH = 8;
+function tabsNestingExceeds(value, maxDepth, currentDepth = 0) {
+  if (currentDepth > maxDepth) return true;
+  if (value === null || typeof value !== "object") return false;
+  if (Array.isArray(value)) {
+    return value.some((v) => tabsNestingExceeds(v, maxDepth, currentDepth));
+  }
+  const o = value;
+  if (o.type === type && Array.isArray(o.tabs)) {
+    return o.tabs.some((t) => {
+      if (!t || typeof t !== "object") return false;
+      const slot = t.slot;
+      return tabsNestingExceeds(slot, maxDepth, currentDepth + 1);
+    });
+  }
+  return Object.values(o).some((v) => tabsNestingExceeds(v, maxDepth, currentDepth));
+}
+export function schema(configure, blockRef) {
+  const TabsSlot = Slot(blockRef, configure);
+  const TabPane = Schema.Struct({
+    id: Schema.UUID.annotations({ description: "\u6807\u7B7E\u9875\u552F\u4E00\u6807\u8BC6" }),
+    label: Locale.annotations({
+      title: "\u6807\u7B7E\u540D",
+      description: "\u8BE5\u6807\u7B7E\u9875\u7684\u672C\u5730\u5316\u663E\u793A\u540D"
+    }),
+    slot: TabsSlot.annotations({
+      title: "\u5185\u5BB9",
+      description: "\u6807\u7B7E\u9875\u5185\u90E8\u7684\u5757\u4E0E\u5E03\u5C40"
+    })
+  }).annotations({
+    title: "TabPane",
+    description: "\u5355\u4E2A\u6807\u7B7E\u9875\uFF1A\u540D\u79F0 + \u5185\u5BB9 Slot"
+  });
+  return Schema.Struct({
+    id: Schema.UUID.annotations({ description: "\u5757\u552F\u4E00\u6807\u8BC6" }),
+    type: Schema.tag(type),
+    compatibilityDate: Schema.tag(compatibilityDate),
+    displayName: Schema.optional(Schema.String.annotations({
+      title: "\u5185\u90E8\u540D\u79F0",
+      description: "\u4EC5\u5728\u7F16\u8F91\u5668\u5185\u53EF\u89C1\u7684\u5757\u540D"
+    })),
+    tabs: Schema.Array(TabPane).pipe(
+      Schema.minItems(1),
+      Schema.filter((tabs) => {
+        const ids = /* @__PURE__ */ new Set();
+        for (const t of tabs) {
+          if (ids.has(t.id)) return `\u6807\u7B7E\u9875 id \u91CD\u590D: ${t.id}`;
+          ids.add(t.id);
+        }
+        return true;
+      })
+    ).annotations({
+      title: "\u6807\u7B7E\u9875",
+      description: "\u81F3\u5C11 1 \u9879\uFF0C\u6309\u987A\u5E8F\u6E32\u67D3"
+    })
+  }).pipe(Schema.filter((value) => {
+    if (tabsNestingExceeds(value, MAX_NESTING_DEPTH)) {
+      return `\u6807\u7B7E\u9875\u5D4C\u5957\u6DF1\u5EA6\u8D85\u8FC7 ${MAX_NESTING_DEPTH} \u5C42`;
+    }
+    return true;
+  })).annotations({
+    title: "\u6807\u7B7E\u9875\u5757",
+    description: "\u5C06\u4E00\u7EC4\u5E26\u6807\u7B7E\u7684\u5B50 Slot \u4F5C\u4E3A\u9875\u9762\u5757\u5D4C\u5165\uFF1B\u652F\u6301\u4EFB\u610F\u5C42\u7EA7\u5D4C\u5957"
+  });
+}
+function makeId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+export function defaultBody() {
+  return {
+    tabs: [
+      {
+        id: makeId(),
+        label: [{ locale: "zh", message: "\u6807\u7B7E 1" }],
+        slot: defaultSlot()
+      }
+    ]
+  };
+}

package/dist/runtime/components/config/breadcrumb-extension.d.ts

@@ -0,0 +1,15 @@
+import type { InjectionKey, Ref } from 'vue';
+export interface BreadcrumbCrumb {
+    label: Ref<string | null>;
+    back: Ref<(() => void) | null>;
+    dispose: () => void;
+}
+export interface BreadcrumbParentSuffix {
+    value: Ref<string | null>;
+    dispose: () => void;
+}
+export interface BreadcrumbExtension {
+    add: () => BreadcrumbCrumb;
+    addParentSuffix: () => BreadcrumbParentSuffix;
+}
+export declare const BREADCRUMB_EXTENSION_KEY: InjectionKey<BreadcrumbExtension>;

package/dist/runtime/components/config/breadcrumb-extension.js

@@ -0,0 +1 @@
+export const BREADCRUMB_EXTENSION_KEY = Symbol("shwfed.config.breadcrumb-extension");

package/dist/runtime/components/config/breadcrumb.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ConfigEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: ConfigEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/breadcrumb.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { toRef } from "vue";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "../ui/breadcrumb";
+defineOptions({ name: "ShwfedConfigEditorBreadcrumb" });
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const breadcrumbs = toRef(() => props.state.breadcrumbs.value);
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <template
+        v-for="(crumb, i) in breadcrumbs"
+        :key="i"
+      >
+        <BreadcrumbItem>
+          <BreadcrumbPage
+            v-if="i === breadcrumbs.length - 1"
+            class="font-bold"
+          >
+            {{ crumb.label }}
+          </BreadcrumbPage>
+          <BreadcrumbLink
+            v-else-if="crumb.kind !== 'sub'"
+            as="button"
+            type="button"
+            class="cursor-pointer text-zinc-500"
+            @click="props.state.goTo(crumb.index)"
+          >
+            {{ crumb.label }}
+          </BreadcrumbLink>
+          <BreadcrumbLink
+            v-else-if="crumb.clickable"
+            as="button"
+            type="button"
+            class="cursor-pointer text-zinc-500"
+            @click="props.state.goToSub(crumb.subIndex)"
+          >
+            {{ crumb.label }}
+          </BreadcrumbLink>
+          <span
+            v-else
+            class="text-zinc-500"
+          >
+            {{ crumb.label }}
+          </span>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator v-if="i < breadcrumbs.length - 1" />
+      </template>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

package/dist/runtime/components/config/breadcrumb.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ConfigEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: ConfigEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/config.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ConfigEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: ConfigEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/config.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, provide, toRef, useTemplateRef } from "vue";
+import { Icon } from "@iconify/vue";
+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 { ScrollArea } from "../ui/scroll-area";
+import { BREADCRUMB_EXTENSION_KEY } from "./breadcrumb-extension";
+defineOptions({ name: "ShwfedConfigConfig" });
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const layouts = computed({
+  get: () => props.state.layouts.value,
+  set: (next) => {
+    props.state.layouts.value = next;
+  }
+});
+const selectedBlockIds = computed({
+  get: () => props.state.selectedBlockIds.value,
+  set: (next) => {
+    props.state.selectedBlockIds.value = next;
+  }
+});
+const activeLayoutIndex = computed({
+  get: () => props.state.activeLayoutIndex.value,
+  set: (next) => {
+    props.state.activeLayoutIndex.value = next;
+  }
+});
+const blocks = toRef(() => props.state.blocks.value);
+const top = toRef(() => props.state.top.value);
+const activeBlock = toRef(() => props.state.activeBlock.value);
+const activeBlockEntry = toRef(() => props.state.activeBlockEntry.value);
+const pickerEntries = toRef(() => props.state.pickerEntries.value);
+provide(BREADCRUMB_EXTENSION_KEY, {
+  add: props.state.addCrumb,
+  addParentSuffix: props.state.addParentSuffix
+});
+const sidebarRef = useTemplateRef("sidebarRef");
+function addLayout() {
+  sidebarRef.value?.addLayout();
+}
+function addBlock(entry, options) {
+  props.state.addBlock(entry, options);
+}
+function onDrillDown(id) {
+  props.state.onDrillDown(id);
+}
+function updateActiveBlock(next) {
+  props.state.updateActiveBlock(next);
+}
+function getBlockLabel(b) {
+  return props.state.getBlockLabel(b);
+}
+function findBlockMeta(type, compatibilityDate) {
+  return props.state.findBlockMeta(type, compatibilityDate);
+}
+</script>
+
+<template>
+  <div class="relative flex min-w-0 flex-col">
+    <div
+      v-show="top.kind === 'layout'"
+      class="flex gap-2 min-h-128"
+    >
+      <div class="flex w-64 shrink-0 flex-col">
+        <ScrollArea class="flex-1">
+          <LayoutsSidebar
+            ref="sidebarRef"
+            v-model="layouts"
+            v-model:active-index="activeLayoutIndex"
+          />
+        </ScrollArea>
+        <Button
+          variant="ghost"
+          size="sm"
+          @click="addLayout()"
+        >
+          <Icon
+            icon="fluent:add-20-regular"
+            class="size-4"
+          />
+          <span>新增布局</span>
+        </Button>
+      </div>
+
+      <div class="flex flex-1 flex-col gap-2">
+        <LayoutMetaStrip
+          v-model="layouts"
+          :index="activeLayoutIndex"
+        />
+        <div class="flex-1">
+          <BlockLayoutEditor
+            v-model="layouts"
+            v-model:active-index="activeLayoutIndex"
+            v-model:selected-item-ids="selectedBlockIds"
+            :items="blocks"
+            :find-entry="findBlockMeta"
+            :get-item-label="getBlockLabel"
+            :picker-entries="pickerEntries"
+            :can-delete="true"
+            item-noun="块"
+            @add-new="addBlock"
+            @drill-down="onDrillDown"
+            @delete-item="(id) => props.state.removeBlock(id)"
+            @delete-items="(ids) => props.state.removeBlocks(ids)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="top.kind === 'block'">
+      <div
+        v-if="!activeBlock"
+        class="flex min-h-96 items-center justify-center p-8 text-sm text-zinc-400"
+      >
+        块已不存在
+      </div>
+      <div
+        v-else-if="activeBlockEntry"
+      >
+        <component
+          :is="activeBlockEntry.config"
+          :model-value="activeBlock"
+          :configure="props.state.configure"
+          @update:model-value="(next) => updateActiveBlock(next)"
+        />
+      </div>
+      <div
+        v-else
+        class="p-6 text-sm text-red-500"
+      >
+        未注册的块类型：{{ activeBlock.type }}@{{ activeBlock.compatibilityDate }}
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/config/config.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ConfigEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: ConfigEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/footer.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ConfigEditorState } from './use-editor.js';
+type __VLS_Props = {
+    state: ConfigEditorState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;