@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/monaco/monaco-json-field-lazy2.vue.js

@@ -0,0 +1,81 @@
+import { defineComponent, computed, shallowRef, renderSlot, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createVNode } from "vue";
+import { loader, VueMonacoEditor } from "@guolao/vue-monaco-editor";
+import * as monaco from "monaco-editor";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import { useFieldValue } from "../../record/use-field-value.js";
+import { useMonacoTheme, useAutoHeight, useMonacoLayout } from "./internal/monaco-composables.js";
+const MIN_HEIGHT = 120;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "monaco-json-field-lazy",
+  props: {
+    source: {},
+    record: {},
+    defaultValue: {},
+    height: { default: 200 },
+    autoHeight: { type: Boolean, default: true },
+    maxHeight: { default: 400 },
+    empty: {},
+    class: {},
+    monacoOptions: {}
+  },
+  setup(__props) {
+    loader.config({ monaco });
+    const props = __props;
+    const translate = useTranslate();
+    const value = useFieldValue({
+      source: props.source,
+      record: props.record,
+      defaultValue: props.defaultValue
+    });
+    const missing = computed(() => value.value == null);
+    const text = computed(
+      () => typeof value.value === "string" ? value.value : JSON.stringify(value.value ?? null, null, 2)
+    );
+    const instance = shallowRef(null);
+    const theme = useMonacoTheme();
+    const contentHeight = useAutoHeight(
+      instance,
+      () => props.autoHeight,
+      MIN_HEIGHT,
+      () => props.maxHeight
+    );
+    const container = useMonacoLayout(instance);
+    const editorHeight = computed(
+      () => `${props.autoHeight ? contentHeight.value : props.height}px`
+    );
+    const options = computed(() => ({
+      readOnly: true,
+      domReadOnly: true,
+      automaticLayout: false,
+      minimap: { enabled: false },
+      lineNumbers: "on",
+      wordWrap: "on",
+      tabSize: 2,
+      ...props.monacoOptions
+    }));
+    return (_ctx, _cache) => {
+      return missing.value && _ctx.$slots.empty ? renderSlot(_ctx.$slots, "empty", { key: 0 }) : missing.value && __props.empty ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(unref(cn)(props.class))
+      }, toDisplayString(unref(translate)(__props.empty, { _: __props.empty })), 3)) : (openBlock(), createElementBlock("div", {
+        key: 2,
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(unref(cn)("overflow-hidden rounded-md border", props.class))
+      }, [
+        createVNode(unref(VueMonacoEditor), {
+          language: "json",
+          value: text.value,
+          theme: unref(theme),
+          height: editorHeight.value,
+          options: options.value,
+          onMount: _cache[0] || (_cache[0] = ($event) => instance.value = $event)
+        }, null, 8, ["value", "theme", "height", "options"])
+      ], 2));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-field.vue.d.ts

@@ -0,0 +1,64 @@
+import type { LooseRecord } from "@chelone/core";
+import type { editor } from "monaco-editor";
+/** Props for {@link MonacoJsonField}. */
+export interface MonacoJsonFieldProps {
+    source: string;
+    record?: LooseRecord;
+    /** Shown when the record has no value at `source`. */
+    defaultValue?: unknown;
+    /** Editor height in pixels when `autoHeight` is false. Defaults to 200. */
+    height?: number;
+    /** Grow with the content up to `maxHeight`. Defaults to true. */
+    autoHeight?: boolean;
+    /** Tallest the editor grows to when `autoHeight` is on. Defaults to 400. */
+    maxHeight?: number;
+    /** Shown instead of the editor when the value is missing; translated if it is a message key. */
+    empty?: string;
+    class?: string;
+    /** Merged over the read-only defaults, so it can override any of them. */
+    monacoOptions?: editor.IStandaloneEditorConstructionOptions;
+}
+/**
+ * `<MonacoJsonField>` — shows a JSON (or JSON-string) field value in a
+ * read-only Monaco editor. The Vue twin of `@chelone/react`'s
+ * `monaco/monaco-json-field.tsx`.
+ *
+ * Monaco loads in a separate chunk on first render, so the base bundle carries
+ * nothing. Needs the optional `monaco-editor` and `@guolao/vue-monaco-editor`
+ * peers. The `#empty` slot replaces the editor when the value is missing.
+ *
+ * @example
+ * import { MonacoJsonField } from "@chelone/vue/monaco";
+ *
+ * <MonacoJsonField source="metadata" />
+ */
+declare const _default: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<MonacoJsonFieldProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        height: number;
+        autoHeight: boolean;
+        maxHeight: number;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<MonacoJsonFieldProps> & Readonly<{}>, {}, {}, {}, {}, {
+        height: number;
+        autoHeight: boolean;
+        maxHeight: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<MonacoJsonFieldProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    height: number;
+    autoHeight: boolean;
+    maxHeight: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        empty?: () => unknown;
+    };
+});
+export default _default;

package/dist/components/monaco/monaco-json-field.vue.js

@@ -0,0 +1,10 @@
+import { defineAsyncComponent } from "vue";
+import _sfc_main$1 from "./internal/monaco-skeleton.vue.js";
+const _sfc_main = defineAsyncComponent({
+  loader: () => import("./monaco-json-field-lazy.vue.js"),
+  loadingComponent: _sfc_main$1,
+  delay: 0
+});
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./monaco-json-field.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-input-lazy.vue.d.ts

@@ -0,0 +1,11 @@
+import type { MonacoJsonInputProps } from "./monaco-json-input.vue.js";
+declare const _default: import("vue").DefineComponent<MonacoJsonInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MonacoJsonInputProps> & Readonly<{}>, {
+    label: string | false;
+    height: number;
+    helperText: string | false;
+    autoHeight: boolean;
+    maxHeight: number;
+    minHeight: number;
+    showFormatButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/monaco/monaco-json-input-lazy.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./monaco-json-input-lazy2.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-input-lazy2.vue.js

@@ -0,0 +1,223 @@
+import { defineComponent, shallowRef, computed, ref, watch, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, createCommentVNode, createElementVNode, createElementBlock, createTextVNode, toDisplayString } from "vue";
+import { composeValidators, detectJsonShape, toJsonText, fromJsonText, stripJsonComments } from "@chelone/core";
+import { loader, VueMonacoEditor } from "@guolao/vue-monaco-editor";
+import * as monaco from "monaco-editor";
+import { useCheloneFormContext } from "../../form/form-context.js";
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import _sfc_main$1 from "../admin/common/field-label-text.vue.js";
+import _sfc_main$3 from "../admin/common/input-helper-text.vue.js";
+import _sfc_main$4 from "../admin/common/validation-error.vue.js";
+import _sfc_main$2 from "../ui/button.vue.js";
+import { Field, FieldLabel, FieldError } from "../ui/field.js";
+import { useMonacoTheme, useAutoHeight, useMonacoLayout } from "./internal/monaco-composables.js";
+import { useJsonSchema } from "./internal/use-json-schema.js";
+import { useMonacoMarkers } from "./internal/use-monaco-markers.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex justify-end border-b px-1 py-0.5"
+};
+const _hoisted_2 = ["id"];
+const ERROR_SEVERITY = 8;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "monaco-json-input-lazy",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: {},
+    validate: {},
+    helperText: { type: [String, Boolean], default: void 0 },
+    disabled: { type: Boolean },
+    readOnly: { type: Boolean },
+    schema: {},
+    schemaUri: {},
+    allowComments: { type: Boolean },
+    autoHeight: { type: Boolean, default: false },
+    height: { default: 300 },
+    minHeight: { default: 120 },
+    maxHeight: { default: 600 },
+    showFormatButton: { type: Boolean, default: true },
+    class: {},
+    editorClass: {},
+    monacoOptions: {}
+  },
+  setup(__props) {
+    loader.config({ monaco });
+    const identity = (value2) => value2;
+    const props = __props;
+    const translate = useTranslate();
+    const instance = shallowRef(null);
+    const monacoApi = shallowRef(null);
+    const shape = shallowRef(null);
+    const jsonShape = computed(() => shape.value ?? "object");
+    const text = ref("");
+    const parseText = (source, textShape) => fromJsonText(
+      props.allowComments && textShape === "object" ? stripJsonComments(source) : source,
+      textShape
+    );
+    let hadError = false;
+    let checking = 0;
+    const { markers, settled } = useMonacoMarkers(instance, monacoApi, (changed) => {
+      const hasError = changed.some((m) => m.severity >= ERROR_SEVERITY);
+      if (hasError === hadError) return;
+      hadError = hasError;
+      if (checking > 0) return;
+      if (touched.value) write(value.value);
+    });
+    const { form } = useCheloneFormContext();
+    const firstError = (list) => list.find((marker) => marker.severity >= ERROR_SEVERITY)?.message;
+    const markerCheck = () => {
+      if (!form.state.isSubmitting) return firstError(markers.value);
+      checking++;
+      return settled().then(firstError).finally(() => {
+        checking--;
+      });
+    };
+    const syntaxCheck = () => {
+      if (shape.value === "string") return void 0;
+      const { parseError } = parseText(text.value, "object");
+      return parseError ? translate("chelone.validation.invalid_json", {
+        _: "Invalid JSON: %{message}",
+        message: parseError.message
+      }) : void 0;
+    };
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      defaultValue: props.defaultValue,
+      validate: composeValidators(
+        markerCheck,
+        syntaxCheck,
+        ...Array.isArray(props.validate) ? props.validate : props.validate ? [props.validate] : []
+      ),
+      format: identity,
+      parse: identity
+    });
+    const write = (next) => setValue({ target: { value: next } });
+    shape.value = detectJsonShape(value.value);
+    text.value = toJsonText(value.value, jsonShape.value);
+    watch(value, (next) => {
+      shape.value ??= detectJsonShape(next);
+      const typed = parseText(text.value, jsonShape.value);
+      const sameAsText = !typed.parseError && toJsonText(typed.value, jsonShape.value) === toJsonText(next, jsonShape.value);
+      if (!sameAsText) text.value = toJsonText(next, jsonShape.value);
+    });
+    function handleChange(next) {
+      text.value = next ?? "";
+      shape.value ??= "object";
+      const { value: parsed, parseError } = parseText(text.value, jsonShape.value);
+      if (parseError) return;
+      write(parsed);
+    }
+    watch(instance, (current, _previous, onCleanup) => {
+      const subscription = current?.onDidBlurEditorWidget(() => blur());
+      onCleanup(() => subscription?.dispose());
+    });
+    const theme = useMonacoTheme();
+    const contentHeight = useAutoHeight(
+      instance,
+      () => props.autoHeight,
+      props.minHeight,
+      () => props.maxHeight
+    );
+    const container = useMonacoLayout(instance);
+    const modelPath = `inmemory://monaco-json-input/${id.replace(/[^\w-]/g, "-")}.json`;
+    useJsonSchema(monacoApi, () => ({
+      path: modelPath,
+      schema: props.schema,
+      schemaUri: props.schemaUri,
+      allowComments: props.allowComments,
+      enabled: jsonShape.value === "object"
+    }));
+    const locked = computed(() => Boolean(props.readOnly || props.disabled));
+    const formatLabel = computed(
+      () => translate("chelone.action.format", { _: "Format" })
+    );
+    const invalid = computed(() => touched.value && error.value != null);
+    const editorHeight = computed(
+      () => `${props.autoHeight ? contentHeight.value : props.height}px`
+    );
+    const options = computed(() => ({
+      automaticLayout: false,
+      minimap: { enabled: false },
+      lineNumbers: "on",
+      wordWrap: "on",
+      tabSize: 2,
+      readOnly: locked.value,
+      ...props.monacoOptions
+    }));
+    function onMount(mountedEditor, api) {
+      instance.value = mountedEditor;
+      monacoApi.value = api;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Field), {
+        class: normalizeClass(props.class),
+        "data-invalid": invalid.value
+      }, {
+        default: withCtx(() => [
+          __props.label !== false ? (openBlock(), createBlock(unref(FieldLabel), {
+            key: 0,
+            "html-for": unref(id)
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                label: __props.label,
+                source: __props.source,
+                "is-required": unref(isRequired)
+              }, null, 8, ["label", "source", "is-required"])
+            ]),
+            _: 1
+          }, 8, ["html-for"])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(unref(cn)("flex flex-col overflow-hidden rounded-md border", __props.editorClass))
+          }, [
+            __props.showFormatButton ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              createVNode(_sfc_main$2, {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                class: "h-6 px-2",
+                "aria-label": formatLabel.value,
+                disabled: locked.value,
+                onClick: _cache[0] || (_cache[0] = ($event) => instance.value?.getAction("editor.action.formatDocument")?.run())
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(formatLabel.value), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "disabled"])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              id: unref(id),
+              ref_key: "container",
+              ref: container
+            }, [
+              createVNode(unref(VueMonacoEditor), {
+                language: "json",
+                path: modelPath,
+                value: text.value,
+                theme: unref(theme),
+                height: editorHeight.value,
+                options: options.value,
+                "onUpdate:value": handleChange,
+                onMount
+              }, null, 8, ["value", "theme", "height", "options"])
+            ], 8, _hoisted_2)
+          ], 2),
+          createVNode(_sfc_main$3, { "helper-text": __props.helperText }, null, 8, ["helper-text"]),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$4, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-input.vue.d.ts

@@ -0,0 +1,41 @@
+import type { Validator } from "@chelone/core";
+import type { editor } from "monaco-editor";
+/** Props for {@link MonacoJsonInput}. */
+export interface MonacoJsonInputProps {
+    source: string;
+    label?: string | false;
+    defaultValue?: unknown;
+    validate?: Validator | readonly Validator[];
+    helperText?: string | false;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** A JSON Schema the value is checked against. Object shape only. */
+    schema?: object;
+    /** A schema Monaco fetches from this URL. Ignored when `schema` is set. */
+    schemaUri?: string;
+    /** Tolerate comments and trailing commas in the text. */
+    allowComments?: boolean;
+    /** Grow with the content between `minHeight` and `maxHeight`. Defaults to false. */
+    autoHeight?: boolean;
+    /** Editor height in pixels when `autoHeight` is false. Defaults to 300. */
+    height?: number;
+    /** Shortest the editor gets when `autoHeight` is on. Defaults to 120. */
+    minHeight?: number;
+    /** Tallest the editor grows to when `autoHeight` is on. Defaults to 600. */
+    maxHeight?: number;
+    /** Show the Format button. Defaults to true. */
+    showFormatButton?: boolean;
+    /** Class for the field wrapper. */
+    class?: string;
+    /** Class for the editor frame. */
+    editorClass?: string;
+    /** Merged over the editor defaults, so it can override any of them. */
+    monacoOptions?: editor.IStandaloneEditorConstructionOptions;
+}
+declare const _default: import("vue").DefineComponent<MonacoJsonInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MonacoJsonInputProps> & Readonly<{}>, {
+    label: string | false;
+    helperText: string | false;
+    autoHeight: boolean;
+    showFormatButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/monaco/monaco-json-input.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent, defineAsyncComponent, openBlock, createBlock, Suspense, withCtx, createVNode, unref, normalizeProps, guardReactiveProps, normalizeClass } from "vue";
+import _sfc_main$1 from "./internal/monaco-skeleton.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "monaco-json-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: {},
+    validate: {},
+    helperText: { type: [String, Boolean], default: void 0 },
+    disabled: { type: Boolean },
+    readOnly: { type: Boolean },
+    schema: {},
+    schemaUri: {},
+    allowComments: { type: Boolean },
+    autoHeight: { type: Boolean, default: false },
+    height: {},
+    minHeight: {},
+    maxHeight: {},
+    showFormatButton: { type: Boolean, default: true },
+    class: {},
+    editorClass: {},
+    monacoOptions: {}
+  },
+  setup(__props) {
+    const MonacoJsonInputLazy = defineAsyncComponent(
+      () => import("./monaco-json-input-lazy.vue.js")
+    );
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Suspense, null, {
+        fallback: withCtx(() => [
+          createVNode(_sfc_main$1, {
+            height: props.autoHeight ? props.minHeight ?? 120 : props.height ?? 300,
+            class: normalizeClass(props.class)
+          }, null, 8, ["height", "class"])
+        ]),
+        default: withCtx(() => [
+          createVNode(unref(MonacoJsonInputLazy), normalizeProps(guardReactiveProps(props)), null, 16)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/monaco-json-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./monaco-json-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The shadcn `Alert` family, the Vue analog of `@chelone/react`'s
+ * `ui/alert.tsx`. Pure structural `defineComponent` render components in the
+ * style of `badge.ts`. Only the parts the realtime components use are ported:
+ * `Alert` and `AlertDescription`.
+ */
+/** The alert visual variants (parity with the React `alertVariants` set). */
+export type AlertVariant = "default" | "destructive";
+export declare const Alert: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => AlertVariant;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => AlertVariant;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    variant: AlertVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const AlertDescription: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/ui/alert.js

@@ -0,0 +1,46 @@
+import { defineComponent, h } from "vue";
+import { cn } from "../../lib/utils.js";
+const ALERT_BASE = "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current";
+const ALERT_VARIANTS = {
+  default: "bg-card text-card-foreground",
+  destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+};
+const Alert = defineComponent({
+  name: "Alert",
+  props: {
+    variant: { type: String, default: "default" },
+    class: { type: String, default: "" }
+  },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "alert",
+        class: cn(ALERT_BASE, ALERT_VARIANTS[props.variant], props.class)
+      },
+      slots.default?.()
+    );
+  }
+});
+const AlertDescription = defineComponent({
+  name: "AlertDescription",
+  props: { class: { type: String, default: "" } },
+  setup(props, { slots }) {
+    return () => h(
+      "div",
+      {
+        "data-slot": "alert-description",
+        class: cn(
+          "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+          props.class
+        )
+      },
+      slots.default?.()
+    );
+  }
+});
+export {
+  Alert,
+  AlertDescription
+};

package/dist/components/ui/avatar.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The avatar family (`Avatar` / `AvatarImage` / `AvatarFallback`) — the Vue
+ * analog of shadcn's radix-backed `Avatar`. Dependency-free: `Avatar` is a
+ * rounded, `overflow-hidden` container; `AvatarFallback` always renders behind
+ * it (initials / placeholder); `AvatarImage` covers the fallback when it has a
+ * `src` and loads, and removes itself on error (a local `failed` ref mirroring
+ * radix's load-status gate). `Avatar` takes an optional `size`, and
+ * `AvatarGroup` / `AvatarGroupCount` stack avatars with a `+N` overflow. The
+ * whole family lives in one module (like `sidebar-parts.ts`) rather than
+ * near-empty SFCs.
+ */
+import { type FunctionalComponent } from "vue";
+interface ClassProps {
+    class?: string;
+}
+interface AvatarProps extends ClassProps {
+    size?: "default" | "sm" | "lg";
+}
+/**
+ * The rounded container. Stacks `AvatarImage` over `AvatarFallback`. Without
+ * `size` it renders as before; with one it sets `data-size` and the size class.
+ */
+export declare const Avatar: FunctionalComponent<AvatarProps>;
+/**
+ * The avatar image. Renders nothing when it has no `src` or the load fails (so
+ * the fallback shows through), mirroring radix's load-status gate.
+ */
+export declare const AvatarImage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    src: string;
+    alt: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** The fallback shown when no image is present (typically the name's initial). */
+export declare const AvatarFallback: FunctionalComponent<ClassProps>;
+/** Stacks avatars with an overlap and a ring that separates them. */
+export declare const AvatarGroup: FunctionalComponent<ClassProps>;
+/** The `+N` chip that closes an `AvatarGroup`; it matches the size of the avatars beside it. */
+export declare const AvatarGroupCount: FunctionalComponent<ClassProps>;
+export {};