@dataverse-kit/form-runtime 0.1.0

package/dist/v8.mjs

@@ -0,0 +1,4622 @@
+// src/v8/controls/types.ts
+function isDisabled(control, interactive) {
+  return !interactive || control.readOnly === true;
+}
+
+// src/v8/controls/spacer.tsx
+import { jsx } from "react/jsx-runtime";
+var SpacerControl = ({ control, interactive }) => {
+  const designOutline = !interactive;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: control.properties.height ?? 16,
+        backgroundColor: designOutline ? "#f3f2f1" : "transparent",
+        border: designOutline ? "1px dashed #c8c6c4" : "none",
+        borderRadius: 2
+      }
+    }
+  );
+};
+
+// src/v8/controls/label.tsx
+import React from "react";
+import DOMPurify from "dompurify";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IS_BROWSER = typeof window !== "undefined" && typeof document !== "undefined";
+var PURIFY_CONFIG = {
+  // Block phishing-shaped elements. DOMPurify 3.x defaults permit
+  // <form>, <input>, <button>, <select>, <textarea>, <option> — an
+  // attacker-controlled label could render a fake login form
+  // indistinguishable from the host app's chrome.
+  FORBID_TAGS: ["form", "input", "button", "select", "textarea", "option"],
+  // Drop `target` outright. Reverse-tabnabbing (`target="_blank"`
+  // without `rel="noopener noreferrer"`) is the cousin bypass to
+  // `javascript:` URIs and DOMPurify doesn't auto-rel-noopener.
+  // Labels have no legitimate need to escape the current frame.
+  FORBID_ATTR: ["target"]
+};
+function sanitizeLabelHtml(text) {
+  if (!IS_BROWSER) {
+    return text.replace(/<[^>]*>/g, "");
+  }
+  return String(DOMPurify.sanitize(text, PURIFY_CONFIG));
+}
+var LabelControl = ({ control, interactive }) => {
+  const text = String(control.properties.text ?? "");
+  const variant = control.properties.variant ?? "medium";
+  const fontWeight = control.properties.fontWeight ?? "normal";
+  const color = control.properties.color ?? "#323130";
+  const alignment = control.properties.alignment ?? "left";
+  const fontSizeMap = { small: 12, medium: 14, large: 16, xLarge: 20 };
+  const fontSize = fontSizeMap[variant] ?? 14;
+  const hasHtml = !!text && /<[^>]+>/.test(text);
+  const safeHtml = React.useMemo(() => hasHtml ? sanitizeLabelHtml(text) : "", [hasHtml, text]);
+  const renderableHtml = hasHtml ? safeHtml.trim() : "";
+  const strippedText = text ? text.replace(/<[^>]*>/g, "").trim() : "";
+  const isEmpty = !strippedText && !renderableHtml;
+  const designMode = !interactive;
+  const useHtmlBranch = hasHtml && !!renderableHtml;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        fontSize,
+        fontWeight,
+        color,
+        textAlign: alignment,
+        padding: "4px 0",
+        border: designMode && isEmpty ? "1px dashed #c8c6c4" : "none",
+        borderRadius: 2,
+        minHeight: designMode ? 24 : "auto"
+      },
+      ...useHtmlBranch ? { dangerouslySetInnerHTML: { __html: safeHtml } } : {
+        // When `hasHtml` was true but sanitize emptied the string,
+        // show the design-mode placeholder rather than the raw
+        // pre-sanitize text — leaking literal `<script>...</script>`
+        // chars into the label would be confusing.
+        children: hasHtml ? designMode ? "(Enter label text)" : "" : text || (designMode ? "(Enter label text)" : "")
+      }
+    }
+  );
+};
+
+// src/v8/controls/formlink.tsx
+import { Icon, Link } from "@fluentui/react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FormLinkControl = ({
+  control,
+  interactive,
+  onButtonClick
+}) => {
+  const linkText = control.properties.linkText || "Open form";
+  const iconName = control.properties.iconName || "OpenInNewWindow";
+  const showIcon = control.properties.showIcon ?? true;
+  const linkMode = control.properties.linkMode || "projectForm";
+  const openInNewTab = control.properties.openInNewTab ?? true;
+  const recordUrl = control.properties.recordUrl || "";
+  const disabled = isDisabled(control, interactive);
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: linkMode === "recordUrl" && recordUrl ? recordUrl : void 0,
+      target: openInNewTab ? "_blank" : void 0,
+      disabled,
+      onClick: onButtonClick ? () => onButtonClick({ control }) : void 0,
+      styles: { root: { display: "inline-flex", alignItems: "center", gap: 4 } },
+      children: [
+        showIcon && /* @__PURE__ */ jsx3(Icon, { iconName, styles: { root: { fontSize: 14 } } }),
+        linkText
+      ]
+    }
+  );
+};
+
+// src/v8/controls/unknown.tsx
+import { TextField as TextField2 } from "@fluentui/react";
+
+// src/v8/controls/internals/TextFieldWithFormat.tsx
+import { useState, useMemo } from "react";
+import { TextField, IconButton, mergeStyles, Icon as Icon2 } from "@fluentui/react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var containerClass = mergeStyles({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  width: "100%"
+});
+var textFieldWrapperClass = mergeStyles({
+  flex: 1,
+  position: "relative"
+});
+var prefixIconContainerClass = mergeStyles({
+  position: "absolute",
+  left: 8,
+  top: "50%",
+  transform: "translateY(-50%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  zIndex: 1
+});
+var actionButtonClass = mergeStyles({
+  flexShrink: 0
+});
+function getInputType(format, showPassword) {
+  switch (format) {
+    case "email":
+      return "email";
+    case "url":
+      return "url";
+    case "phone":
+      return "tel";
+    case "password":
+      return showPassword ? "text" : "password";
+    default:
+      return "text";
+  }
+}
+function getIconColor(format) {
+  switch (format) {
+    case "email":
+    case "url":
+      return "#0078d4";
+    case "phone":
+      return "#107c10";
+    case "password":
+    default:
+      return "#605e5c";
+  }
+}
+function getActionConfig(format, value) {
+  if (!value) return null;
+  switch (format) {
+    case "email":
+      return {
+        iconName: "Mail",
+        title: "Send email",
+        href: `mailto:${value}`,
+        ariaLabel: "Send email"
+      };
+    case "url": {
+      const urlWithProtocol = value.startsWith("http://") || value.startsWith("https://") ? value : `https://${value}`;
+      return {
+        iconName: "OpenInNewWindow",
+        title: "Open link",
+        href: urlWithProtocol,
+        ariaLabel: "Open link in new tab"
+      };
+    }
+    case "phone":
+      return {
+        iconName: "Phone",
+        title: "Call",
+        href: `tel:${value.replace(/[^\d+]/g, "")}`,
+        ariaLabel: "Make phone call"
+      };
+    default:
+      return null;
+  }
+}
+var TextFieldWithFormat = ({
+  textFormat,
+  placeholder,
+  disabled = false,
+  value,
+  maxLength,
+  onChange,
+  showActionButton = false,
+  allowPasswordToggle = true,
+  iconName
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const showIconPrefix = !!iconName && textFormat !== "text";
+  const inputType = useMemo(
+    () => getInputType(textFormat, showPassword),
+    [textFormat, showPassword]
+  );
+  const actionConfig = useMemo(
+    () => showActionButton ? getActionConfig(textFormat, value) : null,
+    [showActionButton, textFormat, value]
+  );
+  const handleActionClick = () => {
+    if (actionConfig?.href) {
+      if (textFormat === "url") {
+        window.open(actionConfig.href, "_blank", "noopener,noreferrer");
+      } else {
+        window.location.href = actionConfig.href;
+      }
+    }
+  };
+  const handlePasswordToggle = () => setShowPassword(!showPassword);
+  const textFieldStyles = useMemo(
+    () => ({
+      root: { width: "100%" },
+      fieldGroup: showIconPrefix ? { paddingLeft: 28 } : void 0
+    }),
+    [showIconPrefix]
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: containerClass, children: [
+    /* @__PURE__ */ jsxs2("div", { className: textFieldWrapperClass, children: [
+      showIconPrefix && /* @__PURE__ */ jsx4("div", { className: prefixIconContainerClass, children: /* @__PURE__ */ jsx4(
+        Icon2,
+        {
+          iconName,
+          styles: {
+            root: {
+              fontSize: 14,
+              color: disabled ? "#a19f9d" : getIconColor(textFormat)
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(
+        TextField,
+        {
+          type: inputType,
+          placeholder,
+          disabled,
+          value,
+          maxLength,
+          onChange,
+          styles: textFieldStyles
+        }
+      )
+    ] }),
+    textFormat === "password" && allowPasswordToggle && /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        iconProps: { iconName: showPassword ? "Hide" : "View" },
+        title: showPassword ? "Hide password" : "Show password",
+        ariaLabel: showPassword ? "Hide password" : "Show password",
+        onClick: handlePasswordToggle,
+        disabled,
+        className: actionButtonClass,
+        styles: {
+          root: { height: 32, width: 32 },
+          icon: { fontSize: 14, color: "#605e5c" }
+        }
+      }
+    ),
+    actionConfig && !disabled && /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        iconProps: { iconName: actionConfig.iconName },
+        title: actionConfig.title,
+        ariaLabel: actionConfig.ariaLabel,
+        onClick: handleActionClick,
+        className: actionButtonClass,
+        styles: {
+          root: { height: 32, width: 32 },
+          icon: { fontSize: 14, color: getIconColor(textFormat) }
+        }
+      }
+    )
+  ] });
+};
+
+// src/v8/controls/unknown.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LEGACY_FORMAT_MAP = {
+  phone: "phone",
+  email: "email",
+  url: "url"
+};
+var UnknownControl = ({
+  control,
+  displayValue,
+  hasValue,
+  hasControlledValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const inferredFormat = LEGACY_FORMAT_MAP[control.type] ?? "text";
+  const isLegacyTextType = inferredFormat !== "text";
+  if (isLegacyTextType) {
+    const showPlaceholder = control.properties.showPlaceholder ?? false;
+    const customPlaceholder = control.properties.placeholder;
+    const placeholderMap = {
+      text: control.label,
+      email: "email@example.com",
+      url: "https://example.com",
+      phone: "+1 (555) 000-0000",
+      password: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+    };
+    const placeholder = showPlaceholder ? customPlaceholder ?? placeholderMap[inferredFormat] : void 0;
+    const iconMap = {
+      text: void 0,
+      email: "Mail",
+      url: "Link",
+      phone: "Phone",
+      password: "Lock"
+    };
+    return /* @__PURE__ */ jsx5(
+      TextFieldWithFormat,
+      {
+        textFormat: inferredFormat,
+        placeholder,
+        disabled,
+        value: hasControlledValue ? displayValue : hasValue ? displayValue : void 0,
+        maxLength: control.properties.maxLength,
+        onChange: onChange ? (_, newValue) => onChange(newValue ?? "") : void 0,
+        showActionButton: control.properties.showActionButton ?? true,
+        allowPasswordToggle: true,
+        iconName: iconMap[inferredFormat]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    TextField2,
+    {
+      placeholder: control.label,
+      disabled,
+      value: hasValue ? displayValue : void 0,
+      onChange: onChange ? (_, newValue) => onChange(newValue ?? "") : void 0
+    }
+  );
+};
+
+// src/v8/controls/text.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TextControl = ({
+  control,
+  displayValue,
+  hasValue,
+  hasControlledValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const textFormat = control.properties.textFormat ?? "text";
+  const showPlaceholder = control.properties.showPlaceholder ?? false;
+  const customPlaceholder = control.properties.placeholder;
+  const showActionButton = control.properties.showActionButton ?? false;
+  const allowPasswordToggle = control.properties.allowPasswordToggle ?? true;
+  const placeholderMap = {
+    text: control.label,
+    email: "email@example.com",
+    url: "https://example.com",
+    phone: "+1 (555) 000-0000",
+    password: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+  };
+  const placeholder = showPlaceholder ? customPlaceholder ?? placeholderMap[textFormat] : void 0;
+  const iconMap = {
+    text: void 0,
+    email: "Mail",
+    url: "Link",
+    phone: "Phone",
+    password: "Lock"
+  };
+  return /* @__PURE__ */ jsx6(
+    TextFieldWithFormat,
+    {
+      textFormat,
+      placeholder,
+      disabled,
+      value: hasControlledValue ? displayValue : hasValue ? displayValue : void 0,
+      maxLength: control.properties.maxLength,
+      onChange: onChange ? (_, newValue) => onChange(newValue ?? "") : void 0,
+      showActionButton,
+      allowPasswordToggle,
+      iconName: iconMap[textFormat]
+    }
+  );
+};
+
+// src/v8/controls/textarea.tsx
+import { TextField as TextField3 } from "@fluentui/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextareaControl = ({
+  control,
+  displayValue,
+  hasValue,
+  hasControlledValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  return /* @__PURE__ */ jsx7(
+    TextField3,
+    {
+      multiline: true,
+      rows: control.properties.rows ?? 3,
+      disabled,
+      value: hasControlledValue ? displayValue : hasValue ? displayValue : void 0,
+      defaultValue: hasControlledValue || hasValue ? void 0 : "",
+      onChange: onChange ? (_, newValue) => onChange(newValue ?? "") : void 0,
+      styles: control.properties.resizable === false ? { field: { resize: "none" } } : void 0
+    }
+  );
+};
+
+// src/v8/controls/number.tsx
+import { SpinButton } from "@fluentui/react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var NumberControl = ({
+  control,
+  displayValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const step = control.type === "number" ? 1 : 0.01;
+  return /* @__PURE__ */ jsx8(
+    SpinButton,
+    {
+      disabled,
+      step,
+      value: hasValue ? displayValue : "",
+      incrementButtonAriaLabel: "Increase",
+      decrementButtonAriaLabel: "Decrease",
+      onChange: onChange ? (_, newValue) => onChange(newValue ?? "") : void 0
+    }
+  );
+};
+
+// src/v8/controls/date.tsx
+import { DatePicker } from "@fluentui/react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var DateControl = ({
+  control,
+  effectiveValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  let dateValue;
+  if (hasValue && effectiveValue) {
+    const parsed = effectiveValue instanceof Date ? effectiveValue : new Date(String(effectiveValue));
+    if (!isNaN(parsed.getTime())) {
+      dateValue = parsed;
+    }
+  }
+  const showPlaceholder = control.properties.showPlaceholder ?? false;
+  const customPlaceholder = control.properties.placeholder;
+  const placeholder = showPlaceholder ? customPlaceholder ?? (control.type === "datetime" ? "Select date and time" : "Select date") : void 0;
+  return /* @__PURE__ */ jsx9(
+    DatePicker,
+    {
+      placeholder,
+      disabled,
+      ariaLabel: control.label,
+      value: dateValue,
+      onSelectDate: onChange ? (date) => onChange(date ?? null) : void 0
+    }
+  );
+};
+
+// src/v8/controls/checkbox.tsx
+import { Checkbox } from "@fluentui/react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CheckboxControl = ({
+  control,
+  effectiveValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const checked = hasValue ? Boolean(effectiveValue) : void 0;
+  const boxSide = control.properties.boxSide ?? "end";
+  return /* @__PURE__ */ jsx10(
+    Checkbox,
+    {
+      label: "",
+      boxSide,
+      disabled,
+      checked,
+      onChange: onChange ? (_, isChecked) => onChange(!!isChecked) : void 0
+    }
+  );
+};
+
+// src/v8/controls/toggle.tsx
+import { Toggle } from "@fluentui/react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ToggleControl = ({
+  control,
+  effectiveValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const checked = hasValue ? Boolean(effectiveValue) : void 0;
+  return /* @__PURE__ */ jsx11(
+    Toggle,
+    {
+      onText: control.properties.onText ?? "Yes",
+      offText: control.properties.offText ?? "No",
+      disabled,
+      checked,
+      onChange: onChange ? (_, isChecked) => onChange(!!isChecked) : void 0
+    }
+  );
+};
+
+// src/v8/controls/slider.tsx
+import { Slider } from "@fluentui/react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SliderControl = ({
+  control,
+  effectiveValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const min = control.properties.min ?? 0;
+  const max = control.properties.max ?? 100;
+  const step = control.properties.step ?? 1;
+  const showValue = control.properties.showValue ?? true;
+  const vertical = control.properties.vertical ?? false;
+  const originFromZero = control.properties.originFromZero ?? false;
+  const snapToStep = control.properties.snapToStep ?? true;
+  const value = hasValue ? typeof effectiveValue === "number" ? effectiveValue : parseFloat(String(effectiveValue)) : void 0;
+  return /* @__PURE__ */ jsx12(
+    Slider,
+    {
+      min,
+      max,
+      step,
+      showValue,
+      vertical,
+      originFromZero,
+      snapToStep,
+      disabled,
+      value: typeof value === "number" && !isNaN(value) ? value : void 0,
+      onChange: onChange ? (next) => onChange(next) : void 0,
+      styles: { root: { width: "100%" } }
+    }
+  );
+};
+
+// src/v8/controls/rating.tsx
+import { Rating, RatingSize } from "@fluentui/react";
+
+// src/v8/controls/internals/EmojiRating.tsx
+import { useState as useState2 } from "react";
+import { Icon as Icon3 } from "@fluentui/react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var EMOJI_SETS = {
+  2: {
+    icons: ["EmojiDisappointed", "Emoji"],
+    colors: ["#d13438", "#107c10"],
+    selectedColors: ["#a4262c", "#0b6a0b"],
+    labels: ["Unhappy", "Happy"]
+  },
+  3: {
+    icons: ["EmojiDisappointed", "EmojiNeutral", "Emoji"],
+    colors: ["#d13438", "#c8c820", "#107c10"],
+    selectedColors: ["#a4262c", "#8f7b0e", "#0b6a0b"],
+    labels: ["Unhappy", "Neutral", "Happy"]
+  },
+  4: {
+    icons: ["EmojiDisappointed", "Sad", "Emoji2", "Emoji"],
+    colors: ["#d13438", "#ca5010", "#498205", "#107c10"],
+    selectedColors: ["#a4262c", "#8e3900", "#2d5702", "#0b6a0b"],
+    labels: ["Very Unhappy", "Unhappy", "Happy", "Very Happy"]
+  },
+  5: {
+    icons: ["EmojiDisappointed", "Sad", "EmojiNeutral", "Emoji2", "Emoji"],
+    colors: ["#d13438", "#ca5010", "#c8c820", "#498205", "#107c10"],
+    selectedColors: ["#a4262c", "#8e3900", "#8f7b0e", "#2d5702", "#0b6a0b"],
+    labels: ["Very Unhappy", "Unhappy", "Neutral", "Happy", "Very Happy"]
+  }
+};
+function getEmojiSet(count) {
+  const clamped = Math.max(2, Math.min(count, 5));
+  return EMOJI_SETS[clamped];
+}
+var EmojiRating = ({
+  max,
+  size,
+  useColor,
+  customEmojiColor,
+  disabled
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState2(null);
+  const [hoveredIndex, setHoveredIndex] = useState2(null);
+  const iconSizeMap = { small: 20, medium: 28, large: 36 };
+  const baseSize = iconSizeMap[size] ?? 28;
+  const emojiSet = getEmojiSet(max);
+  const gap = size === "small" ? 4 : 8;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      style: { display: "flex", gap, alignItems: "center" },
+      onMouseLeave: () => !disabled && setHoveredIndex(null),
+      children: emojiSet.icons.map((iconName, idx) => {
+        const isSelected = selectedIndex === idx;
+        const isHovered = hoveredIndex === idx;
+        const isActive = isSelected || isHovered;
+        const outlineColor = useColor ? customEmojiColor || emojiSet.colors[idx] : "#605e5c";
+        const fillColor = useColor ? customEmojiColor || emojiSet.selectedColors[idx] : "#323130";
+        const activeSize = Math.round(baseSize * 1.15);
+        const circleSize = isActive ? activeSize + 12 : void 0;
+        return /* @__PURE__ */ jsx13(
+          "div",
+          {
+            onClick: () => !disabled && setSelectedIndex(isSelected ? null : idx),
+            onMouseEnter: () => !disabled && setHoveredIndex(idx),
+            title: emojiSet.labels[idx],
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: circleSize,
+              height: circleSize,
+              borderRadius: "50%",
+              backgroundColor: isActive ? fillColor : "transparent",
+              cursor: disabled ? "default" : "pointer",
+              transition: "all 0.15s ease",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx13(
+              Icon3,
+              {
+                iconName,
+                styles: {
+                  root: {
+                    fontSize: isActive ? activeSize : baseSize,
+                    color: isActive ? "#ffffff" : outlineColor,
+                    opacity: disabled ? 0.4 : selectedIndex !== null && !isActive ? 0.4 : 1,
+                    transition: "all 0.15s ease",
+                    display: "flex"
+                  }
+                }
+              }
+            )
+          },
+          iconName
+        );
+      })
+    }
+  );
+};
+
+// src/v8/controls/rating.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var RatingControl = ({ control, interactive }) => {
+  const disabled = isDisabled(control, interactive);
+  const max = control.properties.max ?? 5;
+  const allowZeroStars = control.properties.allowZeroStars ?? false;
+  const size = control.properties.size ?? "medium";
+  const ratingStyle = control.properties.ratingStyle ?? "stars";
+  const useColor = control.properties.useColor ?? false;
+  const starColor = control.properties.starColor ?? "#ffc83d";
+  const customEmojiColor = control.properties.emojiColor || "";
+  if (ratingStyle === "stars") {
+    const sizeMap = {
+      small: RatingSize.Small,
+      medium: RatingSize.Small,
+      large: RatingSize.Large
+    };
+    return /* @__PURE__ */ jsx14(
+      Rating,
+      {
+        max,
+        allowZeroStars,
+        size: sizeMap[size] ?? RatingSize.Small,
+        disabled,
+        styles: useColor ? {
+          ratingStarFront: { color: starColor },
+          ratingStarBack: { color: "#c8c6c4" }
+        } : void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    EmojiRating,
+    {
+      max,
+      size,
+      useColor,
+      customEmojiColor,
+      disabled
+    }
+  );
+};
+
+// src/v8/controls/spinbutton.tsx
+import { SpinButton as SpinButton2 } from "@fluentui/react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var SpinButtonControl = ({ control, interactive }) => {
+  const disabled = isDisabled(control, interactive);
+  const min = control.properties.min ?? 0;
+  const max = control.properties.max ?? 100;
+  const step = control.properties.step ?? 1;
+  const precision = control.properties.precision ?? 0;
+  return /* @__PURE__ */ jsx15(
+    SpinButton2,
+    {
+      min,
+      max,
+      step,
+      precision,
+      disabled,
+      styles: { root: { width: "100%" } }
+    }
+  );
+};
+
+// src/v8/controls/dropdown.tsx
+import {
+  Dropdown,
+  ComboBox,
+  Icon as Icon4
+} from "@fluentui/react";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+function resolveRawOptions(optionSourceMode, customOptions, metadataOptions) {
+  if (optionSourceMode === "custom" && customOptions && customOptions.length > 0) {
+    return customOptions;
+  }
+  if (metadataOptions && metadataOptions.length > 0) {
+    return metadataOptions.map((opt) => ({ key: opt.value, text: opt.label, color: opt.color }));
+  }
+  return customOptions ?? [];
+}
+var DropdownControl = ({
+  control,
+  effectiveValue,
+  displayValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const optionSourceMode = control.properties.optionSourceMode ?? "custom";
+  const metadataOptions = control.dataBinding?.optionSetOptions;
+  const customOptions = control.properties.options;
+  const isMultiSelect = control.properties.multiSelect ?? false;
+  const showOptionColors = control.properties.showOptionColors ?? false;
+  const showPlaceholder = control.properties.showPlaceholder ?? false;
+  const customPlaceholder = control.properties.placeholder;
+  const placeholder = showPlaceholder ? customPlaceholder ?? (isMultiSelect ? "Select options" : "Select an option") : void 0;
+  const rawOptions = resolveRawOptions(optionSourceMode, customOptions, metadataOptions);
+  const options = rawOptions.map((opt) => ({
+    key: opt.key,
+    text: opt.text,
+    data: { color: opt.color, icon: opt.icon }
+  }));
+  let selectedKey;
+  let selectedKeys = [];
+  if (hasValue) {
+    if (isMultiSelect && Array.isArray(effectiveValue)) {
+      selectedKeys = effectiveValue;
+    } else if (typeof effectiveValue === "number") {
+      selectedKey = effectiveValue;
+      selectedKeys = [effectiveValue];
+    } else if (typeof effectiveValue === "string") {
+      const matchByText = options.find((opt) => opt.text.toLowerCase() === displayValue.toLowerCase());
+      selectedKey = matchByText?.key ?? effectiveValue;
+      selectedKeys = matchByText ? [matchByText.key] : [];
+    }
+  }
+  const renderOption = (optProps) => {
+    if (!optProps) return null;
+    const optColor = optProps.data?.color;
+    const optIcon = optProps.data?.icon;
+    const iconColor = showOptionColors && optColor ? optColor : "#605e5c";
+    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      optIcon ? /* @__PURE__ */ jsx16(Icon4, { iconName: optIcon, styles: { root: { fontSize: 14, color: iconColor, flexShrink: 0 } } }) : showOptionColors && optColor && /* @__PURE__ */ jsx16(
+        "div",
+        {
+          style: {
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            backgroundColor: optColor,
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx16("span", { children: optProps.text })
+    ] });
+  };
+  const renderTitle = (titleOptions) => {
+    if (!titleOptions || titleOptions.length === 0) return null;
+    if (isMultiSelect) {
+      return /* @__PURE__ */ jsx16("div", { style: { display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }, children: titleOptions.map((opt2) => {
+        const optIcon2 = opt2.data?.icon;
+        const optColor2 = opt2.data?.color;
+        const iconColor2 = showOptionColors && optColor2 ? optColor2 : "#605e5c";
+        return /* @__PURE__ */ jsxs3(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              backgroundColor: "#f3f2f1",
+              padding: "2px 6px",
+              borderRadius: 3,
+              fontSize: 12
+            },
+            children: [
+              optIcon2 ? /* @__PURE__ */ jsx16(Icon4, { iconName: optIcon2, styles: { root: { fontSize: 12, color: iconColor2 } } }) : showOptionColors && optColor2 && /* @__PURE__ */ jsx16(
+                "div",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: 2,
+                    backgroundColor: optColor2
+                  }
+                }
+              ),
+              opt2.text
+            ]
+          },
+          opt2.key
+        );
+      }) });
+    }
+    const opt = titleOptions[0];
+    const optIcon = opt.data?.icon;
+    const optColor = opt.data?.color;
+    const iconColor = showOptionColors && optColor ? optColor : "#605e5c";
+    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      optIcon ? /* @__PURE__ */ jsx16(Icon4, { iconName: optIcon, styles: { root: { fontSize: 14, color: iconColor } } }) : showOptionColors && optColor && /* @__PURE__ */ jsx16(
+        "div",
+        {
+          style: {
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            backgroundColor: optColor
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx16("span", { children: opt.text })
+    ] });
+  };
+  if (isMultiSelect) {
+    const comboOptions = options.map((opt) => ({
+      ...opt,
+      selected: selectedKeys.includes(opt.key)
+    }));
+    return /* @__PURE__ */ jsx16(
+      ComboBox,
+      {
+        placeholder,
+        options: comboOptions,
+        disabled,
+        multiSelect: true,
+        selectedKey: selectedKeys,
+        onRenderOption: renderOption,
+        onChange: onChange ? (_, option) => {
+          if (!option) return;
+          const key = option.key;
+          const newKeys = option.selected ? [...selectedKeys, key] : selectedKeys.filter((k) => k !== key);
+          onChange(newKeys.join(","));
+        } : void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    Dropdown,
+    {
+      placeholder,
+      options,
+      disabled,
+      selectedKey,
+      onRenderOption: renderOption,
+      onRenderTitle: renderTitle,
+      onChange: onChange ? (_, option) => onChange(option?.key ?? "") : void 0
+    }
+  );
+};
+
+// src/v8/controls/combobox.tsx
+import {
+  ComboBox as ComboBox2,
+  Icon as Icon5
+} from "@fluentui/react";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+function resolveRawOptions2(mode, customOptions, metadataOptions) {
+  if (mode === "custom" && customOptions && customOptions.length > 0) {
+    return customOptions;
+  }
+  if (metadataOptions && metadataOptions.length > 0) {
+    return metadataOptions.map((opt) => ({ key: opt.value, text: opt.label, color: opt.color }));
+  }
+  return customOptions ?? [];
+}
+var ComboBoxControl = ({
+  control,
+  effectiveValue,
+  displayValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const sourceMode = control.properties.optionSourceMode ?? "custom";
+  const metadataOptions = control.dataBinding?.optionSetOptions;
+  const customOptions = control.properties.options;
+  const multiSelect = control.properties.multiSelect ?? false;
+  const allowFreeform = control.properties.allowFreeform ?? true;
+  const autoComplete = control.properties.autoComplete ?? "on";
+  const showOptionColors = control.properties.showOptionColors ?? false;
+  const showPlaceholder = control.properties.showPlaceholder ?? false;
+  const customPlaceholder = control.properties.placeholder;
+  const placeholder = showPlaceholder ? customPlaceholder ?? (multiSelect ? "Select options" : "Search or select an option") : void 0;
+  const rawOptions = resolveRawOptions2(sourceMode, customOptions, metadataOptions);
+  const options = rawOptions.map((opt) => ({
+    key: opt.key,
+    text: opt.text,
+    data: { color: opt.color, icon: opt.icon },
+    ...opt.itemType === "header" ? { itemType: 2 } : {},
+    ...opt.itemType === "divider" ? { itemType: 1 } : {}
+  }));
+  let selectedKey;
+  let selectedKeys = [];
+  if (hasValue) {
+    if (multiSelect && Array.isArray(effectiveValue)) {
+      selectedKeys = effectiveValue;
+    } else if (typeof effectiveValue === "number") {
+      selectedKey = effectiveValue;
+      selectedKeys = [effectiveValue];
+    } else if (typeof effectiveValue === "string") {
+      const matchByText = options.find((opt) => opt.text.toLowerCase() === displayValue.toLowerCase());
+      selectedKey = matchByText?.key ?? effectiveValue;
+      selectedKeys = matchByText ? [matchByText.key] : [];
+    }
+  }
+  const renderOption = (optProps) => {
+    if (!optProps) return null;
+    const optColor = optProps.data?.color;
+    const optIcon = optProps.data?.icon;
+    const iconColor = showOptionColors && optColor ? optColor : "#605e5c";
+    return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      optIcon ? /* @__PURE__ */ jsx17(Icon5, { iconName: optIcon, styles: { root: { fontSize: 14, color: iconColor, flexShrink: 0 } } }) : showOptionColors && optColor && /* @__PURE__ */ jsx17(
+        "div",
+        {
+          style: {
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            backgroundColor: optColor,
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx17("span", { children: optProps.text })
+    ] });
+  };
+  if (multiSelect) {
+    const showSelectAll = control.properties.showSelectAll ?? false;
+    const selectableOptions = options.filter((opt) => opt.itemType !== 2 && opt.itemType !== 1);
+    const multiOptions = options.map((opt) => ({
+      ...opt,
+      selected: selectedKeys.includes(opt.key)
+    }));
+    const allSelectableKeys = selectableOptions.map((opt) => opt.key);
+    const allSelected = allSelectableKeys.length > 0 && allSelectableKeys.every((k) => selectedKeys.includes(k));
+    if (showSelectAll) {
+      multiOptions.unshift({
+        key: "selectAll",
+        text: "Select All",
+        styles: { optionText: { fontWeight: 600 } },
+        selected: allSelected
+      });
+    }
+    const multiOnChange = onChange ? (_, option) => {
+      if (!option) return;
+      if (option.key === "selectAll") {
+        const newKeys2 = option.selected ? allSelectableKeys : [];
+        onChange(newKeys2.join(","));
+        return;
+      }
+      const key = option.key;
+      const newKeys = option.selected ? [...selectedKeys, key] : selectedKeys.filter((k) => k !== key);
+      onChange(newKeys.join(","));
+    } : () => {
+    };
+    return /* @__PURE__ */ jsx17(
+      ComboBox2,
+      {
+        placeholder,
+        options: multiOptions,
+        disabled,
+        multiSelect: true,
+        allowFreeform,
+        autoComplete,
+        onRenderOption: renderOption,
+        onChange: multiOnChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx17(
+    ComboBox2,
+    {
+      placeholder,
+      options,
+      disabled,
+      allowFreeform,
+      autoComplete,
+      selectedKey,
+      onRenderOption: renderOption,
+      onChange: onChange ? (_, option) => onChange(option?.key ?? "") : void 0
+    }
+  );
+};
+
+// src/v8/controls/internals/ChoiceGroupControl.tsx
+import { useState as useState3 } from "react";
+import { ChoiceGroup, Icon as Icon6 } from "@fluentui/react";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChoiceGroupControl = ({
+  options: rawOptions,
+  showColors,
+  showLabels,
+  layout,
+  disabled,
+  initialSelectedKey,
+  onChange
+}) => {
+  const [selectedKey, setSelectedKey] = useState3(initialSelectedKey);
+  const handleSelect = (key) => {
+    if (disabled) return;
+    const keyStr = String(key);
+    setSelectedKey(keyStr);
+    if (onChange) onChange(key);
+  };
+  if (layout === "icon-cards") {
+    return /* @__PURE__ */ jsx18("div", { role: "radiogroup", style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: rawOptions.map((opt) => {
+      const optKey = String(opt.key);
+      const isSelected = selectedKey === optKey;
+      return /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          role: "radio",
+          "aria-checked": isSelected,
+          tabIndex: 0,
+          onClick: () => handleSelect(opt.key),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect(opt.key);
+            }
+          },
+          style: {
+            minWidth: 100,
+            border: isSelected ? "2px solid #0078d4" : "1px solid #edebe9",
+            borderRadius: 4,
+            padding: 12,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 8,
+            cursor: disabled ? "default" : "pointer",
+            opacity: disabled ? 0.5 : 1,
+            backgroundColor: isSelected ? "#f0f6ff" : "#ffffff",
+            position: "relative",
+            transition: "background-color 0.15s, border-color 0.15s"
+          },
+          onMouseEnter: (e) => {
+            if (!disabled && !isSelected) e.currentTarget.style.backgroundColor = "#f3f2f1";
+          },
+          onMouseLeave: (e) => {
+            if (!isSelected) e.currentTarget.style.backgroundColor = "#ffffff";
+          },
+          children: [
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 8,
+                  left: 8,
+                  width: 16,
+                  height: 16,
+                  borderRadius: "50%",
+                  border: `1px solid ${isSelected ? "#0078d4" : "#605e5c"}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: isSelected && /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      backgroundColor: "#0078d4"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx18(
+              Icon6,
+              {
+                iconName: opt.icon || "RadioBtnOn",
+                styles: {
+                  root: {
+                    fontSize: 32,
+                    color: showColors && opt.color ? opt.color : isSelected ? "#0078d4" : "#605e5c",
+                    marginTop: 8
+                  }
+                }
+              }
+            ),
+            showLabels && /* @__PURE__ */ jsx18("span", { style: { fontSize: 12, color: "#323130", textAlign: "center" }, children: opt.text })
+          ]
+        },
+        optKey
+      );
+    }) });
+  }
+  if (layout === "image-cards") {
+    return /* @__PURE__ */ jsx18("div", { role: "radiogroup", style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: rawOptions.map((opt) => {
+      const optKey = String(opt.key);
+      const isSelected = selectedKey === optKey;
+      return /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          role: "radio",
+          "aria-checked": isSelected,
+          tabIndex: 0,
+          onClick: () => handleSelect(opt.key),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect(opt.key);
+            }
+          },
+          style: {
+            minWidth: 100,
+            border: isSelected ? "2px solid #0078d4" : "1px solid #edebe9",
+            borderRadius: 4,
+            padding: 12,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 8,
+            cursor: disabled ? "default" : "pointer",
+            opacity: disabled ? 0.5 : 1,
+            backgroundColor: isSelected ? "#f0f6ff" : "#ffffff",
+            position: "relative",
+            transition: "background-color 0.15s, border-color 0.15s"
+          },
+          onMouseEnter: (e) => {
+            if (!disabled && !isSelected) e.currentTarget.style.backgroundColor = "#f3f2f1";
+          },
+          onMouseLeave: (e) => {
+            if (!isSelected) e.currentTarget.style.backgroundColor = "#ffffff";
+          },
+          children: [
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 8,
+                  left: 8,
+                  width: 16,
+                  height: 16,
+                  borderRadius: "50%",
+                  border: `1px solid ${isSelected ? "#0078d4" : "#605e5c"}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: isSelected && /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      backgroundColor: "#0078d4"
+                    }
+                  }
+                )
+              }
+            ),
+            opt.imageSrc ? /* @__PURE__ */ jsx18(
+              "img",
+              {
+                src: opt.imageSrc,
+                alt: opt.text,
+                style: { width: 60, height: 60, objectFit: "contain", marginTop: 8 }
+              }
+            ) : /* @__PURE__ */ jsx18(
+              Icon6,
+              {
+                iconName: "Photo2",
+                styles: { root: { fontSize: 32, color: "#a19f9d", marginTop: 8 } }
+              }
+            ),
+            showLabels && /* @__PURE__ */ jsx18("span", { style: { fontSize: 12, color: "#323130", textAlign: "center" }, children: opt.text })
+          ]
+        },
+        optKey
+      );
+    }) });
+  }
+  const hasDecorations = !showLabels || rawOptions.some((opt) => opt.icon || showColors && opt.color);
+  if (hasDecorations) {
+    return /* @__PURE__ */ jsx18(
+      "div",
+      {
+        role: "radiogroup",
+        style: {
+          display: "flex",
+          flexDirection: layout === "horizontal" ? "row" : "column",
+          gap: layout === "horizontal" ? 16 : 0
+        },
+        children: rawOptions.map((opt) => {
+          const optKey = String(opt.key);
+          const isSelected = selectedKey === optKey;
+          const optIcon = opt.icon;
+          const optColor = showColors ? opt.color : void 0;
+          return /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              role: "radio",
+              "aria-checked": isSelected,
+              tabIndex: 0,
+              onClick: () => handleSelect(opt.key),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelect(opt.key);
+                }
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "4px 0",
+                cursor: disabled ? "default" : "pointer",
+                opacity: disabled ? 0.5 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    style: {
+                      width: 20,
+                      height: 20,
+                      borderRadius: "50%",
+                      border: `1px solid ${isSelected ? "#0078d4" : "#605e5c"}`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    children: isSelected && /* @__PURE__ */ jsx18(
+                      "div",
+                      {
+                        style: {
+                          width: 10,
+                          height: 10,
+                          borderRadius: "50%",
+                          backgroundColor: "#0078d4"
+                        }
+                      }
+                    )
+                  }
+                ),
+                optIcon && /* @__PURE__ */ jsx18(
+                  Icon6,
+                  {
+                    iconName: optIcon,
+                    styles: {
+                      root: {
+                        fontSize: 14,
+                        color: optColor || "#605e5c",
+                        flexShrink: 0
+                      }
+                    }
+                  }
+                ),
+                !optIcon && optColor && /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    style: {
+                      width: 12,
+                      height: 12,
+                      borderRadius: 2,
+                      backgroundColor: optColor,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                showLabels && opt.text && /* @__PURE__ */ jsx18("span", { style: { fontSize: 14, color: "#323130" }, children: opt.text })
+              ]
+            },
+            optKey
+          );
+        })
+      }
+    );
+  }
+  const cgOptions = rawOptions.map((opt) => ({
+    key: String(opt.key),
+    text: opt.text
+  }));
+  return /* @__PURE__ */ jsx18(
+    ChoiceGroup,
+    {
+      options: cgOptions,
+      selectedKey,
+      disabled,
+      onChange: (_, option) => {
+        if (option) handleSelect(Number(option.key));
+      },
+      styles: layout === "horizontal" ? {
+        flexContainer: { display: "flex", flexDirection: "row", gap: 16 }
+      } : void 0
+    }
+  );
+};
+
+// src/v8/controls/choicegroup.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var ChoiceGroupBranch = ({
+  control,
+  effectiveValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  const sourceMode = control.properties.optionSourceMode ?? "custom";
+  const metadataOptions = control.dataBinding?.optionSetOptions;
+  const customOptions = control.properties.options;
+  let rawOptions;
+  if (sourceMode === "custom" && customOptions && customOptions.length > 0) {
+    rawOptions = customOptions;
+  } else if (metadataOptions && metadataOptions.length > 0) {
+    rawOptions = metadataOptions.map((opt) => ({ key: opt.value, text: opt.label, color: opt.color }));
+  } else {
+    rawOptions = customOptions ?? [];
+  }
+  let selectedKey;
+  if (hasValue) {
+    if (typeof effectiveValue === "number") {
+      selectedKey = String(effectiveValue);
+    } else if (typeof effectiveValue === "string") {
+      selectedKey = effectiveValue;
+    }
+  }
+  return /* @__PURE__ */ jsx19(
+    ChoiceGroupControl,
+    {
+      options: rawOptions,
+      showColors: control.properties.showOptionColors ?? false,
+      showLabels: control.properties.showLabels ?? true,
+      layout: control.properties.layout ?? "vertical",
+      disabled,
+      initialSelectedKey: selectedKey,
+      onChange
+    }
+  );
+};
+
+// src/v8/controls/internals/LookupControl.tsx
+import { useState as useState4, useEffect, useMemo as useMemo2, useCallback, useRef } from "react";
+import {
+  Callout,
+  DirectionalHint,
+  Icon as Icon7,
+  Spinner,
+  SpinnerSize,
+  Persona,
+  PersonaSize,
+  PersonaPresence,
+  mergeStyles as mergeStyles2,
+  FocusZone,
+  FocusZoneDirection,
+  Link as Link2
+} from "@fluentui/react";
+
+// src/context/FormRuntimeContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var FormRuntimeContext = createContext(null);
+FormRuntimeContext.displayName = "FormRuntimeContext";
+function useOptionalFormRuntimeContext() {
+  return useContext(FormRuntimeContext);
+}
+
+// src/v8/controls/internals/LookupControl.tsx
+import { Fragment, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var containerClass2 = mergeStyles2({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  border: "1px solid #8a8886",
+  borderRadius: 2,
+  backgroundColor: "#ffffff",
+  minHeight: 32,
+  ":hover": {
+    borderColor: "#323130"
+  },
+  ":focus-within": {
+    borderColor: "#0078d4",
+    borderWidth: 2
+  }
+});
+var containerDisabledClass = mergeStyles2({
+  backgroundColor: "#f3f2f1",
+  borderColor: "#c8c6c4",
+  ":hover": {
+    borderColor: "#c8c6c4"
+  }
+});
+var inputWrapperClass = mergeStyles2({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  minWidth: 0,
+  padding: "0 8px",
+  gap: 6
+});
+var inputClass = mergeStyles2({
+  flex: 1,
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  fontSize: 14,
+  color: "#323130",
+  padding: "6px 0",
+  minWidth: 0,
+  "::placeholder": {
+    color: "#605e5c"
+  }
+});
+var searchButtonClass = mergeStyles2({
+  borderLeft: "1px solid #edebe9",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0 8px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  ":hover": {
+    backgroundColor: "#f3f2f1"
+  }
+});
+var selectedValueClass = mergeStyles2({
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  flex: 1,
+  minWidth: 0,
+  padding: "4px 0"
+});
+var selectedLinkClass = mergeStyles2({
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontSize: 14,
+  color: "#0078d4",
+  textDecoration: "underline",
+  cursor: "pointer",
+  ":hover": {
+    color: "#004578"
+  }
+});
+var clearButtonClass = mergeStyles2({
+  padding: 4,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ":hover": {
+    backgroundColor: "#f3f2f1",
+    borderRadius: 2
+  }
+});
+var calloutClass = mergeStyles2({
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: "#ffffff",
+  boxShadow: "rgba(0, 0, 0, 0.12) 0px 0px 2px, rgba(0, 0, 0, 0.14) 0px 2px 4px",
+  borderRadius: 2,
+  overflow: "hidden"
+});
+var searchHeaderClass = mergeStyles2({
+  padding: "8px 12px",
+  borderBottom: "1px solid #edebe9",
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+});
+var searchInputClass = mergeStyles2({
+  flex: 1,
+  border: "none",
+  outline: "none",
+  fontSize: 14,
+  color: "#323130",
+  "::placeholder": {
+    color: "#605e5c"
+  }
+});
+var resultsFromClass = mergeStyles2({
+  padding: "8px 12px",
+  borderBottom: "1px solid #edebe9",
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  fontSize: 12,
+  color: "#605e5c"
+});
+var filterTabClass = mergeStyles2({
+  padding: "4px 10px",
+  border: "1px solid #8a8886",
+  borderRadius: 2,
+  backgroundColor: "#ffffff",
+  fontSize: 12,
+  cursor: "pointer",
+  ":hover": {
+    backgroundColor: "#f3f2f1"
+  }
+});
+var filterTabActiveClass = mergeStyles2({
+  backgroundColor: "#f3f2f1",
+  borderColor: "#0078d4"
+});
+var listContainerClass = mergeStyles2({
+  flex: 1,
+  overflowY: "auto",
+  maxHeight: 200
+});
+var recordItemClass = mergeStyles2({
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 12px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  border: "none",
+  width: "100%",
+  textAlign: "left",
+  gap: 10,
+  ":hover": {
+    backgroundColor: "#f3f2f1"
+  },
+  ":focus": {
+    backgroundColor: "#f3f2f1",
+    outline: "none"
+  }
+});
+var entityIconClass = mergeStyles2({
+  fontSize: 16,
+  color: "#605e5c",
+  width: 20,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var recordNameClass = mergeStyles2({
+  fontSize: 14,
+  color: "#323130",
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var noResultsClass = mergeStyles2({
+  padding: 16,
+  textAlign: "center",
+  color: "#605e5c",
+  fontSize: 13
+});
+var loadingClass = mergeStyles2({
+  padding: 16,
+  textAlign: "center"
+});
+var footerClass = mergeStyles2({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 12px",
+  borderTop: "1px solid #edebe9",
+  backgroundColor: "#faf9f8"
+});
+var footerButtonClass = mergeStyles2({
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "4px 8px",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  fontSize: 13,
+  color: "#323130",
+  ":hover": {
+    backgroundColor: "#edebe9",
+    borderRadius: 2
+  }
+});
+var emptyValueClass = mergeStyles2({
+  color: "#605e5c",
+  fontSize: 14,
+  padding: "6px 0"
+});
+function defaultResolveEntitySetName(entityLogicalName) {
+  return entityLogicalName + "s";
+}
+function getPrimaryNameAttribute(entityLogicalName) {
+  const knownPrimaryNames = {
+    account: "name",
+    contact: "fullname",
+    lead: "fullname",
+    opportunity: "name",
+    incident: "title",
+    systemuser: "fullname",
+    team: "name"
+  };
+  return knownPrimaryNames[entityLogicalName] || "name";
+}
+function getInitials(name) {
+  if (!name) return "?";
+  const words = name.trim().split(/\s+/);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return words[0].substring(0, 2).toUpperCase();
+}
+function getEntityIcon(entityLogicalName) {
+  const iconMap = {
+    account: "CityNext",
+    contact: "Contact",
+    lead: "People",
+    opportunity: "Money",
+    incident: "Ticket",
+    systemuser: "Contact",
+    team: "Group"
+  };
+  return iconMap[entityLogicalName] || "Database";
+}
+var PERSON_ENTITIES = /* @__PURE__ */ new Set(["systemuser", "contact", "lead"]);
+function isPersonEntity(entityLogicalName) {
+  return !!entityLogicalName && PERSON_ENTITIES.has(entityLogicalName);
+}
+function getSecondaryTextField(entityLogicalName) {
+  const map = {
+    systemuser: "jobtitle",
+    contact: "jobtitle",
+    account: "description",
+    team: "description",
+    lead: "jobtitle"
+  };
+  return map[entityLogicalName] || null;
+}
+function derivePresence(record) {
+  if (record.entityType === "systemuser") {
+    return record.isDisabled ? PersonaPresence.offline : PersonaPresence.online;
+  }
+  if (isPersonEntity(record.entityType || null)) {
+    return PersonaPresence.none;
+  }
+  return PersonaPresence.none;
+}
+var LookupControl = ({
+  control,
+  disabled = false,
+  value,
+  onChange,
+  searchLookup: searchLookupProp,
+  isConnectedOverride,
+  fetchEntityImage,
+  resolveEntitySetName = defaultResolveEntitySetName
+}) => {
+  const [selectedRecord, setSelectedRecord] = useState4(null);
+  const [searchText, setSearchText] = useState4("");
+  const [isOpen, setIsOpen] = useState4(false);
+  const [records, setRecords] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const containerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const searchTimeoutRef = useRef(null);
+  const [imageCache, setImageCache] = useState4({});
+  const imageFetchedRef = useRef(/* @__PURE__ */ new Set());
+  const ctx = useOptionalFormRuntimeContext();
+  const searchLookup = searchLookupProp ?? ctx?.searchLookup;
+  const isConnected = isConnectedOverride ?? ctx?.connection?.status === "connected";
+  const targetEntity = control.properties.targetEntity || null;
+  const primaryNameAttr = useMemo2(() => {
+    if (!targetEntity) return "name";
+    return getPrimaryNameAttribute(targetEntity);
+  }, [targetEntity]);
+  useEffect(() => {
+    if (value && !selectedRecord) {
+      setSelectedRecord({ id: "", name: value, entityType: targetEntity || void 0 });
+    } else if (!value && selectedRecord) {
+      setSelectedRecord(null);
+    }
+  }, [value]);
+  const performSearch = useCallback(
+    async (query = "") => {
+      if (!searchLookup || !targetEntity) {
+        setRecords([]);
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const entitySetName = resolveEntitySetName(targetEntity);
+        const secondaryField = getSecondaryTextField(targetEntity);
+        const filter = query.trim() ? `contains(${primaryNameAttr},'${query.replace(/'/g, "''")}')` : void 0;
+        const results = await searchLookup(entitySetName, query, { filter, top: 15 });
+        const mappedRecords = results.map((r) => {
+          const secondaryText = secondaryField ? r.record[secondaryField] : void 0;
+          const isDisabled2 = targetEntity === "systemuser" ? r.record["isdisabled"] ?? false : void 0;
+          return {
+            id: r.id,
+            name: r.primaryName || "Unknown",
+            entityType: targetEntity,
+            secondaryText: secondaryText || void 0,
+            isDisabled: isDisabled2
+          };
+        });
+        setRecords(mappedRecords);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Search failed");
+        setRecords([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchLookup, targetEntity, primaryNameAttr, resolveEntitySetName]
+  );
+  const handleSearchInput = useCallback(
+    (newValue) => {
+      setSearchText(newValue);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = setTimeout(() => {
+        performSearch(newValue);
+      }, 300);
+    },
+    [performSearch]
+  );
+  const fetchAndCacheImage = useCallback(
+    async (recordId) => {
+      if (!recordId || !fetchEntityImage) return null;
+      if (imageFetchedRef.current.has(recordId)) return imageCache[recordId] ?? null;
+      imageFetchedRef.current.add(recordId);
+      try {
+        const dataUrl = await fetchEntityImage(recordId);
+        setImageCache((prev) => ({ ...prev, [recordId]: dataUrl }));
+        return dataUrl;
+      } catch {
+        setImageCache((prev) => ({ ...prev, [recordId]: null }));
+        return null;
+      }
+    },
+    [fetchEntityImage, imageCache]
+  );
+  useEffect(() => {
+    if (!isPersonEntity(targetEntity) || records.length === 0 || !fetchEntityImage) return;
+    records.forEach((record) => {
+      if (record.id && !imageFetchedRef.current.has(record.id)) {
+        fetchAndCacheImage(record.id);
+      }
+    });
+  }, [records, targetEntity, fetchEntityImage, fetchAndCacheImage]);
+  const handleOpenDropdown = useCallback(() => {
+    if (disabled || !isConnected || !targetEntity || !searchLookup) return;
+    setIsOpen(true);
+    setSearchText("");
+    performSearch("");
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 100);
+  }, [disabled, isConnected, targetEntity, searchLookup, performSearch]);
+  const handleRecordSelect = useCallback(
+    (record) => {
+      const cachedImage = record.id ? imageCache[record.id] : void 0;
+      const recordWithImage = cachedImage ? { ...record, imageUrl: cachedImage } : record;
+      setSelectedRecord(recordWithImage);
+      setIsOpen(false);
+      setSearchText("");
+      if (onChange) {
+        onChange(record.name);
+      }
+      if (record.id && !cachedImage && isPersonEntity(targetEntity)) {
+        fetchAndCacheImage(record.id).then((dataUrl) => {
+          if (dataUrl) {
+            setSelectedRecord(
+              (prev) => prev && prev.id === record.id ? { ...prev, imageUrl: dataUrl } : prev
+            );
+          }
+        });
+      }
+    },
+    [onChange, imageCache, targetEntity, fetchAndCacheImage]
+  );
+  const handleClear = useCallback(
+    (e) => {
+      e.stopPropagation();
+      setSelectedRecord(null);
+      setSearchText("");
+      setRecords([]);
+      if (onChange) {
+        onChange("");
+      }
+    },
+    [onChange]
+  );
+  const handleDismiss = useCallback(() => {
+    setIsOpen(false);
+    setSearchText("");
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    setImageCache({});
+    imageFetchedRef.current.clear();
+  }, [targetEntity]);
+  if (!isConnected || !searchLookup) {
+    return /* @__PURE__ */ jsxs6("div", { className: `${containerClass2} ${disabled ? containerDisabledClass : ""}`, children: [
+      /* @__PURE__ */ jsx21("div", { className: inputWrapperClass, children: /* @__PURE__ */ jsx21(
+        "input",
+        {
+          type: "text",
+          className: inputClass,
+          placeholder: targetEntity ? `Search ${targetEntity}...` : "Search...",
+          disabled,
+          value: value || "",
+          onChange: (e) => onChange?.(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsx21("div", { className: searchButtonClass, children: /* @__PURE__ */ jsx21(Icon7, { iconName: "Search", styles: { root: { fontSize: 16, color: "#605e5c" } } }) })
+    ] });
+  }
+  if (!targetEntity) {
+    return /* @__PURE__ */ jsxs6("div", { className: `${containerClass2} ${containerDisabledClass}`, children: [
+      /* @__PURE__ */ jsx21("div", { className: inputWrapperClass, children: /* @__PURE__ */ jsx21("span", { className: emptyValueClass, children: "Configure target table..." }) }),
+      /* @__PURE__ */ jsx21("div", { className: searchButtonClass, children: /* @__PURE__ */ jsx21(Icon7, { iconName: "Search", styles: { root: { fontSize: 16, color: "#c8c6c4" } } }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: containerRef,
+        className: `${containerClass2} ${disabled ? containerDisabledClass : ""}`,
+        children: [
+          /* @__PURE__ */ jsx21("div", { className: inputWrapperClass, children: selectedRecord ? (
+            // Selected value display with Persona
+            /* @__PURE__ */ jsxs6("div", { className: selectedValueClass, children: [
+              /* @__PURE__ */ jsx21(
+                Persona,
+                {
+                  text: selectedRecord.name,
+                  secondaryText: selectedRecord.secondaryText,
+                  imageUrl: selectedRecord.imageUrl || void 0,
+                  size: PersonaSize.size24,
+                  presence: isPersonEntity(targetEntity) ? derivePresence(selectedRecord) : PersonaPresence.none,
+                  hidePersonaDetails: true,
+                  styles: {
+                    root: { flexShrink: 0 }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                Link2,
+                {
+                  className: selectedLinkClass,
+                  onClick: (e) => {
+                    e.preventDefault();
+                  },
+                  title: selectedRecord.name,
+                  children: selectedRecord.name
+                }
+              ),
+              !disabled && /* @__PURE__ */ jsx21(
+                "div",
+                {
+                  className: clearButtonClass,
+                  onClick: handleClear,
+                  role: "button",
+                  tabIndex: 0,
+                  title: "Clear selection",
+                  children: /* @__PURE__ */ jsx21(Icon7, { iconName: "Cancel", styles: { root: { fontSize: 12, color: "#605e5c" } } })
+                }
+              )
+            ] })
+          ) : (
+            // Empty state
+            /* @__PURE__ */ jsx21("span", { className: emptyValueClass, children: "---" })
+          ) }),
+          /* @__PURE__ */ jsx21(
+            "div",
+            {
+              className: searchButtonClass,
+              onClick: handleOpenDropdown,
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              title: "Look for records",
+              style: { cursor: disabled ? "default" : "pointer" },
+              children: /* @__PURE__ */ jsx21(
+                Icon7,
+                {
+                  iconName: "Search",
+                  styles: { root: { fontSize: 16, color: disabled ? "#c8c6c4" : "#605e5c" } }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && containerRef.current && /* @__PURE__ */ jsx21(
+      Callout,
+      {
+        target: containerRef.current,
+        isBeakVisible: false,
+        directionalHint: DirectionalHint.bottomLeftEdge,
+        onDismiss: handleDismiss,
+        gapSpace: 2,
+        calloutWidth: Math.max(containerRef.current.offsetWidth, 300),
+        children: /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: calloutClass,
+            style: { width: Math.max(containerRef.current.offsetWidth, 300) },
+            children: [
+              /* @__PURE__ */ jsxs6("div", { className: searchHeaderClass, children: [
+                /* @__PURE__ */ jsx21(
+                  "input",
+                  {
+                    ref: searchInputRef,
+                    type: "text",
+                    className: searchInputClass,
+                    placeholder: "Look for records",
+                    value: searchText,
+                    onChange: (e) => handleSearchInput(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx21(Icon7, { iconName: "Search", styles: { root: { fontSize: 16, color: "#605e5c" } } })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: resultsFromClass, children: [
+                /* @__PURE__ */ jsx21("span", { children: "Results from:" }),
+                /* @__PURE__ */ jsxs6("button", { className: `${filterTabClass} ${filterTabActiveClass}`, children: [
+                  targetEntity.charAt(0).toUpperCase() + targetEntity.slice(1),
+                  "s"
+                ] }),
+                /* @__PURE__ */ jsx21("button", { className: filterTabClass, children: "Recent records" })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: listContainerClass, children: [
+                loading && /* @__PURE__ */ jsx21("div", { className: loadingClass, children: /* @__PURE__ */ jsx21(Spinner, { size: SpinnerSize.small, label: "Searching..." }) }),
+                !loading && error && /* @__PURE__ */ jsxs6("div", { className: noResultsClass, style: { color: "#a80000" }, children: [
+                  /* @__PURE__ */ jsx21(Icon7, { iconName: "Warning", styles: { root: { marginRight: 4 } } }),
+                  error
+                ] }),
+                !loading && !error && records.length === 0 && /* @__PURE__ */ jsx21("div", { className: noResultsClass, children: "No records found" }),
+                !loading && !error && records.length > 0 && /* @__PURE__ */ jsx21(FocusZone, { direction: FocusZoneDirection.vertical, children: records.map((record) => /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    className: recordItemClass,
+                    onClick: () => handleRecordSelect(record),
+                    children: [
+                      isPersonEntity(targetEntity) ? /* @__PURE__ */ jsx21(
+                        Persona,
+                        {
+                          text: record.name,
+                          secondaryText: record.secondaryText,
+                          imageUrl: record.id ? imageCache[record.id] || void 0 : void 0,
+                          size: PersonaSize.size32,
+                          presence: derivePresence(record),
+                          hidePersonaDetails: true,
+                          styles: { root: { flexShrink: 0 } }
+                        }
+                      ) : /* @__PURE__ */ jsx21("div", { className: entityIconClass, children: /* @__PURE__ */ jsx21(Icon7, { iconName: getEntityIcon(targetEntity) }) }),
+                      /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+                        /* @__PURE__ */ jsx21("span", { className: recordNameClass, children: record.name }),
+                        record.secondaryText && /* @__PURE__ */ jsx21(
+                          "div",
+                          {
+                            style: {
+                              fontSize: 12,
+                              color: "#605e5c",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            },
+                            children: record.secondaryText
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  record.id || record.name
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: footerClass, children: [
+                /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    className: footerButtonClass,
+                    onClick: () => {
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx21(Icon7, { iconName: "Add", styles: { root: { fontSize: 14 } } }),
+                      /* @__PURE__ */ jsx21("span", { children: "New" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs6(
+                  "button",
+                  {
+                    className: footerButtonClass,
+                    onClick: () => {
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx21(Icon7, { iconName: "Search", styles: { root: { fontSize: 14 } } }),
+                      /* @__PURE__ */ jsx21("span", { children: "Advanced" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var lookupEntityHelpers = {
+  getPrimaryNameAttribute,
+  getSecondaryTextField,
+  isPersonEntity,
+  getEntityIcon,
+  getInitials
+};
+
+// src/v8/controls/lookup.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var LookupBranch = ({
+  control,
+  displayValue,
+  hasValue,
+  interactive,
+  onChange
+}) => {
+  const disabled = isDisabled(control, interactive);
+  return /* @__PURE__ */ jsx22(
+    LookupControl,
+    {
+      control,
+      disabled,
+      value: hasValue ? displayValue : void 0,
+      onChange: onChange ? (next) => onChange(next) : void 0
+    }
+  );
+};
+
+// src/v8/controls/internals/WebResourceRenderer.tsx
+import { useEffect as useEffect2, useMemo as useMemo3, useState as useState5 } from "react";
+import { Icon as Icon8, Spinner as Spinner2, SpinnerSize as SpinnerSize2 } from "@fluentui/react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+var TYPE_CONFIG = {
+  HTML: { icon: "FileHTML", color: "#e44d26", label: "HTML Web Page" },
+  CSS: { icon: "FileCSS", color: "#264de4", label: "Style Sheet (CSS)" },
+  JS: { icon: "JavaScriptLanguage", color: "#f7df1e", label: "Script (JScript)" },
+  PNG: { icon: "FileImage", color: "#0078d4", label: "PNG Image" },
+  JPG: { icon: "FileImage", color: "#0078d4", label: "JPG Image" },
+  GIF: { icon: "FileImage", color: "#0078d4", label: "GIF Image" },
+  SVG: { icon: "FileImage", color: "#ffb13b", label: "Vector (SVG)" },
+  ICO: { icon: "FileImage", color: "#0078d4", label: "ICO Image" },
+  XML: { icon: "FileCode", color: "#f26522", label: "Data (XML)" },
+  XSL: { icon: "FileCode", color: "#68217a", label: "Style Sheet (XSL)" },
+  RESX: { icon: "LocaleLanguage", color: "#107c10", label: "String (RESX)" }
+};
+var IMAGE_TYPES = /* @__PURE__ */ new Set(["PNG", "JPG", "GIF", "SVG", "ICO"]);
+var CODE_TYPES = /* @__PURE__ */ new Set(["CSS", "JS", "XML", "XSL", "RESX"]);
+var WebResourceRenderer = ({ control }) => {
+  const webResourceName = control.properties.webResourceName || "";
+  const webResourceType = control.properties.webResourceType || "HTML";
+  const height = control.properties.height ?? 200;
+  const passRecordId = control.properties.passRecordId ?? false;
+  const ctx = useOptionalFormRuntimeContext();
+  const isConnected = ctx?.connection.status === "connected";
+  const environmentUrl = ctx?.connection.dynamicsUrl ?? null;
+  const previewRecordId = ctx?.previewContext.recordId ?? null;
+  const isHtml = webResourceType === "HTML";
+  const isImage = IMAGE_TYPES.has(webResourceType);
+  const isCode = CODE_TYPES.has(webResourceType);
+  const [fetchState, setFetchState] = useState5({
+    content: null,
+    loading: false,
+    error: null
+  });
+  const typeConfig = TYPE_CONFIG[webResourceType] ?? TYPE_CONFIG.HTML;
+  useEffect2(() => {
+    if (!ctx?.fetchWebResource || !webResourceName || isHtml || !isConnected) {
+      setFetchState({ content: null, loading: false, error: null });
+      return;
+    }
+    let cancelled = false;
+    const controller = new AbortController();
+    setFetchState({ content: null, loading: true, error: null });
+    ctx.fetchWebResource(webResourceName, void 0, { signal: controller.signal }).then((data) => {
+      if (cancelled) return;
+      const { content, contentType } = data;
+      const rendered = contentType.startsWith("image/") ? `data:${contentType};base64,${content}` : content;
+      setFetchState({ content: rendered, loading: false, error: null });
+    }).catch((err) => {
+      if (cancelled) return;
+      setFetchState({
+        content: null,
+        loading: false,
+        error: err instanceof Error ? err.message : "Failed to fetch web resource"
+      });
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [ctx, webResourceName, isHtml, isConnected]);
+  const webResourceUrl = useMemo3(() => {
+    if (!isHtml || !environmentUrl || !webResourceName) return null;
+    let url = `${environmentUrl}/WebResources/${webResourceName}`;
+    if (passRecordId && previewRecordId) {
+      url += `?id=${previewRecordId}`;
+    }
+    return url;
+  }, [isHtml, environmentUrl, webResourceName, passRecordId, previewRecordId]);
+  const hasImageContent = isImage && fetchState.content && !fetchState.loading && !fetchState.error;
+  const hasCodeContent = isCode && fetchState.content && !fetchState.loading && !fetchState.error;
+  const hasUrlContent = isHtml && isConnected && webResourceUrl;
+  const hasLiveContent = hasUrlContent || hasImageContent || hasCodeContent;
+  const renderLiveContent = () => {
+    if (isHtml) {
+      if (!isConnected) {
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#deecf9",
+              gap: 8,
+              padding: 16
+            },
+            children: [
+              /* @__PURE__ */ jsx23(Icon8, { iconName: "PlugDisconnected", styles: { root: { fontSize: 32, color: "#0078d4" } } }),
+              /* @__PURE__ */ jsx23("div", { style: { fontSize: 12, color: "#0078d4", textAlign: "center" }, children: "Connect to Dataverse to preview web resource" })
+            ]
+          }
+        );
+      }
+      if (!webResourceName) {
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#faf9f8",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  style: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: 8,
+                    backgroundColor: typeConfig.color,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ jsx23(Icon8, { iconName: typeConfig.icon, styles: { root: { fontSize: 24, color: "#fff" } } })
+                }
+              ),
+              /* @__PURE__ */ jsx23("div", { style: { fontSize: 13, color: "#605e5c" }, children: "No web resource selected" }),
+              /* @__PURE__ */ jsx23("div", { style: { fontSize: 11, color: "#a19f9d" }, children: "Configure in Properties panel" })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx23(
+        "iframe",
+        {
+          src: webResourceUrl,
+          title: webResourceName,
+          sandbox: "allow-scripts allow-same-origin allow-forms",
+          style: {
+            flex: 1,
+            width: "100%",
+            border: "none",
+            backgroundColor: "#fff"
+          }
+        }
+      );
+    }
+    if (isImage && hasImageContent) {
+      return /* @__PURE__ */ jsx23(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 8,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx23(
+            "img",
+            {
+              src: fetchState.content,
+              alt: webResourceName,
+              style: {
+                maxWidth: "100%",
+                maxHeight: "100%",
+                objectFit: "contain"
+              }
+            }
+          )
+        }
+      );
+    }
+    if (isCode && hasCodeContent) {
+      return /* @__PURE__ */ jsx23(
+        "div",
+        {
+          style: {
+            flex: 1,
+            overflow: "auto",
+            padding: 8,
+            backgroundColor: "#1e1e1e"
+          },
+          children: /* @__PURE__ */ jsxs7(
+            "pre",
+            {
+              style: {
+                margin: 0,
+                fontSize: 11,
+                fontFamily: "Consolas, monospace",
+                color: "#d4d4d4",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: [
+                fetchState.content.substring(0, 2e3),
+                fetchState.content.length > 2e3 ? "\n\n... (truncated)" : ""
+              ]
+            }
+          )
+        }
+      );
+    }
+    return null;
+  };
+  const renderPlaceholder = () => {
+    if (fetchState.loading) {
+      return /* @__PURE__ */ jsx23(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          },
+          children: /* @__PURE__ */ jsx23(Spinner2, { size: SpinnerSize2.medium, label: "Loading web resource..." })
+        }
+      );
+    }
+    if (fetchState.error) {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#fef0f0",
+            gap: 8,
+            padding: 16
+          },
+          children: [
+            /* @__PURE__ */ jsx23(Icon8, { iconName: "Warning", styles: { root: { fontSize: 32, color: "#d13438" } } }),
+            /* @__PURE__ */ jsx23("div", { style: { fontSize: 12, color: "#a80000", textAlign: "center" }, children: fetchState.error })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#faf9f8",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx23(
+            "div",
+            {
+              style: {
+                width: 48,
+                height: 48,
+                borderRadius: 8,
+                backgroundColor: typeConfig.color,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx23(Icon8, { iconName: typeConfig.icon, styles: { root: { fontSize: 24, color: "#fff" } } })
+            }
+          ),
+          webResourceName ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx23("div", { style: { fontSize: 13, fontWeight: 600, color: "#323130" }, children: webResourceName }),
+            /* @__PURE__ */ jsx23("div", { style: { fontSize: 11, color: "#605e5c" }, children: typeConfig.label }),
+            passRecordId && /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                style: {
+                  fontSize: 10,
+                  color: "#605e5c",
+                  backgroundColor: "#f3f2f1",
+                  padding: "4px 8px",
+                  borderRadius: 4,
+                  fontFamily: "monospace"
+                },
+                children: [
+                  "?id=",
+                  "{recordid}"
+                ]
+              }
+            ),
+            !isConnected && /* @__PURE__ */ jsx23(
+              "div",
+              {
+                style: {
+                  fontSize: 10,
+                  color: "#0078d4",
+                  backgroundColor: "#deecf9",
+                  padding: "4px 8px",
+                  borderRadius: 4,
+                  marginTop: 4
+                },
+                children: "Connect to Dataverse for live preview"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx23("div", { style: { fontSize: 13, color: "#605e5c" }, children: "No web resource selected" }),
+            /* @__PURE__ */ jsx23("div", { style: { fontSize: 11, color: "#a19f9d" }, children: "Configure in Properties panel" })
+          ] })
+        ]
+      }
+    );
+  };
+  const renderContent = () => {
+    if (isHtml) return renderLiveContent();
+    if (hasLiveContent) return renderLiveContent();
+    return renderPlaceholder();
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        height,
+        border: "1px solid #edebe9",
+        borderRadius: 2,
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "6px 12px",
+              borderBottom: "1px solid #edebe9",
+              backgroundColor: "#faf9f8",
+              gap: 8,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx23(Icon8, { iconName: "Globe", styles: { root: { fontSize: 14, color: "#0078d4" } } }),
+              /* @__PURE__ */ jsx23("span", { style: { fontSize: 12, fontWeight: 600, color: "#323130" }, children: "Web Resource" }),
+              isHtml && isConnected && webResourceName && /* @__PURE__ */ jsx23(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: "#0078d4",
+                    backgroundColor: "#deecf9",
+                    padding: "2px 6px",
+                    borderRadius: 2
+                  },
+                  children: "URL"
+                }
+              ),
+              !isHtml && hasLiveContent && /* @__PURE__ */ jsx23(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: "#107c10",
+                    backgroundColor: "#dff6dd",
+                    padding: "2px 6px",
+                    borderRadius: 2
+                  },
+                  children: "Live"
+                }
+              ),
+              passRecordId && /* @__PURE__ */ jsx23(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: "#107c10",
+                    backgroundColor: "#dff6dd",
+                    padding: "2px 6px",
+                    borderRadius: 2
+                  },
+                  children: "+ Record ID"
+                }
+              ),
+              webResourceName && /* @__PURE__ */ jsx23("span", { style: { fontSize: 11, color: "#605e5c", marginLeft: "auto" }, children: typeConfig.label })
+            ]
+          }
+        ),
+        renderContent(),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "4px 12px",
+              borderTop: "1px solid #edebe9",
+              backgroundColor: "#faf9f8",
+              fontSize: 10,
+              color: "#a19f9d",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx23("span", { children: webResourceName || "Not configured" }),
+              /* @__PURE__ */ jsxs7("span", { children: [
+                "Height: ",
+                height,
+                "px"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/v8/controls/webresource.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var WebResourceBranch = ({ control, interactive }) => /* @__PURE__ */ jsx24(WebResourceRenderer, { control, designMode: !interactive });
+
+// src/v8/controls/internals/ChartRenderer.tsx
+import { Icon as Icon9, Text, mergeStyles as mergeStyles3 } from "@fluentui/react";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+var cardClass = mergeStyles3({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  minHeight: 140,
+  padding: 12,
+  borderRadius: 4,
+  border: "1px dashed #c8c6c4",
+  backgroundColor: "#faf9f8",
+  color: "#323130",
+  gap: 8
+});
+var headerClass = mergeStyles3({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  marginBottom: 4
+});
+var iconClass = mergeStyles3({
+  fontSize: 20,
+  color: "#0078d4"
+});
+var titleClass = mergeStyles3({
+  fontWeight: 600,
+  fontSize: 14,
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var v9BadgeClass = mergeStyles3({
+  fontSize: 10,
+  fontWeight: 600,
+  padding: "2px 6px",
+  borderRadius: 10,
+  backgroundColor: "#fff4ce",
+  color: "#7a4d00",
+  border: "1px solid #ffb900"
+});
+var bodyClass = mergeStyles3({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: 60
+});
+var metaClass = mergeStyles3({
+  fontSize: 11,
+  color: "#605e5c",
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+});
+function formatBindingSummary(config, sourceLabel) {
+  if (!config?.dataSourceId) return "Sample data \u2014 bind to a data source";
+  const parts = [];
+  if (sourceLabel) parts.push(sourceLabel);
+  if (config.aggregation && config.valueAttribute) {
+    parts.push(`${config.aggregation}(${config.valueAttribute})`);
+  } else if (config.valueAttribute) {
+    parts.push(config.valueAttribute);
+  }
+  if (config.categoryAttribute) parts.push(`by ${config.categoryAttribute}`);
+  return parts.length > 0 ? parts.join(" \xB7 ") : "Data source bound";
+}
+var ChartRenderer = ({
+  control,
+  dataSourceLabelById,
+  entry
+}) => {
+  const chartConfig = control.properties.chartConfig;
+  const title = chartConfig?.title ?? control.label;
+  const sourceLabel = chartConfig?.dataSourceId ? dataSourceLabelById?.[chartConfig.dataSourceId] ?? chartConfig.dataSourceId : null;
+  const requiresV9 = entry?.requiresV9 === true;
+  return /* @__PURE__ */ jsxs8("div", { className: cardClass, "aria-label": `${entry?.label ?? "Chart"}: ${title}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: headerClass, children: [
+      /* @__PURE__ */ jsx25(Icon9, { iconName: entry?.icon ?? "BarChartVertical", className: iconClass }),
+      /* @__PURE__ */ jsx25("span", { className: titleClass, children: title }),
+      requiresV9 && /* @__PURE__ */ jsx25("span", { className: v9BadgeClass, title: "This chart type renders only in v9 export targets", children: "v9" })
+    ] }),
+    /* @__PURE__ */ jsx25("div", { className: bodyClass, children: /* @__PURE__ */ jsxs8(Text, { variant: "small", styles: { root: { color: "#605e5c", fontStyle: "italic" } }, children: [
+      entry?.label ?? "Chart",
+      " preview"
+    ] }) }),
+    /* @__PURE__ */ jsxs8("div", { className: metaClass, children: [
+      /* @__PURE__ */ jsx25("span", { children: formatBindingSummary(chartConfig, sourceLabel) }),
+      requiresV9 && /* @__PURE__ */ jsx25("span", { style: { color: "#7a4d00" }, children: "Requires Fluent UI v9 export \u2014 Power Pages / Canvas targets are blocked." })
+    ] })
+  ] });
+};
+var CHART_CONTROL_TYPES = /* @__PURE__ */ new Set([
+  "barchart",
+  "linechart",
+  "areachart",
+  "piechart",
+  "donutchart",
+  "horizontalbarchart",
+  "gaugechart",
+  "sparkline",
+  "heatmapchart",
+  "kpicard",
+  "funnelchart",
+  "scatterchart"
+]);
+function isChartControlType(type) {
+  return CHART_CONTROL_TYPES.has(type);
+}
+
+// src/v8/controls/chart.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ChartBranch = ({ control, dataSourceLabelById, entry }) => /* @__PURE__ */ jsx26(ChartRenderer, { control, dataSourceLabelById, entry });
+
+// src/v8/controls/persona.tsx
+import { Persona as Persona2, PersonaSize as PersonaSize2, PersonaPresence as PersonaPresence2 } from "@fluentui/react";
+
+// src/v8/shared/helpers.ts
+var PERSONA_COLORS = [
+  "#0078d4",
+  "#00bcf2",
+  "#008272",
+  "#107c10",
+  "#5c2d91",
+  "#b4009e",
+  "#e3008c",
+  "#d83b01",
+  "#ca5010",
+  "#986f0b",
+  "#498205",
+  "#038387"
+];
+function getInitials2(name) {
+  if (!name) return "?";
+  const words = name.trim().split(/\s+/);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return words[0].substring(0, 2).toUpperCase();
+}
+function getPersonaColor(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash << 5) - hash + name.charCodeAt(i) | 0;
+  }
+  return PERSONA_COLORS[Math.abs(hash) % PERSONA_COLORS.length];
+}
+function isEmbeddedEntityBrowser(webResourceName) {
+  if (!webResourceName) return false;
+  const normalized = webResourceName.toLowerCase().replace(/[_/]/g, "");
+  return normalized.includes("entitybrowser");
+}
+
+// src/v8/controls/persona.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var SIZE_MAP = {
+  size24: PersonaSize2.size24,
+  size32: PersonaSize2.size32,
+  size40: PersonaSize2.size40,
+  size48: PersonaSize2.size48,
+  size56: PersonaSize2.size56,
+  size72: PersonaSize2.size72,
+  size100: PersonaSize2.size100,
+  size120: PersonaSize2.size120
+};
+var PRESENCE_MAP = {
+  none: PersonaPresence2.none,
+  online: PersonaPresence2.online,
+  away: PersonaPresence2.away,
+  busy: PersonaPresence2.busy,
+  dnd: PersonaPresence2.dnd,
+  offline: PersonaPresence2.offline,
+  blocked: PersonaPresence2.blocked
+};
+var PersonaControl = ({ control }) => {
+  const rawSourceMode = control.properties.personaSourceMode || "static";
+  const sourceMode = rawSourceMode === "systemUser" ? "dataverse" : rawSourceMode;
+  const personaSize = control.properties.personaSize || "size48";
+  const showPresence = control.properties.showPresence ?? false;
+  const presenceOverride = control.properties.presence || "none";
+  const hideDetails = control.properties.hideDetails ?? false;
+  const showSecondaryText = control.properties.showSecondaryText ?? true;
+  let displayText;
+  let displaySecondary;
+  let displayImageUrl;
+  let derivedPresence;
+  if (sourceMode === "dataverse") {
+    const entityName = control.properties.dvRecordEntityName || "systemuser";
+    const recordId = control.properties.dvRecordId || control.properties.systemUserId || "";
+    displayText = control.properties.dvRecordName || control.properties.systemUserName || "Select a record...";
+    displaySecondary = control.properties.dvRecordSecondaryText || control.properties.systemUserJobTitle || "";
+    displayImageUrl = control.properties.dvRecordImageDataUrl || control.properties.systemUserImageDataUrl || "";
+    if (presenceOverride !== "none") {
+      derivedPresence = PRESENCE_MAP[presenceOverride] ?? PersonaPresence2.none;
+    } else if (entityName === "systemuser" && recordId) {
+      const isDisabled2 = control.properties.dvRecordIsDisabled ?? control.properties.systemUserIsDisabled ?? false;
+      derivedPresence = isDisabled2 ? PersonaPresence2.offline : PersonaPresence2.online;
+    } else {
+      derivedPresence = PersonaPresence2.none;
+    }
+  } else {
+    displayText = control.properties.primaryText || "User Name";
+    displaySecondary = control.properties.secondaryText || "";
+    displayImageUrl = control.properties.imageUrl || "";
+    derivedPresence = PRESENCE_MAP[presenceOverride] ?? PersonaPresence2.none;
+  }
+  return /* @__PURE__ */ jsx27(
+    Persona2,
+    {
+      text: displayText,
+      secondaryText: showSecondaryText ? displaySecondary : void 0,
+      imageUrl: displayImageUrl || void 0,
+      imageInitials: getInitials2(displayText),
+      size: SIZE_MAP[personaSize] ?? PersonaSize2.size48,
+      initialsColor: getPersonaColor(displayText),
+      presence: showPresence ? derivedPresence : PersonaPresence2.none,
+      hidePersonaDetails: hideDetails,
+      showSecondaryText: showSecondaryText && !!displaySecondary
+    }
+  );
+};
+
+// src/v8/controls/button.tsx
+import { useState as useState6 } from "react";
+import {
+  ActionButton,
+  CommandBar,
+  CompoundButton,
+  DefaultButton,
+  IconButton as FluentIconButton,
+  TooltipHost
+} from "@fluentui/react";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
+var ButtonControl = ({
+  control,
+  interactive,
+  onButtonClick
+}) => {
+  const buttonVariant = control.properties.buttonVariant ?? "default";
+  const isPrimary = control.properties.primary ?? buttonVariant === "primary";
+  const buttonText = control.properties.buttonText ?? control.label ?? "Button";
+  const buttonAction = control.properties.buttonAction ?? { type: "none" };
+  const iconName = control.properties.iconName;
+  const iconPosition = control.properties.iconPosition ?? "before";
+  const buttonSize = control.properties.size ?? "medium";
+  const fullWidth = control.properties.fullWidth ?? false;
+  const alignment = control.properties.alignment ?? "left";
+  const buttonDisabled = control.properties.disabled ?? false;
+  const tooltip = control.properties.tooltip;
+  const secondaryText = control.properties.secondaryText;
+  const iconOnly = control.properties.iconOnly ?? false;
+  const backgroundColor = control.properties.backgroundColor;
+  const textColor = control.properties.textColor;
+  const iconColor = control.properties.iconColor;
+  const menuItems = control.properties.menuItems;
+  const commandBarItems = control.properties.commandBarItems;
+  const commandBarIconOnly = control.properties.commandBarIconOnly ?? false;
+  const commandBarMainPosition = control.properties.commandBarMainPosition ?? 0;
+  const checkedText = control.properties.checkedText;
+  const uncheckedText = control.properties.uncheckedText;
+  const checkedIconName = control.properties.checkedIconName;
+  const checkedBackgroundColor = control.properties.checkedBackgroundColor;
+  const checkedTextColor = control.properties.checkedTextColor;
+  const checkedIconColor = control.properties.checkedIconColor;
+  const designMode = !interactive;
+  const [toggleChecked, setToggleChecked] = useState6(false);
+  const sizeHeightMap = { small: 24, medium: 32, large: 40 };
+  const btnHeight = sizeHeightMap[buttonSize] ?? 32;
+  const handleClick = () => {
+    if (designMode || !onButtonClick) return;
+    onButtonClick(buttonAction);
+  };
+  const iconProps = iconName ? { iconName } : void 0;
+  const resolvedIconColor = iconColor || textColor;
+  const displayText = iconOnly && iconName ? void 0 : buttonText;
+  const customStyles = {
+    root: {
+      height: btnHeight,
+      minWidth: buttonSize === "small" ? 60 : void 0,
+      ...fullWidth && { width: "100%" },
+      ...backgroundColor && { backgroundColor, borderColor: backgroundColor },
+      ...textColor && { color: textColor }
+    },
+    flexContainer: {
+      ...iconPosition === "after" && { flexDirection: "row-reverse" }
+    },
+    label: {
+      ...textColor && { color: textColor },
+      ...iconOnly && iconName && { display: "none" }
+    },
+    icon: {
+      ...resolvedIconColor && { color: resolvedIconColor }
+    }
+  };
+  const menuProps = (buttonVariant === "split" || buttonVariant === "command") && menuItems && menuItems.length > 0 ? {
+    items: menuItems.map((mi) => ({
+      key: mi.id,
+      text: mi.text,
+      iconProps: mi.iconName ? { iconName: mi.iconName } : void 0,
+      onClick: () => {
+        if (!designMode && onButtonClick) {
+          onButtonClick(mi.action);
+        }
+      }
+    }))
+  } : void 0;
+  const justifyMap = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end"
+  };
+  const wrapperStyle = {
+    display: "flex",
+    justifyContent: fullWidth ? "stretch" : justifyMap[alignment] ?? "flex-start",
+    padding: "4px 0",
+    position: "relative"
+  };
+  const renderButton = () => {
+    switch (buttonVariant) {
+      case "primary":
+        return /* @__PURE__ */ jsx28(
+          DefaultButton,
+          {
+            text: displayText,
+            iconProps,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: customStyles,
+            primary: true
+          }
+        );
+      case "compound":
+        return /* @__PURE__ */ jsx28(
+          CompoundButton,
+          {
+            text: displayText ?? buttonText,
+            secondaryText: secondaryText || "Description",
+            iconProps,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: customStyles,
+            primary: isPrimary
+          }
+        );
+      case "icon":
+        return /* @__PURE__ */ jsx28(
+          FluentIconButton,
+          {
+            iconProps: iconProps || { iconName: "Add" },
+            title: buttonText,
+            ariaLabel: buttonText,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: {
+              root: {
+                height: btnHeight,
+                width: btnHeight,
+                ...backgroundColor && { backgroundColor, borderColor: backgroundColor }
+              },
+              icon: {
+                ...resolvedIconColor && { color: resolvedIconColor }
+              }
+            }
+          }
+        );
+      case "action":
+        return /* @__PURE__ */ jsx28(
+          ActionButton,
+          {
+            text: displayText,
+            iconProps,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: customStyles
+          }
+        );
+      case "command": {
+        const cmdButtonStyles = {
+          root: {
+            height: btnHeight,
+            ...backgroundColor && { backgroundColor, borderColor: backgroundColor },
+            ...textColor && { color: textColor }
+          },
+          label: {
+            ...textColor && { color: textColor }
+          },
+          icon: {
+            ...resolvedIconColor && { color: resolvedIconColor }
+          },
+          menuIcon: {
+            ...textColor && { color: textColor }
+          }
+        };
+        const mainButtonItem = {
+          key: "main",
+          text: displayText,
+          iconProps,
+          iconOnly: iconOnly && !!iconName,
+          ariaLabel: buttonText,
+          onClick: handleClick,
+          disabled: designMode || buttonDisabled,
+          buttonStyles: cmdButtonStyles,
+          subMenuProps: menuProps
+        };
+        const additionalItems = [];
+        if (commandBarItems && commandBarItems.length > 0) {
+          commandBarItems.forEach((cbi) => {
+            const cbiSubMenuProps = cbi.subMenuItems && cbi.subMenuItems.length > 0 ? {
+              items: cbi.subMenuItems.map((sub) => ({
+                key: sub.id,
+                text: sub.text,
+                iconProps: sub.iconName ? { iconName: sub.iconName } : void 0,
+                onClick: () => {
+                  if (!designMode && onButtonClick) {
+                    onButtonClick(sub.action);
+                  }
+                }
+              }))
+            } : void 0;
+            const cbiIconOnly = (cbi.iconOnly !== void 0 ? cbi.iconOnly : commandBarIconOnly) && !!cbi.iconName;
+            additionalItems.push({
+              key: cbi.id,
+              text: cbiIconOnly ? void 0 : cbi.text,
+              iconProps: cbi.iconName ? { iconName: cbi.iconName } : void 0,
+              iconOnly: cbiIconOnly,
+              ariaLabel: cbi.text,
+              disabled: designMode || buttonDisabled,
+              buttonStyles: cmdButtonStyles,
+              onClick: () => {
+                if (!designMode && onButtonClick) {
+                  onButtonClick(cbi.action);
+                }
+              },
+              subMenuProps: cbiSubMenuProps
+            });
+          });
+        }
+        const cmdItems = [...additionalItems];
+        const insertPos = Math.min(Math.max(commandBarMainPosition, 0), cmdItems.length);
+        cmdItems.splice(insertPos, 0, mainButtonItem);
+        return /* @__PURE__ */ jsx28(
+          CommandBar,
+          {
+            items: cmdItems,
+            styles: {
+              root: {
+                padding: 0,
+                height: btnHeight,
+                ...fullWidth && { width: "100%" },
+                ...backgroundColor && { backgroundColor }
+              }
+            }
+          }
+        );
+      }
+      case "split":
+        return /* @__PURE__ */ jsx28(
+          DefaultButton,
+          {
+            text: displayText,
+            iconProps,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: customStyles,
+            split: true,
+            primary: isPrimary,
+            menuProps: menuProps || { items: [] }
+          }
+        );
+      case "toggle": {
+        const toggleText = toggleChecked ? checkedText || displayText : uncheckedText || displayText;
+        const toggleIconProps = toggleChecked && checkedIconName ? { iconName: checkedIconName } : iconProps;
+        const effectiveToggleIconOnly = iconOnly && !!(toggleIconProps?.iconName || iconName);
+        const toggleBg = toggleChecked && checkedBackgroundColor ? checkedBackgroundColor : backgroundColor;
+        const toggleTextCol = toggleChecked && checkedTextColor ? checkedTextColor : textColor;
+        const toggleIconCol = toggleChecked ? checkedIconColor || checkedTextColor || resolvedIconColor : resolvedIconColor;
+        const toggleStyles = {
+          root: {
+            height: btnHeight,
+            minWidth: buttonSize === "small" ? 60 : void 0,
+            ...fullWidth && { width: "100%" },
+            ...toggleBg && { backgroundColor: toggleBg, borderColor: toggleBg },
+            ...toggleTextCol && { color: toggleTextCol }
+          },
+          flexContainer: {
+            ...iconPosition === "after" && { flexDirection: "row-reverse" }
+          },
+          rootChecked: {
+            ...checkedBackgroundColor && {
+              backgroundColor: checkedBackgroundColor,
+              borderColor: checkedBackgroundColor
+            },
+            ...checkedTextColor && { color: checkedTextColor }
+          },
+          rootCheckedHovered: {
+            ...checkedBackgroundColor && {
+              backgroundColor: checkedBackgroundColor,
+              borderColor: checkedBackgroundColor
+            },
+            ...checkedTextColor && { color: checkedTextColor }
+          },
+          label: {
+            ...toggleTextCol && { color: toggleTextCol },
+            ...effectiveToggleIconOnly && { display: "none" }
+          },
+          icon: {
+            ...toggleIconCol && { color: toggleIconCol }
+          }
+        };
+        return /* @__PURE__ */ jsx28(
+          DefaultButton,
+          {
+            text: effectiveToggleIconOnly ? void 0 : toggleText,
+            iconProps: toggleIconProps,
+            onClick: () => {
+              setToggleChecked(!toggleChecked);
+              handleClick();
+            },
+            disabled: designMode || buttonDisabled,
+            styles: toggleStyles,
+            toggle: true,
+            checked: toggleChecked,
+            primary: isPrimary
+          }
+        );
+      }
+      default:
+        return /* @__PURE__ */ jsx28(
+          DefaultButton,
+          {
+            text: displayText,
+            iconProps,
+            onClick: handleClick,
+            disabled: designMode || buttonDisabled,
+            styles: customStyles,
+            primary: isPrimary
+          }
+        );
+    }
+  };
+  const buttonElement = tooltip ? /* @__PURE__ */ jsx28(TooltipHost, { content: tooltip, children: renderButton() }) : renderButton();
+  return /* @__PURE__ */ jsxs9("div", { style: wrapperStyle, children: [
+    buttonElement,
+    designMode && /* @__PURE__ */ jsx28(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          right: 0,
+          fontSize: 9,
+          padding: "1px 4px",
+          backgroundColor: "#deecf9",
+          color: "#0078d4",
+          borderRadius: 2,
+          pointerEvents: "none"
+        },
+        children: buttonVariant
+      }
+    )
+  ] });
+};
+
+// src/v8/controls/subgrid.tsx
+import { useMemo as useMemo4 } from "react";
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  SelectionMode,
+  Icon as Icon10,
+  Spinner as Spinner3,
+  SpinnerSize as SpinnerSize3
+} from "@fluentui/react";
+
+// src/hooks.ts
+import { useEffect as useEffect3, useState as useState7 } from "react";
+function useLiveData(control, enabled = true) {
+  const ctx = useOptionalFormRuntimeContext();
+  const [records, setRecords] = useState7(null);
+  const [loading, setLoading] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [fetchXmlAttributes, setFetchXmlAttributes] = useState7([]);
+  const [timelineItems, setTimelineItems] = useState7(null);
+  const fetchLiveData = ctx?.fetchLiveData;
+  const propertiesKey = JSON.stringify(control.properties ?? {});
+  const dataBindingKey = JSON.stringify(control.dataBinding ?? {});
+  useEffect3(() => {
+    if (!enabled || !fetchLiveData) {
+      setRecords(null);
+      setLoading(false);
+      setError(null);
+      setTimelineItems(null);
+      setFetchXmlAttributes([]);
+      return;
+    }
+    let cancelled = false;
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+    fetchLiveData(control, { signal: controller.signal }).then((data) => {
+      if (cancelled) return;
+      setRecords(data.records);
+      setFetchXmlAttributes(data.fetchXmlAttributes);
+      setTimelineItems(data.timelineItems);
+      setLoading(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err.message : "Failed to fetch live data");
+      setRecords(null);
+      setTimelineItems(null);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [fetchLiveData, enabled, control.type, control.name, propertiesKey, dataBindingKey]);
+  return { records, loading, error, fetchXmlAttributes, timelineItems };
+}
+
+// src/v8/controls/subgrid.tsx
+import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
+var SubgridBranch = ({
+  control,
+  records: recordsProp,
+  columns: columnsProp
+}) => {
+  const declaredColumns = columnsProp ?? (control.properties.columns ?? []);
+  const entityName = control.properties.entityName || "";
+  const maxRows = control.properties.maxRows ?? 5;
+  const skipFetch = recordsProp !== void 0;
+  const { records: liveRecords, loading, error } = useLiveData(control, !skipFetch);
+  const records = recordsProp ?? liveRecords ?? [];
+  const detailsListColumns = useMemo4(
+    () => declaredColumns.map((col) => ({
+      key: col.key,
+      name: col.name || col.fieldName,
+      fieldName: col.fieldName,
+      minWidth: col.minWidth ?? 80,
+      maxWidth: col.maxWidth ?? (col.minWidth ?? 80) * 2,
+      isResizable: col.isResizable ?? true
+    })),
+    [declaredColumns]
+  );
+  return /* @__PURE__ */ jsxs10("div", { style: { border: "1px solid #edebe9", borderRadius: 2, overflow: "hidden", backgroundColor: "#fff" }, children: [
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "6px 12px",
+          borderBottom: "1px solid #edebe9",
+          backgroundColor: "#faf9f8",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx29(Icon10, { iconName: "GridViewSmall", styles: { root: { fontSize: 14, color: "#0078d4" } } }),
+          /* @__PURE__ */ jsx29("span", { style: { fontSize: 12, fontWeight: 600, color: "#323130" }, children: entityName || "Subgrid" }),
+          !skipFetch && liveRecords !== null && liveRecords.length > 0 && /* @__PURE__ */ jsx29(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                color: "#107c10",
+                backgroundColor: "#dff6dd",
+                padding: "2px 6px",
+                borderRadius: 2
+              },
+              children: "Live"
+            }
+          ),
+          /* @__PURE__ */ jsxs10("span", { style: { marginLeft: "auto", fontSize: 11, color: "#605e5c" }, children: [
+            "Max: ",
+            maxRows
+          ] })
+        ]
+      }
+    ),
+    loading && /* @__PURE__ */ jsx29("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ jsx29(Spinner3, { size: SpinnerSize3.small, label: "Loading records...", labelPosition: "right" }) }),
+    error && !loading && /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          padding: 12,
+          backgroundColor: "#fef0f0",
+          color: "#a80000",
+          fontSize: 12,
+          borderBottom: "1px solid #edebe9"
+        },
+        children: [
+          /* @__PURE__ */ jsx29(Icon10, { iconName: "Warning", styles: { root: { marginRight: 6, verticalAlign: "middle" } } }),
+          error
+        ]
+      }
+    ),
+    !loading && !error && /* @__PURE__ */ jsx29("div", { style: { maxHeight: Math.max(200, maxRows * 36), overflow: "auto" }, children: records.length === 0 || detailsListColumns.length === 0 ? /* @__PURE__ */ jsx29("div", { style: { padding: 24, textAlign: "center", color: "#605e5c", fontSize: 12 }, children: detailsListColumns.length === 0 ? "No columns configured" : "No records" }) : /* @__PURE__ */ jsx29(
+      DetailsList,
+      {
+        items: records,
+        columns: detailsListColumns,
+        layoutMode: DetailsListLayoutMode.justified,
+        selectionMode: SelectionMode.none,
+        compact: true,
+        isHeaderVisible: true
+      }
+    ) })
+  ] });
+};
+
+// src/v8/controls/timeline.tsx
+import { useMemo as useMemo5 } from "react";
+import { Icon as Icon11, Spinner as Spinner4, SpinnerSize as SpinnerSize4 } from "@fluentui/react";
+import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+var ALL_MOCK_ACTIVITIES = [
+  { id: "mock-1", type: "email", icon: "Mail", title: "Email sent", description: "Re: Follow up on proposal", time: "2 hours ago", color: "#0078d4", createdon: /* @__PURE__ */ new Date(), timestamp: 19 },
+  { id: "mock-2", type: "phonecall", icon: "Phone", title: "Phone call", description: "Discussed pricing options", time: "Yesterday", color: "#107c10", createdon: /* @__PURE__ */ new Date(), timestamp: 18 },
+  { id: "mock-3", type: "task", icon: "TaskSolid", title: "Task completed", description: "Send product brochure", time: "3 days ago", color: "#8764b8", createdon: /* @__PURE__ */ new Date(), timestamp: 17 },
+  { id: "mock-4", type: "note", icon: "QuickNote", title: "Note added", description: "Customer interested in premium plan", time: "1 week ago", color: "#ca5010", createdon: /* @__PURE__ */ new Date(), timestamp: 16 },
+  { id: "mock-5", type: "appointment", icon: "Calendar", title: "Appointment scheduled", description: "Demo meeting with stakeholders", time: "2 weeks ago", color: "#038387", createdon: /* @__PURE__ */ new Date(), timestamp: 15 }
+];
+var TimelineControl = ({ control, interactive }) => {
+  const maxActivities = control.properties.maxActivities ?? 4;
+  const showEmail = control.properties.showEmail ?? true;
+  const showPhoneCall = control.properties.showPhoneCall ?? true;
+  const showTask = control.properties.showTask ?? true;
+  const showNote = control.properties.showNote ?? true;
+  const showAppointment = control.properties.showAppointment ?? true;
+  const sortOrder = control.properties.sortOrder ?? "newest";
+  const ctx = useOptionalFormRuntimeContext();
+  const hasPreviewRecord = !!ctx?.previewContext?.recordId;
+  const { timelineItems, loading, error } = useLiveData(control, hasPreviewRecord);
+  const useLiveDataMode = !!(timelineItems && timelineItems.length > 0);
+  const isLoading = loading;
+  const filteredMockActivities = useMemo5(
+    () => ALL_MOCK_ACTIVITIES.filter((activity) => {
+      switch (activity.type) {
+        case "email":
+          return showEmail;
+        case "phonecall":
+          return showPhoneCall;
+        case "task":
+          return showTask;
+        case "note":
+          return showNote;
+        case "appointment":
+          return showAppointment;
+        default:
+          return true;
+      }
+    }),
+    [showEmail, showPhoneCall, showTask, showNote, showAppointment]
+  );
+  const sortedMockActivities = useMemo5(
+    () => [...filteredMockActivities].sort(
+      (a, b) => sortOrder === "newest" ? b.timestamp - a.timestamp : a.timestamp - b.timestamp
+    ),
+    [filteredMockActivities, sortOrder]
+  );
+  const mockDisplayActivities = sortedMockActivities.slice(0, maxActivities);
+  const displayActivities = useLiveDataMode ? timelineItems : mockDisplayActivities;
+  const activeFilters = [showEmail, showPhoneCall, showTask, showNote, showAppointment].filter(Boolean).length;
+  void interactive;
+  return /* @__PURE__ */ jsxs11("div", { style: { border: "1px solid #edebe9", borderRadius: 2, overflow: "hidden", backgroundColor: "#fff" }, children: [
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "8px 12px",
+          borderBottom: "1px solid #edebe9",
+          backgroundColor: "#faf9f8"
+        },
+        children: [
+          /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx30(Icon11, { iconName: "TimelineProgress", styles: { root: { fontSize: 14, color: "#0078d4" } } }),
+            /* @__PURE__ */ jsx30("span", { style: { fontSize: 13, fontWeight: 600, color: "#323130" }, children: "Timeline" }),
+            (useLiveDataMode || isLoading) && /* @__PURE__ */ jsx30(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  color: "#107c10",
+                  backgroundColor: "#dff6dd",
+                  padding: "2px 6px",
+                  borderRadius: 2
+                },
+                children: "Live"
+              }
+            ),
+            activeFilters < 5 && /* @__PURE__ */ jsxs11(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  color: "#605e5c",
+                  backgroundColor: "#f3f2f1",
+                  padding: "2px 6px",
+                  borderRadius: 2
+                },
+                children: [
+                  activeFilters,
+                  " of 5 types"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx30("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsx30("span", { style: { fontSize: 10, color: "#a19f9d" }, children: sortOrder === "newest" ? "\u2193 Newest" : "\u2191 Oldest" }) })
+        ]
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx30("div", { style: { padding: 16, textAlign: "center", backgroundColor: "#faf9f8" }, children: /* @__PURE__ */ jsx30(Spinner4, { size: SpinnerSize4.small, label: "Loading activities...", labelPosition: "right" }) }),
+    error && !isLoading && /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          padding: 12,
+          backgroundColor: error.includes("Select a preview record") ? "#deecf9" : "#fef0f0",
+          color: error.includes("Select a preview record") ? "#0078d4" : "#a80000",
+          fontSize: 12,
+          borderBottom: "1px solid #edebe9"
+        },
+        children: [
+          /* @__PURE__ */ jsx30(
+            Icon11,
+            {
+              iconName: error.includes("Select a preview record") ? "Info" : "Warning",
+              styles: { root: { marginRight: 6, verticalAlign: "middle" } }
+            }
+          ),
+          error
+        ]
+      }
+    ),
+    !isLoading && /* @__PURE__ */ jsx30("div", { style: { maxHeight: Math.max(200, maxActivities * 52), overflowY: "auto" }, children: displayActivities.length === 0 ? /* @__PURE__ */ jsxs11("div", { style: { padding: 24, textAlign: "center", color: "#605e5c", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsx30(
+        Icon11,
+        {
+          iconName: useLiveDataMode ? "TimelineProgress" : "Filter",
+          styles: { root: { fontSize: 24, color: "#a19f9d", marginBottom: 8 } }
+        }
+      ),
+      /* @__PURE__ */ jsx30("div", { children: useLiveDataMode ? "No activities found for this record" : "No activities to display" })
+    ] }) : displayActivities.map((activity, idx) => /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          display: "flex",
+          padding: "10px 12px",
+          borderBottom: idx < displayActivities.length - 1 ? "1px solid #edebe9" : "none",
+          gap: 10
+        },
+        children: [
+          /* @__PURE__ */ jsx30(
+            "div",
+            {
+              style: {
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                backgroundColor: activity.color,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx30(Icon11, { iconName: activity.icon, styles: { root: { fontSize: 14, color: "#fff" } } })
+            }
+          ),
+          /* @__PURE__ */ jsxs11("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx30("div", { style: { fontSize: 13, fontWeight: 600, color: "#323130" }, children: activity.title }),
+            /* @__PURE__ */ jsx30(
+              "div",
+              {
+                style: {
+                  fontSize: 12,
+                  color: "#605e5c",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: activity.description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx30("div", { style: { fontSize: 11, color: "#a19f9d", whiteSpace: "nowrap" }, children: activity.time })
+        ]
+      },
+      activity.id || idx
+    )) }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "6px 12px",
+          borderTop: "1px solid #edebe9",
+          backgroundColor: "#faf9f8",
+          fontSize: 11,
+          color: "#605e5c"
+        },
+        children: [
+          isLoading ? /* @__PURE__ */ jsx30("span", { children: "Loading..." }) : /* @__PURE__ */ jsx30("span", { children: useLiveDataMode ? `Showing ${displayActivities.length} activities` : `Showing ${displayActivities.length} of ${filteredMockActivities.length}` }),
+          /* @__PURE__ */ jsxs11("span", { children: [
+            "Max: ",
+            maxActivities
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/v8/controls/internals/NestedRecordsSidePanel.tsx
+import { useMemo as useMemo6 } from "react";
+import {
+  Panel,
+  PanelType,
+  DetailsList as DetailsList2,
+  DetailsListLayoutMode as DetailsListLayoutMode2,
+  SelectionMode as SelectionMode2,
+  Stack,
+  Text as Text2,
+  DefaultButton as DefaultButton2,
+  mergeStyles as mergeStyles4
+} from "@fluentui/react";
+
+// src/v8/shared/gridCellRenderers.tsx
+import React11 from "react";
+import {
+  ProgressIndicator,
+  Rating as Rating2,
+  RatingSize as RatingSize2,
+  Icon as Icon12,
+  Link as Link3,
+  Toggle as Toggle2
+} from "@fluentui/react";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+function renderStatusBadge(value, config) {
+  if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d" }, children: "-" });
+  const displayMode = config.displayMode || "box";
+  const iconOnly = config.iconOnly === true;
+  let label;
+  let color;
+  let icon;
+  let optionKey;
+  if (typeof value === "object" && value !== null && "label" in value) {
+    const opt = value;
+    label = opt.label;
+    color = opt.color || "#605e5c";
+    icon = opt.icon;
+    optionKey = opt.value;
+  } else {
+    label = String(value);
+    color = "#605e5c";
+    optionKey = value;
+  }
+  if (!icon) {
+    const cfgOptions = config.options ?? [];
+    const matched = cfgOptions.find(
+      (o) => String(o.value) === String(optionKey) || o.label && o.label === label
+    );
+    if (matched?.icon) icon = matched.icon;
+  }
+  const labelHidden = iconOnly && !!icon;
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: labelHidden ? 0 : 4,
+    padding: labelHidden ? "2px 4px" : "2px 8px",
+    borderRadius: 3,
+    fontSize: 12,
+    lineHeight: "18px",
+    fontWeight: 500
+  };
+  const iconNode = icon ? /* @__PURE__ */ jsx31(Icon12, { iconName: icon, styles: { root: { fontSize: labelHidden ? 14 : 12 } } }) : null;
+  const labelNode = labelHidden ? null : /* @__PURE__ */ jsx31("span", { children: label });
+  const titleAttr = labelHidden ? label : void 0;
+  switch (displayMode) {
+    case "box":
+      return /* @__PURE__ */ jsxs12("span", { title: titleAttr, "aria-label": titleAttr, style: { ...baseStyle, backgroundColor: color, color: "#fff" }, children: [
+        iconNode,
+        labelNode
+      ] });
+    case "border":
+      return /* @__PURE__ */ jsxs12("span", { title: titleAttr, "aria-label": titleAttr, style: { ...baseStyle, border: `1px solid ${color}`, color }, children: [
+        iconNode,
+        labelNode
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs12("span", { title: titleAttr, "aria-label": titleAttr, style: { ...baseStyle, color }, children: [
+        iconNode,
+        labelNode
+      ] });
+  }
+}
+function renderCurrency(value, config) {
+  if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d" }, children: "-" });
+  const currencyCode = config.currencyCode || "USD";
+  const decimals = config.decimals ?? 2;
+  const showTrend = !!config.showTrend;
+  let amount;
+  let trend;
+  if (typeof value === "object" && value !== null && "amount" in value) {
+    const cv = value;
+    amount = cv.amount;
+    trend = cv.trend;
+  } else {
+    amount = typeof value === "number" ? value : parseFloat(String(value)) || 0;
+  }
+  const symbols = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5", CAD: "C$", AUD: "A$" };
+  const symbol = symbols[currencyCode] || currencyCode;
+  const formatted = `${symbol}${amount.toLocaleString(void 0, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}`;
+  const trendIcons = {
+    up: { icon: "TriangleSolidUp12", color: "#107C10" },
+    down: { icon: "TriangleSolidDown12", color: "#D13438" },
+    flat: { icon: "Remove", color: "#605e5c" }
+  };
+  return /* @__PURE__ */ jsxs12("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ jsx31("span", { children: formatted }),
+    showTrend && trend && trendIcons[trend] && /* @__PURE__ */ jsx31(
+      Icon12,
+      {
+        iconName: trendIcons[trend].icon,
+        styles: { root: { fontSize: 10, color: trendIcons[trend].color } }
+      }
+    )
+  ] });
+}
+function renderProgress(value, config) {
+  const max = config.max ?? 100;
+  const min = config.min ?? 0;
+  const showLabel = config.showLabel !== false;
+  const thresholds = config.thresholds || {};
+  const numVal = typeof value === "number" ? value : parseFloat(String(value)) || 0;
+  const pct = Math.max(0, Math.min(1, (numVal - min) / (max - min)));
+  const pctDisplay = Math.round(pct * 100);
+  let barColor = "#0078d4";
+  if (thresholds.danger != null && pctDisplay < thresholds.danger) barColor = "#D13438";
+  else if (thresholds.warning != null && pctDisplay < thresholds.warning) barColor = "#CA5010";
+  return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: 6, minWidth: 80 }, children: [
+    /* @__PURE__ */ jsx31(
+      ProgressIndicator,
+      {
+        percentComplete: pct,
+        barHeight: 6,
+        styles: {
+          root: { flex: 1 },
+          progressBar: { backgroundColor: barColor }
+        }
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs12("span", { style: { fontSize: 11, color: "#605e5c", minWidth: 28 }, children: [
+      pctDisplay,
+      "%"
+    ] })
+  ] });
+}
+function renderDate(value, config) {
+  if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d" }, children: "-" });
+  const format = config.format || "short";
+  const showTime = config.showTime === true;
+  const str = String(value);
+  try {
+    const date = new Date(str);
+    if (isNaN(date.getTime())) return /* @__PURE__ */ jsx31("span", { children: str });
+    let dateText;
+    switch (format) {
+      case "long":
+        dateText = date.toLocaleDateString(void 0, { year: "numeric", month: "long", day: "numeric" });
+        break;
+      case "relative": {
+        const diffMs = Date.now() - date.getTime();
+        const diffDays = Math.floor(diffMs / 864e5);
+        if (diffDays === 0) return /* @__PURE__ */ jsx31("span", { children: "Today" });
+        if (diffDays === 1) return /* @__PURE__ */ jsx31("span", { children: "Yesterday" });
+        if (diffDays < 30) return /* @__PURE__ */ jsxs12("span", { children: [
+          diffDays,
+          " days ago"
+        ] });
+        if (diffDays < 365) return /* @__PURE__ */ jsxs12("span", { children: [
+          Math.floor(diffDays / 30),
+          " months ago"
+        ] });
+        return /* @__PURE__ */ jsxs12("span", { children: [
+          Math.floor(diffDays / 365),
+          " years ago"
+        ] });
+      }
+      case "iso":
+        if (showTime) {
+          return /* @__PURE__ */ jsx31("span", { children: date.toISOString().slice(0, 16).replace("T", " ") });
+        }
+        return /* @__PURE__ */ jsx31("span", { children: date.toISOString().split("T")[0] });
+      default:
+        dateText = date.toLocaleDateString();
+    }
+    if (showTime) {
+      const timeText = date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+      return /* @__PURE__ */ jsx31("span", { children: `${dateText} ${timeText}` });
+    }
+    return /* @__PURE__ */ jsx31("span", { children: dateText });
+  } catch {
+    return /* @__PURE__ */ jsx31("span", { children: str });
+  }
+}
+function renderBoolean(value, config) {
+  const boolVal = !!value;
+  const displayAs = config.displayAs || "icon";
+  switch (displayAs) {
+    case "toggle":
+      return /* @__PURE__ */ jsx31(Toggle2, { checked: boolVal, disabled: true, styles: { root: { margin: 0 } } });
+    case "text":
+      return /* @__PURE__ */ jsx31("span", { children: boolVal ? config.trueLabel || "Yes" : config.falseLabel || "No" });
+    default:
+      return /* @__PURE__ */ jsx31(
+        Icon12,
+        {
+          iconName: boolVal ? "CheckMark" : "Cancel",
+          styles: { root: { color: boolVal ? "#107C10" : "#D13438", fontSize: 14 } }
+        }
+      );
+  }
+}
+function renderRating(value, config) {
+  const max = config.max ?? 5;
+  const numVal = typeof value === "number" ? value : parseFloat(String(value)) || 0;
+  return /* @__PURE__ */ jsx31(
+    Rating2,
+    {
+      rating: numVal,
+      max,
+      size: RatingSize2.Small,
+      readOnly: true,
+      styles: { root: { display: "inline-flex" } }
+    }
+  );
+}
+function renderLookup(value, config) {
+  if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d" }, children: "-" });
+  const displayAsLink = config.displayAsLink !== false;
+  const showEntityIcon = !!config.showEntityIcon;
+  let name;
+  let entityType;
+  if (typeof value === "object" && value !== null && "name" in value) {
+    const lv = value;
+    name = lv.name;
+    entityType = lv.entityType;
+  } else {
+    name = String(value);
+  }
+  const entityIcons = {
+    account: "CityNext",
+    contact: "Contact",
+    opportunity: "Lightbulb",
+    lead: "PeopleAdd"
+  };
+  return /* @__PURE__ */ jsxs12("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+    showEntityIcon && entityType && entityIcons[entityType] && /* @__PURE__ */ jsx31(Icon12, { iconName: entityIcons[entityType], styles: { root: { fontSize: 12, color: "#605e5c" } } }),
+    displayAsLink ? /* @__PURE__ */ jsx31(Link3, { children: name }) : /* @__PURE__ */ jsx31("span", { children: name })
+  ] });
+}
+function evaluateCondition(rowData, condition) {
+  const fieldVal = rowData[condition.field];
+  const numField = typeof fieldVal === "number" ? fieldVal : parseFloat(String(fieldVal));
+  const numCondition = typeof condition.value === "number" ? condition.value : parseFloat(String(condition.value));
+  switch (condition.operator) {
+    case "eq":
+      return fieldVal === condition.value || String(fieldVal) === String(condition.value);
+    case "gt":
+      return !isNaN(numField) && !isNaN(numCondition) && numField > numCondition;
+    case "lt":
+      return !isNaN(numField) && !isNaN(numCondition) && numField < numCondition;
+    case "gte":
+      return !isNaN(numField) && !isNaN(numCondition) && numField >= numCondition;
+    case "lte":
+      return !isNaN(numField) && !isNaN(numCondition) && numField <= numCondition;
+    case "contains":
+      return String(fieldVal).toLowerCase().includes(String(condition.value).toLowerCase());
+    case "between": {
+      const numTo = typeof condition.valueTo === "number" ? condition.valueTo : parseFloat(String(condition.valueTo));
+      return !isNaN(numField) && !isNaN(numCondition) && !isNaN(numTo) && numField >= numCondition && numField <= numTo;
+    }
+    default:
+      return false;
+  }
+}
+function resolveConditionalStyle(rowData, conditionalStyles, defaultStyle) {
+  if (conditionalStyles) {
+    for (const rule of conditionalStyles) {
+      if (evaluateCondition(rowData, rule)) {
+        return rule.style;
+      }
+    }
+  }
+  return defaultStyle ?? {};
+}
+function resolveSlotValue(slot, rowData) {
+  if (slot.fieldBinding) return rowData[slot.fieldBinding];
+  return slot.staticValue;
+}
+function renderCompositeSlot(slot, rowData) {
+  const value = resolveSlotValue(slot, rowData);
+  const style = resolveConditionalStyle(rowData, slot.conditionalStyles, slot.defaultStyle);
+  switch (slot.type) {
+    case "icon": {
+      const iconName = value != null ? String(value) : "StatusCircleQuestionMark";
+      return /* @__PURE__ */ jsx31(Icon12, { iconName, styles: { root: { fontSize: 14, color: style.color } } });
+    }
+    case "text":
+      if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d", ...style }, children: "-" });
+      return /* @__PURE__ */ jsx31("span", { style: { fontSize: 13, ...style }, children: String(value) });
+    case "badge": {
+      const label = value != null ? String(value) : "-";
+      return /* @__PURE__ */ jsx31("span", { style: {
+        display: "inline-block",
+        padding: "1px 6px",
+        borderRadius: 3,
+        fontSize: 11,
+        fontWeight: 500,
+        backgroundColor: "#edebe9",
+        ...style
+      }, children: label });
+    }
+    case "link":
+      return /* @__PURE__ */ jsx31(Link3, { style, children: value != null ? String(value) : "-" });
+    case "image": {
+      const src = value != null ? String(value) : "";
+      return src ? /* @__PURE__ */ jsx31("img", { src, alt: "", style: { height: 20, borderRadius: 2, ...style } }) : null;
+    }
+    case "spacer":
+      return /* @__PURE__ */ jsx31("span", { style: { flex: 1, ...style } });
+    case "progress": {
+      const numVal = typeof value === "number" ? value : parseFloat(String(value)) || 0;
+      const pct = Math.max(0, Math.min(1, numVal / 100));
+      return /* @__PURE__ */ jsx31(
+        ProgressIndicator,
+        {
+          percentComplete: pct,
+          barHeight: 4,
+          styles: { root: { flex: 1, minWidth: 40 }, progressBar: { backgroundColor: style.backgroundColor } }
+        }
+      );
+    }
+    case "rating": {
+      const numVal = typeof value === "number" ? value : parseFloat(String(value)) || 0;
+      return /* @__PURE__ */ jsx31(Rating2, { rating: numVal, max: 5, size: RatingSize2.Small, readOnly: true, styles: { root: { display: "inline-flex" } } });
+    }
+    default:
+      return value != null ? /* @__PURE__ */ jsx31("span", { style, children: String(value) }) : null;
+  }
+}
+function renderComposite(value, config, rowData) {
+  const compositeConfig = config;
+  if (!compositeConfig?.slots?.length) {
+    return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d", fontSize: 11 }, children: "No slots configured" });
+  }
+  const row = rowData || (typeof value === "object" && value !== null ? value : {});
+  return /* @__PURE__ */ jsx31("div", { style: {
+    display: "flex",
+    flexDirection: compositeConfig.layout === "vertical" ? "column" : "row",
+    alignItems: compositeConfig.layout === "vertical" ? "flex-start" : "center",
+    gap: compositeConfig.gap ?? 4
+  }, children: compositeConfig.slots.map((slot) => /* @__PURE__ */ jsx31(React11.Fragment, { children: renderCompositeSlot(slot, row) }, slot.id)) });
+}
+function renderGridCell(value, colDef, rowData) {
+  const { rendererType, rendererConfig } = colDef;
+  switch (rendererType) {
+    case "optionset":
+      return renderStatusBadge(value, rendererConfig);
+    case "currency":
+      return renderCurrency(value, rendererConfig);
+    case "progress":
+      return renderProgress(value, rendererConfig);
+    case "date":
+      return renderDate(value, rendererConfig);
+    case "boolean":
+      return renderBoolean(value, rendererConfig);
+    case "rating":
+      return renderRating(value, rendererConfig);
+    case "lookup":
+      return renderLookup(value, rendererConfig);
+    case "composite":
+      return renderComposite(value, rendererConfig, rowData);
+    case "text":
+    default:
+      if (value == null) return /* @__PURE__ */ jsx31("span", { style: { color: "#a19f9d" }, children: "-" });
+      if (typeof value === "object") return /* @__PURE__ */ jsx31("span", { children: JSON.stringify(value) });
+      return /* @__PURE__ */ jsx31("span", { children: String(value) });
+  }
+}
+
+// src/v8/controls/internals/NestedRecordsSidePanel.tsx
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+var PANEL_TYPE_BY_SIZE = {
+  small: PanelType.smallFixedFar,
+  medium: PanelType.medium,
+  large: PanelType.large
+};
+var headerSubtitleClass = mergeStyles4({
+  fontSize: 12,
+  color: "#605e5c",
+  marginTop: 2
+});
+var emptyStateClass = mergeStyles4({
+  padding: 24,
+  textAlign: "center",
+  color: "#605e5c"
+});
+var NestedRecordsSidePanel = ({
+  isOpen,
+  onDismiss,
+  childGridDef,
+  parentLabel,
+  panelSize = "medium",
+  rowCount,
+  generateMockData
+}) => {
+  const visibleColumns = useMemo6(() => {
+    if (!childGridDef) return [];
+    return [...childGridDef.columns].filter((c) => c.isVisible).sort((a, b) => a.order - b.order);
+  }, [childGridDef]);
+  const items = useMemo6(() => {
+    if (!childGridDef || !generateMockData) return [];
+    const count = rowCount ?? childGridDef.pageSize ?? 5;
+    return generateMockData(visibleColumns, count);
+  }, [childGridDef, rowCount, visibleColumns, generateMockData]);
+  const detailsListColumns = useMemo6(
+    () => visibleColumns.map((col) => ({
+      key: col.id,
+      name: col.displayName || col.fieldName,
+      fieldName: col.fieldName,
+      minWidth: col.minWidth ?? 50,
+      maxWidth: col.maxWidth ?? 200,
+      isResizable: true,
+      onRender: (item) => /* @__PURE__ */ jsx32(Fragment3, { children: renderGridCell(item[col.fieldName], col) })
+    })),
+    [visibleColumns]
+  );
+  const headerText = childGridDef?.name ?? "Related records";
+  return /* @__PURE__ */ jsx32(
+    Panel,
+    {
+      isOpen,
+      onDismiss,
+      type: PANEL_TYPE_BY_SIZE[panelSize] ?? PanelType.medium,
+      headerText,
+      closeButtonAriaLabel: "Close",
+      isLightDismiss: true,
+      onRenderHeader: () => /* @__PURE__ */ jsxs13(Stack, { tokens: { childrenGap: 2 }, styles: { root: { padding: "12px 24px 0 24px" } }, children: [
+        /* @__PURE__ */ jsx32(Text2, { variant: "xLarge", styles: { root: { fontWeight: 600 } }, children: headerText }),
+        parentLabel ? /* @__PURE__ */ jsxs13("span", { className: headerSubtitleClass, children: [
+          "for ",
+          parentLabel
+        ] }) : null
+      ] }),
+      onRenderFooterContent: () => /* @__PURE__ */ jsx32(Stack, { horizontal: true, horizontalAlign: "end", tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx32(DefaultButton2, { onClick: onDismiss, children: "Close" }) }),
+      isFooterAtBottom: true,
+      children: !childGridDef ? /* @__PURE__ */ jsx32("div", { className: emptyStateClass, children: "No related grid is configured for this row." }) : visibleColumns.length === 0 ? /* @__PURE__ */ jsx32("div", { className: emptyStateClass, children: "The related grid has no visible columns." }) : /* @__PURE__ */ jsx32(
+        DetailsList2,
+        {
+          items,
+          columns: detailsListColumns,
+          layoutMode: DetailsListLayoutMode2.justified,
+          selectionMode: SelectionMode2.multiple,
+          compact: childGridDef.compactMode,
+          isHeaderVisible: true
+        }
+      )
+    }
+  );
+};
+
+// src/v8/controls/internals/NestedRecordsCallout.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState8 } from "react";
+import {
+  Callout as Callout2,
+  DirectionalHint as DirectionalHint2,
+  Link as FluentLink,
+  mergeStyles as mergeStyles5
+} from "@fluentui/react";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+var calloutContentClass = mergeStyles5({
+  width: 320,
+  padding: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+});
+var calloutHeaderClass = mergeStyles5({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: 12,
+  fontWeight: 600,
+  color: "#323130",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+});
+var calloutRowClass = mergeStyles5({
+  display: "flex",
+  flexDirection: "column",
+  padding: "6px 0",
+  borderTop: "1px solid #edebe9",
+  fontSize: 12,
+  color: "#323130",
+  gap: 2
+});
+var calloutPrimaryClass = mergeStyles5({
+  fontWeight: 500,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var calloutSecondaryClass = mergeStyles5({
+  fontSize: 11,
+  color: "#605e5c",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var calloutFooterClass = mergeStyles5({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingTop: 4,
+  borderTop: "1px solid #edebe9"
+});
+var emptyStateClass2 = mergeStyles5({
+  fontSize: 12,
+  color: "#605e5c",
+  fontStyle: "italic"
+});
+var NestedRecordsCallout = ({
+  childGridDef,
+  hoverDelay = 300,
+  maxRows = 5,
+  onViewAll,
+  children,
+  generateMockData
+}) => {
+  const [isOpen, setIsOpen] = useState8(false);
+  const targetRef = useRef2(null);
+  const hoverTimer = useRef2(null);
+  const dismissTimer = useRef2(null);
+  const DISMISS_DELAY_MS = 200;
+  const cancelHoverTimer = useCallback2(() => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+  }, []);
+  const cancelDismissTimer = useCallback2(() => {
+    if (dismissTimer.current) {
+      clearTimeout(dismissTimer.current);
+      dismissTimer.current = null;
+    }
+  }, []);
+  const startDismiss = useCallback2(() => {
+    cancelDismissTimer();
+    dismissTimer.current = setTimeout(() => setIsOpen(false), DISMISS_DELAY_MS);
+  }, [cancelDismissTimer]);
+  const handleTriggerEnter = useCallback2(() => {
+    cancelDismissTimer();
+    cancelHoverTimer();
+    hoverTimer.current = setTimeout(() => setIsOpen(true), hoverDelay);
+  }, [cancelDismissTimer, cancelHoverTimer, hoverDelay]);
+  const handleTriggerLeave = useCallback2(() => {
+    cancelHoverTimer();
+    startDismiss();
+  }, [cancelHoverTimer, startDismiss]);
+  const closeNow = useCallback2(() => {
+    cancelHoverTimer();
+    cancelDismissTimer();
+    setIsOpen(false);
+  }, [cancelHoverTimer, cancelDismissTimer]);
+  useEffect4(() => () => {
+    cancelHoverTimer();
+    cancelDismissTimer();
+  }, [cancelHoverTimer, cancelDismissTimer]);
+  const visibleColumns = childGridDef ? [...childGridDef.columns].filter((c) => c.isVisible).sort((a, b) => a.order - b.order) : [];
+  const previewItems = childGridDef && generateMockData ? generateMockData(visibleColumns, maxRows) : [];
+  const primaryCol = visibleColumns[0];
+  const secondaryCol = visibleColumns[1];
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx33(
+      "span",
+      {
+        ref: targetRef,
+        onMouseEnter: handleTriggerEnter,
+        onMouseLeave: handleTriggerLeave,
+        children
+      }
+    ),
+    isOpen && targetRef.current ? /* @__PURE__ */ jsx33(
+      Callout2,
+      {
+        target: targetRef.current,
+        directionalHint: DirectionalHint2.bottomLeftEdge,
+        isBeakVisible: false,
+        gapSpace: 4,
+        onDismiss: closeNow,
+        setInitialFocus: false,
+        preventDismissOnLostFocus: true,
+        preventDismissOnScroll: true,
+        styles: { root: { borderRadius: 4 } },
+        children: /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: calloutContentClass,
+            onMouseEnter: cancelDismissTimer,
+            onMouseLeave: startDismiss,
+            children: [
+              /* @__PURE__ */ jsxs14("div", { className: calloutHeaderClass, children: [
+                /* @__PURE__ */ jsx33("span", { children: childGridDef?.name ?? "Related records" }),
+                /* @__PURE__ */ jsx33("span", { style: { fontWeight: 400, color: "#605e5c" }, children: previewItems.length })
+              ] }),
+              !childGridDef || previewItems.length === 0 ? /* @__PURE__ */ jsx33("div", { className: emptyStateClass2, children: "No related records to preview." }) : previewItems.map((item, idx) => /* @__PURE__ */ jsxs14("div", { className: calloutRowClass, children: [
+                /* @__PURE__ */ jsx33("div", { className: calloutPrimaryClass, children: primaryCol ? renderGridCell(item[primaryCol.fieldName], primaryCol) : "\u2014" }),
+                secondaryCol ? /* @__PURE__ */ jsx33("div", { className: calloutSecondaryClass, children: renderGridCell(item[secondaryCol.fieldName], secondaryCol) }) : null
+              ] }, idx)),
+              onViewAll ? /* @__PURE__ */ jsx33("div", { className: calloutFooterClass, children: /* @__PURE__ */ jsx33(
+                FluentLink,
+                {
+                  onClick: () => {
+                    closeNow();
+                    onViewAll();
+                  },
+                  children: "View all \u2192"
+                }
+              ) }) : null
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+};
+
+// src/v8/controls/internals/NestedRecordsTrigger.tsx
+import { useState as useState9, useMemo as useMemo7 } from "react";
+import {
+  DefaultButton as DefaultButton3,
+  DetailsList as DetailsList3,
+  DetailsListLayoutMode as DetailsListLayoutMode3,
+  Icon as Icon13,
+  SelectionMode as SelectionMode3,
+  mergeStyles as mergeStyles6
+} from "@fluentui/react";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+var triggerWrapperClass = mergeStyles6({
+  marginTop: 6,
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+});
+var badgeClass = mergeStyles6({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "2px 8px",
+  borderRadius: 12,
+  backgroundColor: "#deecf9",
+  color: "#0078d4",
+  fontSize: 11,
+  fontWeight: 500,
+  cursor: "pointer",
+  selectors: {
+    ":hover": { backgroundColor: "#c7e0f4" }
+  }
+});
+var detailPaneClass = mergeStyles6({
+  marginTop: 8,
+  borderTop: "1px solid #edebe9",
+  paddingTop: 8
+});
+var detailPaneHeaderClass = mergeStyles6({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: 11,
+  color: "#605e5c",
+  marginBottom: 4,
+  textTransform: "uppercase",
+  letterSpacing: "0.4px",
+  fontWeight: 600
+});
+var DEFAULT_TRIGGER_LABEL = "View {count} related";
+var DEFAULT_TRIGGER_ICON = "OpenPaneMirrored";
+function formatTriggerLabel(label, count) {
+  const template = label && label.trim().length > 0 ? label : DEFAULT_TRIGGER_LABEL;
+  return template.replace(/\{count\}/g, String(count));
+}
+var NestedRecordsTrigger = ({
+  childGridDef,
+  config,
+  parentLabel,
+  childCount,
+  generateMockData
+}) => {
+  const [panelOpen, setPanelOpen] = useState9(false);
+  const advertisedCount = useMemo7(() => {
+    if (typeof childCount === "number") return childCount;
+    return childGridDef?.pageSize ?? 5;
+  }, [childCount, childGridDef]);
+  const label = formatTriggerLabel(config.triggerLabel, advertisedCount);
+  const iconName = config.triggerIcon && config.triggerIcon.trim().length > 0 ? config.triggerIcon : DEFAULT_TRIGGER_ICON;
+  if (config.mode === "detail-pane") {
+    return /* @__PURE__ */ jsxs15("div", { className: detailPaneClass, children: [
+      /* @__PURE__ */ jsxs15("div", { className: detailPaneHeaderClass, children: [
+        /* @__PURE__ */ jsx34("span", { children: childGridDef?.name ?? "Related records" }),
+        /* @__PURE__ */ jsx34("span", { style: { fontWeight: 400 }, children: advertisedCount })
+      ] }),
+      /* @__PURE__ */ jsx34(
+        NestedDetailPaneList,
+        {
+          childGridDef,
+          rowCount: advertisedCount,
+          generateMockData
+        }
+      )
+    ] });
+  }
+  if (config.mode === "side-panel") {
+    return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx34("div", { className: triggerWrapperClass, children: /* @__PURE__ */ jsx34(
+        DefaultButton3,
+        {
+          iconProps: { iconName },
+          text: label,
+          onClick: (e) => {
+            e.stopPropagation();
+            setPanelOpen(true);
+          },
+          styles: { root: { height: 28, padding: "0 8px", fontSize: 12 } }
+        }
+      ) }),
+      /* @__PURE__ */ jsx34(
+        NestedRecordsSidePanel,
+        {
+          isOpen: panelOpen,
+          onDismiss: () => setPanelOpen(false),
+          childGridDef,
+          parentLabel,
+          panelSize: config.panelSize,
+          generateMockData
+        }
+      )
+    ] });
+  }
+  if (config.mode === "hover-callout") {
+    return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx34("div", { className: triggerWrapperClass, children: /* @__PURE__ */ jsx34(
+        NestedRecordsCallout,
+        {
+          childGridDef,
+          hoverDelay: config.hoverDelay,
+          maxRows: config.calloutMaxRows,
+          onViewAll: () => setPanelOpen(true),
+          generateMockData,
+          children: /* @__PURE__ */ jsxs15("span", { className: badgeClass, children: [
+            /* @__PURE__ */ jsx34(Icon13, { iconName, styles: { root: { fontSize: 11 } } }),
+            label
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx34(
+        NestedRecordsSidePanel,
+        {
+          isOpen: panelOpen,
+          onDismiss: () => setPanelOpen(false),
+          childGridDef,
+          parentLabel,
+          panelSize: config.panelSize,
+          generateMockData
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    /* @__PURE__ */ jsx34("div", { className: triggerWrapperClass, children: /* @__PURE__ */ jsx34(
+      DefaultButton3,
+      {
+        iconProps: { iconName },
+        text: label,
+        onClick: (e) => {
+          e.stopPropagation();
+          setPanelOpen(true);
+        },
+        styles: { root: { height: 28, padding: "0 8px", fontSize: 12 } }
+      }
+    ) }),
+    /* @__PURE__ */ jsx34(
+      NestedRecordsSidePanel,
+      {
+        isOpen: panelOpen,
+        onDismiss: () => setPanelOpen(false),
+        childGridDef,
+        parentLabel,
+        generateMockData
+      }
+    )
+  ] });
+};
+var NestedDetailPaneList = ({
+  childGridDef,
+  rowCount,
+  generateMockData
+}) => {
+  const visibleColumns = useMemo7(() => {
+    if (!childGridDef) return [];
+    return [...childGridDef.columns].filter((c) => c.isVisible).sort((a, b) => a.order - b.order);
+  }, [childGridDef]);
+  const items = useMemo7(
+    () => childGridDef && generateMockData ? generateMockData(visibleColumns, rowCount) : [],
+    [childGridDef, rowCount, visibleColumns, generateMockData]
+  );
+  const columns = useMemo7(
+    () => visibleColumns.map((col) => ({
+      key: col.id,
+      name: col.displayName || col.fieldName,
+      fieldName: col.fieldName,
+      minWidth: col.minWidth ?? 50,
+      maxWidth: col.maxWidth ?? 160,
+      isResizable: true,
+      onRender: (item) => /* @__PURE__ */ jsx34(Fragment5, { children: renderGridCell(item[col.fieldName], col) })
+    })),
+    [visibleColumns]
+  );
+  if (!childGridDef || visibleColumns.length === 0) {
+    return /* @__PURE__ */ jsx34("div", { style: { fontSize: 11, color: "#a19f9d", fontStyle: "italic", padding: "4px 0" }, children: "No related grid configured." });
+  }
+  return /* @__PURE__ */ jsx34(
+    DetailsList3,
+    {
+      items,
+      columns,
+      layoutMode: DetailsListLayoutMode3.justified,
+      selectionMode: SelectionMode3.none,
+      compact: true,
+      isHeaderVisible: true
+    }
+  );
+};
+
+// src/v8/controls/internals/FocusedViewMasterDetailPreview.tsx
+import { useMemo as useMemo8, useState as useState10, useEffect as useEffect5 } from "react";
+import {
+  Persona as Persona3,
+  PersonaSize as PersonaSize3,
+  Icon as Icon14,
+  SearchBox,
+  Spinner as Spinner5,
+  SpinnerSize as SpinnerSize5,
+  DetailsList as DetailsList4,
+  DetailsListLayoutMode as DetailsListLayoutMode4,
+  SelectionMode as SelectionMode4,
+  mergeStyles as mergeStyles7
+} from "@fluentui/react";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+var containerClass3 = mergeStyles7({
+  border: "1px solid #edebe9",
+  borderRadius: 2,
+  overflow: "hidden",
+  backgroundColor: "#fff",
+  display: "flex",
+  height: 460
+});
+var railClass = mergeStyles7({
+  width: 320,
+  flexShrink: 0,
+  display: "flex",
+  flexDirection: "column",
+  borderRight: "1px solid #edebe9"
+});
+var railHeaderClass = mergeStyles7({
+  display: "flex",
+  alignItems: "center",
+  padding: "10px 12px",
+  borderBottom: "1px solid #edebe9"
+});
+var railHeaderTextClass = mergeStyles7({
+  fontSize: 14,
+  fontWeight: 600,
+  color: "#323130",
+  flex: 1
+});
+var railSearchClass = mergeStyles7({
+  padding: "8px 12px",
+  borderBottom: "1px solid #edebe9",
+  flexShrink: 0
+});
+var railListClass = mergeStyles7({
+  flex: 1,
+  overflowY: "auto"
+});
+var cardClass2 = mergeStyles7({
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "10px 12px",
+  cursor: "pointer",
+  borderBottom: "1px solid #edebe9",
+  borderLeft: "3px solid transparent",
+  transition: "background-color 0.1s",
+  ":hover": {
+    backgroundColor: "#f3f2f1"
+  }
+});
+var cardSelectedClass = mergeStyles7({
+  backgroundColor: "#cce4f6",
+  borderLeftColor: "#0078d4",
+  ":hover": {
+    backgroundColor: "#cce4f6"
+  }
+});
+var cardContentClass = mergeStyles7({
+  flex: 1,
+  minWidth: 0,
+  marginLeft: 10
+});
+var cardPrimaryNameClass = mergeStyles7({
+  fontSize: 14,
+  fontWeight: 600,
+  color: "#323130",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var cardRowClass = mergeStyles7({
+  fontSize: 12,
+  color: "#605e5c",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  lineHeight: "18px"
+});
+var railFooterClass = mergeStyles7({
+  padding: "8px 12px",
+  borderTop: "1px solid #edebe9",
+  fontSize: 12,
+  color: "#605e5c",
+  textAlign: "center",
+  flexShrink: 0
+});
+var detailPaneClass2 = mergeStyles7({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+});
+var detailHeaderClass = mergeStyles7({
+  padding: "12px 16px",
+  borderBottom: "1px solid #edebe9",
+  flexShrink: 0
+});
+var detailHeaderTitleClass = mergeStyles7({
+  fontSize: 16,
+  fontWeight: 600,
+  color: "#323130"
+});
+var detailHeaderSubtitleClass = mergeStyles7({
+  fontSize: 12,
+  color: "#605e5c",
+  marginTop: 2
+});
+var detailBodyClass = mergeStyles7({
+  flex: 1,
+  overflow: "auto"
+});
+var emptyStateClass3 = mergeStyles7({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#605e5c",
+  fontSize: 13,
+  padding: 32,
+  textAlign: "center"
+});
+var upNextClass = mergeStyles7({
+  padding: "8px 12px",
+  borderTop: "1px solid #edebe9",
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  fontSize: 11,
+  color: "#605e5c"
+});
+var FocusedViewMasterDetailPreview = ({
+  cards,
+  focusedViewConfig,
+  entityName,
+  showRelatedRecords = false,
+  hideSearchBox = false,
+  liveLoading = false,
+  childGridDef,
+  getInitials: getInitials3,
+  getPersonaColor: getPersonaColor2,
+  showUpNextActivity = false,
+  generateMockData
+}) => {
+  const [selectedCardId, setSelectedCardId] = useState10(null);
+  useEffect5(() => {
+    if (cards.length === 0) {
+      setSelectedCardId(null);
+      return;
+    }
+    if (selectedCardId && !cards.some((c) => c.id === selectedCardId)) {
+      setSelectedCardId(null);
+    }
+  }, [cards, selectedCardId]);
+  const selectedCard = useMemo8(
+    () => cards.find((c) => c.id === selectedCardId) ?? null,
+    [cards, selectedCardId]
+  );
+  const selectedDisplayName = selectedCard?.rows[0]?.primaryValue ?? "";
+  const childVisibleColumns = useMemo8(
+    () => [...childGridDef.columns].filter((c) => c.isVisible).sort((a, b) => a.order - b.order),
+    [childGridDef.columns]
+  );
+  const childItemsByParent = useMemo8(() => {
+    const out = {};
+    if (!generateMockData) return out;
+    const childCount = childGridDef.pageSize ?? 4;
+    cards.forEach((card, idx) => {
+      out[card.id] = generateMockData(childVisibleColumns, childCount + idx % 2);
+    });
+    return out;
+  }, [cards, childVisibleColumns, childGridDef.pageSize, generateMockData]);
+  const childDetailsListColumns = useMemo8(
+    () => childVisibleColumns.map((col) => ({
+      key: col.id,
+      name: col.displayName || col.fieldName,
+      fieldName: col.fieldName,
+      minWidth: col.minWidth ?? 80,
+      maxWidth: col.maxWidth ?? 200,
+      isResizable: true,
+      onRender: (item) => /* @__PURE__ */ jsx35(Fragment6, { children: renderGridCell(item[col.fieldName], col) })
+    })),
+    [childVisibleColumns]
+  );
+  const childRows = selectedCard ? childItemsByParent[selectedCard.id] ?? [] : [];
+  return /* @__PURE__ */ jsxs16("div", { className: containerClass3, children: [
+    /* @__PURE__ */ jsxs16("div", { className: railClass, children: [
+      /* @__PURE__ */ jsxs16("div", { className: railHeaderClass, children: [
+        /* @__PURE__ */ jsxs16("span", { className: railHeaderTextClass, children: [
+          entityName,
+          showRelatedRecords && /* @__PURE__ */ jsx35("span", { style: {
+            fontSize: 10,
+            color: "#0078d4",
+            backgroundColor: "#deecf9",
+            padding: "2px 6px",
+            borderRadius: 2,
+            marginLeft: 8,
+            fontWeight: 400
+          }, children: "Related" })
+        ] }),
+        /* @__PURE__ */ jsx35(Icon14, { iconName: "ChevronDown", styles: { root: { fontSize: 12, color: "#605e5c" } } })
+      ] }),
+      !hideSearchBox && /* @__PURE__ */ jsx35("div", { className: railSearchClass, children: /* @__PURE__ */ jsx35(
+        SearchBox,
+        {
+          placeholder: "Search this view",
+          styles: { root: { borderRadius: 4 } }
+        }
+      ) }),
+      /* @__PURE__ */ jsx35("div", { className: railListClass, children: cards.length === 0 ? /* @__PURE__ */ jsx35("div", { style: { padding: 32, textAlign: "center", color: "#605e5c", fontSize: 13 }, children: "No records to preview" }) : cards.map((card) => {
+        const isSelected = card.id === selectedCardId;
+        const primaryName = card.rows[0]?.primaryValue || "Record";
+        return /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            role: "option",
+            "aria-selected": isSelected,
+            tabIndex: 0,
+            onClick: () => setSelectedCardId((prev) => prev === card.id ? null : card.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setSelectedCardId((prev) => prev === card.id ? null : card.id);
+              } else if (e.key === "Escape") {
+                setSelectedCardId(null);
+              }
+            },
+            className: `${cardClass2} ${isSelected ? cardSelectedClass : ""}`,
+            children: [
+              /* @__PURE__ */ jsx35(
+                Persona3,
+                {
+                  text: primaryName,
+                  imageInitials: getInitials3(primaryName),
+                  size: PersonaSize3.size32,
+                  initialsColor: getPersonaColor2(primaryName),
+                  hidePersonaDetails: true
+                }
+              ),
+              /* @__PURE__ */ jsxs16("div", { className: cardContentClass, children: [
+                /* @__PURE__ */ jsx35("div", { className: cardPrimaryNameClass, title: primaryName, children: primaryName }),
+                card.rows.slice(1).map((row, rowIdx) => {
+                  const label = focusedViewConfig.rows[rowIdx + 1]?.primaryField.label;
+                  return /* @__PURE__ */ jsx35("div", { className: cardRowClass, children: label ? `${label}: ${row.primaryValue}` : row.primaryValue }, rowIdx);
+                })
+              ] })
+            ]
+          },
+          card.id
+        );
+      }) }),
+      showUpNextActivity && /* @__PURE__ */ jsxs16("div", { className: upNextClass, children: [
+        /* @__PURE__ */ jsx35(Icon14, { iconName: "CheckboxComposite", styles: { root: { fontSize: 12 } } }),
+        /* @__PURE__ */ jsx35("span", { children: "Up next activity" }),
+        /* @__PURE__ */ jsx35("span", { style: { marginLeft: "auto" }, children: "00:00 AM" })
+      ] }),
+      /* @__PURE__ */ jsx35("div", { className: railFooterClass, children: liveLoading ? /* @__PURE__ */ jsx35(Spinner5, { size: SpinnerSize5.xSmall, label: "Loading...", labelPosition: "right" }) : /* @__PURE__ */ jsxs16("span", { children: [
+        cards.length > 0 ? `1-${cards.length}` : "0-0",
+        " of ",
+        cards.length
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx35("div", { className: detailPaneClass2, children: selectedCard ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
+      /* @__PURE__ */ jsxs16("div", { className: detailHeaderClass, children: [
+        /* @__PURE__ */ jsx35("div", { className: detailHeaderTitleClass, children: selectedDisplayName }),
+        /* @__PURE__ */ jsx35("div", { className: detailHeaderSubtitleClass, children: childGridDef.name })
+      ] }),
+      /* @__PURE__ */ jsx35("div", { className: detailBodyClass, children: childVisibleColumns.length === 0 ? /* @__PURE__ */ jsx35("div", { className: emptyStateClass3, children: "The related grid has no visible columns." }) : /* @__PURE__ */ jsx35(
+        DetailsList4,
+        {
+          items: childRows,
+          columns: childDetailsListColumns,
+          layoutMode: DetailsListLayoutMode4.justified,
+          selectionMode: SelectionMode4.multiple,
+          compact: childGridDef.compactMode,
+          isHeaderVisible: true
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs16("div", { className: emptyStateClass3, children: [
+      "Select a record to view related ",
+      childGridDef.name
+    ] }) })
+  ] });
+};
+export {
+  ButtonControl,
+  ChartBranch,
+  ChartRenderer,
+  CheckboxControl,
+  ChoiceGroupBranch,
+  ChoiceGroupControl,
+  ComboBoxControl,
+  DateControl,
+  DropdownControl,
+  EmojiRating,
+  FocusedViewMasterDetailPreview,
+  FormLinkControl,
+  LabelControl,
+  LookupBranch,
+  LookupControl,
+  NestedRecordsCallout,
+  NestedRecordsSidePanel,
+  NestedRecordsTrigger,
+  NumberControl,
+  PersonaControl,
+  RatingControl,
+  SliderControl,
+  SpacerControl,
+  SpinButtonControl,
+  SubgridBranch,
+  TextControl,
+  TextFieldWithFormat,
+  TextareaControl,
+  TimelineControl,
+  ToggleControl,
+  UnknownControl,
+  WebResourceBranch,
+  WebResourceRenderer,
+  isChartControlType,
+  isDisabled,
+  isEmbeddedEntityBrowser,
+  lookupEntityHelpers,
+  renderGridCell
+};
+//# sourceMappingURL=v8.mjs.map