@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-XNBR5ETD.mjs

@@ -0,0 +1,380 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/CronEditor.ts
+import { computed, defineComponent, h, inject, reactive, ref, watch } from "vue";
+import {
+  applyCronFieldMode,
+  buildCronFieldValueFromDraft,
+  classNames,
+  coerceClassValue,
+  cronEditorBaseClasses,
+  cronEditorErrorClasses,
+  cronEditorFieldClasses,
+  cronEditorFieldsClasses,
+  cronEditorLabelClasses,
+  cronFieldMetas,
+  cronFieldModes,
+  formatCronControlLabel,
+  getCronEditorControlClasses,
+  getCronEditorLabels,
+  getCronExpressionIssue,
+  getCronFieldIssue,
+  getCronFieldValue,
+  getCronModeLabels,
+  getDefaultCronPresets,
+  isCronExpressionEmpty,
+  isCronFieldCountValid,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseOptionalInt,
+  seedCronFieldDraft,
+  updateCronExpressionField,
+  validateCronExpressionWithLabels
+} from "@expcat/tigercat-core";
+function seedAllDrafts(expression, sticky) {
+  const ready = isCronFieldCountValid(expression);
+  return Object.fromEntries(
+    cronFieldMetas.map((meta) => {
+      const raw = ready ? getCronFieldValue(expression, meta.key) ?? "*" : "*";
+      return [meta.key, seedCronFieldDraft(raw, sticky[meta.key])];
+    })
+  );
+}
+var CronEditor = markFormItemGroupControl(
+  defineComponent({
+    name: "TigerCronEditor",
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      disabled: { type: Boolean, default: false },
+      readonly: { type: Boolean, default: false },
+      size: { type: String, default: "md" },
+      presets: { type: Array, default: void 0 },
+      ariaLabel: { type: String, default: void 0 },
+      locale: { type: Object, default: void 0 },
+      labels: { type: Object, default: void 0 },
+      name: String,
+      id: String,
+      status: { type: String, default: void 0 },
+      className: String
+    },
+    emits: ["update:modelValue", "change", "input", "validate", "blur"],
+    setup(props, { attrs, emit, expose }) {
+      const config = useTigerConfig();
+      const formItemControl = inject(
+        FORM_ITEM_CONTROL_INJECTION_KEY,
+        null
+      );
+      const innerValue = ref(props.defaultValue ?? "");
+      const expressionInput = ref(null);
+      const stickyModes = reactive({});
+      const drafts = reactive(
+        seedAllDrafts(props.modelValue ?? props.defaultValue ?? "", stickyModes)
+      );
+      const instanceId = `tiger-cron-${Math.random().toString(36).slice(2, 9)}`;
+      watch(
+        () => props.modelValue,
+        (value) => {
+          if (value !== void 0) innerValue.value = value;
+        }
+      );
+      const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+      const labels = computed(() => getCronEditorLabels(mergedLocale.value, props.labels));
+      const fieldLabels = computed(() => ({
+        minute: labels.value.minuteLabel,
+        hour: labels.value.hourLabel,
+        dayOfMonth: labels.value.dayOfMonthLabel,
+        month: labels.value.monthLabel,
+        dayOfWeek: labels.value.dayOfWeekLabel
+      }));
+      const localizedMetas = computed(
+        () => cronFieldMetas.map((meta) => ({ ...meta, label: fieldLabels.value[meta.key] }))
+      );
+      const resolvedPresets = computed(
+        () => props.presets === void 0 ? getDefaultCronPresets(labels.value) : props.presets
+      );
+      const modeLabels = computed(() => getCronModeLabels(labels.value));
+      const effectiveDisabled = computed(
+        () => props.disabled || (formItemControl?.disabled.value ?? false)
+      );
+      const inactive = computed(() => effectiveDisabled.value || props.readonly);
+      const status = computed(() => props.status ?? formItemControl?.status.value ?? "default");
+      const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+      const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+      const expression = computed(() => {
+        if (props.modelValue !== void 0) return props.modelValue;
+        if (formItemControl?.value.value !== void 0) {
+          return String(formItemControl.value.value ?? "");
+        }
+        return innerValue.value;
+      });
+      watch(
+        expression,
+        (next) => {
+          const seeded = seedAllDrafts(next, stickyModes);
+          for (const meta of cronFieldMetas) drafts[meta.key] = seeded[meta.key];
+        },
+        { immediate: true }
+      );
+      const validation = computed(
+        () => validateCronExpressionWithLabels(expression.value, labels.value, fieldLabels.value)
+      );
+      const fieldsReady = computed(() => isCronFieldCountValid(expression.value));
+      function writeValue(nextValue) {
+        const nextValidation = validateCronExpressionWithLabels(
+          nextValue,
+          labels.value,
+          fieldLabels.value
+        );
+        if (props.modelValue === void 0) innerValue.value = nextValue;
+        emit("update:modelValue", nextValue);
+        emit("input", nextValue);
+        emit("change", nextValue, nextValidation);
+        emit("validate", nextValidation);
+        formItemControl?.onChange(nextValue);
+      }
+      function handleRawExpressionChange(nextValue) {
+        for (const key of Object.keys(stickyModes)) {
+          delete stickyModes[key];
+        }
+        writeValue(nextValue);
+      }
+      function writeField(meta, draft) {
+        const raw = buildCronFieldValueFromDraft(draft, meta);
+        if (isCronExpressionEmpty(expression.value)) {
+          const parts = ["*", "*", "*", "*", "*"];
+          const index = cronFieldMetas.findIndex((item) => item.key === meta.key);
+          parts[index] = raw;
+          writeValue(parts.join(" "));
+          return;
+        }
+        const updated = updateCronExpressionField(expression.value, meta.key, raw);
+        if (updated == null) return;
+        writeValue(updated);
+      }
+      function handleModeChange(meta, mode) {
+        stickyModes[meta.key] = mode;
+        const next = applyCronFieldMode(drafts[meta.key], mode, meta);
+        drafts[meta.key] = next;
+        writeField(meta, next);
+      }
+      function handleFocusout(event) {
+        const next = event.relatedTarget;
+        const root = event.currentTarget?.closest("[data-tiger-croneditor]");
+        if (root && next && root.contains(next)) return;
+        formItemControl?.onBlur();
+        emit("blur", event);
+      }
+      expose({
+        focus: () => expressionInput.value?.focus()
+      });
+      function renderFieldControl(meta, draft, invalid) {
+        if (draft.mode === "any") return void 0;
+        if (draft.mode === "every") {
+          return h("input", {
+            type: "text",
+            inputmode: "numeric",
+            class: getCronEditorControlClasses(props.size, invalid),
+            value: draft.stepText,
+            disabled: inactive.value || !fieldsReady.value,
+            "aria-label": formatCronControlLabel(labels.value.stepAriaLabel, meta.label),
+            onInput: (event) => {
+              const text = event.target.value;
+              drafts[meta.key] = { ...draft, stepText: text, mode: "every" };
+              if (parseOptionalInt(text) != null) writeField(meta, drafts[meta.key]);
+            }
+          });
+        }
+        if (draft.mode === "specific") {
+          return h("input", {
+            type: "text",
+            inputmode: "numeric",
+            class: getCronEditorControlClasses(props.size, invalid),
+            value: draft.valueText,
+            disabled: inactive.value || !fieldsReady.value,
+            "aria-label": formatCronControlLabel(labels.value.valueAriaLabel, meta.label),
+            onInput: (event) => {
+              const text = event.target.value;
+              drafts[meta.key] = { ...draft, valueText: text, mode: "specific" };
+              if (parseOptionalInt(text) != null) writeField(meta, drafts[meta.key]);
+            }
+          });
+        }
+        if (draft.mode === "range") {
+          return h("div", { class: "grid grid-cols-2 gap-1" }, [
+            h("input", {
+              type: "text",
+              inputmode: "numeric",
+              class: getCronEditorControlClasses(props.size, invalid),
+              value: draft.startText,
+              disabled: inactive.value || !fieldsReady.value,
+              "aria-label": formatCronControlLabel(labels.value.rangeStartAriaLabel, meta.label),
+              onInput: (event) => {
+                const text = event.target.value;
+                drafts[meta.key] = { ...draft, startText: text, mode: "range" };
+                if (parseOptionalInt(text) != null && parseOptionalInt(drafts[meta.key].endText) != null) {
+                  writeField(meta, drafts[meta.key]);
+                }
+              }
+            }),
+            h("input", {
+              type: "text",
+              inputmode: "numeric",
+              class: getCronEditorControlClasses(props.size, invalid),
+              value: draft.endText,
+              disabled: inactive.value || !fieldsReady.value,
+              "aria-label": formatCronControlLabel(labels.value.rangeEndAriaLabel, meta.label),
+              onInput: (event) => {
+                const text = event.target.value;
+                drafts[meta.key] = { ...draft, endText: text, mode: "range" };
+                if (parseOptionalInt(drafts[meta.key].startText) != null && parseOptionalInt(text) != null) {
+                  writeField(meta, drafts[meta.key]);
+                }
+              }
+            })
+          ]);
+        }
+        return h("input", {
+          type: "text",
+          class: getCronEditorControlClasses(props.size, invalid),
+          value: draft.raw,
+          disabled: inactive.value || !fieldsReady.value,
+          "aria-label": formatCronControlLabel(labels.value.customValueAriaLabel, meta.label),
+          onInput: (event) => {
+            const text = event.target.value;
+            drafts[meta.key] = { ...draft, raw: text, mode: "custom" };
+            writeField(meta, drafts[meta.key]);
+          }
+        });
+      }
+      return () => {
+        const attrRecord = attrs;
+        const labelledby = typeof attrRecord["aria-labelledby"] === "string" && attrRecord["aria-labelledby"].trim() ? attrRecord["aria-labelledby"] : formItemControl?.labelId.value;
+        const describedBy = mergeAriaDescribedBy(
+          typeof attrRecord["aria-describedby"] === "string" ? attrRecord["aria-describedby"] : void 0,
+          formItemControl?.describedBy.value
+        );
+        const expressionIssue = getCronExpressionIssue(validation.value);
+        const expressionInvalid = Boolean(expressionIssue) && !isCronExpressionEmpty(expression.value);
+        const errorId = `${instanceId}-error`;
+        const groupName = props.ariaLabel ?? labels.value.ariaLabel;
+        return h(
+          "div",
+          {
+            class: classNames(
+              cronEditorBaseClasses,
+              props.className,
+              coerceClassValue(attrs.class)
+            ),
+            role: "group",
+            "data-tiger-croneditor": "",
+            "aria-label": labelledby ? void 0 : groupName,
+            "aria-labelledby": labelledby,
+            "aria-describedby": describedBy,
+            "aria-invalid": status.value === "error" || expressionInvalid ? true : void 0,
+            onFocusout: handleFocusout
+          },
+          [
+            h("div", { class: "flex flex-col gap-2 sm:flex-row" }, [
+              h("input", {
+                ref: expressionInput,
+                type: "text",
+                id: effectiveId.value,
+                name: effectiveName.value,
+                class: classNames(
+                  getCronEditorControlClasses(props.size, expressionInvalid),
+                  "flex-1"
+                ),
+                value: expression.value,
+                disabled: effectiveDisabled.value,
+                readonly: props.readonly,
+                "aria-label": labels.value.expressionAriaLabel,
+                "aria-invalid": expressionInvalid || void 0,
+                "aria-describedby": expressionIssue ? errorId : describedBy,
+                onInput: (event) => handleRawExpressionChange(event.target.value)
+              }),
+              resolvedPresets.value.length > 0 ? h(
+                "select",
+                {
+                  class: getCronEditorControlClasses(props.size),
+                  value: resolvedPresets.value.some(
+                    (preset) => preset.value === expression.value
+                  ) ? expression.value : "",
+                  disabled: inactive.value,
+                  "aria-label": labels.value.presetAriaLabel,
+                  onChange: (event) => {
+                    const nextValue = event.target.value;
+                    if (nextValue) {
+                      for (const key of Object.keys(stickyModes)) {
+                        delete stickyModes[key];
+                      }
+                      writeValue(nextValue);
+                    }
+                  }
+                },
+                [
+                  h("option", { value: "" }, labels.value.presetPlaceholder),
+                  ...resolvedPresets.value.map(
+                    (preset) => h("option", { key: preset.value, value: preset.value }, preset.label)
+                  )
+                ]
+              ) : void 0
+            ]),
+            expressionIssue ? h(
+              "div",
+              { id: errorId, class: cronEditorErrorClasses, role: "alert" },
+              expressionIssue.message
+            ) : void 0,
+            h(
+              "div",
+              { class: cronEditorFieldsClasses },
+              localizedMetas.value.map((meta) => {
+                const draft = drafts[meta.key];
+                const issue = getCronFieldIssue(validation.value, meta.key);
+                const modeId = `${instanceId}-${meta.key}-mode`;
+                const fieldErrorId = `${instanceId}-${meta.key}-error`;
+                return h("div", { key: meta.key, class: cronEditorFieldClasses }, [
+                  h("label", { class: cronEditorLabelClasses, for: modeId }, meta.label),
+                  h(
+                    "select",
+                    {
+                      id: modeId,
+                      class: getCronEditorControlClasses(props.size, !!issue),
+                      value: draft.mode,
+                      disabled: inactive.value || !fieldsReady.value,
+                      "aria-invalid": issue ? true : void 0,
+                      "aria-describedby": issue ? fieldErrorId : void 0,
+                      "aria-label": formatCronControlLabel(labels.value.modeAriaLabel, meta.label),
+                      onChange: (event) => handleModeChange(
+                        meta,
+                        event.target.value
+                      )
+                    },
+                    cronFieldModes.map(
+                      (mode) => h("option", { key: mode, value: mode }, modeLabels.value[mode])
+                    )
+                  ),
+                  renderFieldControl(meta, draft, !!issue),
+                  issue ? h("div", { id: fieldErrorId, class: cronEditorErrorClasses }, issue.message) : void 0
+                ]);
+              })
+            )
+          ]
+        );
+      };
+    }
+  })
+);
+var CronEditor_default = CronEditor;
+
+export {
+  CronEditor,
+  CronEditor_default
+};

package/dist/{chunk-RRNQL6MJ.mjs → chunk-XWL3IP7Z.mjs}

@@ -1,27 +1,30 @@
 import {
   Timeline
-} from "./chunk-JQSIWPNM.mjs";
+} from "./chunk-K46SNCCE.mjs";
 import {
   Link
-} from "./chunk-3MO7A4GU.mjs";
+} from "./chunk-2HP6DX7Q.mjs";
 import {
   Loading
-} from "./chunk-ZOP7PEKY.mjs";
+} from "./chunk-OO27UB75.mjs";
 import {
   Tag
-} from "./chunk-342DH5CF.mjs";
+} from "./chunk-7PLYHGMY.mjs";
 import {
   Text
-} from "./chunk-NN6AINLG.mjs";
+} from "./chunk-I77GUQV4.mjs";
 import {
   Card
-} from "./chunk-TC6ZPQFT.mjs";
+} from "./chunk-W4A6L2TC.mjs";
 import {
   Avatar
-} from "./chunk-ZFTRR3KW.mjs";
+} from "./chunk-OGXSLKXD.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/ActivityFeed.ts
 import { defineComponent, computed, h } from "vue";
@@ -41,47 +44,43 @@ import {
   activityItemHeaderClasses,
   activityItemTitleGroupClasses,
   activityItemDescriptionClasses,
-  activityItemActionsClasses
+  activityItemActionsClasses,
+  activityFeedActionClasses,
+  activityFeedItemSurfaceClasses,
+  activityFeedAvatarClasses,
+  activityFeedTitleClasses,
+  activityFeedTimeClasses,
+  activityFeedDescriptionClasses,
+  activityFeedStateCardClasses,
+  activityFeedLoadingClasses,
+  activityFeedEmptyIconClasses,
+  activityFeedGroupMarkerClasses,
+  activityFeedGroupTitleClasses,
+  activityFeedDotBaseClasses,
+  activityFeedDotPulseBaseClasses,
+  getActivityFeedDotClasses
 } from "@expcat/tigercat-core";
-
-// ../core/src/internal/activity-feed-styles.ts
-var activityFeedActionClasses = "tiger-motion-aware inline-flex items-center px-2.5 py-1 rounded-[var(--tiger-radius-md,0.5rem)] text-xs font-semibold text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var activityFeedItemSurfaceClasses = "tiger-motion-aware p-4 rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:shadow-[var(--tiger-shadow-glass-strong,0_4px_6px_-1px_rgb(0_0_0_/_0.1))] hover:-translate-y-0.5 w-full";
-var activityFeedAvatarClasses = "tiger-motion-aware shrink-0 ring-2 ring-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
-var activityFeedTitleClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer truncate";
-var activityFeedTimeClasses = "shrink-0 whitespace-nowrap font-medium text-[var(--tiger-text-muted,#6b7280)]";
-var activityFeedDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed pl-0.5 mt-1";
-var activityFeedStateCardClasses = "bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-xl,1rem)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] overflow-hidden";
-var activityFeedLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
-var activityFeedEmptyIconClasses = "tiger-motion-aware w-12 h-12 text-[var(--tiger-text-muted,#9ca3af)] mb-3 animate-pulse";
-var activityFeedGroupMarkerClasses = "w-1.5 h-3.5 bg-[var(--tiger-primary,#2563eb)] rounded-full shadow-sm";
-var activityFeedGroupTitleClasses = "text-[var(--tiger-text,#111827)] uppercase tracking-wider";
-var activityFeedDotBaseClasses = "w-3 h-3 rounded-full border-2 border-[var(--tiger-surface,#ffffff)] shadow-sm relative z-10";
-var activityFeedDotPulseBaseClasses = "tiger-motion-aware absolute inline-flex h-full w-full rounded-full animate-ping opacity-75";
-var dotVariantClasses = {
-  success: "bg-[var(--tiger-success,#16a34a)]",
-  warning: "bg-[var(--tiger-warning,#d97706)]",
-  error: "bg-[var(--tiger-error,#dc2626)]",
-  danger: "bg-[var(--tiger-error,#dc2626)]",
-  primary: "bg-[var(--tiger-primary,#2563eb)]",
-  info: "bg-[var(--tiger-primary,#2563eb)]"
-};
-var dotPulseVariantClasses = {
-  success: "bg-[var(--tiger-success,#16a34a)]/30",
-  warning: "bg-[var(--tiger-warning,#d97706)]/30",
-  error: "bg-[var(--tiger-error,#dc2626)]/30",
-  danger: "bg-[var(--tiger-error,#dc2626)]/30",
-  primary: "bg-[var(--tiger-primary,#2563eb)]/30",
-  info: "bg-[var(--tiger-primary,#2563eb)]/30"
-};
-var getActivityFeedDotClasses = (variant) => ({
-  dot: dotVariantClasses[variant ?? ""] ?? "bg-[var(--tiger-border,#d1d5db)]",
-  pulse: dotPulseVariantClasses[variant ?? ""] ?? ""
-});
-
-// src/components/ActivityFeed.ts
 var renderAction = (item, action, index) => {
   const key = action.key ?? `${item.id}-action-${index}`;
+  const onClick = (event) => {
+    if (action.href === "#" || action.onClick) event?.preventDefault();
+    if (action.disabled) return;
+    action.onClick?.(item, action);
+  };
+  if (!action.href) {
+    return h(
+      Button,
+      {
+        key,
+        size: "sm",
+        variant: "ghost",
+        disabled: action.disabled,
+        class: activityFeedActionClasses,
+        onClick
+      },
+      { default: () => action.label }
+    );
+  }
   return h(
     Link,
     {
@@ -89,15 +88,14 @@ var renderAction = (item, action, index) => {
       size: "sm",
       variant: "primary",
       underline: false,
-      href: action.href,
+      href: action.disabled ? void 0 : action.href,
       target: action.target,
       disabled: action.disabled,
-      className: activityFeedActionClasses,
-      onClick: () => action.onClick?.(item, action)
+      class: activityFeedActionClasses,
+      tabindex: action.disabled ? -1 : void 0,
+      onClick
     },
-    {
-      default: () => action.label
-    }
+    { default: () => action.label }
   );
 };
 var ActivityFeed = defineComponent({
@@ -166,7 +164,13 @@ var ActivityFeed = defineComponent({
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getActivityFeedLabels(mergedLocale.value, props.labels));
     const resolvedGroups = computed(
-      () => buildActivityGroups(props.items, props.groups, props.groupBy, props.groupOrder)
+      () => buildActivityGroups(
+        props.items,
+        props.groups,
+        props.groupBy,
+        props.groupOrder,
+        labels.value.otherGroupTitle
+      )
     );
     const wrapperClasses = computed(
       () => classNames(
@@ -187,7 +191,7 @@ var ActivityFeed = defineComponent({
       }
       const titleText = item.title ?? (typeof item.content === "string" || typeof item.content === "number" ? String(item.content) : "");
       const descriptionText = item.description;
-      const timeText = props.showTime ? formatActivityTime(item.time) : "";
+      const timeText = props.showTime ? formatActivityTime(item.time, mergedLocale.value) : "";
       const actionNodes = item.actions?.map(
         (action, actionIndex) => renderAction(item, action, actionIndex)
       );
@@ -263,11 +267,11 @@ var ActivityFeed = defineComponent({
     };
     const feedRole = computed(() => attrs.role ?? "feed");
     const feedAriaLabel = computed(
-      () => attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : "Activity")
+      () => attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : labels.value.listAriaLabel)
     );
     const feedAriaBusy = computed(() => attrs["aria-busy"] ?? (props.loading ? "true" : void 0));
     return () => {
-      if (props.loading) {
+      if (props.loading && resolvedGroups.value.length === 0) {
         const loadingNode = slots.loading ? slots.loading() : h(Loading, {
           text: resolveLocaleText(labels.value.loadingText, props.loadingText),
           class: activityFeedLoadingClasses
@@ -303,6 +307,7 @@ var ActivityFeed = defineComponent({
           h(
             "svg",
             {
+              "aria-hidden": "true",
               class: activityFeedEmptyIconClasses,
               fill: "none",
               viewBox: "0 0 24 24",
@@ -359,11 +364,22 @@ var ActivityFeed = defineComponent({
           "data-tiger-activity-feed": true
         },
         resolvedGroups.value.map((group, groupIndex) => {
-          const headerNode = slots.groupTitle ? slots.groupTitle({ group }) : void 0;
+          const headerNode = slots.groupHeader?.({ group }) ?? slots.groupTitle?.({ group });
           const groupTitle = group.title;
           const timelineItems = toActivityTimelineItems(group.items);
+          const renderDot = (timelineItem) => {
+            const activity = timelineItem.activity;
+            const statusVariant = activity?.status?.variant ?? "default";
+            const dotClasses = getActivityFeedDotClasses(statusVariant);
+            return h("div", { class: "relative flex items-center justify-center w-2.5 h-2.5" }, [
+              dotClasses.pulse ? h("span", {
+                class: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}`
+              }) : null,
+              h("span", { class: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
+            ]);
+          };
           return h("div", { key: group.key ?? groupIndex, class: "space-y-3" }, [
-            props.showGroupTitle && groupTitle ? headerNode ?? h("div", { class: "flex items-center gap-2 mb-2" }, [
+            props.showGroupTitle ? headerNode ?? (groupTitle ? h("div", { class: "flex items-center gap-2 mb-2" }, [
               h("span", {
                 class: activityFeedGroupMarkerClasses
               }),
@@ -377,24 +393,12 @@ var ActivityFeed = defineComponent({
                 },
                 { default: () => groupTitle }
               )
-            ]) : null,
+            ]) : null) : null,
             h(
               Timeline,
+              { items: timelineItems },
               {
-                items: timelineItems,
-                renderDot: (timelineItem) => {
-                  const activity = timelineItem.activity;
-                  const statusVariant = activity?.status?.variant ?? "default";
-                  const dotClasses = getActivityFeedDotClasses(statusVariant);
-                  return h("div", { class: "relative flex items-center justify-center w-4 h-4" }, [
-                    dotClasses.pulse ? h("span", {
-                      class: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}`
-                    }) : null,
-                    h("span", { class: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
-                  ]);
-                }
-              },
-              {
+                dot: ({ item }) => renderDot(item),
                 item: ({ item, index }) => {
                   const activity = item.activity;
                   if (!activity) return null;