@shwfed/nuxt 0.7.8 → 0.7.10

package/dist/runtime/components/ui/app/App.vue.d.ts

@@ -0,0 +1,86 @@
+import type { Scope } from 'effect';
+import { Effect } from 'effect';
+import { type Sidebar as SidebarType } from '../../../composables/useNavigationTabs.js';
+type ProfileCommandInputItem = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    effect?: Effect.Effect<void>;
+    keywords?: Array<string>;
+}>;
+type ProfileCommandInputGroup = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    children: Array<ProfileCommandInputItem>;
+}>;
+type __VLS_Props = {
+    /**
+     * 应用的全局 DSL（CEL）执行上下文。传入一个 Effect，在应用启动时运行一次；
+     * 其解析结果（一个 record）会被永久设为全局上下文，供后续所有 CEL 求值（如 `$dsl.evaluate`）使用。
+     *
+     * 应用会等待该 effect 解析完成后才渲染；在整个应用生命周期内只会执行一次。
+     * 若未传入 `dsl`，全局上下文将被设为 `{}`。
+     *
+     * 适用于需要在首屏前就确定的、会话级稳定数据，例如：当前用户信息、用户所属组、
+     * 用户菜单列表、用户权限（或权限模块）等。此处加载的数据在整个应用内可通过 CEL 访问
+     *（如 `user`、`menu`、`permissions`）。强调「会话级」稳定即可，不必永久不变。
+     *
+     * 重要约束：
+     * - 加载时间至关重要：在该 effect 解析前，整应用不会加载，用户会看到白屏，因此必须保持非常快
+     *   （如减少请求、缓存或并行拉取）。
+     * - 这是有意为之的权衡：菜单、用户等关键数据必须在此加载，否则可能出现空菜单、无用户等异常表现。
+     * - 该 effect 不得抛错（类型为 `never`）：任何失败（如网络）应在 effect 内部处理，
+     *   返回空对象或安全默认值，保证应用仍能正常启动并得到一致的全局上下文。
+     *
+     * 返回的 `Record<string, unknown>` 会在通过 `$dsl.evaluate` 求值 CEL 表达式时，
+     * 与运行时上下文（如 `now`、`today` 及调用处传入的 context）合并使用。
+     *
+     * @example 最小示例：返回静态对象，键可在 CEL 中直接使用
+     * dsl: Effect.succeed({ hello: 'world' })
+     * // 之后在模板或逻辑中：$dsl.evaluate`hello`() 得到 'world'
+     *
+     * @example 实际场景：拉取会话数据（用户、菜单、权限）并返回，供 CEL 使用
+     * dsl: Effect.gen(function* () {
+     *   const [user, menu, permissions] = yield* Effect.all([
+     *     fetchUser().pipe(Effect.catchAll(() => Effect.succeed({ name: '', id: '' }))),
+     *     fetchMenu().pipe(Effect.catchAll(() => Effect.succeed([]))),
+     *     fetchPermissions().pipe(Effect.catchAll(() => Effect.succeed({ canEdit: false }))),
+     *   ])
+     *   return { user, menu, permissions }
+     * })
+     * // CEL 中可访问 user.name、permissions.canEdit 等；失败时在 effect 内兜底，不抛错
+     */
+    dsl?: Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
+    /**
+     * Sidebar config.
+     *
+     * `menus` is structured navigation data.
+     */
+    sidebar?: SidebarType;
+    /**
+     * Profile command config.
+     *
+     * Structured command entries for profile menu and command palette.
+     */
+    commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
+};
+declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_108) => any;
+} & {
+    profile?: (props: typeof __VLS_124) => any;
+} & {
+    default?: (props: typeof __VLS_347) => any;
+};
+declare const __VLS_base: 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 __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/ui/button-group/ButtonGroupSeparator.vue

@@ -18,7 +18,7 @@ const delegatedProps = reactiveOmit(props, "class");
     v-bind="delegatedProps"
     :orientation="props.orientation"
     :class="cn(
-  'bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto',
+  'bg-zinc-200 relative m-0! self-stretch data-[orientation=vertical]:h-auto',
   props.class
 )"
   />

package/dist/runtime/components/ui/button-group/ButtonGroupText.vue

@@ -16,7 +16,7 @@ const props = defineProps({
     :data-orientation="props.orientation"
     :as="as"
     :as-child="asChild"
-    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('bg-zinc-100 flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </Primitive>

package/dist/runtime/components/ui/calendar/Calendar.d.vue.ts

@@ -4,23 +4,16 @@ import type { LayoutTypes } from '.';
 type __VLS_Props = CalendarRootProps & {
     class?: HTMLAttributes['class'];
     layout?: LayoutTypes;
-    yearRange?: DateValue[];
 };
-declare var __VLS_59: {}, __VLS_67: {}, __VLS_69: {
+declare var __VLS_20: {}, __VLS_28: {}, __VLS_30: {
     date: DateValue;
-    month: import("@vueuse/core").ReuseTemplateComponent<{
-        date: DateValue;
-    }, Record<"default", undefined>>;
-    year: import("@vueuse/core").ReuseTemplateComponent<{
-        date: DateValue;
-    }, Record<"default", undefined>>;
 };
 type __VLS_Slots = {} & {
-    'calendar-prev-icon'?: (props: typeof __VLS_59) => any;
+    'calendar-prev-icon'?: (props: typeof __VLS_20) => any;
 } & {
-    'calendar-next-icon'?: (props: typeof __VLS_67) => any;
+    'calendar-next-icon'?: (props: typeof __VLS_28) => any;
 } & {
-    'calendar-heading'?: (props: typeof __VLS_69) => any;
+    'calendar-heading'?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (date: DateValue | undefined) => any;
@@ -30,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
     modelValue: DateValue | DateValue[];
-    layout: "month-and-year" | "month-only" | "year-only";
+    layout: LayoutTypes;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/calendar/Calendar.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { getLocalTimeZone, today } from "@internationalized/date";
-import { createReusableTemplate, reactiveOmit, useNavigatorLanguage, useVModel } from "@vueuse/core";
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { reactiveOmit, useNavigatorLanguage, useVModel } from "@vueuse/core";
 import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
-import { createYear, createYearRange, toDate } from "reka-ui/date";
-import { computed, toRaw } from "vue";
+import { toDate } from "reka-ui/date";
+import { computed } from "vue";
 import { cn } from "../../../utils/cn";
-import { NativeSelect, NativeSelectOption } from "../native-select";
+import { buttonVariants } from "../button";
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from ".";
 const props = defineProps({
   defaultValue: { type: null, required: false },
@@ -35,8 +35,7 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  layout: { type: null, required: false, default: void 0 },
-  yearRange: { type: Array, required: false }
+  layout: { type: String, required: false, default: void 0 }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder"]);
 const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
@@ -45,14 +44,6 @@ const placeholder = useVModel(props, "placeholder", emits, {
   defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone())
 });
 const formatter = useDateFormatter(props.locale ?? "en");
-const yearRange = computed(() => {
-  return props.yearRange ?? createYearRange({
-    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle("year", -100),
-    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle("year", 10)
-  });
-});
-const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate();
-const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate();
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 const locale = useNavigatorLanguage();
 const weekStartsOn = computed(() => {
@@ -63,77 +54,34 @@ const weekStartsOn = computed(() => {
   }
   return void 0;
 });
+const yearGridStart = computed(() => Math.floor(placeholder.value.year / 12) * 12);
+function isPickerDateDisabled(date) {
+  const fn = props.isDateDisabled;
+  if (typeof fn !== "function") return false;
+  return fn(date);
+}
 </script>
 
 <template>
-  <DefineMonthTemplate v-slot="{ date }">
-    <div class="**:data-[slot=native-select-icon]:right-1">
-      <div class="relative">
-        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { month: "short" }) }}
-        </div>
-        <NativeSelect
-          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
-          @change="(e) => {
-  placeholder = placeholder.set({
-    month: Number(e?.target?.value)
-  });
-}"
-        >
-          <NativeSelectOption
-            v-for="(month) in createYear({ dateObj: date })"
-            :key="month.toString()"
-            :value="month.month"
-            :selected="date.month === month.month"
-          >
-            {{ formatter.custom(toDate(month), { month: "short" }) }}
-          </NativeSelectOption>
-        </NativeSelect>
-      </div>
-    </div>
-  </DefineMonthTemplate>
-
-  <DefineYearTemplate v-slot="{ date }">
-    <div class="**:data-[slot=native-select-icon]:right-1">
-      <div class="relative">
-        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { year: "numeric" }) }}
-        </div>
-        <NativeSelect
-          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
-          @change="(e) => {
-  placeholder = placeholder.set({
-    year: Number(e?.target?.value)
-  });
-}"
-        >
-          <NativeSelectOption
-            v-for="(year) in yearRange"
-            :key="year.toString()"
-            :value="year.year"
-            :selected="date.year === year.year"
-          >
-            {{ formatter.custom(toDate(year), { year: "numeric" }) }}
-          </NativeSelectOption>
-        </NativeSelect>
-      </div>
-    </div>
-  </DefineYearTemplate>
-
   <CalendarRoot
     v-slot="{ grid, weekDays, date }"
     v-bind="forwarded"
     v-model:placeholder="placeholder"
     data-slot="calendar"
     :week-starts-on="weekStartsOn"
+    fixed-weeks
     :class="cn('p-3', props.class)"
   >
-    <CalendarHeader class="pt-0">
-      <nav class="w-full flex items-center gap-1 absolute top-1/2 -translate-y-1/2 transform-gpu inset-x-0 justify-between">
-        <CalendarPrevButton>
+    <CalendarHeader :class="layout === 'year' ? 'pt-2 pb-2' : 'pt-0'">
+      <nav class="w-full flex items-center gap-1 absolute top-1/2 -translate-y-1/2 transform-gpu inset-x-0 justify-between z-10">
+        <CalendarPrevButton
+          :prev-page="layout === 'year' ? (d) => d.subtract({ years: 12 }) : layout === 'month' ? (d) => d.subtract({ years: 1 }) : void 0"
+        >
           <slot name="calendar-prev-icon" />
         </CalendarPrevButton>
-        <CalendarNextButton>
+        <CalendarNextButton
+          :next-page="layout === 'year' ? (d) => d.add({ years: 12 }) : layout === 'month' ? (d) => d.add({ years: 1 }) : void 0"
+        >
           <slot name="calendar-next-icon" />
         </CalendarNextButton>
       </nav>
@@ -141,34 +89,71 @@ const weekStartsOn = computed(() => {
       <slot
         name="calendar-heading"
         :date="date"
-        :month="ReuseMonthTemplate"
-        :year="ReuseYearTemplate"
       >
-        <template v-if="layout === 'month-and-year'">
-          <div class="flex items-center justify-center gap-1">
-            <ReuseMonthTemplate :date="date" />
-            <ReuseYearTemplate :date="date" />
-          </div>
-        </template>
-        <template v-else-if="layout === 'month-only'">
-          <div class="flex items-center justify-center gap-1">
-            <ReuseMonthTemplate :date="date" />
+        <template v-if="layout === 'month'">
+          <span
+            class="text-sm font-medium"
+            style="text-autospace: normal"
+          >
             {{ formatter.custom(toDate(date), { year: "numeric" }) }}
-          </div>
-        </template>
-        <template v-else-if="layout === 'year-only'">
-          <div class="flex items-center justify-center gap-1">
-            {{ formatter.custom(toDate(date), { month: "short" }) }}
-            <ReuseYearTemplate :date="date" />
-          </div>
+          </span>
         </template>
+        <template v-else-if="layout === 'year'" />
         <template v-else>
           <CalendarHeading />
         </template>
       </slot>
     </CalendarHeader>
 
-    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+    <!-- Month picker grid (month-only / month-and-year) -->
+    <div
+      v-if="layout === 'month'"
+      class="grid grid-cols-4 gap-1 mt-4"
+    >
+      <button
+        v-for="m in 12"
+        :key="m"
+        type="button"
+        :disabled="isPickerDateDisabled(new CalendarDate(placeholder.year, m, 1))"
+        :class="cn(
+  buttonVariants({ variant: 'ghost' }),
+  'h-9 w-full rounded-md font-normal',
+  modelValue && !Array.isArray(modelValue) && modelValue.year === placeholder.year && modelValue.month === m ? 'bg-[color-mix(in_srgb,var(--primary)_20%,white)] text-(--primary)' : '',
+  isPickerDateDisabled(new CalendarDate(placeholder.year, m, 1)) ? 'text-zinc-500 opacity-50 cursor-default' : 'cursor-pointer'
+)"
+        @click="emits('update:modelValue', new CalendarDate(placeholder.year, m, 1))"
+      >
+        {{ formatter.custom(toDate(new CalendarDate(placeholder.year, m, 1)), { month: "short" }) }}
+      </button>
+    </div>
+
+    <!-- Year picker grid -->
+    <div
+      v-else-if="layout === 'year'"
+      class="grid grid-cols-4 gap-1 mt-4"
+    >
+      <button
+        v-for="i in 12"
+        :key="i"
+        type="button"
+        :disabled="isPickerDateDisabled(new CalendarDate(yearGridStart + i - 1, 1, 1))"
+        :class="cn(
+  buttonVariants({ variant: 'ghost' }),
+  'h-9 w-full rounded-md font-normal',
+  modelValue && !Array.isArray(modelValue) && modelValue.year === yearGridStart + i - 1 ? 'bg-[color-mix(in_srgb,var(--primary)_20%,white)] text-(--primary)' : '',
+  isPickerDateDisabled(new CalendarDate(yearGridStart + i - 1, 1, 1)) ? 'text-zinc-500 opacity-50 cursor-default' : 'cursor-pointer'
+)"
+        @click="emits('update:modelValue', new CalendarDate(yearGridStart + i - 1, 1, 1))"
+      >
+        {{ yearGridStart + i - 1 }}
+      </button>
+    </div>
+
+    <!-- Default: day grid -->
+    <div
+      v-else
+      class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0"
+    >
       <CalendarGrid
         v-for="month in grid"
         :key="month.value.toString()"

package/dist/runtime/components/ui/calendar/Calendar.vue.d.ts

@@ -4,23 +4,16 @@ import type { LayoutTypes } from '.';
 type __VLS_Props = CalendarRootProps & {
     class?: HTMLAttributes['class'];
     layout?: LayoutTypes;
-    yearRange?: DateValue[];
 };
-declare var __VLS_59: {}, __VLS_67: {}, __VLS_69: {
+declare var __VLS_20: {}, __VLS_28: {}, __VLS_30: {
     date: DateValue;
-    month: import("@vueuse/core").ReuseTemplateComponent<{
-        date: DateValue;
-    }, Record<"default", undefined>>;
-    year: import("@vueuse/core").ReuseTemplateComponent<{
-        date: DateValue;
-    }, Record<"default", undefined>>;
 };
 type __VLS_Slots = {} & {
-    'calendar-prev-icon'?: (props: typeof __VLS_59) => any;
+    'calendar-prev-icon'?: (props: typeof __VLS_20) => any;
 } & {
-    'calendar-next-icon'?: (props: typeof __VLS_67) => any;
+    'calendar-next-icon'?: (props: typeof __VLS_28) => any;
 } & {
-    'calendar-heading'?: (props: typeof __VLS_69) => any;
+    'calendar-heading'?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (date: DateValue | undefined) => any;
@@ -30,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
     modelValue: DateValue | DateValue[];
-    layout: "month-and-year" | "month-only" | "year-only";
+    layout: LayoutTypes;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/calendar/CalendarCellTrigger.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   // Selected
   'data-selected:bg-[color-mix(in_srgb,var(--primary)_20%,white)] data-selected:opacity-100 data-selected:text-(--primary)',
   // Disabled
-  'data-disabled:text-zinc-500 data-disabled:opacity-50',
+  'data-disabled:text-zinc-500 data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent data-disabled:hover:text-zinc-500',
   // Unavailable
   'data-unavailable:text-zinc-300 data-unavailable:line-through',
   // Outside months

package/dist/runtime/components/ui/calendar/index.d.ts

@@ -10,4 +10,4 @@ export { default as CalendarHeader } from './CalendarHeader.vue.js';
 export { default as CalendarHeading } from './CalendarHeading.vue.js';
 export { default as CalendarNextButton } from './CalendarNextButton.vue.js';
 export { default as CalendarPrevButton } from './CalendarPrevButton.vue.js';
-export type LayoutTypes = 'month-and-year' | 'month-only' | 'year-only' | undefined;
+export type LayoutTypes = 'year' | 'month' | 'date';

package/dist/runtime/components/ui/checkbox/Checkbox.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
   cn(
-    'peer cursor-pointer flex items-center justify-center border-zinc-200 data-[state=checked]:bg-(--primary) data-[state=checked]:text-white data-[state=checked]:border-(--primary) aria-invalid:border-red-400 size-4 shrink-0 rounded border shadow-xs hover:shadow transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50',
+    'peer cursor-pointer flex items-center justify-center border-zinc-200 data-[state=checked]:bg-(--primary) data-[state=checked]:text-white data-[state=checked]:border-(--primary) data-[state=indeterminate]:bg-(--primary) data-[state=indeterminate]:text-white data-[state=indeterminate]:border-(--primary) aria-invalid:border-red-400 size-4 shrink-0 rounded border shadow-xs hover:shadow transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50',
     props.class
   )
 "
@@ -38,9 +38,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     >
       <slot v-bind="slotProps">
         <Icon
-          v-if="$props.modelValue === true"
+          v-if="slotProps.state === true"
           icon="fluent:checkmark-20-filled"
         />
+        <Icon
+          v-else-if="slotProps.state === 'indeterminate'"
+          icon="radix-icons:minus"
+        />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

package/dist/runtime/components/ui/command/CommandGroup.vue

@@ -39,6 +39,10 @@ onUnmounted(() => {
     >
       {{ heading }}
     </ListboxGroupLabel>
+    <div
+      v-else
+      class="h-1"
+    />
     <slot />
   </ListboxGroup>
 </template>

package/dist/runtime/components/ui/dialog/DialogOverlay.vue

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class");
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-zinc-900/60', props.class)"
   >
     <slot />
   </DialogOverlay>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
     :class="cn(
-  'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+  'focus:bg-zinc-100 focus:text-zinc-700 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
   props.class
 )"
   >

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :data-inset="inset ? '' : void 0"
     :class="cn(
-  'focus:bg-zinc-100 focus:text-zinc-700 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-700 relative flex cursor-pointer items-center gap-2 rounded-sm p-2 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+  'focus:bg-zinc-100 focus:text-zinc-700 data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-700 relative flex cursor-pointer items-center gap-2 rounded-sm p-2 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-red-600! [&_svg:not([class*=\'text-\'])]:text-zinc-400',
   props.class
 )"
   >

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.d.vue.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'vue';
+import type z from 'zod';
+export type ExpressionEditorExposed = Readonly<{
+    clearValidation: () => void;
+    validate: () => boolean;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    class?: HTMLAttributes["class"];
+    description?: string;
+    label: string;
+    modelValue?: string;
+    placeholder?: string;
+    schema: z.ZodType<unknown>;
+}, {
+    clearValidation: () => void;
+    validate: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    class?: HTMLAttributes["class"];
+    description?: string;
+    label: string;
+    modelValue?: string;
+    placeholder?: string;
+    schema: z.ZodType<unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from "vue";
+import { cn } from "../../../utils/cn";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../field";
+import { Textarea } from "../textarea";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  class: { type: null, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: true },
+  modelValue: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  schema: { type: null, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const validationError = ref();
+function clearValidation() {
+  validationError.value = void 0;
+}
+function normalizeModelValue(value) {
+  const normalizedValue = String(value);
+  if (normalizedValue.trim().length === 0) {
+    return void 0;
+  }
+  return normalizedValue;
+}
+function handleModelValueUpdate(value) {
+  clearValidation();
+  emit("update:modelValue", normalizeModelValue(value));
+}
+function validate() {
+  const result = props.schema.safeParse(props.modelValue);
+  if (result.success) {
+    clearValidation();
+    return true;
+  }
+  validationError.value = result.error.issues[0]?.message ?? "Invalid value";
+  return false;
+}
+defineExpose({
+  clearValidation,
+  validate
+});
+</script>
+
+<script>
+
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    data-slot="expression-editor"
+    :class="cn('w-full', props.class)"
+  >
+    <Field
+      orientation="vertical"
+      :data-invalid="validationError ? 'true' : void 0"
+      class="gap-2"
+    >
+      <FieldLabel>{{ props.label }}</FieldLabel>
+
+      <FieldContent>
+        <FieldDescription v-if="props.description">
+          {{ props.description }}
+        </FieldDescription>
+
+        <Textarea
+          class="min-h-28 font-mono text-sm"
+          :model-value="props.modelValue ?? ''"
+          :placeholder="props.placeholder"
+          spellcheck="false"
+          :aria-invalid="validationError ? 'true' : void 0"
+          @update:model-value="handleModelValueUpdate"
+        />
+
+        <FieldError
+          v-if="validationError"
+          class="static pt-0"
+          :errors="[validationError]"
+        />
+      </FieldContent>
+    </Field>
+  </div>
+</template>

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.vue.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'vue';
+import type z from 'zod';
+export type ExpressionEditorExposed = Readonly<{
+    clearValidation: () => void;
+    validate: () => boolean;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    class?: HTMLAttributes["class"];
+    description?: string;
+    label: string;
+    modelValue?: string;
+    placeholder?: string;
+    schema: z.ZodType<unknown>;
+}, {
+    clearValidation: () => void;
+    validate: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    class?: HTMLAttributes["class"];
+    description?: string;
+    label: string;
+    modelValue?: string;
+    placeholder?: string;
+    schema: z.ZodType<unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/expression-editor/index.d.ts

@@ -0,0 +1 @@
+export { default as ExpressionEditor } from './ExpressionEditor.vue.js';

package/dist/runtime/components/ui/expression-editor/index.js

@@ -0,0 +1 @@
+export { default as ExpressionEditor } from "./ExpressionEditor.vue";

package/dist/runtime/components/ui/field/FieldContent.vue

@@ -9,7 +9,7 @@ const props = defineProps({
   <div
     data-slot="field-content"
     :class="cn(
-  'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+  'group/field-content relative flex flex-1 flex-col gap-1.5 leading-snug',
   props.class
 )"
   >